$30 off During Our Annual Pro Sale. View Details »

はてなシステムの考古学 / History of development at Hatena

motemen
March 04, 2017

はてなシステムの考古学 / History of development at Hatena

スライド中のリンクなどは http://motemen.hatenablog.com/entry/2017/03/yapc-kansai-history-of-hatena を参照してください

motemen

March 04, 2017
Tweet

More Decks by motemen

Other Decks in Technology

Transcript

  1. はてなシステムの考古学
    2017-03-04 YAPC::Kansai 2017 OSAKA
    motemen

    View Slide

  2. 提供

    View Slide

  3. こんにちは
    ● id:motemen
    ● 株式会社はてな CTO、
    チーフエンジニア
    ● Perl、Go

    View Slide

  4. 普段はPerlを書いています
    ● はてなのトップページ
    ● はてな匿名ダイアリー

    View Slide

  5. View Slide

  6. View Slide

  7. 趣味でGoを書いてます
    ● ghq / gore / go-for-go-book
    ● はてラボ人間性センター

    View Slide

  8. View Slide

  9. View Slide

  10. アジェンダ
    ● はじめに
    ● 背景
    ● 時代探訪
    ● 考察

    View Slide

  11. はじめに

    View Slide

  12. 考古学とは言いましたが
    ● コードの年代測定をしたいわけではない
    ● 記録のない遺物がそうそうあるもんでもない

    View Slide

  13. むしろ
    ● ある Perl 企業の15年を追うケース・スタディ
    ● DISCLAIMER: いち Perl エンジニアの観点から
    ○ ウェブ開発メイン
    ○ インフラ、スマートフォンアプリ成分は少なめ

    View Slide

  14. 歴史学
    ● 人間もサービスもコードベースも代替わり
    ● 飲み話だけでない歴史編纂

    View Slide

  15. 背景

    View Slide

  16. ㈱ はてな
    ● ウェブサービスの会社
    ● 「老舗ベンチャー」(2001 〜)
    ● 2016 年上場
    ● 京都本社、東京本店
    ● 主な言語: Perl

    View Slide

  17. View Slide

  18. はてなのサービス(一部、カッコ内は年齢)
    ● はてなブログ(5)
    ● はてなブックマーク(12)
    ● はてなニュース(8)
    ● 人力検索はてな(16)
    ● はてなダイアリー(14)
    ● はてなハイク(10)
    ● はてなスター(10)
    ● はてなアンテナ(15)
    ● はてなフォトライフ(13)
    ● はてなグループ(13)
    ● BrandSafeはてな(3)
    ● Mackerel(3)
    サービス一覧 - 株式会社はてな

    View Slide

  19. ミッション
    「知る」「つながる」「表現する」で
    新しい体験を提供し、人の生活を豊かにする

    View Slide

  20. 「はてな 採用」

    View Slide

  21. 宣伝おわり

    View Slide

  22. 時代探訪

    View Slide

  23. 時代区分
    古代 …… 2001〜2004
    中世 …… 2004〜2007
    近世 …… 2007〜2011
    近代 …… 2011〜2014
    現代 …… 2014〜

    View Slide

  24. 古代(創業〜2004)

    View Slide

  25. View Slide

  26. 先史時代
    ● エンジニア 2 人〜
    ● テキストによる記録は希少
    ● 口承による調査を行った

    View Slide

  27. Perl
    ● ウェブは Perl 企業が多かった
    ○ イー・マーキュリー
    ○ オン・ザ・エッヂ
    ○ ガイアックス

    View Slide

  28. View Slide

  29. アプリケーション基盤の進化
    ● CGI (2001)
    ○ グローバル変数
    ● Apache::Registry (2001)
    ○ my をつけないとやばい
    ○ use strict;

    View Slide

  30. OOP, CVS, フレームワーク (2001)
    ● グローバル変数はやめよう
    ○ OOP
    ○ じゃあフレームワークも作ろう
    ● CVS も同時期に導入
    ○ CVS 以前のコードはみあたらず(残念)

    View Slide

  31. Hatenaフレームワーク (2001)
    ● Model-View-Controller
    ○ ドメインロジック層(Function)
    ○ Active Record 風 ORM
    ● mod_perl
    ● HTML::Template / Template-Toolkit
    ● はてなサービスに特化

    View Slide

  32. 人力検索サイトはてな (2001)

    View Slide

  33. はてなダイアリー (2002)

    View Slide

  34. 中世(2004〜2007)

    View Slide

  35. 開拓の時代
    ● エンジニア 約 10 人
    ● 「Web 2.0」
    ● 『ウェブ進化論』 (2006)

    View Slide

  36. Hatena2フレームワーク (2004)
    ● Hatena後継
    ● mod_perl2
    ● ヘルパースクリプト、ローカルサーバ
    ● はてな開発の裏側(Shibuya.pm #5)(2004)
    ○ “速ければ1日でサービスイン”

    View Slide

  37. はてなブックマーク (2005)

    View Slide

  38. 開発合宿!!! (2014)

    View Slide

  39. はてなグループ (2004)
    ● 日記 + Wiki のグループウェア
    ● 社内Wikiから移行
    ● ドキュメントや日誌だけでなく、日記

    View Slide

  40. なんでも書いた結果

    View Slide

  41. 開発スタイル
    ● 情報公開
    ● 「50%ルール」
    ● 1人1プロダクト + サブ
    ● 立ったまま会議
    ● フリーアドレス

    View Slide

  42. オープン戦略
    ● はてなウェブサービス
    ○ RSSフィード
    ○ AtomPub
    ● はてな技術発表会日記

    View Slide

  43. インフラチーム (2007)
    ● チームらしいチーム
    ● サーバ管理ツール

    View Slide

  44. 近世(2007〜2011)

    View Slide

  45. 繁栄の時代
    ● エンジニア 約 20 人

    View Slide

  46. はてな、京都に上ル 4月に本社を移転 - @IT (2008)

    View Slide

  47. はてなブックマーク リニューアル (2008)

    View Slide

  48. B! リニューアル
    ● 機能強化
    ○ ブックマークの検索
    ○ ページの分類
    ○ コンピュータサイエンス的な手法も
    ● 負債返却

    View Slide

  49. B! リニューアル - 支えたもの
    ● チーム開発
    ● 新フレームワーク

    View Slide

  50. チーム開発
    ● 組織でものを作る潮流
    ● エンジニア 1-4 人 + デザイナ 1-2 人
    ○ アルバイト学生も
    ● 9ヶ月

    View Slide

  51. 新社内フレームワーク
    ● Ridge
    ○ mod_perl2 / POE / Plack
    ● DBIx::MoCo
    ● Ten.js
    ● modules-Hatena

    View Slide

  52. 新WAFに至る道
    ● Hatena → Hatena2(→ Hatena2.5)
    ● ほかの候補: Ruby on Rails / Catalyst
    ● 結局 Perl に

    View Slide

  53. View Slide

  54. サマーインターン (2008)
    ● トレーニング
    ○ 課題をパスしないと
    後半に進めない
    ● 本番開発
    ○ リリースする

    View Slide

  55. サマーインターン - ねらいと効果
    ● ねらい
    ○ 学生に成功体験を持ち帰ってもらう
    ○ 京都でのリクルーティングも
    ● 副次的効果
    ○ 社内ドキュメントの整備
    ○ 社員教育

    View Slide

  56. https://commons.wikimedia.org/wiki/File:Figure_27_04_03.jpg

    View Slide

  57. Ridge + DBIx::MoCo ファミリー
    ● はてなブックマーク
    ● うごメモはてな
    ● はてなスター
    ● はてなモノリス
    ● はてなハイク
    ● はてなココ
    ● はてなランド
    ● はてなOne
    ● はてな ポータルサイト
    ● プロフィールページ
    ● はてなのお知らせ

    View Slide

  58. コードベースを巡る状況
    ● 均質化した環境
    ○ Ridge + MoCo というベース
    ○ RPM による CPAN モジュール管理
    ● 一方で
    ○ フレームワーク on 社内フレームワーク
    ○ 共有モジュールの別ブランチ化

    View Slide

  59. 近代(2011〜2014)

    View Slide

  60. 脱伝統の時代
    ● エンジニア 約 30 人

    View Slide

  61. View Slide

  62. はてなブログ (2011)
    ● はてなダイアリー(当時8歳)のリニューアル

    View Slide

  63. はてなブログ - 技術的背景
    ● 社内フレームワークのタコツボ化
    ● 非 .hatena.ne.jp ドメイン
    ○ motemen.hatenablog.com
    ○ 既存の社内フレームワークの恩恵が薄い

    View Slide

  64. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく (2011)

    View Slide

  65. “薄い”フレームワーク
    ● フレームワーク = 設計指針
    ● 読むべきコードの最小化
    ● Plack/PSGI + Router::Simple
    ● DBI + SQL::NamedPlaceholder
    ● Text::Xslate, JSON::XS

    View Slide

  66. 現代の標準的構成
    ● Plack, Starlet
    ● Carton
    ● daemontools
    ● nginx
    ● MySQL, Redis

    View Slide

  67. Perlの上にも三年 〜 ずっとイケてるサービスを作り続ける技術 〜 (2015)

    View Slide

  68. 開発フロー
    ● 体制としてのチーム開発がさらに洗練
    ● 新しいコードベース
    ● 新しいツール

    View Slide

  69. はてなブログの開発フロー (2013)

    View Slide

  70. はてなアプリケーションエンジニア座談会 (2013)

    View Slide

  71. はてなブログチームの開発フローとGitHub (2014)

    View Slide

  72. Workflow at Hatena Mackerel Team (2014)

    View Slide

  73. GitHub Enterprise 導入 (2012)
    ● Pull Request によるコードレビュー
    ● Issue によるタスク管理
    ● Wiki は利用せず、はてなグループ

    View Slide

  74. 開発フローの伝播
    ● IRC/Slack 上の口コミ
    ● 異動にともなう輸出入

    View Slide

  75. git-pr-release (2013)
    ● ブログチームのスクリプトを輸出

    View Slide

  76. prchecklist (2015)
    ● (社内)ウェブサービス化

    View Slide

  77. 現代(2014〜)

    View Slide

  78. 多様化の時代
    ● エンジニア 約 50 人

    View Slide

  79. View Slide

  80. Mackerel (2014)
    ● サーバ管理知見をサービス化
    ● 当時の CTO 肝いり
    ● Scala / Go / PostgreSQL

    View Slide

  81. Scala In Perl Company (2014)

    View Slide

  82. 『実践 ドメイン駆動設計』
    ● はてな社内で開催したDDD勉強会
    の様子をご紹介します (2015)
    ● DDD的な用語が通じやすく

    View Slide

  83. はてなブックマーク 再リニューアル
    はてなブックマーク in Scala (2015)

    View Slide

  84. Perl も健在
    ● 開発の高速さ・知見
    ● 運用経験
    ● BrandSafeはてな (2014)
    ● 受託サービス複数

    View Slide

  85. その他
    ● 東京オフィス
    ● シニアエンジニア制度
    ● Slack 導入
    ● 社長交代
    ● 上場

    View Slide

  86. 考察

    View Slide

  87. フレームワークから見た歴史
    ● Hatena
    ● Hatena2
    ● Ridge + DBIx-MoCo
    ● “薄い”フレームワーク
    ● Not Only Perl

    View Slide

  88. フレームワークは何をしたのか
    ● サービス開発を加速する
    ○ スピード
    ○ 量
    ● 技術スタックを規定する
    ○ Apache
    ○ Perl

    View Slide

  89. 近代以降のフレームワーク
    ● 設計指針
    ● サービス開発の枠組みとして共有

    View Slide

  90. フレームワークをもたらしたもの
    ● 明示的
    ○ コード(社内・OSS)
    ○ 日記・プレゼンテーション
    ● 暗黙的
    ○ それまでの経緯
    ○ 開発者たちの空気

    View Slide

  91. 暗黙知と形式知
    ● 組織の知識は暗黙知と形式知の
    間を行き来しながら発展する
    ○ 時代の空気とプレゼンテーション

    View Slide

  92. 歴史とは何か
    「歴史とは歴史家と事実との間の
    相互作用の不断の過程であり、
    現在と過去との間の尽きることを
    知らぬ対話なのであります。」

    View Slide

  93. 歴史を語ること=今を語ること
    ● 「現在」のもつ文脈は透明
    ● 過去から現在を語ることによる相対化
    ● 10年後、今を知るための足がかりとして

    View Slide

  94. まとめ
    ● はてなの創業から現在までを回顧
    ● 未来に思いを馳せた
    ● ありがとうYAPC

    View Slide

  95. View Slide