O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

WordPressで行う継続的インテグレーション入門編

16.241 visualizações

Publicada em

WordCamp Tokyo 2015でのセッション資料です。

Publicada em: Engenharia
  • Entre para ver os comentários

WordPressで行う継続的インテグレーション入門編

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

×