2013/09/21 YAPC ASIA TOKYO

株式会社はてな大西康裕 id:onishi

はてなブログの開発フロー

　 id:onishi 大西康裕　 ONISHI　 @yasuhiro_onishi　 株式会社はてな　 はてなブログ

Devel::KTYProfText::HatenaWeb::EmbedRedmine::Chan

はてなブログhatenablog.com

はてなブログ•2011年8月開発開始•Perl 5.14.2•Plack/PSGI (Starlet)•Carton•Router::Simple + Config::ENV•DBI wrapper / SQL::Maker•capistrano

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週連続新機能リリース

1,952 pull requests12,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()|| document.title + '&body=' + location.href

新規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::Admin::Entryリファクタリング (4件) https://...

describe-pull-request.rb

•staging/masterのテストが通ったら自動実行される•リリース用の pull request•gfmのチェックリスト機能•- [ ] チェックリスト OFF•- [x] チェックリスト ON

18:25 hitode909: https://... 著名枠にエンジニアを追加 これリリースしていいですか > onishi18:26 onishi リリースおねがいします > hitode90918:30 hitode909: https://... 著名枠にエンジニアを追加 リリースしました > #diary18:31 hitode909: https://... 著名枠にエンジニアを追加 本番確認お願いします > hitode909

18:25 hitode909: https://... 著名枠にエンジニアを追加 これリリースしていいですか > onishi18:26 onishi リリースおねがいします > hitode90918:30 hitode909: https://... 著名枠にエンジニアを追加 リリースしました > #diary18:31 hitode909: https://... 著名枠にエンジニアを追加 本番確認お願いします > hitode909

コピペコピペコピペ

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.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;}

その他のとりくみ

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