Post on 24-Jan-2017
「新しい」を生み出すためのWebアプリ開発とその周辺
YAPC::Asia 2012Yusuke Wada a.k.a. yusukebe
0. イントロダクション
自己紹介•和田裕介 1981/12/23 生•慶応義塾大学政策メディア研究科修了•株式会社ワディット代表取締役社長•株式会社オモロキ取締役
0. イントロダクション問いかけ
PerlでWebアプリを作りたいって？
Perlで「新しい」Webアプリをつくりたい
HowだけではなくWhatも大切だよね
企画を含めてスモールスタート時の開発ノウハウ
対象サービス規模•スタートアップから小～中規模•月間1000万PV+αまで•「量は質に転化する」•大規模サービスと小規模だとつくり方が大幅に違う
小さな規模のアプリを効率よく開発し検証していこう
対象オーディエンス•日曜大工的にWebアプリをつくりたい人•少人数によるスタートアッププロジェクト•「Perlを学んで何をしよう...？」•企画/開発の人
1. さぁ何をつくろう
1. さぁ何をつくろう企画にもプロセスがある
哲学 個々人が持つ変わらない思い
アイデア 哲学をかなえる具体的なアイデア
テーマ 勝負する領域
コンセプト 大枠。一言で言い表す
デザイン 見た目に限らないディテール
料理は楽しい
レシピを共有、手順を紹介できる、つくれぽ ...
料理についてのCGMサービス
ユーザーがレシピを共有できるサービス
料理写真をフューチャする、カテゴリ分け ...
cookpadの例
企画のプロセス•いいサービスはプロセスが一気通貫している
•必ずしも順番通りじゃなくてもよい•人に紹介する時に有効
リスクを検証する
そこに潜むリスク•技術リスク•スキルリスク•リソースリスク•政治リスク•法的リスク
努力で解決する回避するあきらめる
sandboxディレクトリで遊ぶ
• ~/work/myapp/sandbox•技術リスク、スキルリスクの検証•単一スクリプトで結果が面白いか？•例 : Web APIの利用
何をつくるか•スタートアップにおいて「何」が大事•企画のプロセスが一気通貫するように•リスクを検証する
2. 事例その1
YourAVHost• 2007/12/27 リリース•現在 1,000万PV/月• linode 2G x 1
哲学
アイデア
テーマ
コンセプト
デザイン
エロ動画を試聴したい、良ければ買おう
エログの情報を元に騙しリンクなしの動画キュレーション
無料エロ動画紹介サービス
AV女優名別などで探せて騙されず動画が見れるエロサイト
AV女優・ジャンルタグの表示、複数動画サイトへの対応
Google Blog検索、Twitter検索からエログを抽出
エログの中から動画共有サイトのURLを取得
動画共有サイトの情報を解析
カテゴライズしてDBに保存
自動キュレーション•システム運用だけで、コンテンツ運用がいらない
•賢いバッチ処理の上、バックエンドでキャッシュを使う
企画が一気通貫しているのでサイトの方向性がぶれない機能追加もほとんどしていない
1. さぁ何をつくろう3. いよいよ開発
Webアプリを構成する要素
•ルーティング•テンプレート•モデルへの接続•セッション管理•バリデーション
WAF＋αで実装
WAFWebApplicationFramework
WAF選定• Catalyst•Mojolicious• Dancer• Amon2•自作、その他
依存が極力少ないものインストールが速い
フルスタックの必要はない（Catalyst+DBIC）
開発している人が複数いる
Mojolicious• Perlの標準モジュールだけに依存• HTTPのreq/resオブジェクトまで自作•使わない機能があるけれどポータブル
枯れつつある技術を使う• DBIx::Skinny/Teng as O/R Mapper•Mouse as Class Builder•MySQL as Database•Memcached as Cache Server
Modelの扱い• O/R Mapperを継承しただけをモデルと扱わない
•MyApp::API or MyApp::Model のようなビジネスロジックを含むAPIをつくる
•コントローラが肥大化することを防ぐ•ロジックの重複を避ける
./lib!"" MyApp# !"" DB/# !"" DB.pm# !"" Model/# !"" Model.pm# !"" Role/# !"" Web/# %"" Web.pm%"" MyApp.pm
ディレクトリ構造
コントローラからの呼び出し
$self->model('Boke')->get_recent_entries();モデルの呼び出し
極力コントローラは書かなくてよいという方向性
Validation&FillInFormif($self->form('Boke')->has_error) { return $self->render_fill('/boke/post');}
FormValidator、HTMLFillInForm の呼び出し
スタートアップには•既存WAF、O/R Mapperに任せてよい•最低限のキャッシュ• No NoSQL！MySQLでおそらく十分•サーバも1台～2台でスタートできる
4. スケーリング
サービスの利用者数が増えた
嬉しい悲鳴
悲鳴を悲鳴のまま終わらせないように
システムが処理できる能力を上げる
スケールアップとスケールアウト
サーバー
スペックを上げる
スケールアップ
サーバー
台数を増やす
サーバー
スケールアウト
サービスがスケールする時
• VPSやクラウドサービスが安いのでスケールアップ/アウトが容易
•マネタイズの時期かも？• PR、お金周りなど苦手なことは他の人に任せることができる
2. 事例その15. 事例その2
bokete.jp•写真で一言ボケるサイト•株式会社オモロキで開発•鎌団子→企画、UI実装•ゆーすけべー→システム• 2008/9/16 ベータ版リリース
5.13事故が起こった
まとめサイト効果• ref スラッシュドット効果• 2chまとめ＋NAVERまとめによる•一時的なものではなく継続した
アラートヤバイ
スケールアップとスケールアウトを狙う
• linode 1GB x 2で運用していた• DBのデータがメモリに乗り切らない•ボトルネックはAppサーバとDBサーバ両方にあり
•ところが...
アプリが他環境で動かない...Catalyst+Pluginに大きく依存動かないPlugin等が多数
アプリのコードを大幅に書き換える必要が
デルタ版に向けた改修作業
•フレームワークをMojoliciousに• O/R MapperをDBIx::Skinnyに•極力依存を無くす•スケールアウトしやすい構成に
工数約一ヶ月の孤独な戦い
レプリケーション構成•参照系はSlave、更新系はMaster• DBIx::Skinny→Master•自作のDBIラッパー→Slave
Master Slave Slave Slave
Bokete::DBx• DBIのラッパー• クエリは SQL::Abstract 形式• ArrayRef、HashRefで返却• search、search_by_sql、single• 適切なinflate• join的な動きを自動でやってくれる• boke -> odai -> photo
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 });
キャッシュの注意•更新頻度によっていつexpireさせるのかをサービスの特性から考える
•ボケてにおいて滅多に変わらないもの• Photo• Odai•デッドロック？に注意
はまった点•サイドバーのキャッシュ•生成するまで時間がかかる• expireした瞬間にデータ生成が一気に始まる
•プロセスを食いつぶしてアプリが止まる
デッドロックへの対策
キャッシュ作成中のフラグを容易キャッシュが無くてもフラグが立っていれば複製しておいたキャッシュを表示させる
7/19 リリース•さくらVPSサーバを複数台利用• JSを含めた表示速度が2倍以上高速に•全体のPVも2倍近くUP•バグがいくつかあった
システムはボケてない
iPhone版 ボケて
• HALO、BraveSoftと共同で開発
•Web APIを用意
10月10日リリース予定
終わりに
マーケティング
プロモーション マーケティング
システム運用
コンテンツ運用
デプロイ ビジネスモデル
チームビルディング
デバイス展開
法律関係
まつわることはまだある
「ぐだぐだ言ってないでコードを書けよ、ハゲ」Mac一つあれば…エディタという道具無ければつくる言語習得にまつわるエピソードデータの表現について分かった瞬間僕がPerlを使うことから見る言語の選択Blogの効用勉強会に飛び込むライブラリという文化実装までにつくる「企画」の全てアイデアの発想法そこに潜むリスクユースケースを書こうデータベース設計クールなURI？Webサービスを動かすための要素30分、JavaScriptで作るWebサービスのモックアップ月額980円のさくらVPSを個人用に使い倒すWeb APIで巨人の肩の上に立ついかにして大量のおっぱい画像をダウンロードするか全裸で学ぶMVC事始めMVCのMについてWAFあれこれテストを書こうイカ娘で学ぶTwitter OAuth認証CSS Frameworkを持つWebサービス、最初の宣伝「普通の」サーバ構成運用してこそWebサービスWebアプリのパフォーマンスアップ作戦キャッシュ、キャッシュ、キャッシュサービスをスケールさせる時
Webサービスのつくり方11月末～12月発売予定
やり方は一つじゃない