Your SlideShare is downloading. ×
  • Like
Hatena blogdevelopmentflow
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Hatena blogdevelopmentflow

  • 8,495 views
Published

はてなブログの開発FLOW

はてなブログの開発FLOW

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,495
On SlideShare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
8
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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