2013-03-15

Sublime Text 2と Nettuts+ Fetch でローカルに WordPress のテスト環境構築

Sublime Text 2と Nettuts+ Fetch を使ってローカルに WordPress のテスト環境を構築するときの手順です。
試しているという段階なので、まだまだ改善の余地があるはずですが、ひとまず公開。
こんなやり方もあるよということで。
XAMPP や MAMP など、ローカルで WordPress が動く環境が無いとできませんのであしからず。

Nettuts+ Fetch のインストールと設定

Nettuts+ Fetch のインストール

この記事を書いている時点で、Package Control からのインストールができなくなっているようなので、GitHub から手動でインストールします。
現在ベータ版の Sublime Text 3用にブランチが切られているので、Sublime Text 3を使っている方は st3 ブランチを使用してください。

git clone でも可能ですが、zip ファイルをダウンロードした場合で進めます。

GitHub のページからダウンロードした Nettuts-Fetch-master.zip を解凍
Preferences → Browse Packages で開いたディレクトリにフォルダごと入れる

Package Control でインストールできたらサクッと終わるんですが、手動だとちょっと面倒ですね。

Nettuts+ Fetch の設定

Nettuts+ Fetch で設定できるのは、files と packages の2パターンあり、files はファイル単体、packages は zip 化されたファイル郡になります。
(もしかしたら zip 以外もいけるかもしれないですが試してません)
デフォルトでは、jQuery と HTML5 Boilerplate が設定されています。

{
  "files":
  {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
  }
}

Fetch: File で flies に設定したものを開いているファイルに貼り付け、Fetch: Package で packages に設定したものを展開します。
Fetch: Package の場合は、展開するディレクトリを指定するフィールドが開きます。

WordPress を呼び出せるようにする

まず WordPress を設定ファイルに追記します。
設定を編集するには、コマンドパレットから Fetch: Manage を開きます。
WordPress 日本語版の最新版は http://ja.wordpress.org/latest-ja.zip という URL なので、こちらを追記。
保存するとすぐに使えるようになります。

{
  "files":
   {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped",
    "wp-latest": "http://ja.wordpress.org/latest-ja.zip"
  }
}

今回は名前を「wp-latest」としました。
名前は Nettuts+ Fetch から呼び出す時に使われるので、日本語（マルチバイト文字）は避けておきましょう。

プラグインを呼び出せるようにする

手順は WordPress のものに自作プラグインパッケージ作成を追加するだけです。

適当な名前を付けたディレクトリに必要なプラグインを入れて、zip に
WordPress の時と同様に設定ファイルに書き込む

HTML5 Boilerplate でも指定されているように、ローカルのファイルだけでなく、GitHub なども使用可能です。
本題とはずれますが、CSS などのスニペットを Gist で管理して、貼り付けるときは Fetch: File で貼り付けるという使い方もありですね。

インストールするプラグインですが、サイトの性格により変わることも多いので、どのプラグインを設定しておくかを判断するのは結構難しいです。
案としては以下の3つあたりに設定しておくのが無難かなと思います。

使う可能性のものを全部入れる
基本セットのみ入れる
基本セット + 複数の細かいセット

1が一番楽ですが、不要なものを削除する手間がかかります。
3は、2で作成した基本セットに、「企業サイトならこれが必要」などの細かいシチュエーション分けをしたパッケージを作成しておくというパターン。
業務で取り扱うジャンルが多岐にわたる場合は3のほうが楽かなと思います。

僕は2でスタートして、適宜管理画面から追加する、という方法でやっています。

もう1つの方法として、プラグイン個別の設定をする、ということも考えられますが、使う可能性があるプラグインの数が多くなるとインストールするのが面倒です。
5個インストールするなら、WordPress のインストールと合わせて6回 Nettuts+ Fetch のコマンドを打たないといけません。
また、全部のプラグインの名前を覚えておかないといけないという苦行もセットになります。

設定ファイルに各プラグインのダウンロード URL を列記することで指定できればいいのですが、そのようにはなっていないので、先に挙げたような方法などで自作しておきましょう。
自作しておく場合、古いバージョンのプラグインが、インストールされる可能性があるので、インストールが終わった後にプラグインのアップデートを確認しましょう。

データベース作成

phpMyAdmin からデータベース作成。ターミナル等で作成できる方はそちらでどうぞ。

必要ならバーチャルホストの設定を。僕は適当なプロジェクト名 + .dev で設定してます。
これは以前 jim912さんが WordBench 埼玉（だったはず）の勉強会にて使われているのを採用しています。

このサイトで設定するなら、understandard.dev といった感じです。
2013.understandard.dev のようにしておくと、後々数が増えてきた時にも対応しやすいと思います。

バーチャルホストの設定は Mac だと MAMP が楽に設定ができるとの話ですが、僕は直接 Hosts と httpd-vhosts.conf を編集しています。
Sou-Lablog で紹介されている Hosts が GUI で操作ができて便利そうなので、こちらを使ってみるのもありかも。

Nettuts+ Fetch で WordPress とプラグインをインストール

Nettuts+ Fetch の設定さえ終わっていれば、データベースの作成→コマンドだけで環境が構築できます。

コマンドパレットから Fetch: Package → wp-latest を選択
WordPress の展開終了
コマンドパレットから Fetch: Package → 自作プラグインパッケージを選択
プラグインの展開終了
wp-config-sample.php を wp-config.php にリネームし、データベース情報を入力。必要であれば、WP_DEBUG を true に
ブラウザから管理画面にアクセスし、サイト名などの設定
ダッシュボードに入り、プラグインのアップデート確認
その他の設定やテーマの作成作業に

上記の流れで基本の環境構築が完了します。

Nettuts+ Fetch の設定が終わっていれば、データベース作成からテーマ作成のところに行くまでに3分もあれば充分たどり着けます。
WordPress の環境構築だけでなく、いろいろな業務に応用できるパッケージだと思うので、業務効率を上げるための選択肢の1つとしていかがでしょうか。