この記事は「WordCamp Tokyo2015リレーブログ」の第8日目の記事です。
昨日の最近ムジナになったたぬきさん（謎）に引き続き、こんな機会でもないと記事が書けなくなってしまったショートホープこと齋木ですorz 最後に書いた記事が2月とかどういうことだ！ちっとも「more publishing」してないやんか！ということで自分で自分のおしりを叩いてpublishします。
できるだけ簡潔に、わかりやすく書いたつもりですが、もし、わからない・違う！などあればどんどん突っ込んでください！
1. Vagrantの導入
1-1. VirtualBox の導入
今年の7月にVirtualbox 5.0が正式リリースされた。トップページ中央のリンクからダウンロードページに入り、WindowsならWindows用の、MacならMac用のVirtualBoxをダウンロードする。
ダウンロードできたらデフォルトの設定でインストールする。
インストール後に立ち上げる必要はない。
1-2. Vagrant の導入
ダウンロードリンクからダウンロードページに入り、Windows用またはMac用のVagrantをダウンロードする。
ダウンロードできたらデフォルトの設定でインストールする。
インストール後には一度再起動が必要。
Vagrantの導入はこれだけ。
VagrantはVirtualbox上で動く開発環境を簡単に構築して、その環境を共有することが出来る開発環境作成ツールなので、そこにVCCWでWordPress環境を構築していく。
2. VCCW の導入
2-1. 事前準備（最初の1回目だけ）
Windowsの場合
「メモ帳」を『右クリック→「管理者として実行」をクリック』して管理者権限で立ち上げて「 hosts 」を開き、以下の一行を追記する。
（hostsファイルは「 c:\Windows\System32\Drivers\etc\hosts 」にある）
192.168.33.10 vccw.dev
保存してメモ帳を終了する。
Macの場合
vagrant-hostsupdater をインストール
ターミナルを起動し、以下のコマンドを入力して[ enter ]
$ vagrant plugin install vagrant-hostsupdater
コマンドの記述について
一応念のため。
この記事でもあるように、コマンドの記述は「$ 〜」となっているが、ここでの「$」はシェルプロンプトと呼ばれるもので、この表示の後ろにコマンドを入力していく。
Windowsの場合は「>」とかだったりする。
「シェルプロンプト」とは「ここからコマンドが入力できますよ〜」という表示。実際にターミナル（またはコマンドプロンプト）から行う入力は「vagrant 〜」とか「cd 〜」になるので、初めて使う人は注意。
2-2. Macはターミナル、Windowsはコマンドプロンプトを起動する。
2-2-1. 任意の場所にディレクトリを作成し、作成したディレクトリに移動する。
下記の場合、ユーザーのhome直下から /example.com/project というディレクトリ（フォルダ）を用意し、「project」フォルダに移動している。
「ここがよくわからないよ…」という人はFinderあるいはエクスプローラで当該場所を開いていると、「mkdir」コマンド(make directory)でディレクトリが作られることがわかるはず！
「cd」コマンドは、コマンドを入力するディレクトリの移動(change directoryやで！)。
$ mkdir example.com
$ cd example.com
$ mkdir project
$ cd project
2-2-2. 移動した project ディレクトリ内で vccw をクローンする。
gitをインストール済みの人
$ git clone https://github.com/vccw-team/vccw
gitをインストールしていない人
https://github.com/vccw-team/vccw/archive/2.17.0.zip
vccw-2.17.0（記事執筆時点での最新版）を「 project 」フォルダにダウンロードし、解凍する。
念のため上記URLのコピペではなく公式サイトからzipファイルをダウンロードすることをおすすめする。
2-2-3. ターミナルまたはコマンドプロンプトで vccw-2.17.0 ディレクトリに移動し vagrant up する。
$ cd vccw-2.17.0
$ vagrant up
ローカル環境は
/example.com/project/vccw-2.17.0/www/wordpress
以下に展開される。
※起動中、途中で一度「Password:」の表示が出て一度停止するので、MacなりWindowsなりのパスワードを入力して[ enter ]する。入力したパスワードはマスク表示も含め一切表示されないので注意！
3. VCCW を使ったローカル環境でのWordPressのサイトを見てみる
「vagrant up」コマンドが（途中でエラーで止まることなく）すべて完了し、再度シェルプロンプトが表示されていればVCCW上でWordPressが動作している（はず）。
ブラウザからは
http://vccw.dev
あるいは
http://127.168.33.10
でサイトにアクセスできる。
4. Vagrantを操作するコマンドの一部
【起動】（Vagrantの仮想サーバを立ち上げる）
$ vagrant up
【一時停止】（Vagrantが立ち上げているサーバをスリープ状態にする）
$ vagrant suspend
【停止】（Vagrantが立ち上げているサーバをシャットダウンする）
$ vagrant halt
【再読み込み】（Vagrantが立ち上げているサーバをスリープから復帰させる、
またはVagrantfileの修正を反映させるために再読み込みする場合）
$ vagrant reload
【削除】（Vagrantが立ち上げているサーバおよびその設定を完全に削除する）
$ vagrant destroy
5. VCCWが立ち上げているWordPressにログインする
管理画面は
http://vccw.dev/wp-admin
UserID: admin
Password: admin
でログインできる。
ちなみにデータベースの初期設定は以下のようになっている。
define('DB_NAME', 'wordpress');
define('DB_USER', 'wordpress');
define('DB_PASSWORD', 'wordpress');
define('DB_HOST', 'localhost');
6. VCCWが立ち上げているWordPressのテーマを触ってみる
Finderまたはエクスプローラで先ほどVCCWをインストールした「vccw-2.17.0」フォルダを開くと、「www」フォルダができているのがわかる。
更にこれを開くと「wordpress」フォルダがあり、その中には見慣れたファイル群が…。
この「wordpress」フォルダ以下がVagrantで立ち上げられた仮想サーバ内で動いているWordPressと連動している。
今回のケースではすべてデフォルト設定なので、「wordpress/wp-content/themes/twentyfifteen」が現在表示されているテーマになる。
例えば「wordpress/wp-content/themes/twentyfifteen/style.css」をエディタで開き、645行目にある「color: #333;」を「color: #e00;」と書き換えて保存してみて欲しい。
そして先ほど開いた
http://vccw.dev
をリロードしてみると、
これが
こうなるはずだ。
ほーら、ローカルだけで操作できたでしょ？
以上、いかがだったろうか。思っていたよりも簡単だったのではないだろうか？
Vagrant、VCCWに限った話ではないが、仮にデザイナーだったとしても最近のWebの制作にコマンドラインを利用するのは別に特殊なことではなくなっている。
これまでのように「いやー、触ったことないし何かあってもわからないし…」と言っているだけではビジネスチャンスを逃すことにもなるだろう。
VCCWの詳細については、VCCWの公式サイトや作者であるmiyaさんのブログをご覧いただきたい。
7.（以下おまけ）node.jsをインストール
もちろんそのままnode.jsを公式サイトからダウンロードしてインストールすればそれでOKなのだが、先々のことを考えるとnode.jsのバージョン管理もしておきたい。
そこで、node.jsのバージョン管理のためのツールのインストールとその上でのnode.jsのインストールをご紹介したい。
【注意点】
いますでにnode.jsがインストールされている方で、今回のWordCampの
ハンズオンに向けてバージョン管理を、とお考えならば
今回はそのままお使いになることをおすすめする。
node.jsをバージョン管理するためには、一旦いまインストール済みの
node.jsをアンインストールしなければならないが、公式パッケージには
アンインストーラーが用意されていないため
『手作業でのアンインストール』が必須となる。
そこそこ敷居の高い作業となってしまうため、時間的に余裕のあるときに
挑戦してみていただきたい。node.js本体だけでなく、
同時にインストールされるファイル群も手作業で削除する必要があるためだ。
Macの場合
1．nodebrewのインストール
nodebrewは、外村さんのGitHub上の公式ページで公開されている。
手順はそこをご覧いただければそのままできるはずだが、一応記載しておくと、ターミナルに
$ curl -L git.io/nodebrew | perl - setup
を入力して[ enter ]。これでインストールが完了するので、ユーザーのホームディレクトリ
/Users/（ユーザー名）/
直下にある.bashrcファイル（あるいは.bash_profileファイル、.zshrcファイルなど）に
export PATH=$HOME/.nodebrew/current/bin:$PATH
の1行を追記して
$ source ~/.bashrc
または
$ source ~/.bash_profile
$ source ~/.zshrc など
を入力して[ enter ]してリロードさせる。
これらのシェルの設定ファイルが存在しない場合は、新たに作って「export PATH」を記載してから上記コマンドでリロードさせればいい。
ここまで済んだら
$ nodebrew help
と入力してnodebrewコマンドが通るかどうか確認する。通ればnodebrewがインストールされている。
2. node.jsのインストール
詳細はnodebrewの公式ページをご覧いただくとして、今回はnode.jsの最新の安定版を指定してダウンロードする。
ターミナルから
$ nodebrew install-binary stable
を入力する。これでnode.jsの最新の安定版がインストールされる（記事の執筆時点ではv4.2.1）。
ただ、ここでインストールしただけではまだnode.jsは動いてくれない。インストールしたものを有効化する必要がある。
$ nodebrew use stable
これで晴れてようやくnode.jsが動くようになる。確認のために
$ node -v
と入力して
v4.2.1
と表示されればOK。
新たに用意する環境であれば最新の安定版を使うのが安心できるが、場合によってはまだ対応していないパッケージを使わざるを得ない状況も起こりうるだろう（過去に作った環境での作業など）。
そういった場合は対応するバージョンのnode.jsをバージョンを指定してダウンロードし、useコマンドで切り替えればいいだけ。簡単！
2015.10.24 追記
この記事の公開後、きはる姐さんからndenvというのを教えていただいた。
単に動作するnode.jsのバージョン管理をするだけでなく、ディレクトリごとにバージョンを切り替えて管理することが可能なようだ。
使ってみなくっちゃ…！
Windowsの場合
1. nodistのインストール
Macでいうnodebrewに相当するのがnodist。Windows上でnode.jsのバージョン管理が可能になる。
やはり公式ページはGithub上にある。
gitがインストール済みの環境ならばコマンドプロンプトで
$ git clone git://github.com/marcelklehr/nodist.git
と入力して[ enter ]。公式ページからzipファイルをダウンロードすることもできる。
インストールできたらまずPathを通し、システム環境変数「NODIST_PREFIX」を設定する。
Windows7での設定記事ではあるが、こちらの記事などが参考になるかと思われる。
これができたら
$ nodist -v
でnodistのバージョンが表示されることを確認する。表示されればnodistのインストールは完了。
2. node.jsのインストール
node.jsのインストール前にnodistの環境を最新にしておく。
$ nodist update
そしていよいよnode.jsのインストール。Windowsの場合もMacと同様v4.2.1を例としてインストールする。
$ nodist + v4.2.1
これでインストールと同時に有効化されているはずなので、
$ node -v
と入力して
v4.2.1
と表示されれば完了となる。
いかがだっただろうか。いざ書いてみるとおまけのほうがボリュームが多い気がしないではないが気にしないw
ハンズオンの案内にも記載があるが、ターミナル／コマンドプロンプトを使ってツールをインストールしたり動かしたり、と言うのはもう別に珍しいことではなく、仮にデザイナーだったとしても簡単なコマンドが使えるのはごく普通のことになってきている（Vimとか使いまくるのはまた別のお話w）。
これまで「難しそう」とか「よくわからないから」と敬遠していた人であっても、こういったハンズオンなどばっちり手伝ってもらえる機会を利用して入門してみるのがオススメできる。
何を隠そう、偉そうにこんな記事を書いている僕自身が『黒い画面』歴1年ちょっとである。目的を達成するために使わざるを得ない状況に自分を追い込む、というマゾのも一つの方法かとは思うが、できることならば詳しい人に教わりながら試してみたい、と思うのが正直なところ。
そういった新しい一歩を踏みだすお手伝いのひとつとして、今回のWordCamp Tokyo2015のハンズオンをご利用いただきたいと思う。
裏話
そもそものきっかけ
WordCamp Tokyo2015では、委員長から「セッションの責任者やって〜」と泣いて頼まれて（嘘）セッションの担当をしています。
その準備の打ち合わせのなかで、ハンズオンに登壇する方から「参加者にVagrant+VCCW環境を事前に用意しておいてもらえると助かるな〜」という意見がありました。
確かにその設定や準備に限られたハンズオンの時間を取られちゃうのはもったいないので、特に「テーマ制作ハンズオン」、「gulp＋Browsersyncハンズオン」に参加なさりたい方などに向けて書いたものになります。
もちろん「WordPressが動くローカル環境を用意する」のは、ここで紹介した「Vagrant+VCCW」でなくとも、MAMPやXAMPPでも構いません。また、先日miyaさんがこんな記事を書いてくださっていますが、Macであれば最初からApacheとPHPがインストールされているのでそれだけでも動かす環境は用意できます。
今回のWordCamp Tokyo2015については、もちろん「Vagrant+VCCW」でなければいけないなんてことはないので、いつもご自分で使っておいでの環境をご用意いただければ大丈夫です。
ただ、制作者として誰かと一緒に制作を進めていくような場合であれば、今回ご紹介した環境はとても簡単に環境の共有が可能です。
いろんな方法を知っていれば、そのケースごとに最適な方法を選択できますよね？
今回のWordCampに参加する人のみならず、「Vagrant+VCCWでWordPressをローカルで開発したいけどなんか手順とか設定がよくわからないからな…」という人の参考になれば、ということで記事にした次第です。
さて、明日のリレーブログはmimosafaさん。どうぞよろしくお願いします。