2013/09/21 YAPC ASIA TOKYO
株式会社はてな
大西康裕 id:onishi
はてなブログの
開発フロー
  id:onishi 大西康裕
  ONISHI
  @yasuhiro_onishi
  株式会社はてな
  はてなブログ
Devel::KTYProf
Text::Hatena
Web::Embed
Redmine::Chan
はてなブログ
hatenablog.com
はてなブログ
•2011年8月開発開始
•Perl 5.14.2
•Plack/PSGI (Starlet)
•Carton
•Router::Simple + Config::ENV
•DBI wrapper / SQL::Maker
•cap...
2013-09-18 ブログ グループで、はてなスペースと連携して掲示板を設置できるようにしました / ブログのコメント
を、はてなIDを指定して拒否できるようにしました / 2013-09-10 スマートフォン iPadでも書きやすく、読みや...
1,952 pull requests
12,386 commits
per year
on
本日のアジェンダ
•GHEを中心にした開発フロー
•自動化・効率化・安定化のため
の取組み
•( 開発フロー以外のTIPSも少し )
本日のまとめ
•自動化できるものは自動化する
•ミスの再発防止を仕組み化する
よい開発プロセス
•プロセスのフレームワーク化
•安心感、マネジメント性
•標準化 > 誰がやっても大丈夫
•チームやサービスにあったもの
よい開発プロセス
•タスク管理、ワークフロー
•テスト、CI
•リリース管理
タスク管理、
ワークフロー
2012年YAPC
2012年YAPC
2012年YAPC
2012年YAPC
•ソーシャルコーディング
•Issue / Pull Request
•Private Repository
•情報共有・レビューツール
•優先度が無い
•期日がない
•複数人アサインできない
•ガントチャートなにそれ
GitHub Issue
GitHub の Issue は
タスク管理ツールではない
おすすめ
•GitHub はレビューツール
•タスク管理ツールと併用しよう
•trello.com とか
はてなブログチーム
•ツールを幾つも使いたくない
•無理やりGitHubだけでやる
開発の流れ
•中期計画(半年)
•短期計画(1月)
•アサイン
•開発
•リリース
branch 戦略
•master
•本番と同一、常に健全
•staging/master
•リリース可能なものが全て
mergeされている
•topic branch
•機能ごとの開発ブランチ
branch 戦略
master
staging/master
topic branch 1
topic branch 2
release!!
Issue 活用
•Issue
•Product Backlog
•誰でも登録していい
•Assigned Issue
•Sprint Backlog
•アサイン権限 = ディレクター
•優先度はラベルで簡易管理
Issue / PR
•着手したらすぐ Pull Request
•進行はラベルで管理
•レビューが済んだら staging/
master に merge
すぐ Pull Request
•仕様検討も Pull Request 上で
•仕様のレビューも
•デザイナーもPull Request
•なんでも Issue 上で会話
1 Issue登録
2 アサイン / PR
3 レビュー依頼
4 レビュー中
5 リリース待ち
6 stating/master
7 master (リリース)
ラベルで
管理
アサイン
•同系統の仕事を同じエンジニア
にアサインしつづける > 属人化
•意識して担当を変える
アサインおみくじ
•http://
hitode909.appspot.com/
assign_omikuji/
pull-req-label
•Pull Request はラベルを気軽
に変えられない
•API では変えられる
•Chrome拡張を利用
https://github.com
/shimobayashi
/pull-req-label
昼過ぎレビュータイム
•毎日ランチ後 14:00∼
•「レビュー待ち」フラグの
Issue を片っ端から処理する
新規Issue登録
javascript:
location.href =
'http://GHE/USER/REPOS/issues/new?
title='
+ document.getSelection().toString()
|| d...
新規Issue登録
新規Issue登録
title
body
assignee milestone
labels
milestone
•milestone は期日を設定できる
milestone
•issue を milestone に紐付ける
線表
スケジュール管理
•ディレクターが線表管理
•進捗確認、スケジュール引き直し
(weekly)
•エンジニアが使うツールはghe
だけ
Issue まとめ
•Issue では優先度と期日が決め
られない
•優先度はアサインの有無とラベ
ルで
•期日は milestone か別で管理
テスト、CI
テストの基本
•頻繁に実行する(自動化する)
•不具合があったら回帰テスト
•網羅的なテストがあれば安心して
リファクタリングできる
テスト
•開発者の手元のテスト
•ファイル変更を自動検知
•jenkins による CI
•どのブランチでも、push した
ら自動テスト
•staging/master への push
はさらに特別扱い(後述)
jenkins
•メイン
•全ブランチがpush毎にテス
トされる
•リリース
•staging/master, master
•カバレッジ
•カバレッジ専用1日1回走る
テストモジュール
•Harriet
•Test::mysqld
•prove 毎に mysqld を立てる
•DBIx::RewriteDSN
CasperJS
•JSで作られたPhantomJSのユ
ーティリティ
•http://casperjs.org/
•テストはCoffeeScriptで記述
•ふるまいのテストを書く
テンプレートのテスト
•Xslate の テンプレートのテスト
•テンプレートがコンパイル可能か
•日本語含まれてないか(国際化)
コードカバレッジ
metrics テスト
•コードの複雑さをテスト
•リファクタリング対象選定
•https://metacpan.org/
module/Perl::Metrics::Lite
循環的複雑度
メソッドの長さ
テストのまとめ
•少しずつでもできるテストを増や
していく
•不具合があったら回帰テストを
つくる、など同じミスを繰り返
さない
リリース管理
リリース管理
•なるべくはやくステージング環境に
•開発 > テスト > デプロイ
•はやいフィードバック
•大きな手戻りを無くす
計画リリース
•開発計画でリリース日を定めてい
るもの
定期リリース
•週次リリース(毎週水曜)
•定期リリースに間に合わせよう
という意識が働く
•区切りがついて開発のリズムが
うまれる
継続リリース
•staging/master への merge
がIRCに通知される
•ある程度増えたらリリース
•結局、毎日リリース
※ただし、休日前日はリリース禁止
18:25 ikachan01: 【リリース】Hatena::Epic::...
describe-pull-request.rb
•staging/masterのテストが通
ったら自動実行される
•リリース用の pull request
•gfmのチェックリスト機能
•- [ ] チェックリスト OFF
•- [x] チェ...
18:25 hitode909: https://... 著名枠にエンジニアを追加
これリリースしていいですか > onishi
18:26 onishi リリースおねがいします > hitode909
18:30 hitode909: htt...
18:25 hitode909: https://... 著名枠にエンジニアを追加
これリリースしていいですか > onishi
18:26 onishi リリースおねがいします > hitode909
18:30 hitode909: htt...
describe-pull-request.rb
近日公開予定
ローカル開発
•setup スクリプト
•mysqldiff
•https://github.com/
onishi/mysqldiff
•plenv, rbenv
•Carton, Bundler
devhost
•トピックブランチを簡単にサー
バー上で実行する仕組み
•cap devhost:setup
•ブランチ名から自動でドメイン
が決定し、検証環境が出来る
devhost routing
•reverse proxy (nginx) の設
定に一々 push したくない
•nginx + lua で動的ルーティン
グ
•ngx_lua モジュール
location / {
proxy_set_header Host $http_host;
set $upstream_socket "";
rewrite_by_lua '
local m = ngx.re.match(
ngx.var.h...
その他のとりくみ
ABテスト
•検証可能なものをリリースする
•迷ったら出して確認したらよい
•→ リリースサイクルが速くなる
ABテスト
•chanko的なもの
•特定の条件で機能を出し分ける
•スタッフは任意で条件をいじれ
る
計測・統計
•サービスにおけるKPI
•クリック数計測
•JSも含めたページの表示速度
•UA毎のJSエラー数
•エンジニア毎の issue 数
ページ表示速度
issue数
IRC利用
•#diary チーム全員に通知
•フィードバック
•エゴサーチ
•staging/master 状況
•jenkins のテスト実行結果
•本番のエラー
教育
•研修
•https://github.com/
hatena/Hatena-Textbook
•コーディング規約
•ペアプロ義務化
ペアプログラミング
•毎週1ペア実施するのをルール化
•一人でやるのが辛いタスクをや
るきっかけに
•便利関数やエディタ設定などの
暗黙知が共有される
リファクタリング
•metrics を参考にリファクタリ
ング対象を選定
•週○時間とか時間を決める
•小さい単位で Pull Request
まとめ
•人はミスをするので仕組み化・
ツール利用を心がける
•開発フローの改善にコストをか
ける
•結局トータルのパフォーマン
ス、サービス品質は向上する
人材募集
•安心して開発できる環境で一緒に  
ブログを作りましょう!
www.hatena.ne.jp/company/staff
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Upcoming SlideShare
Loading in …5
×

Hatena blogdevelopmentflow

9,649 views

Published on

はてなブログの開発FLOW

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,649
On SlideShare
0
From Embeds
0
Number of Embeds
7,188
Actions
Shares
0
Downloads
10
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Hatena blogdevelopmentflow

  1. 1. 2013/09/21 YAPC ASIA TOKYO 株式会社はてな 大西康裕 id:onishi はてなブログの 開発フロー
  2. 2.   id:onishi 大西康裕   ONISHI   @yasuhiro_onishi   株式会社はてな   はてなブログ
  3. 3. Devel::KTYProf Text::Hatena Web::Embed Redmine::Chan
  4. 4. はてなブログ hatenablog.com
  5. 5. はてなブログ •2011年8月開発開始 •Perl 5.14.2 •Plack/PSGI (Starlet) •Carton •Router::Simple + Config::ENV •DBI wrapper / SQL::Maker •capistrano
  6. 6. 2013-09-18 ブログ グループで、はてなスペースと連携して掲示板を設置できるようにしました / ブログのコメント を、はてなIDを指定して拒否できるようにしました / 2013-09-10 スマートフォン iPadでも書きやすく、読みやす い! iOSアプリをユニバーサルアプリ化しました / 2013-09-06 Flickrからの画像の検索と貼り付けに対応しまし た / 2013-09-05 ソースコードを簡単に共有しよう! Gistからの貼り付けに対応しました / 2013-09-04 イラ スト・マンガ作品をブログに投稿しよう! pixivからの貼り付けに対応しました / はてなブログAtomPub APIを公 開しました。サードパーティのブログ投稿ツールを利用・作成できます / 2013-09-02 記事を書きながら表示を確 認! 編集画面にリアルタイムプレビュー機能を追加しました / 2013-08-28 ブログ グループに参加する際に、記事 のカテゴリーを指定できるようにしました / 2013-08-21 ヘッダメニューをリニューアル! ブログを書くときも読む ときにも便利になりました / 2013-08-08 お絵描き機能をパワーアップ! 「透明ペン」「塗りつぶし」「スポイ ト」を追加しました / 2013-07-25 動画の貼り付けを強化! ニコニコ動画とInstagram動画に対応しました / 2013-07-17 コメント欄などでニックネームを表示、リンクボタンでタイトルを自動取得、などの機能追加を行いま した / 2013-07-12 ブログで簡単な絵を書こう! 編集サイドバーに「お絵描き機能」を追加しました / 2013-06 -20 編集画面に「引用」ボタンを追加、著名人ブログページを公開、ほか / 2013-06-13 ブログで仲間を見つけよ う! はてなブログ グループを公開しました / 2013-06-06 Tumblrで共有しやすくなったほか、多くの機能追加・ 修正を行いました / 2013-05-22 MT形式のブログインポートに対応! はてな外のサービスから移行しやすくなりま した / 2013-05-01 「LINEで送る」ほか、いくつかの機能追加・修正を行いました / 2013-04-10 デザインテ ーマ テーマ ストアをさらに強化したほか、下書き一覧などを追加しました / 2013-04-02 お待たせしました。はて なブログとはてなダイアリーの全ドメインでTwitter Cardsに対応しました / 2013-03-27 長いブログもスッキリ と表示。記事を分割する「続きを読む」記法をリリースしました / 2013-03-25 はてなブログがTwitter Cardsに 対応しました。ツイートで記事の概要が表示されます[追記あり][再追記あり / 2013-03-21 美味しい情報をブロ グに! 編集サイドバーからレストランを紹介できるようにしました / 2013-03-15 デザインテーマ テーマ ストアを 強化! そのほか多数の機能追加・修正を行いました / 2013-03-06 スマートフォン スマホの編集ツールバーがパワ ーアップ! 貼り付け機能で、はてなTシャツをもらおう!! / 2013-02-28 記事ごとのブックマーク数やいいね! を、トップページでも確認できるようにしました / 2013-02-27 デザインテーマ ブログはもっと可愛くなくちゃ! 公式デザインテーマに「B!KUMA」を追加しました / 2013-02-21 トピック いま盛り上がってるあの話題に参加し よう! 「トピック」ページをリリースしました / 2013-02-20 デザインテーマ オリジナルのテーマを共有しよう! 84週連続 新機能 リリース
  7. 7. 1,952 pull requests 12,386 commits per year
  8. 8. on
  9. 9. 本日のアジェンダ •GHEを中心にした開発フロー •自動化・効率化・安定化のため の取組み •( 開発フロー以外のTIPSも少し )
  10. 10. 本日のまとめ •自動化できるものは自動化する •ミスの再発防止を仕組み化する
  11. 11. よい開発プロセス •プロセスのフレームワーク化 •安心感、マネジメント性 •標準化 > 誰がやっても大丈夫 •チームやサービスにあったもの
  12. 12. よい開発プロセス •タスク管理、ワークフロー •テスト、CI •リリース管理
  13. 13. タスク管理、 ワークフロー
  14. 14. 2012年YAPC
  15. 15. 2012年YAPC
  16. 16. 2012年YAPC
  17. 17. 2012年YAPC
  18. 18. •ソーシャルコーディング •Issue / Pull Request •Private Repository •情報共有・レビューツール
  19. 19. •優先度が無い •期日がない •複数人アサインできない •ガントチャートなにそれ GitHub Issue
  20. 20. GitHub の Issue は タスク管理ツールではない
  21. 21. おすすめ •GitHub はレビューツール •タスク管理ツールと併用しよう •trello.com とか
  22. 22. はてなブログチーム •ツールを幾つも使いたくない •無理やりGitHubだけでやる
  23. 23. 開発の流れ •中期計画(半年) •短期計画(1月) •アサイン •開発 •リリース
  24. 24. branch 戦略 •master •本番と同一、常に健全 •staging/master •リリース可能なものが全て mergeされている •topic branch •機能ごとの開発ブランチ
  25. 25. branch 戦略 master staging/master topic branch 1 topic branch 2 release!!
  26. 26. Issue 活用 •Issue •Product Backlog •誰でも登録していい •Assigned Issue •Sprint Backlog •アサイン権限 = ディレクター •優先度はラベルで簡易管理
  27. 27. Issue / PR •着手したらすぐ Pull Request •進行はラベルで管理 •レビューが済んだら staging/ master に merge
  28. 28. すぐ Pull Request •仕様検討も Pull Request 上で •仕様のレビューも •デザイナーもPull Request •なんでも Issue 上で会話
  29. 29. 1 Issue登録 2 アサイン / PR 3 レビュー依頼 4 レビュー中 5 リリース待ち 6 stating/master 7 master (リリース) ラベルで 管理
  30. 30. アサイン •同系統の仕事を同じエンジニア にアサインしつづける > 属人化 •意識して担当を変える
  31. 31. アサインおみくじ •http:// hitode909.appspot.com/ assign_omikuji/
  32. 32. pull-req-label •Pull Request はラベルを気軽 に変えられない •API では変えられる •Chrome拡張を利用
  33. 33. https://github.com /shimobayashi /pull-req-label
  34. 34. 昼過ぎレビュータイム •毎日ランチ後 14:00∼ •「レビュー待ち」フラグの Issue を片っ端から処理する
  35. 35. 新規Issue登録 javascript: location.href = 'http://GHE/USER/REPOS/issues/new? title=' + document.getSelection().toString() || document.title + '&body=' + location.href
  36. 36. 新規Issue登録
  37. 37. 新規Issue登録 title body assignee milestone labels
  38. 38. milestone •milestone は期日を設定できる
  39. 39. milestone •issue を milestone に紐付ける
  40. 40. 線表
  41. 41. スケジュール管理 •ディレクターが線表管理 •進捗確認、スケジュール引き直し (weekly) •エンジニアが使うツールはghe だけ
  42. 42. Issue まとめ •Issue では優先度と期日が決め られない •優先度はアサインの有無とラベ ルで •期日は milestone か別で管理
  43. 43. テスト、CI
  44. 44. テストの基本 •頻繁に実行する(自動化する) •不具合があったら回帰テスト •網羅的なテストがあれば安心して リファクタリングできる
  45. 45. テスト •開発者の手元のテスト •ファイル変更を自動検知 •jenkins による CI •どのブランチでも、push した ら自動テスト •staging/master への push はさらに特別扱い(後述)
  46. 46. jenkins •メイン •全ブランチがpush毎にテス トされる •リリース •staging/master, master •カバレッジ •カバレッジ専用1日1回走る
  47. 47. テストモジュール •Harriet •Test::mysqld •prove 毎に mysqld を立てる •DBIx::RewriteDSN
  48. 48. CasperJS •JSで作られたPhantomJSのユ ーティリティ •http://casperjs.org/ •テストはCoffeeScriptで記述 •ふるまいのテストを書く
  49. 49. テンプレートのテスト •Xslate の テンプレートのテスト •テンプレートがコンパイル可能か •日本語含まれてないか(国際化)
  50. 50. コードカバレッジ
  51. 51. metrics テスト •コードの複雑さをテスト •リファクタリング対象選定 •https://metacpan.org/ module/Perl::Metrics::Lite
  52. 52. 循環的複雑度 メソッドの長さ
  53. 53. テストのまとめ •少しずつでもできるテストを増や していく •不具合があったら回帰テストを つくる、など同じミスを繰り返 さない
  54. 54. リリース管理
  55. 55. リリース管理 •なるべくはやくステージング環境に •開発 > テスト > デプロイ •はやいフィードバック •大きな手戻りを無くす
  56. 56. 計画リリース •開発計画でリリース日を定めてい るもの
  57. 57. 定期リリース •週次リリース(毎週水曜) •定期リリースに間に合わせよう という意識が働く •区切りがついて開発のリズムが うまれる
  58. 58. 継続リリース •staging/master への merge がIRCに通知される •ある程度増えたらリリース •結局、毎日リリース ※ただし、休日前日はリリース禁止 18:25 ikachan01: 【リリース】Hatena::Epic::Admin::Entryリファクタリング (4件) https://...
  59. 59. describe-pull-request.rb •staging/masterのテストが通 ったら自動実行される •リリース用の pull request •gfmのチェックリスト機能 •- [ ] チェックリスト OFF •- [x] チェックリスト ON
  60. 60. 18:25 hitode909: https://... 著名枠にエンジニアを追加 これリリースしていいですか > onishi 18:26 onishi リリースおねがいします > hitode909 18:30 hitode909: https://... 著名枠にエンジニアを追加 リリースしました > #diary 18:31 hitode909: https://... 著名枠にエンジニアを追加 本番確認お願いします > hitode909
  61. 61. 18:25 hitode909: https://... 著名枠にエンジニアを追加 これリリースしていいですか > onishi 18:26 onishi リリースおねがいします > hitode909 18:30 hitode909: https://... 著名枠にエンジニアを追加 リリースしました > #diary 18:31 hitode909: https://... 著名枠にエンジニアを追加 本番確認お願いします > hitode909 コピペ コピペ コピペ
  62. 62. describe-pull-request.rb 近日公開予定
  63. 63. ローカル開発 •setup スクリプト •mysqldiff •https://github.com/ onishi/mysqldiff •plenv, rbenv •Carton, Bundler
  64. 64. devhost •トピックブランチを簡単にサー バー上で実行する仕組み •cap devhost:setup •ブランチ名から自動でドメイン が決定し、検証環境が出来る
  65. 65. devhost routing •reverse proxy (nginx) の設 定に一々 push したくない •nginx + lua で動的ルーティン グ •ngx_lua モジュール
  66. 66. location / { proxy_set_header Host $http_host; set $upstream_socket ""; rewrite_by_lua ' local m = ngx.re.match( ngx.var.host, "^([^.]+[.]dev)[.]" ) if m then ngx.var.upstream_socket = "/tmp/"..m[1]..".sock" else ngx.exit(ngx.HTTP_NOT_FOUND) end '; proxy_pass http://unix:$upstream_socket; }
  67. 67. その他のとりくみ
  68. 68. ABテスト •検証可能なものをリリースする •迷ったら出して確認したらよい •→ リリースサイクルが速くなる
  69. 69. ABテスト •chanko的なもの •特定の条件で機能を出し分ける •スタッフは任意で条件をいじれ る
  70. 70. 計測・統計 •サービスにおけるKPI •クリック数計測 •JSも含めたページの表示速度 •UA毎のJSエラー数 •エンジニア毎の issue 数
  71. 71. ページ表示速度
  72. 72. issue数
  73. 73. IRC利用 •#diary チーム全員に通知 •フィードバック •エゴサーチ •staging/master 状況 •jenkins のテスト実行結果 •本番のエラー
  74. 74. 教育 •研修 •https://github.com/ hatena/Hatena-Textbook •コーディング規約 •ペアプロ義務化
  75. 75. ペアプログラミング •毎週1ペア実施するのをルール化 •一人でやるのが辛いタスクをや るきっかけに •便利関数やエディタ設定などの 暗黙知が共有される
  76. 76. リファクタリング •metrics を参考にリファクタリ ング対象を選定 •週○時間とか時間を決める •小さい単位で Pull Request
  77. 77. まとめ •人はミスをするので仕組み化・ ツール利用を心がける •開発フローの改善にコストをか ける •結局トータルのパフォーマン ス、サービス品質は向上する
  78. 78. 人材募集 •安心して開発できる環境で一緒に   ブログを作りましょう! www.hatena.ne.jp/company/staff

×