WordPressで行う継続的インテグレーション入門編
27 likes17,734 views
WordCamp Tokyo 2015でのセッション資料です。
![ショートコードの仕様
• [greeting language="japanese"] で こんにちは と 表示
• [greeting language="english"] で hello と表示
http://www.slideshare.net/inc2734/word-campkansai2015-ci
2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 68](https://image.slidesharecdn.com/wctokyo2015-151031195912-lva1-app6892/85/WordPress-68-320.jpg)
![class SampleTest extends WP_UnitTestCase {
public function test_languageがjapaneseならこんにちは() {
$greeting = do_shortcode( '[greeting language="japanese"]' );
$this->assertEquals( 'こんにちは', $greeting );
}
public function test_languageがenglishならhello() {
$greeting = do_shortcode( '[greeting language="english"]' );
$this->assertEquals( 'hello', $greeting );
}
}
2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 69](https://image.slidesharecdn.com/wctokyo2015-151031195912-lva1-app6892/85/WordPress-69-320.jpg)
WordPressで行う継続的インテグレーション入門編
- 1. WordPressで行う 継続的インテグレーション入門編 -私がプラグイン開発・保守地獄から学んだこと- 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 1
- 2. whoami じこしょうかい 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 2
- 3. Toro_Unit 占部 紘 (うらべ ひろし) 長野県松本市在住 Frontend Engineer / Plugin Developer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: http://www.torounit.com 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 3
- 4. Profile • 福島県郡山市生まれ。 • 群馬県太田市育ち。 • 長野県松本市９年目。 • にじゅうろくさい。 source: https://commons.wikimedia.org/wiki/ File:Gunma- NaganoPrefecturalRoad11202.jpg 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 4
- 5. WordPressとの関わり 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 5
- 6. WordPress 4.3 Core Contributer 4.4でも引き続きコアコントリビューターの予定 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 6
- 7. Other Project • Plugin Development • WordCamp Kansai 2015 Speaker Contribution WP-CLI (v0.20.2) / VCCW / Some Plugin. 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 7
- 8. Plugins • Custom Post Type Permalinks • Simple Post Type Permalinks • Powerful Posts Per Page • RS CSV Importer Media Add-On • etc... 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 8
- 9. Custom Post Type Permalinks 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 9
- 10. 主にこのプラグインの開発/保守の 経験から学んだことをお話しします。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 10
- 11. Custom Post Type Permalinks • カスタム投稿タイプのパーマリンクを管理画面から設定でき るようにするプラグイン。 • 2011.11.02リリース。ちょうど丸4年！ • Active install: 50,000+ • Downloads: 160,000+ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 11
- 12. 実は、初めて作ったプラグイン。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 12
- 13. プラグイン界のシンデレラボーイ!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 13
- 14. そんな4年前のToro_Unitは どんなだったか 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 14
- 15. • ==と===の違い？ • Class？ • オブジェクト指向？ • デザインパターン？ • 副作用？ 破壊的操作？ • interfaceって何のために存在してるの？ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 15
- 16. つまりコピペプログラマー スパゲッティなクソコードを毎日生産する日々 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 16
- 17. WordPressとかそういうレベルの問題じゃ無い。 そもそもPHPのド基礎すらよくわかってない状態。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 17
- 18. 要望と言う名のおしかりを受ける始末 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 18
- 19. デバッグモードで検証しろ！ Noticeでてる！ エスケープしろ！ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 19
- 20. いろいろつらい! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 20
- 21. しかし 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 21
- 22. なぜか信じられないペースで ダウンロード数が伸び始める 当時はWordPress3.2。たまたま時代の波に乗ってしまった。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 22
- 23. 次々やってくるバグレポートと要望 今思えば地獄の始まり 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 23
- 24. • コメントのパーマリンクが動かない！ • 添付ファイルのURLがおかしい！ • カスタムタクソノミー使えるようにして！ • カテゴリーに対応させて！ • etc... 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 24
- 25. バグを直した! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 25
- 26. (`･ω･´) ｼｬｷｰﾝ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 26
- 27. と思ったら 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 27
- 28. 別のところがバグって動かない! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 28
- 29. Σ (ﾟДﾟ;） 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 29
- 30. バグを直すとなぜかバグが増殖! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 30
- 31. 機能を追加してももちろんバグる! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 31
- 32. まさに地獄!!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 32
- 33. そんな私の昔の開発手法 1年半前くらいまで 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 33
- 34. 1. コードを書く 2. パーマリンクを更新 3. ブラウザで何十ページのパターンにアクセスして確認 投稿ページ・アーカイブ・子ページ・コメントのパーマリン ク・添付ファイル....etc.」x いろんな設定のカスタム投稿タイプ とかタクソノミーとか... 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 34
- 35. 開発時間の7割がブラウザでのテスト... 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 35
- 36. • そんなにまとまった開発の時間はとれない。 • やりかけで放置して寝るとだいたい解らなくなってる。 • 毎度毎度やってらんないので、たまにやると壊れてる。け ど、原因不明。 • とりあえずロールバック。サヨナラしたコードは数知れず。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 36
- 37. リリース後にバグが見つかり徹夜で バグフィックスすることも恒例行事 ごめんなさい。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 37
- 38. こんなのやってられるか!!! いやほんとすみません 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 38
- 39. なんとかならんかね... 毎回ごめんなさいしながらアップデートするのつらい 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 39
- 40. さてどうしよう。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 40
- 41. ようやく本編 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 41
- 42. CI=継続的インテグレーションとは？ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 42
- 43. ソフトウェア作成時の品質改善や納期の短縮のための習慣のこと 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 43
- 44. 具体的には... • プログラムによるテスト • テスト駆動開発 • テスト自動化 • 自動デプロイ / ビルド自動化 • etc... 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 44
- 45. プラグイン開発でやっていること • ブラウザ上でのテストをやめてプログラムでテスト • テスト駆動開発 • Travis-CIでテストを自動化 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 45
- 46. これで地獄からおさらばしました！ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 46
- 47. 1.WordPressでのテスト コードの書き方 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 47
- 48. 実例：カスタム投稿タイプの記事ペー ジにアクセス出来ているかのテスト。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 48
- 49. ブラウザでテストしていたこと 1. 適当なカスタム投稿タイプを作成。 2. 投稿を作成。 3. アクセスして正しく投稿ページにアクセスできるかを確認。 (個別投稿ページにアクセスできているか、目的のページに到 達できているか) 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 49
- 50. これをテストコードにするとこうなる 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 50
- 51. class SampleTest extends WP_UnitTestCase { public function test_permalink() { register_post_type('hoge'); /*カスタム投稿タイプhogeの投稿を作成。*/ $args = array( 'post_type' => 'hoge' ); $id = $this->factory->post->create( $args ); /*WordPressを投稿にアクセスした状態に*/ $this->go_to( get_permalink( $id ) ); //is_single(), is_singular()のみがtrueなら合格。 $this->assertQueryTrue( 'is_singular', 'is_single' ); //生成した記事のIDと、URLから調べたIDが一致するかどうか $post_id = url_to_postid( get_permalink( $id ) ); $this->assertEquals( $id, $post_id ); } } 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 51
- 52. 細かい解説は後ほどしますが、 基本的には、ブラウザでやっていたことを そのままコードとして記述していくだけ。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 52
- 53. だまされたと思ってやってみると そこまで難しくない! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 53
- 54. 確認だけで一日仕事だったものが... 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 54
- 55. 30秒足らずで終了!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 55
- 56. 革命起きた! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 56
- 57. ちょっとやってみたくなってきた？ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 57
- 58. じゃぁどうやってはじめればいいの? 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 58
- 59. 1-1.PHPUnit & WP_UnitTestCaseを使う! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 59
- 60. PHPUnit https://phpunit.de/ • PHPの定番テストフレームワーク。WordPressの本体も PHPUnitでテストしてる。 • 日本語マニュアルが結構しっかりしてる。 https://phpunit.de/manual/3.7/ja/ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 60
- 61. アサーション 答え合わせメソッド。assertEquals($a, $b)だったら$aと$b が一致したらOK、別のものならNG!とか。これがわかればテス トがとりあえず書ける。 アノテーション テストコードへのコメント。テストを分別したり、テストの環 境を設定したり出来る。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 61
- 62. この2つがわかればなんとかなる！ マニュアル見ればだいたい書いてある。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 62
- 63. テストの書き方の例 function add( $x, $y ) { return $x + $y; } class SampleTest extends PHPUnit_Framework_TestCase { public function test_add() { $answer = add( 1, 2 ); $this->assertEquals( $answer, 3 ); } } 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 63
- 64. WP_UnitTestCaseとは... WordPressのコアで使われているテストコード。 PHPUnitにWordPress用の便利機能を多数搭載したもの。 • 記事・カテゴリー・ユーザー・マルチサイトのブログなどを 簡単に作れる！しかもダミーデータも突っ込んでくれる！ • WordPressの用のアサーション等もあって便利! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 64
- 65. さっきのテストコードをもう一度 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 65
- 66. class SampleTest extends WP_UnitTestCase { public function test_permalink() { register_post_type( 'hoge' ); /*カスタム投稿タイプhogeの投稿を作成。*/ $args = array( 'post_type' => 'hoge' ); $id = $this->factory->post->create( $args ); /*WordPressを投稿にアクセスした状態に*/ $this->go_to( get_permalink( $id ) ); //is_single(), is_singular()のみがtrueなら合格。 $this->assertQueryTrue( 'is_singular', 'is_single' ); //生成した記事のIDと、URLから調べたIDが一致するかどうか $post_id = url_to_postid( get_permalink( $id ) ); $this->assertEquals( $id, $post_id ); } } 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 66
- 67. 例：ショートコードのテスト 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 67
- 68. ショートコードの仕様 • [greeting language="japanese"] で こんにちは と 表示 • [greeting language="english"] で hello と表示 http://www.slideshare.net/inc2734/word-campkansai2015-ci 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 68
- 69. class SampleTest extends WP_UnitTestCase { public function test_languageがjapaneseならこんにちは() { $greeting = do_shortcode( '[greeting language="japanese"]' ); $this->assertEquals( 'こんにちは', $greeting ); } public function test_languageがenglishならhello() { $greeting = do_shortcode( '[greeting language="english"]' ); $this->assertEquals( 'hello', $greeting ); } } 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 69
- 70. 意外に簡単!!! ですよね...? 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 70
- 71. でも 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 71
- 72. PHPUnitの設定とかちょっとよくわからない。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 72
- 73. WP-CLI使え!!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 73
- 74. WP-CLIでプラグインのひな形を作ると $ wp scaffold plugin <プラグイン名> 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 74
- 75. 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 75
- 76. テストに必要なものが準備済み! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 76
- 77. プラグインのディレクトリに移動して、 phpunitを実行するだけ。 $ cd ./wp-content/plugins/plugin-name/ $ phpunit //テスト実行! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 77
- 78. 既存のプラグインにテストだけ生成も出来る! $ wp scaffold plugin-tests <プラグイン名> 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 78
- 79. でも。。。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 79
- 80. • WP-CLIとかPHPUnitとかインストール面倒... • ローカルでWordPressの動作環境も立てなきゃ... • 特にWindowsだとだるい! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 80
- 81. VCCW使おう!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 81
- 82. VCCW • http://vccw.cc • 宮内さんが開発してる Vagrant環境。立ち上げるだけで、 WordPressがインストール済みの仮想マシンが手に入る。最 近俺も巻き込まれた。 • WP-CLIもPHPUnitも全部入り! • プラグイン開発に必要な環境がすべて手に入る! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 82
- 83. 1-2.WordPressの本体のテストもよも 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 83
- 84. • 実際に動くものを読んでいくのが一番わかりやすい。 • 自分のプラグインの扱っている分野のテストコードは自分の プラグインにも取り入れやすい。半分くらいパクってます。 • 一度やってみると、だんだん理解が深まってきて他のテスト も読み書き出来るようになってくるよ!!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 84
- 85. テストの書き方が何となく解ってくる はず! いろいろ書いてみよう！ とりあえず自分の作ったプラグインとかにテストを足してみる とか、簡単なプラグインを作ってみるとか。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 85
- 86. 2.テスト駆動開発するべし 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 86
- 87. そもそもテストとは。 プログラムが正しい動作をするかどうか確認するためのもの。 言い換えると、プログラムが仕様に適合した動作を行うかどう かのチェック。 ちゃんと書けば、生きた仕様書になる。 • 英語読めなくてもPHP読めれば仕様が解る!!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 87
- 88. 個人的な理解 • 仕様 = 問題文 • 実装 = 回答 • テスト = 答え合わせ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 88
- 89. 回答に合わせて問題文を 決めたらダメですよね。 あくまで理想論ですよ。理想論。(震え声) 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 89
- 90. テスト駆動開発をするメリット 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 90
- 91. • コードが変わってもテストが通れば、最低限の動作保証にな る。 • テストを後付けすると、実装に合わせたテストを書きがち。 • ノリでコードを書き始めるより、ノリでテストを書く方が、 仕様が定まる。設計をしっかりやるようになる。自分のやり たいこと、作りたいものがはっきり定まる。 • 仕様書を書くよりは、テストコードを書く方が絶対楽しい。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 91
- 92. 3.テスト自動化するべし 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 92
- 93. ここまで散々テストやれとか言ってきたけど 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 93
- 94. 毎度毎度実行するのがかったるい 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 94
- 95. めんどくさいものは大抵やり忘れる 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 95
- 96. 自動化しよう! • Githubで折角作ってるんだから、小幅な修正はブラウザから やりたいときもある。 • Pull Request貰うのはとてもありがたいけど、いちいちクロ ーンしてテストとかするのかったるい。 コミットを監視してテストを自動実行してくれる サーバー（CIサーバー）欲しい!! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 96
- 97. Travis CIを使おう! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 97
- 98. Travis CIとは • Gitのコミットを監視して、設定ファイル（.travis.yml）に書 かれている内容でテストやビルドやデプロイなどを実行でき るWEBサービス。 • Githubとの連携が簡単! プルリクエストにも実行してくれる しその結果もGithubの画面で見れる! しかもOSSならタダ! • 類似サービスにCircle-CIってのもある。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 98
- 99. Travis CIでやるメリット • WP-CLIで.travis.ymlのひな形も生成してくれる。 • 複数の環境でのテストが簡単に実行できる。WordPressの4.0 以降のバージョンでそれぞれPHP5.3以上の全てのバージョン で実行とかやれる。 • HHVMも選択できる。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 99
- 100. まとめ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 100
- 101. • WordPressのテストは、PHPUnitとWordPressのコアのテスト ケースを使うのが便利。 • WP-CLIでひな形作ればだいたいOK. • 環境構築面倒ならVCCW使っとけば良いよ! • テスト駆動開発するべし! • Travis CIはホントに便利! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 101
- 102. とりあえず、少しずつ始めてみよう。 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 102
- 103. 拙くてもテストが無いよりはマシ! 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 103
- 104. よりよい WordPress Lifeを！ 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 104
- 105. 参考資料 • WordPressで行う継続的インテグレーションのススメ https://www.slideshare.net/horike37/wordpress-50908456 • WordCamp Kansai 2015 CI ハンズオン http://www.slideshare.net/inc2734/word-campkansai2015- ci 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 105
- 106. おわり 2015.10.31 @WordCamp Tokyo 2015 WordPressで行うCI入門編 106