YAPC::Asia 2012

1. 「新しい」を生み出すための
Webアプリ開発とその周辺
YAPC::Asia 2012
Yusuke Wada a.k.a. yusukebe

2. 0. イントロダクション

3. 自己紹介
• 和田裕介 1981/12/23 生
• 慶応義塾大学政策メディア研究科修了
• 株式会社ワディット代表取締役社長
• 株式会社オモロキ取締役

4. 0. イントロダクション
問いかけ

5. PerlでWebアプリを
作りたいって？
Perlで「新しい」Webアプリをつくりたい
HowだけではなくWhatも大切だよね
企画を含めてスモールスタート時の開発ノウハウ

6. 対象サービス規模
• スタートアップから小∼中規模
• 月間1000万PV+αまで
• 「量は質に転化する」
• 大規模サービスと小規模だとつくり方
が大幅に違う
小さな規模のアプリを効率よく開発し検証していこう

7. 対象オーディエンス
• 日曜大工的にWebアプリをつくりたい人
• 少人数によるスタートアッププロジェクト
• 「Perlを学んで何をしよう...？」
• 企画/開発の人

8. アジェンダ
1. 企画
2. 事例その1
3. 開発
4. サービスのスケール
5. 事例その2
http://bokete.jp

9. 1. さぁ何をつくろう

10. 1. さぁ何をつくろう
企画にもプロセスがある

12. 哲学
個々人が持つ変わらない思い
料理は楽しい
cookpadの例
アイデア
哲学をかなえる具体的なアイデア
レシピを共有、手順を紹介できる、つくれぽ ...
テーマ
勝負する領域
料理についてのCGMサービス
コンセプト
大枠。一言で言い表す
ユーザーがレシピを共有できるサービス
デザイン
見た目に限らないディテール
料理写真をフューチャする、カテゴリ分け ...

13. 企画のプロセス
• いいサービスはプロセスが一気通貫
している
• 必ずしも順番通りじゃなくてもよい
• 人に紹介する時に有効

14. リスクを検証する

15. そこに潜むリスク
• 技術リスク
• スキルリスク 努力で解決する
• リソースリスク 回避する
あきらめる
• 政治リスク
• 法的リスク

16. sandboxディレクトリで遊ぶ
• /work/myapp/sandbox
• 技術リスク、スキルリスクの検証
• 単一スクリプトで結果が面白いか？
• 例 : Web APIの利用

17. 何をつくるか
• スタートアップにおいて「何」が大事
• 企画のプロセスが一気通貫するように
• リスクを検証する

18. 2. 事例その1

19. YourAVHost
• 2007/12/27 リリース
• 現在 1,000万PV/月
• linode 2G x 1

20. 哲学 エロ動画を試聴したい、良ければ買おう
アイデア エログの情報を元に騙しリンクなしの動画キュレーション
テーマ 無料エロ動画紹介サービス
コンセプト AV女優名別などで探せて騙されず動画が見れるエロサイト
デザイン AV女優・ジャンルタグの表示、複数動画サイトへの対応

21. Google Blog検索、Twitter検索から
エログを抽出
エログの中から動画共有サイトのURLを取得
動画共有サイトの情報を解析
カテゴライズしてDBに保存

22. 自動キュレーション
• システム運用だけで、コンテンツ運用
がいらない
• 賢いバッチ処理の上、バックエンドで
キャッシュを使う
企画が一気通貫しているので
サイトの方向性がぶれない
機能追加もほとんどしていない

23. 1. さぁ何をつくろう
3. いよいよ開発

24. Webアプリを構成する要素
• ルーティング
• テンプレート
WAF＋αで実装
• モデルへの接続
• セッション管理
• バリデーション

25. WAF
Web
Application
Framework

26. WAF選定
• Catalyst
• Mojolicious 依存が極力少ないもの
インストールが速い
• Dancer フルスタックの必要はない
（Catalyst+DBIC）
• Amon2 開発している人が複数いる
• 自作、その他

27. Mojolicious
• Perlの標準モジュールだけに依存
• HTTPのreq/resオブジェクトまで自作
• 使わない機能があるけれどポータブル

28. 枯れつつある技術を使う
• DBIx::Skinny/Teng as O/R Mapper
• Mouse as Class Builder
• MySQL as Database
• Memcached as Cache Server

29. Modelの扱い
• O/R Mapperを継承しただけをモデルと扱
わない
• MyApp::API or MyApp::Model のようなビ
ジネスロジックを含むAPIをつくる
• コントローラが肥大化することを防ぐ
• ロジックの重複を避ける

30. ディレクトリ構造
./lib
!"" MyApp
# !"" DB/
# !"" DB.pm
# !"" Model/
# !"" Model.pm
# !"" Role/
# !"" Web/
# %"" Web.pm
%"" MyApp.pm

31. コントローラからの呼び出し
モデルの呼び出し
$self->model('Boke')->get_recent_entries();
極力コントローラは書かなく
てよいという方向性

32. Validation&FillInForm
FormValidator、HTMLFillInForm の呼び出し
if($self->form('Boke')->has_error) {
return $self->render_fill('/boke/post');
}

33. スタートアップには
• 既存WAF、O/R Mapperに任せてよい
• 最低限のキャッシュ
• No NoSQL！MySQLでおそらく十分
• サーバも1台∼2台でスタートできる

34. 4. スケーリング

35. サービスの利用者数が増えた
嬉しい悲鳴
悲鳴を悲鳴のまま終わらせないように
システムが処理できる能力を上げる

36. スケールアップとスケールアウト
スペックを上げる
台数を増やす
サーバー サーバー サーバー
スケールアップ スケールアウト

37. サービスがスケールする時
• VPSやクラウドサービスが安いのでス
ケールアップ/アウトが容易
• マネタイズの時期かも？
• PR、お金周りなど苦手なことは他の人
に任せることができる

38. 5. 事例その2
2. 事例その1

39. bokete.jp
• 写真で一言ボケるサイト
• 株式会社オモロキで開発
• 鎌団子→企画、UI実装
• ゆーすけべー→システム
• 2008/9/16 ベータ版リリース

45. 5.13
事故が起こった

47. まとめサイト効果
• ref スラッシュドット効果
• 2chまとめ＋NAVERまとめによる
• 一時的なものではなく継続した

48. アラートヤバイ

49. スケールアップとスケール
アウトを狙う
• linode 1GB x 2で運用していた
• DBのデータがメモリに乗り切らない
• ボトルネックはAppサーバとDBサーバ
両方にあり
• ところが...

50. アプリが他環境で
動かない...
Catalyst+Pluginに大きく依存
動かないPlugin等が多数
アプリのコードを大幅に書き換える必要が

51. デルタ版に向けた改修作業
• フレームワークをMojoliciousに
• O/R MapperをDBIx::Skinnyに
• 極力依存を無くす
• スケールアウトしやすい構成に
工数約一ヶ月の孤独な戦い

52. レプリケーション構成
• 参照系はSlave、更新系はMaster
• DBIx::Skinny→Master
• 自作のDBIラッパー→Slave
Master Slave Slave Slave

53. Bokete::DBx
• DBIのラッパー
• クエリは SQL::Abstract 形式
• ArrayRef、HashRefで返却
• search、search_by_sql、single
• 適切なinflate
• join的な動きを自動でやってくれる
• boke -> odai -> photo

54. DBxのキャッシュ
• クエリから自動的にキーをつくりキャッシュ
my $key = "dbx:$table:"
. $self->make_key( [ '*', $where, $order ] );
my $bokes = $self->dbx->search(
'boke',
[ $cond, ],
[ { -desc => 'rate_sum' } ],
{
limit => $limit,
offset => $offset,
expire => 60 * 10
}
);

55. キャッシュの注意
• 更新頻度によっていつexpireさせるの
かをサービスの特性から考える
• ボケてにおいて滅多に変わらないもの
• Photo
• Odai
• デッドロック？に注意

56. はまった点
• サイドバーのキャッシュ
• 生成するまで時間がかかる
• expireした瞬間にデータ生成
が一気に始まる
• プロセスを食いつぶしてアプリ
が止まる

57. デッドロックへの対策
キャッシュ作成中のフラグを容易
キャッシュが無くてもフラグが立っていれば
複製しておいたキャッシュを表示させる

58. 7/19 リリース
• さくらVPSサーバを複数台利用
• JSを含めた表示速度が2倍以上高速に
• 全体のPVも2倍近くUP
• バグがいくつかあった

59. システムはボケてない

60. iPhone版 ボケて
10月10日リリース予定
• HALO、BraveSoftと
共同で開発
• Web APIを用意

61. 終わりに

62. マーケティング
デバイス展開
チームビルディング マ
プロモーション
まつわることはまだある
法律関係 コンテンツ運用
デプロイ
ビジネスモデル
システム運用

63. Webサービスのつくり方 「ぐだぐだ言ってないでコードを書けよ、ハゲ」
Mac一つあれば…
エディタという道具
11月末∼12月発売予定 無ければつくる
言語習得にまつわるエピソード
データの表現について分かった瞬間
僕がPerlを使うことから見る言語の選択
Blogの効用
勉強会に飛び込む
ライブラリという文化
実装までにつくる「企画」の全て
アイデアの発想法
そこに潜むリスク
ユースケースを書こう
データベース設計
クールなURI？
Webサービスを動かすための要素
30分、JavaScriptで作るWebサービスのモックアップ
月額980円のさくらVPSを個人用に使い倒す
Web APIで巨人の肩の上に立つ
いかにして大量のおっぱい画像をダウンロードするか
全裸で学ぶMVC事始め
MVCのMについて
WAFあれこれ
テストを書こう
イカ娘で学ぶTwitter OAuth認証
CSS Frameworkを持つ
Webサービス、最初の宣伝
「普通の」サーバ構成
運用してこそWebサービス
Webアプリのパフォーマンスアップ作戦
キャッシュ、キャッシュ、キャッシュ
サービスをスケールさせる時

64. やり方は一つじゃない