「新しい」を生み出すためのWebアプリ開発とその周辺

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

0. イントロダクション

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

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

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

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

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

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

1. さぁ何をつくろう

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

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

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

リスクを検証する

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

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 フルスタックの必要はない（Catalyst+DBIC）• Amon2 開発している人が複数いる• 自作、その他

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&FillInFormFormValidator、HTMLFillInForm の呼び出しif($self->form(Boke)->has_error) { return $self->render_fill(/boke/post);}

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

4. スケーリング

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

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

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

5. 事例その22. 事例その1

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• 適切なinﬂate• 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版ボケて10月10日リリース予定• HALO、BraveSoftと共同で開発• Web APIを用意

終わりに

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

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アプリのパフォーマンスアップ作戦キャッシュ、キャッシュ、キャッシュサービスをスケールさせる時

やり方は一つじゃない

http://yusukebe.com	2813
http://yosuke-furukawa.hatenablog.com	1313
http://127.0.0.1	921
http://d.hatena.ne.jp	846
http://yapcasia.org	399
http://toda.sg	273
https://twitter.com	75
http://shiinaneko.tumblr.com	14
https://si0.twimg.com	12
http://s.deeeki.com	11
http://takaiwawebclip.tumblr.com	8
http://tweetedtimes.com	7
http://twitter.com	5
https://t.co	5
http://webcache.googleusercontent.com	5
http://hatena-anohito.appspot.com	3
https://twimg0-a.akamaihd.net	1
http://www.mefeedia.com	1
http://safe.tumblr.com	1
http://localhost	1

「新しい」を生み出すためのWebアプリ開発とその周辺

by Yusuke Wada on Sep 29, 2012

Accessibility

Categories

Upload Details

Usage Rights

20 Embeds 6,714

Statistics

「新しい」を生み出すためのWebアプリ開発とその周辺 Presentation Transcript