はてなのみなさん、京都から東京へようこそだった Hatena Engineer Seminar #2 に参加してきました

今日ははてなのみなさん（全員かどうかわからないですが…）がわざわざ京都から東京にきてくださった Hatena Engineer Seminar #2 に参加してきました。

カバーされたトピックは以下の 3 つでした。

Vagrant と Chef でつくるはてなブックマークの開発環境

はてなにおけるモダンiOSアプリ開発入門

Fluentd, MongoDB, KibanaをつかったはてなブログABテストの事例*1

ご本人たちも認めてましたが、上記の通り 3 つのトピックにまとまりがなかったですね・・・

いい意味にとらえると普段馴染みのない内容にも触れられて有意義だったな、思いました。
一方で、テーマを絞ってくれたほうが聞きたい内容だけ聞ける*2ので、可能だったら次回は対比の意味もこめて、ひとつのテーマに絞った内容でやてみてくれるといいんじゃないかと思います。

アンケートにまではてなの採用に興味があるか？というのをヒアリングするくらい採用強化中を各所でアピールしてたので、むしろ今回の裏メインの目的は人材探しだったのかなぁという印象を受けました。（それならむしろもっと前面にだしてもいいのに、と思ったりしました）

それはさておき、以降にいつもどおりわたしのとってきたメモを公開しておきます。

id:stanaka さんからあいさつ

表参道オフィスができたときに、第一回を開催。約一年ぶり。
今後は頻度をあげてやっていきたい。
京都からやってきたということで、京都らしい写真をスライドの表紙に使ってみた。

＊＊＊＊＊

最近、はてな何やってるか？
Hatena Blog
Hatena Bookmark
年末から年初にかけてしこんでるものもあるでよ

＊＊＊＊＊

今日のトピックの紹介 ( アプリケーションエンジニア向けのトピック )
- Github Enterprise
- TDD
- Elastic Search
- Docker (infra layer)

＊＊＊＊＊

次回以降で話してほしいことがあれば是非ご意見を。

Vagrant と Chef でつくるはてなブックマークの開発環境

id:aereal (アプリケーションエンジニアはてなブックマークチーム)
- 開発環境をプログラマブルにする Vagrant と、ソフトウェア・インフラストラクチャをプログラマブルにする Chef を用いてはてなブックマーク開発環境を整備した体験とその方法を紹介します。

＊＊＊＊＊

はてなブックマークのこれまで
Vagrant + chef による実際の運用と課題

＊＊＊＊＊

基本的な話はしない
- Vagrant とは？
- Chef とは？

＊＊＊＊＊

はてなブックマークの紹介
- 200502- から
- 200811 に大幅リニューアル

＊＊＊＊＊

はてなブックマーク
- Ridge (自社製 WAF)
- DBIx::Moco (自社製 OR mapper)
- >= 30000 commits
- >= 7000 files
  速すぎてメモれず、資料の公開を期待

＊＊＊＊＊

複雑な依存関係→依存の解決のために構成管理ツール
- 本番では Chef, RPM で Perl のモジュール管理
- Dev では cpanm, Homebrew, etc...
環境
- 本番: CentOS
- dev: OSX, Windows, Linux (debian)

＊＊＊＊＊

大体、本番環境に反映しようとすると失敗する (本番と dev で構成が違うから)
- なのでやったこと
- そもそも文書を残す
- なんだが・・・
- コードやコミットに表れないもの
  - 経緯、文脈
- 結局、どうすればいいのか、は遠い
  - モチベーションの消費
    ↓
その結果、プログラマブルな環境構築をしようという話になった
- そのメリット
  - 単純作業の積み重ね (オプション引数の試行錯誤とか) が生きる
  - ログが残る
  - 壊れたらすぐわかる

＊＊＊＊＊

結局結果として Vagrant を使うことにした
- ようは VM を立ち上げてくれる
- Chef との連携を活用
- 丹精込めてつくった VM イメージは保存しなくてよくなった

＊＊＊＊＊

Vagrant のバッドノウハウも溜まってきている
- e.g. NFS でゲストとリポジトリを共有する
  - Virtualbox の Shared folder は遅い、最大 20 倍遅い

＊＊＊＊＊

どのようにはてなブックマークの開発環境を整えているか
- perl-build で perl-5.8.8 をいれる
- CPAN モジュールを cookbook に記述
- バージョンを指定してインストールする LWRP

＊＊＊＊＊

問題はある
- すぐに開発したい！ときにプロビジョニングにかかる時間が長い、遅い
- 対策として
- provisioning まで済ませた box を配る
- 社内ファイルサーバにおいてある、 FTP アクセスも可能にしてある

＊＊＊＊＊

本番、 dev の二重管理は解決できてない
- 本番に適用される Chef recipe と連携を考えてる

＊＊＊＊＊

Vagrant も銀の弾丸ではない
では、なんで使ってるのか？
はてなブックマークでは以下の特徴があるので、恩恵を得られるところが大きいから
- バージョン制約が強い
  - CPAN module
  - MW
- 新たに開発に参加する人が一定数いる
  - インターンだったり異動だったり

＊＊＊＊＊

Vagrant も使わないで済むなら済むのが理想

＊＊＊＊＊

バージョン管理
- Carton
- plenv/perlbrew
- Chef Solo

＊＊＊＊＊

複雑さの代償をはかる

はてなにおけるモダンiOSアプリ開発入門

id:cockscomb (アプリケーションエンジニアはてなブログチーム)
- はてなにおけるiOSアプリ開発で用いられる技術や手法を、はてなインターンの講義を下敷きに、最新のiOS開発のトレンドであるStoryboardやAuto Layoutに加え、iOS 7への最適化や、KVOを用いたMVCによる効果的な設計、単体テストからUIテストの技法までまるごと紹介します。

＊＊＊＊＊

はてなのアプリ
はてなブックマーク
はてなブログ
はてなスペース
近々、もうひとつできる予定

＊＊＊＊＊

iOS7 対応中、フラットな感じにしたい

＊＊＊＊＊

はてなブックマーク iOS SDK の提供を開始した

＊＊＊＊＊

はてなにおけるアプリ開発
- HTML5
- Tinatium
- RubyMotion
- Native + WebView (はてなではこれが主流)

＊＊＊

新規開発のときのフロー
- アプリの方向性を決定
- ペーパープロトタイピング
- ユーザテスト
- 社内 iOS 端末ユーザに TestFlight
- アプリリリース
- ユーザの同意を得てトラッキング

＊＊＊

はてなブログアプリ
- しっかりとブログをかけること
- 書きやすいこと
- どこにいてもかけること
- FB を得られること (アクセス解析的な機能)

＊＊＊

ペーパープロトタイピングの例
ユーザテストの様子
計測

＊＊＊＊＊

サマーインターン 2013
- Web API を利用する iOS アプリ開発
- github.com/hatena でやってる講義の内容をみることができる
- iOS7 に対応したサンプルコードが今日 up されているとのこと

＊＊＊＊＊

はてな iOS アプリ開発のテクニック
- CocoaPods
- UIStoryboard (iOS5 くらいからの技術: GUI) 画面はたくさんあるから GUI 使ったほうが見通しがよかろう
- Auto Layout (View の Layout の制約をつくれる)
- Key Value Observation (オブジェクトのあるプロパティを監視する仕組み: 監視、通知、更新)

＊＊＊

テスト
- Test Frameworks
  - OCUnit/XCtest
  - Kiwi (BDD 。テストを書きやすくするために使っている。非同期に行われる処理のテスト、モックのテストにも。ポピュラー)
  - Nocilla (ネットワーク Stub)
  - UIAutomation (統合テストに使われている。 KIF も使っていきたい)

＊＊＊＊＊

はてなについて (最後は脱線)
- スマートフォン重視
- スマートフォンからのトラフィックは無視できない
- 大きな裁量
- 企画から設計、スピード感ある開発
- 開発手法も日々変化
- エンジニアの自主性でどんどん変えていける
  ↓
スマートフォンアプリエンジニアを積極採用中

Fluentd, MongoDB, KibanaをつかったはてなブログABテストの事例

id:shiba_yu36 (アプリケーションエンジニアはてなブログチーム)
- はてなブログではサービス改善のためのABテストを日々実施しています。ABテスト実施や結果の集計や可視化に Fluentd, MongoDB, Kibana などを利用している事例を具体的に紹介します。

＊＊＊＊＊

はてなブログでの AB テスト事例紹介
サービスの改善に AB テストを導入
ランディングページの改善、編集画面の改善

＊＊＊

ランディングページの改善でどんなことをしたのか？
- 登録ボタンのクリック数を伸ばしたい
- ボタンとフォーム、どっちがクリックされるのか？を解析した
  →結果としてはフォームのほうがクリックされた 30% -> 39% 、 9% 上昇した
AB テストをすると
- 推測ではなく、数字を検証しながら改善ができる
- 開発者のかんで作らない
- 失敗しても振り返りができる

＊＊＊

日々、 AB テストをやるためには
- とにかく簡単でないとダメ

＊＊＊＊＊

簡単に AB テストを行う仕組み
手順は 3 ステップ
- 表示を出し分ける
- ボタンをクリックしたときにログを記録
- あつまったログを集計・グラフ化

＊＊＊

できるだけ簡単に
- 表示のだしわけ chanko のような仕組み
- クリックログの記録 fluentd
- 集計・グラフ化 mongoDB, kibana

＊＊＊

表示の出し分け
- IP address
- ruby の chanko (cookpad)

＊＊＊

クリックログの記録
- 簡単な流れ
- クリックされたイベントをサーバにおくる (JS イベント送信)
- サーバ上では AB テスト情報とともに JSON で記録
- JSON ログは fluentd で中央サーバにあつめる

＊＊＊

JS でイベント送信
- data-event-name 属性を書いておくだけで送信するような仕様

＊＊＊

サーバで情報つけて JSON に記録

＊＊＊

最後にそのログを中央に集める
- どこで記録されてもうまく集められたい
- そこで fluentd を利用

＊＊＊

ログを集める構成
- 各サーバはログファイルに1ログ1行のJSONとして出力
- fluentd で中央のサーバにあつめる

＊＊＊

ここまでまとめ
- 独自データ属性をつけるだけ
- ログは自動で fluentd で中央サーバに集められる

＊＊＊

あつまったログの集計・グラフ化はどうやってやっているのか？
集約化されたログ
今はあつまっているだけ中央サーバに

＊＊＊

集計・可視化したい、その手法
柔軟に集計したい→　MongoDB
簡単にグラフ化→ kibana

＊＊＊

Fluentd から mongoDB
fluent-plugin-mongo を利用
Fluentd 設定例 (資料参照)
mongo で集計、 JS でクエリをつくり、集計している
- クエリを工夫すれば柔軟に集計

＊＊＊

グラフ化をどのように可能にしているのか
柔軟に集計出来るだけで目的は達成していたんだが
毎回クエリを書くのは大変、グラフ化もしたいと思うように
↓
Elastic Search + Kibana をつかうように

＊＊＊

Kibana とは？
- Elastic Search のインデックスを利用し、 Web 上で様々なグラフをつくるツール

＊＊＊

Fluentd -> Elastic Search に
(Fluentd の設定例は資料が公開されるのを期待)
- fluentd-plugin-elasticsearch と数行の config
- Kibana は Elastic Search をみるように設定

＊＊＊

グラフ化のデモ
全データを表で表示
クリックデータのみに絞込
AB テスト状況を棒グラフで比較

＊＊＊＊＊

ここまでのまとめ
- Fluentd のログは MongoDB, Elastic Search に
- Mongo で簡単に集計
- Kibana で簡単にグラフ化

＊＊＊＊＊

全体のシステムの概要 (図: 資料がよい)

＊＊＊＊＊

まとめ
- はてなブログでも AB テストやデータ解析やっている
- Fluentd, mongoDB, Kibana をつかった簡単な AB テストの仕組みを紹介

質疑応答 (最後にまとめて)

Q. 開発時の初期データはどうやって準備しているのか？
A. 直接開発用の DB に接続するようになっている。直接手元にデータはおいてないデータは共有している。

＊＊＊＊＊

Q. StoryBoard の困った点
A. 人間の読めない異常な XML が生成される。複数人で開発する場合、コンフリクトすると職人芸が求められるようになってしまう。

＊＊＊＊＊

Q. どの機能を AB テストするかは誰が決めているのか？
A. 簡単な仕組みをつくることができたので、 AB テストを簡単に提案できるようになった

＊＊＊＊＊

Q. AB テストの結果
A. パフォーマンスの話。いまのところあまり考えなくてもなんとかなってる。具体的な数字は、アプリケーションエンジニア的にはよくわからない。
一回の Mongo の集計は、簡単なクエリなら 2-3sec で返ってくる
いまのところ、重いクエリでは 30sec ほど
クエリが重すぎて怒られることはある

＊＊＊＊＊

Q. iOS 開発、CI サーバは？
A. 一回やって失敗。 MBP をあげっぱで閉じないでくださいとかしてたことも。今は滅びた状態が続いてる

余談

勉強会の冒頭に諸注意として、登壇者の写真は Ok だが、参加者の写真はご遠慮を、ということを言っていただけたのはとても良かったと思いました。さすが、はてなさんは配慮ができていて違うなぁ、と。たまに主催者がバシャバシャ写真撮りまくって、後日参加者の許可なく個人特定できる写真を up しているところとかがあったりするので見習ってほしい。