WordCamp Kansai 2015 CI ハンズオン

WordPressで行う
継続的インテグレーションのススメ 
ハンズオン
WordCamp Kansai 2015
堀家・北島・占部

アジェンダ
• CI とは
• プラグインの雛形を生成してみよう
• ユニットテストを書いてみよう
• プラグインを作成してみよう
• Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよ
う
• リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
• WordMoveでデプロイしてみよう

CIとは
• 継続的インテグレーション 
( Continuous Integration )
• 主にプログラマーのアプリケーション作成時の
品質改善や納期の短縮のための習慣のこと。
• 狭義にはビルドやテスト、インスペクションな
どを継続的に実行していくことを意味する。
http://ja.wikipedia.org/wiki/継続的インテグレーション

プラグインの雛形を生成してみよう

• 一から作るのは面倒なのでVCCWに同梱され
ているWP-CLIを使って雛形を作成してみま
しょう。
• まずVCCWにログインしましょう。

# vccwのディレクトリまで移動
$ cd vccw
# VCCW起動
$ vagrant up
# VCCWにログイン
$ vagrant ssh
# WordPressのディレクトリに移動
[vccw]$ cd /var/www/wordpress

# プラグインの雛形を作成
[vccw]$ wp scaffold plugin sample-plugin
Success: Created /var/www/wordpress/wp-content/plugins/sample-plugin
Success: Created test files.
# もし既存のプラグインにテストだけ追加したい場合は下記で可能です。
[vccw]$ wp scaffold plugin-tests <plugin-slug>
このメッセージが表示されたら成功

• プラグインの雛形が作成されたか確認してみ
ましょう

[vccw]$ ls -al /var/www/wordpress/wp-content/plugins/sample-plugin/
合計 20
drwxr-xr-x. 1 vagrant vagrant 272 6月 9 23:17 2015 .
drwxr-xr-x. 1 vagrant vagrant 850 6月 9 23:18 2015 ..
-rw-r--r--. 1 vagrant vagrant 310 6月 9 23:17 2015 .travis.yml
drwxr-xr-x. 1 vagrant vagrant 102 6月 9 23:17 2015 bin
-rw-r--r--. 1 vagrant vagrant 321 6月 9 23:17 2015 phpunit.xml
-rw-r--r--. 1 vagrant vagrant 4334 6月 9 23:17 2015 readme.txt
-rw-r--r--. 1 vagrant vagrant 226 6月 9 23:17 2015 sample-
plugin.php
drwxr-xr-x. 1 vagrant vagrant 136 6月 9 23:17 2015 tests

# vccwからログアウト
[vccw]$ exit

ユニットテストを書いてみよう

• 今回のハンズオンでは次のような仕様のショート
コードのプラグインを作成していきます。
• [greeting language="japanese"] でこんにちはと
表示
• [greeting language="english"] で hello と表示
• それ以外では何も表示しない

• 今回はテストファーストと手法で作成していきま
しょう。
• テストファーストとは、モノを作成するよりも先
に、まずテストから作成する、という手法のこと。
• テストを先に書くことで仕様が明確になる、テスト
を100%通るコードになる、などのメリットがあり
ます。

• 下記にテストの雛形が生成されているので、そ
れを編集していきましょう。
• vccw/www/wordpress/wp-content/plugins/
sample-plugin/tests/test-sample.php
• ユニットテスト用のコードには、自動実行させ
るために必要ないくつかのルールがあります。

# vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-
sample.php を編集
class SampleTest extends WP_UnitTestCase {
public function test_languageがjapaneseならこんにちは() {
}
public function test_languageがenglishならhello() {
}
}
tests/ 内に test-hoge.php というファイル名で保存

}
}
}
Test で終わるクラス名

}
}
} test_ で始まるメソッド名

• それでは実際にテストコードを書いていきま
しょう。
• 「[greeting language="japanese"] でこんに
ちはと表示」をテストするコードを追記しま
す。

// ショートコードを実行して結果を取得
$greeting = do_shortcode( ‘[greeting language=“japanese”]’ );
// アサーションメソッドを実行して期待した結果かどうかチェック
// ここでは $greeting がこんにちはならOK 
$this->assertEquals( ‘こんにちは’, $greeting );
}
……
}
引数で渡した２つの値が同じならOKなアサーション

• 先ほどのテストコードを参考に「test_languageが
englishならhello() 」のテストも追加してみてくだ
さい。
• 他にもたくさんのアサーションメソッドが用意され
ていますので、必要に応じて使い分けましょう。 
https://phpunit.de/manual/current/ja/
appendixes.assertions.html

$greeting = do_shortcode( ‘[greeting language=“japanese”]’ ); 
$this->assertEquals( ‘こんにちは’, $greeting );
}
$greeting = do_shortcode( ‘[greeting language=“english”]’ ); 
$this->assertEquals( ‘hello’, $greeting );
}
}

• テストコードが書けたらテストを実行してみ
ましょう。

$ vagrant ssh
# プラグインのディレクトリに移動
[vccw]$ cd /var/www/wordpress/wp-content/plugins/sample-plugin
# テスト実行
[vccw]$ phpunit
Installing...
Running as single site... To run multisite, use -c tests/phpunit/multisite.xml
Not running ajax tests... To execute these, use --group ajax.
PHPUnit 4.3.1 by Sebastian Bergmann.
Configuration read from /var/www/wordpress/wp-content/plugins/sample-plugin/phpunit.xml
∼ 省略 ∼
FAILURES!
Tests: 2, Assertions: 2, Failures: 2.
プラグインのコードを書いていないので当然エラー…

• テストファーストの手法では、まず失敗するテ
ストを書いて、それが成功するコードを書い
ていくことで品質を保証します。
• では今書いたテストが成功するコードを書い
ていきましょう。
• その前に…

おまけ：便利なアノテーション
• アノテーションとはメタデータを表す特別な
構文のことで、テストメソッドの前にコメン
トを書くことで実行されます。

/**
* @group グループ名
*/
……
}
}
$ phpunit —group グループ名
グループ名で絞り込んでテストすることができます。

/**
* @test
*/
public function languageがjapaneseならこんにちは() {
……
}
}
メソッド名の test_ を省略できます。

/**
* @runInSeparateProcess
*/
……
}
}
テストを個別のPHPプロセスで実行できます。

• 複数指定できます。
• 他にも便利なアノテーションがたくさんある
ので下記でご確認ください。
• https://phpunit.de/manual/current/ja/
appendixes.annotations.html

プラグインを作成してみよう

# vccw/www/wordpress/wp-content/plugins/sample-plugin/sample-
plugin.php を編集
add_shortcode( 'greeting', function( $atts ) {
if ( empty( $atts['language'] ) ) {
return;
}
switch( $atts['language'] ) {
case 'japanese' :
return 'こんにちは';
case 'english' :
return 'hello';
}
} );

• コードが書けたら再度テストを実行してみま
しょう。

$ vagrant ssh
# プラグインのディレクトリに移動
# テスト実行
[vccw]$ phpunit
Installing...
Running as single site... To run multisite, use -c tests/phpunit/multisite.xml
Not running ajax tests... To execute these, use --group ajax.
PHPUnit 4.3.1 by Sebastian Bergmann.
Configuration read from /var/www/wordpress/wp-content/plugins/sample-plugin/phpunit.xml
Time: 1.43 seconds, Memory: 12.00Mb
OK (2 tests, 2 assertions)
緑のメッセージならテストクリア

Travis CIを使ってGitHubにプッ
シュするたびにテストが実行され
るようにしてみよう

Travis CIを使ってGitHubにプッシュするた
びにテストが実行されるようにしてみよう
• Travis CIはGitHub上のリポジトリと連携してCIを行うこ
とができるサービス。
• GitHubにプッシュすると、自動的にテストが実行され
ます。
• プラグインディレクトリに生成された.travis.ymlを編集
することで様々な環境のテストを実行できます。例えば、
( PHP5.3、5.4 ) ☓ ( WordPress 4.1、4.2 )。

• まずはGitHubにsample-pluginのリポジトリ
を作成しましょう。

リポジトリを作成

リポジトリ名を入力（例：sample-plugin）
リポジトリ名を入力したらクリック

プッシュ先のURL。後で使うのでメモ！
HTTPSでなくSSHを使います！

• GitHub上のsample-pluginのリポジトリと
Travis CIを連携させましょう。

sample-pluginのリポジトリと連携
ここからリポジトリ一覧に移動

リポジトリにプッシュしてTravis
CIで自動的にテストが実行される
ことを確認しよう

リポジトリにプッシュしてTravis CIで自動
的にテストが実行されることを確認しよう
• Travis CIの登録、連携ができたらGitHubに
プッシュしてテストが実行されるか確認して
みましょう。

# sample-plugin のディレクトリで git init
$ vagrant ssh
[vccw]$ git init
# ファイルをステージングに追加
[vccw]$ git add .

# 変更をコミット
[vccw]$ git commit -m "first commit”
Committer: vagrant <vagrant@2inc.local>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:
git config --global user.name "Your Name"
git config --global user.email you@example.com
If the identity used for this commit is wrong, you can fix it with:
git commit --amend --author='Your Name <you@example.com>'
6 files changed, 260 insertions(+), 0 deletions(-)
create mode 100644 bin/install-wp-tests.sh
create mode 100644 phpunit.xml
create mode 100644 readme.txt
create mode 100644 sample-plugin.php
create mode 100644 tests/bootstrap.php
create mode 100644 tests/test-sample.php

# リモートリポジトリを設定
[vccw]$ git remote add origin git@github.com:example/sample-plugin.git
# リモートリポジトリにプッシュ
[vccw]$ git push -u origin master
Warning: Permanently added the RSA host key for IP address
‘xxx.xx.xxx.xxx’ to the list of known hosts.
Counting objects: 10, done.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (10/10), 4.28 KiB, done.
Total 10 (delta 0), reused 0 (delta 0)
To git@github.com:example/sample-plugin.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.
GitHubのリポジトリの情報に
合わせてください。

• プッシュできたらTravis CIを確認してみましょ
う。

テストにパスすれば緑が表示されます。
失敗した時は赤が表示されます。

WordMoveでデプロイしてみよう

• WordPressのデプロイツール
• VCCW にインストールされています。
• アップロード・ダウンロードがコマンド一発ででき
る。
• rsyncで自動的に更新があったファイルだけアップ
ロード・ダウンロードするので高速。

• WordMoveの設定ファイルを編集しましょう。
• vccw/Moveﬁle にサーバーへの接続情報などを記述します。
• YAML形式で記述します。インデントが崩れるとエラーにな
るので注意。
• 今回デプロイのテスト用に、デジタルキューブ様から超高速
WordPressサーバーAMIMOTOの環境をご提供いただいてい
ます！

• WordMoveはSSHでサーバーと通信するための設定が必要です
（一応FTPでの通信もありますが…）。
• VCCWはMacのをデフォルトで共有するようになっているの
で、レンタルサーバーにを置けばすぐに接続できるようになっ
ています。
• 今回はAMIMOTO（AWS）にすでにを設定していますので、先
ほどダウンロードしたをVCCW内に配置して使用するように設
定していきます。

$ vagrant ssh
# /vagrantディレクトリに移動
[vccw]$ cd /vagrant
# を配置
[vccw]$ chmod 600 wckansai2015_rsa
[vccw]$ mv wckansai2015_rsa ~/.ssh/id_rsa
# AMIMOTOに接続できるか確認
[vccw]$ ssh nginx@wapuu.pw
[amimoto]$ exit

$ vagrant ssh
# /vagrantディレクトリに移動
[vccw]$ cd /vagrant
# 更新のあるファイル、データベース全てをstaging環境へアップロード
[vccw]$ wordmove push -e staging —-all
▬▬ ✓ Pulling Plugins ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
remote | get_directory: /var/www/inc/www/wp-content/plugins /var/www/wordpress/wp-content/
plugins .git/ .gitignore .sass-cache/ bin/ tmp/* Gemfile* Movefile wp-config.php wp-content/*.sql .DS_Store wp-
content/*
I, [2015-06-12T07:40:24.742386 #13394] INFO -- : rsync --progress -e 'ssh -p 22 example1@example.com’ -rlpt --
compress --omit-dir-times --delete --exclude .git/ --exclude .gitignore --exclude .sass-cache/ --exclude bin/
--exclude 'tmp/*' --exclude 'Gemfile*' --exclude Movefile --exclude wp-config.php --exclude 'wp-content/*.sql'
--exclude .DS_Store --exclude 'wp-content/*' :/var/www/inc/www/wp-content/plugins/ /var/www/wordpress/wp-
content/plugins
receiving incremental file list
sample-plugin/tests/test-sample.php
5388 100% 7.52kB/s 0:00:00 (xfer#118, to-check=297/1618)
sample-plugin/tests/
5388 100% 7.52kB/s 0:00:00 (xfer#118, to-check=297/1618)
sample-plugin/sample-plugin.php
……
アップロードしている表示がでればOK

# 他にもいろいろあるよ
# 更新のあるプラグインだけアップロード
[vccw]$ WordMove push -e staging —p
# 更新のあるテーマだけアップロード
[vccw]$ WordMove push -e staging —t
# 更新のあるコアファイルだけアップロード
[vccw]$ WordMove push -e staging —w
# 更新のあるファイル、データベース全てをstaging環境からダウンロード
[vccw]$ WordMove pull -e staging —-all

• WordMoveを使ってVagrant内のWordPressと本番環境を同期する！ | Firegoby 
https://ﬁregoby.jp/archives/5644
• ssh-agentを使ってVagrant上のゲストOSからMac側の秘密を使えるようにする |
Firegoby 
https://ﬁregoby.jp/archives/5694
• ふつうのレンタルサーバーでも、VCCWとWordmoveを使って快適にローカル環境で開発
しようぜ！ |Toro_Unit 
http://www.torounit.com/blog/2014/12/09/1889/
• さくらのレンタルサーバーにWordPressをデプロイするのはVCCW + Wordmoveが最高に
る | モンキーレンチ 
http://2inc.org/blog/2014/12/09/4512/

WordCamp Kansai 2015 CI ハンズオン

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to WordCamp Kansai 2015 CI ハンズオン (20)

More from タカシキタジマ (8)