ムームードメインで取得したドメインをVALUE-DOMAINとXREAサーバーで設定・使用する方法

ムームードメインのネームサーバーの変更とVALUE-DOMAINでのドメイン登録・無料ネームサーバーの作成(利用)と新規登録ドメインのDNS設定、XREAの設定方法です。

少し前にVALUE-DOMAINの管理画面のUIがリニューアルされ使いやすくなりました。他のブログでもこういった設定方法は紹介されていますが、VALUE-DOMAINの新しい管理画面のサムネイルを使ったものが見当たりませんでしたので、今回せっかくなのでまとめてみました。

それではさっそく、手順とその操作・設定方法です。

①VALUE-DOMAINへドメインを登録する

VALUE-DOMAINで無料ネームサーバーを作成する

まずはVALUE-DOMAINで無料ネームサーバーを作成するために、「他社登録しているドメインを登録」へ。
ここでムームードメインで取得している、今回新しくVALUE-DOMAIN+XREAで使用するドメインを登録します。

VALUE-DOMAIN+XREAで使用するドメインを登録

登録するドメインは「www.」なしとなります。

ドメインのDNS情報の変更

その後、「ドメインのDNS情報の変更へ」へ進みます。

DNS情報を設定するドメインを選択

「設定フィールド」の設定となりますが、契約・使用するXREAのサーバーをプルダウンで選択すると、自動で設定フィールドに値が入力されますので、画面下部の保存へ。

設定フィールドの記述

ここまででVALUE-DOMAINへのムームードメインで取得した新規ドメインの登録は完了です。

次に、ムームードメインでの設定へ進みます。

②ムームードメインで取得済みドメインの設定

まずはドメインのネームサーバーの設定変更を行います。

ムームードメインで取得済みドメインのネームサーバーの設定変更

移行するドメインの「設定変更」をクリック。

使用するネームサーバーを設定

「GMOペパポ以外のネームサーバーを使用する」を選択し、下記のネームサーバーの情報を入力します。
ネームサーバーの設定 | VALUE-DOMAIN ユーザーガイド

プライマリネームサーバー
NS1.VALUE-DOMAIN.COM
セカンダリネームサーバー
NS2.VALUE-DOMAIN.COM
NS3.VALUE-DOMAIN.COM
NS4.VALUE-DOMAIN.COM
NS5.VALUE-DOMAIN.COM

「ネームサーバは設定変更後、反映されるまでに数日かかる場合があります。」とのことですが、個人的には数分から数十分程度が多いと思います。

次に、XREA側での設定になります。
XREAサーバー内の新規登録ドメインのディレクトリは、ドメイン名で自動で作成されます。

③XREAの設定

ここからはXREAでのサイト運用・ご利用方法によって違いがあるかと思いますので、その点についてはご自身の目的に合わせてご確認ください。
自分は同一のXREAサーバーで複数のドメインをマルチドメインとして利用していて、今回もそのひとつとしてドメインを設定します。

「マイドメイン運用 > ドメインウェブ」より新しいドメインを登録します。

自分はMainを「blank」として、「www」の有り無し両方のドメインをここで登録。
後にふれますが、サーバー内の「www.有りフォルダ」を「シンボリックリンク」として利用してます。

ドメインウェブより新しいドメインを登録

シンボリックリンクに変更するために、「マイドメイン利用 > 同期設定」より「www.」のファイルを「www.なし」のファイルに同期させます。

ファイルの同期設定

以上で完了です。10分ぐらいでDNSの変更が確認できました。

また、ループしてしまう(?)心配もありましたので、シンボリックリンクが作成された後、www.などの転送がからむ.htaccessはアップロードしました。

シンボリックリンクが作成

上図のように「www.有りフォルダ」がシンボリックリンクに変更(作成)されるまでには数時間から半日程度と若干時間が必要のようです。

FTPクライアントなどの再起動では変更が表示されない場合もあるので、その場合はMac・PCの再起動後確認してみてください。

Atomエディタがさらに進化。メインエディタ候補筆頭に

使用感と拡張機能の充実ぶりもあって気に入っているBrackets。Adobeとの別仕様での開発から、もともとのオープンソースの単一での開発となりわりと経ちます。
制作経験のスタートがDreamweaverということもあってか、使用感や使いやすさなどについてはどうしてもDreamweaverを意識してしまいます。

エディタというよりもIDE(統合開発環境)なので、他のエディタと比較するのも違うのかもしれないDreamweaver、重いとかいろいろ言われてますが、今でもDreamweaver好きです(笑)

エディタについてはSublime Textを筆頭に主に使用する言語や好みでさまざまエディタがあります。なかでも使用感についてはBracketsが好印象で、手軽な作業などではたまに使用していました。

しかしながら、オープンソースということと随時更新されていることもあるので現時点(2016/01)ではとなりますが、今回のアップデートでなぜかギクシャク感を感じてしまい、あらためて他のエディタを検討してみることに。

Atom

Atom

そんななか、先日の某関係者とお話しをしている際にでたAtomを思い出し、改めてAtomをダウンロード。

正式公開当時に使用してみて、機能的にはなかなか良かったのですが、動作の重さなどまだまだ実制作では気になる点もあるかなあという印象でしたが、そこはGitHub製。その後も存在は気にしていました。

今回改めてAtomを使ってみての感想はびっくり。
以前のモッサリ感はどこへやら、BracketsやSublime Textに負けないぐらいサクサクの動作に。見た目の印象(わりと大事)も、もともとの印象通り洗練されている印象です。

パッケージも豊富で、下記に書いたものをまずはインストール。

UIテーマとシンタックステーマも豊富ですので、Sublime Text同様いろいろと探してみるのも面白いかもしれません。
たまに黒背景にもしますが個人的には白背景が好みなので、UI Theme: one-light-ui, Syntax Theme: octocat-syntaxに。

Bracketsは残しつつ、メインエディタとして使用してみます。

基本設定関連

好みになるかと思いますが、基本的な設定の変更箇所です。
通常、この基本設定で使用されているパッケージについてはデフォルトで入っていると思います。

●ファイルの自動保存
https://atom.io/packages/autosave
Preferences > Packages > autosaveを検索 > Settings→ 下部メニューのSetting→ Enabledをチェック。

●エディタ内の縦線を消す
wrap-guide
Preferences > Packages > wrap-guideを検索 > Settings→ Wrap Guideを無効化(DisableをクリックEnableに)。

●空白系の処理
whitespace
Preferences > Packages > whitespaceを検索 > Settings→ whitespaceを無効化(DisableをクリックEnableに)。
下部メニューの該当箇所のチェックを外す。

  • ・行末の空白を削除する
    Remove Trailing Whitespace のチェックを外す。
  • ・行末の空白を保存時に削除するように設定する。
    Ignore Whitespace Current Lineのチェックを外す。
  • ・atomで最終行を改行させない
    Ensure Single Trailing Newlineのチェックを外す。

スニペットの記述・設定と呼び出し

効率上で欠かせないスニペットの登録ももちろん可能です。

■スニペットの呼び出し
該当のファイルを開き(新規保存)、「opt + shift + s」でスニペットを検索します。

セレクタ(ファイル)名の検索はこちらから。
https://github.com/atom/autocomplete-plus/wiki/Autocomplete-Providers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#記述例1(同一ファイルタイプへひとつのスニペットを登録)
#  '.ファイルタイプ':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文 $1($1は展開後にカーソルを置く位置)'
#
#
#記述例2(同一ファイルタイプへひとつの複数行のスニペットを登録)
#  '.ファイルタイプ':
#    'スニペットの名前':
#    'prefix': 'キー(検索名)'
#    'body': """
#    スニペット本文
#    <!doctype html>
#    <html lang="ja">$1
#    """
#
#
#記述例3(複数ファイルタイプへ同一のスニペットを設定)
#  '.text.html.basic, .text.plain':
#    'スニペット名1':
#    'prefix': 'キー(検索名)'
#     'body': 'スニペット本文'
#
#
#記述例4(同一ファイルタイプへ複数のスニペットを設定)
#  '.text.html.basic':
#    'スニペットの名前1':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文'
#    'スニペットの名前2':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文'

おすすめのパッケージ

パッケージの検索はこちらから。
https://atom.io/packages

インストールは「Preference > Setting / install」から。

japanese-menu
日本語化。個人的には現段階では使用してませんが、一応検討ということで。
●Linter
構文チェック。この本体(Linter)をインストールする必要があるのですが探してみても見当たらず、試しに言語用の以下パッケージをインストールしてみると、勝手(自動?)にLinter本体をインストールしてくれました。

color-picker
カラーピッカーを表示させます。
minimap
ミニマップを表示。
wordpress-dictionary
WordPressのスニペット・コードヒント。
atom-beautify
コードフォーマット。
run-in-browser
ブラウザプレビュー。
atom-html-preview
タブでプレビュー。
highlight-selected
同じワードをハイライト表示。
autoclose-html
自動で閉じタグを入力。
autocomplete-paths
autocomplete-plus の拡張。ファイルパスをサジェスト表示。
trailing-spaces
行末の空白をハイライト。
sync-settings
複数のPCやMacでGithubアカウントを使ってパッケージを同期。

テキストエディターのBracketsにちょっと感動

オープンソースの無料 テキストエディター Brackets。
以前から何度かインストールしてはちょっと使ってみたりを繰り返してました。

Brackets

しかしながら、Edge CodeがAdobeから提供されていたこともあり、また、Brackets ベースだがAdobeが独自路線で開発していくと聞いていたこともあったので、
それ以降ずっとEdge Codeのみインストールしていました。

でも期待のEdge Codeが終了(泣)。

» Returning to our roots: Edge Code is now Brackets | Adobe Edge Code CC Team Blog

そこで今回改めてBracketsをインストールみたところ、なんともその進化に軽く感動しました。

テキストエディター Brackets

Sublime Textももちろん良いのですが、Dreamweaver歴が長いからか、ショートカットやカーソル移動、コード閉じるとか、コードを書いてるときの操作感?がBracketsの方がなんとなく好みかなぁと。
また、Dreamweaverよりも起動が軽いですし、Sublime Textと同様にデフォルトで.htaccessとかの不可視ファイルも表示されます。

画面の分割が可能に

画面の分割ができるように。やはり実務で使うには分割は必須かなと。
このままでも良いですが、拡張機能の「Documents Toolbar」をインストールするとタブ表示も可能に。

Documents Toolbar
https://github.com/dnbard/brackets-documents-toolbar

その他にインストールしてみたプラグインは以下。

Edge Inspect extension for Brackets and Edge Code
https://github.com/edge-code/edge-inspect-extension

W3CValidation
https://github.com/cfjedimaster/brackets-w3cvalidation

Interactive Linter (JSHint/JSLint/CoffeeLint)
https://github.com/MiguelCastillo/Brackets-InteractiveLinter

Extract
個人的にはあまり使わないかもしれないけど、PSDファイルからデザイン情報などを抽出してCSSへ変換する「Extract」でPhotoshopとの連携も。

Sponsored Links

また、Sassファイルなども対応済みで、未完全ではありましたが「Responsive Design Tool for Brackets」とかけっこう実現して欲しかったり。

Responsive Design Tool for Brackets

Responsive Design Tool for Brackets
http://www.leebrimelow.com/responsive-design-with-adobe-brackets/
※ライブビューもありますが…。

ということで、今後の進化にさらに期待しつつ、軽めの作業時はBracketsを使ってみることにします。

Brackets – A modern, open source code editor that understands web design.
http://brackets.io/


2015.01.07
レスポンシブのプレビューが拡張機能で可能に。
拡張機能マネージャーで「Response for Brackets」と検索すると、「original」と表記のあるものとないものが。
とりあえず「original」有りの方で。
brimelow/Response-for-Brackets

レスポンシブWebデザインについてのまとめ・整理におすすめ本

レスポンシブWebデザイン でWebサイトを制作している中で、一度、改めて基本的なことからまとめとして整理しておきたいなぁと思っていたところ、
コリスさんが紹介されていた本が気になり、チェックしてみました。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック
個人的には内容も読みやすく感じましたし、基本的な考え方からパフォーマンスなど詳細について分かりやすく説明されていて、
新しい知識としてだけでなく、確認・整理という意味でも役に立つように感じました。

また、実制作に携わる方だけでなく、コードを書かずともWebサイト運営に関わる方であれば、Kindle版もあるようですのでざっくりとでも流し読みしておくと良いのではないかと思いました。

Mouエディターって、EC事業者とかに便利かも知れない

一見すると普通のテキストエディターっぽい(?)”Mou The missing Markdown editor”ですが、
ちょっと使ってみると、ふと、結構便利なんじゃないかと。

Mou - Markdown editor

一般のネットショップ系のサービスでも、ページ作成や商品説明など、実際に記述を行う個所については大抵、HTMLやCSSの記述が可能だったりします。
しかしながら、まったくそういった経験がなかったりすると、なかなかソースを書いたりするのって抵抗があったり、人によっては見るだけでも拒絶って感じの人もいるかと思います。

ましては未経験者の立場からすると、ソースを書く練習をするための”エディター”選びもなかなか大変で、
メモ帳的なものでももちろん十分なんですが、それだとより拒否られそうな印象もあります。

今回、別件でエディターを物色していたのですが、たまたま使ってみたMou については、ちょっとこれは楽しいんじゃないかという印象を受けました。

一番は、同一エディター内で”リアルタイムでプレビューができる”ということ。
そこまで必要ないかもしれませんが、外部CSSやJavaScriptも読み込みできます。

これだと、なんか書いてる実感があるし、即時内容が確認できて印象に残りやすいし、見た目的にも面白いのではないでしょうか。

たぶん、普通に商品ページやちょっとした特集ページをサービス内で作るぐらいであれば、そんなにがっつりソースを書くことって普通しない(自分はそういう場合でもあえてソース書きますが(笑))と思いますし、
このエディターであれば、ソース書くのが不慣れ(キライ)な人でも、少しは楽しく作業できたりしそうな気がします。たぶん。

ちなみに、試してませんがWindows用でもMarkdown editor がありました。
※MouとMarkdownPad共にフリーソフトです。

Mou The missing Markdown editor
http://mouapp.com/

MarkdownPad(Windows XP/Vista/7) – 窓の杜
http://www.forest.impress.co.jp/docs/review/20111020_485035.html