Jonathan Cutrell「Obama陣営のエンジニア／デザイナーチームの一人に一問一答した」
Nettuts+ 2012.11.26のブログエントリ
Chatting with Obama For America’s Director of Frontend Development: Daniel Ryan | Nettuts+
- 2012年大統領選挙のObama陣営のネット戦略を担うエンジニア・デザイナーチームの中人へチャットでインタビュー
- 使ったツールから、教訓とか色々書いてる
- jekyll,cssプリプロセッサ、github、高速化ツール、ec2,s3,rails,django,magengo
- モバイルはトラフィック多い（全体の1/4）けど献金はほぼゼロ、とか
- 前回(2008年)の選挙のときは肝心なときにシステム障害を起こした件
- それを踏まえて今回はどうやったか
- Romney陣営は敵陣営の失敗から学ばなかった（肝心なときに同じ障害を味わった）
知らなかったこととか書いてて勉強になった
以下斜め読んだ内容
- Q：デザイン・開発チームにとって、大統領選期間の最大のチャレンジ
- A：
- たくさんのプロジェクトが毎日同時に動いてること
- いろんな要件がチームにどんどん飛び込んできた
- 資金集めだったり、支持者集めだったり、投票所への有権者の誘導だったり
- デザインは、支持者の意見、陣営のポリシー、法律等々を見て調整
- 数日、数時間で新規プロジェクトがスタートしてる
- Q：A/Bテスト、データドリブンな意思決定。どう使ったのか
- A：
- Obamaチームはデータドリブンとよく言われてるが、誇張されてる
- データドリブンなアプローチもあれば、そうでないもの色々組み合わせてやってた
- a/bテストツール：optimizely
- 毎日テストを走らせ、週次レポートでは、毎回ベストプラクティス、（PDCAの）Actionも載せてた
- 例えば献金での実績：前回比で125万ドル増加を達成
- Q：スタックの構成
- A：
- Q：使ったオープンソースのツール。プロダクション環境、デプロイ時のプラン
- A：
- jsのメインライブラリ：jquery、modernizr
- jqueryプラグイン：Fitvids.jsをよく使ってた
- テンプレートエンジン：mustache
- レスポンシブデザイン：やってみた。選挙陣営のサイト初じゃないか？
- cssプリプロセッサ
- less
- ツールはcodekit
- lessはチームのエンジニアに教えてもらったその日のうちに、less導入を完了させた
- 2011年10月のサイトテコ入れやってる時
- less導入のスピードの速さ
- 何かいい方法があればすぐ変えるような体制でやってたから
- git使った。ソースはgithubにホスト
- githubの中の人が書いてるgithub活用法をわりと忠実に守ってやってた
- How GitHub Uses GitHub to Build GitHub
- ローカルでブランチを切る
- レビューとテストできる段階になったらレポジトリに
- gitタグつける。レビュー、テスト、ステージング
- コードレビュー、QAやる
- masterブランチへプルリクエスト
- プルリクエストのレビュー。リードエンジニアとシニアエンジニアがやる
- 静的ファイル；S3にホスト
- サーバーサイドのコード；一旦DevOpsチームにデプロイリクエスト出す
- devopsチーム；puppetとgippetto使ってapk作ってた
- 小規模なコード変更：オンザフライでデプロイ
- 大規模なコード変更；新サーバクラスタにまずはデプロイ。内部テストしてから、古いクラスタと置き換え
- いつもこのフローでやってたわけではない
- 2011年8月にチームに参加したとき、dev環境、ステージング環境とかもなかった
- ステージング環境の導入はすぐに終わった
- cmsだけはローカル環境の構築とメンテがずっと大変なまま終わりを迎えた
- Q：サイトデザインの作り方
- A：
- デザインチームからたたき台
- エンジニアチーム、デザインチームそれぞれがアイディアを出してた
- データをもとに絞り込んでた
- クールなアイディアよりも結果出せるかどうか
- すぐれたデジタルエージェンシーの体制に近い
- PM、リーダー級メンバーが集まってキックオフ
- 方向性を決めててく、キックオフのメンバー間でフィードバック出し合ってまとめてく
- プロジェクトの中身がまとまったら、プロジェクトの中身を細かくしてく
- デザインはカンプ作ったり、エンジニアはプロトタイプ作り。これを繰り返す
- テストに回す
- 2012年夏ごろは１０以上のプロジェクトが同時に進んでた
- Q：ロムニー陣営は技術的問題を色々抱えてた。サーバー落ちたり。ハードウェア故障とか。Obama陣営はこの手の問題を回避に成功したきっかけ
- A：
- 自分（＝Daniel Ryan）は今回の選挙がはじめて。前回は中の人じゃなかった
- 前回の経験者がたくさんいた
- 2008年選挙のときにObama陣営のシステムで一度失敗を経験してる
- 投票者の動向をリアルタイムモニタリングシステムでHoudiniと呼ばれたやつ
- Romney陣営は今回の選挙では前回Obama陣営が失敗したシステムとよく似たシステム（Orcaと呼ばれた）を使ってた
- Orca Failed; but So Did Obama's 2008 Version of the Same - Ben Jacobs - The Atlantic
- 失敗をふまえ単一障害点をもつシステムを選ばなかった
- 冗長な構成にした
- 例えば支払いシステム
- Q：レスポンシブデザインは役に立った？モバイルファーストでデザインした？
- A：
- jquery mobileベースで最初開発。テンプレートは２つだけ
- テンプレート２つだけで回してるとスケールアウトできなかった
- トラフィックの1/4はモバイル経由
- モバイル経由の献金はほぼゼロ
- 2011年秋に大規模なテコ入れ
- モバイルファースト、レスポンシブで行くのが当然という感覚だった
- みんなゼロから勉強した
- モバイルファーストでは、横幅(width）でなく、低帯域にフォーカスするべき
- 320px幅のデザインから始めるのがモバイルファーストじゃない
- 低帯域環境でのエクスペリエンスから取り組むのがモバイルファースト
- モバイルファーストは包括的なもの
- コンテンツ作成では、ユーザフレンドリーにすること
- デザインは柔軟にしていくこと
- コードは量を切り詰めること
- Q：大規模なデプロイから一番学んだこと
- A：
- 有能なエンジニアの獲得が超大事
- 効率性の追求をできるエンジニアが構成するスタックの全てのレイヤーで必要
- スケールアウトが必要なときにその時点のチームでは力不足だった
- 有能な人が必要なことにすぐ気づいて雇うことができた
- Q：オバマチームのマネージメントの仕組み
- A：
- プロジェクトごとに変わる
- 献金、支持者集め、投票所への誘導。これが３大ミッション
- オンライン関連だと、デジタル部門、テック部門に別れるが、相互連携はかなり多く、自分（＝Daniel）は調整役として主にやってた
- obama陣営の中で、オンライン系チームは分離された形で機能してたが、陣営のオフライン／オンラインのおぼあらゆる局面に関係してた
- 次回（2016年大統領選挙）では、陣営の体制は今回までのヒエラルキーのある構造から、マトリックス構造に変わっていく、と予想してる
終わりに
- Danielのtwitter/blogで追加情報ある、かも
コメント欄
