// sakura note

WordPressを使ってウェブを作っているみなさん！まだXAMPPでMAMPで消耗してるんですか！？

 

VCCWを使う選択

VCCWというのは、VagrantをベースにしたWordPressの開発環境です。

従来、何もないところからWordPressの開発をはじめるとなると、WebとDBサーバーをインストールして、データベースを作って、WordPressをダウンロードして、接続情報を入力して…など、多くの手順を踏まなくてはいけませんでした。Web、DBサーバーも独立しているため管理も煩雑になりがちです。

VCCWを使うと本当に簡単に開発環境が整います。また、WordPressの開発に便利な色々な支援ツールも一気に使えるようになります。WordPressのサイト個々にOSイメージが作られるため、一つのMySQLサーバーで複数のサイトを飼いながら開発…なんてこともなくなります！

テーマを作るデザイナーの方は少し敷居が高いかもしれませんが、プラグインなどを作るエンジニアよりの方は是非一度お試しください！一度これに慣れると、もう従来の方法でなんて開発できませんよ！

 

事前準備

VCCWはVagrantfileを使って仮想環境を構築するため、先にVagrantを使えるようにしなければいけません。

拙著 Vagrantことはじめ にしたがって、VirtualBox+Vagrantの開発環境を先に整えてから読み進めてください。

 

hostsupdaterプラグインをインストール

（※ Windowsの方はこのプラグインを使えないので読み飛ばしてください。ホスト名でアクセスしたい場合は、「Windows hosts 編集」とかでググってください。）

VCCWで構築したWordPressの環境は、ローカルIPアドレスでアクセスできるようになりますが、PC内にあるhostsファイルというものを編集することで、任意のホスト名（デフォルトであれば vccw.dev）でアクセスできるようになります。これは完全に好みですが、複数サイトを開発する際に直感的な名前でアクセスできるので私は便利に使っています。

インストールは次のコマンドを実行します。グローバルにインストールされるので、好きなディレクトリ上で実行して構いません。

 

Boxの準備

Vagrantことはじめ でも触れたように、仮想マシンの起動にはBoxが必要です。VCCWで用いるBoxをダウンロードしておきます。

Boxのダウンロードにはまた時間がかかるので、ダウンロードしている間に次のステップを終わらせておきましょう。

 

VCCWをダウンロード

前述のステップでBoxは用意しましたが、このBoxを使うためには予め用意されたVagrantfileと環境構築用のスクリプト（内部ではChefを使っています）が入ったVCCW本体と呼べるものをダウンロードして、それを作業用のフォルダとして使います。

次のVCCW公式ページからzip、もしくはtar.gz形式で圧縮されたVCCW本体をダウンロードしてきてください。執筆時点の最新バージョンは2.18.0です。

http://vccw.cc/

ダウンロードしたら解凍して、サイトの名前など分かりやすいものに変更します。また今後頻繁に開くことになるので、開発用のフォルダなど決めているのであれば移動しておきましょう。

 

VCCWの設定

実際に起動する前に、日本語のWordPressが導入されるように設定を変更しておきましょう。これを設定しておかないと、デフォルトで英語のWordPressがインストールされることになります。後から変更するのは一手間です。

まず、VCCWを配置した下のprovisionフォルダにあるdefault.ymlを、VCCWのフォルダ直下にsite.ymlという名前でコピーしてきてください。

仮にVCCWを ~/vccw/ に設置したとすると、 ~/vccw/provision/default.yml を、 ~/vccw/site.yml にコピーするということになります。（私はここでprovisionフォルダ内にコピーするものと思い込み、何故動かないのかソースコードを読んでコピー先の位置間違いに気付きました……。）

コピーできたら、エディタで site.yml を開いて、次の通りlangを変更します。

PCのスペックに余裕がある人は、Virtual Machine Settingsのmemoryとcpusの数を増やしておくと良いでしょう。

また、前述のhostsupdaterを導入した人は、Network Settingsのhostnameをサイト名などを使ったホスト名に変更しておくと良いと思います。このホスト名を使ってWordPressにアクセスできるようになります。

 

VCCWを起動

BoxとVCCWの準備が終わったらいよいよ起動してみます。ダウンロードしてきたVCCWが入っているディレクトリにターミナルで移動して、その中にあるVagrantfileを元にVagrantを起動します。

VCCWを初めて起動する場合、仮想マシンのコピーに加えて、Apache+MySQLサーバーのダウンロードやWordPressのダウンロード、開発支援ツール群のダウンロードなど、様々な処理がVagrant内で行われます。これにも結構な時間がかかります（私の環境で5分程度）ので、気長に終わるのを待ちましょう。ただし、前述したhostsupdaterプラグインをインストールしている場合、その処理が実行される際にrootユーザーのパスワードを求められることがあります。入力しないと進まないので気をつけましょう。

 

使ってみる

無事に起動できたら早速チェックしてみましょう！ブラウザで http://192.168.33.10/ を開いてみてください。hostsupdaterを導入した方は、設定したホスト名でも開けるかと思います（デフォルトは http://vccw.dev/ です）。

ちゃんと日本語のWordPressが表示されればOKです！管理画面は /wp-admin で、IDとパスワードは変更していなければ共に admin です。

 

開発してみる

vagrant upを実行すると、VCCWの中に /www/wordpress というディレクトリが作られます。/www ディレクトリはVagrantの仮想マシン内と共有されています。

例えばテーマを作る時は /www/wordpress/wp-content にある themes  内を編集すればいいですし、プラグインは同じく plugins になります。/www/wordpress の中で従来通りの開発すればよいということですね！

もちろんWordPressの管理画面からテーマやプラグインをインストールした場合も、そのフォルダの中に保存されていきます。もちろんリアルタイムです！

 

まとめ

従来の開発環境と比べて、いかに楽にクリーンで本番環境に近い開発環境が構築できたか体感いただけましたか？これからのWordPress開発はVCCWの時代ですよ！