2013/02/23 Kansai.pm 第15回ミーティング / Yusuke Wada a.k.a. yusukebe

1. 「Webサービスのつくり方」
のつくり方
2013/02/23 Kansai.pm 第15回ミーティング
Yusuke Wada a.k.a. yusukebe

2. 自己紹介
• 和田裕介 1981年生＝31歳
• ゆーすけべー / yusukebe
• 神奈川県出身 / 在住
• (株) ワディット代表取締役社長
• (株) オモロキ最高技術責任者

4. 最近のお仕事
• オモロキ業務
• ボケて 開発 運用
• 7割程度
• ワディット業務 http://bokete.jp/
• メルマガ、執筆、講演
• 3割程度

5. ボケて
• 写真で一言ボケるWebサービス
• PC 2000万PV / month
• スマホWeb 250万PV / month
• iPhone / Android アプリ 計100万DL
• 総 PV 1億PV弱 / month
• Webサイド、バックエンドを一人で開発 / 運用
• コラボ企画、モバイル更新、PC新UI

6. そういえば...

7. 本を出しました
• Webサービスのつくり方
• 技術評論社さんから2012/11/20発売

8. ということで...

9. 今回のアジェンダ
• 書籍を書いて出版した裏側や経緯
• 本を書くのに使えるツール等の紹介
• チームで開発していくことの留意点
• よりツッコんだ Perl の話など
• エンジニアが本を書くことへの考え

10. 念願の書籍出版

11. 実は 2009年 から...
• 技評の細谷さんに声をかけてもらい...
• 小飼弾のアルファギークに逢いたい❤ 出演
• WEB+DB Press Vol. 54 特集

12. 「書籍を書かないか？」
と言われて2010年頭には Perl本 の提案 をした

13. ちょw 本出したの
2012年末だぜwww

14. 3年越しの目的達成
細谷さんありがとうございます

15. 本はとにかく出したかった
• 昔から本が好きだった
• 自分でも何かしら書いてみたかった
• 収入的なモノは求めてない
• 本を出版する仕組みが知りたかった
• ハクをつけるため

16. 3年かけてよく書けたね？
• Perl 本 からの方向転換
• 一番興味のある Webサービス に焦点
• 網羅的につくり方を紹介する
• まぐまぐ！で 2012年2月からメルマガ開始
• メルマガ内の連載を書籍にする戦略
• 結局これが功を奏した

17. 33のエッセイという
切り口

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

19. 本書の意図と企み
• メルマガ連載とエッセイ形式は相性がいい
• 個人的にエッセイが好きだったり...
• どこから読んでもいい。技術書には珍しい
• Webサービスの制作について俯瞰できるよう
• 個別のツッコんだテクはググってもらう
• 何かつくりたい！と思ってもらうように！

20. 出してみての評判と感想
• Amazonレビュー ★5 x 4 / ★3 x 3
• Blogでの評判もまずまず
• やる気が出たという意見
• 狙い通りで嬉しい！
• 読みやすいという意見
• 想定してなかったけど嬉しい！

21. 出版の行程

22. • 2012年2月から8月 原稿執筆
• 9月上旬 脱稿
• 9月〜10月 編集、ゲラ上がり、修正
• 10月 装丁デザイン作成
• 11月上旬 印刷所入稿
• 11月13日 見本誌完成
• 11月20日 一般発売
• 11月30日 販促イベント

23. こだわり

24. コード例は
Perlで
Perlはほどよく冗長に書けば
読みやすいから

25. 技術書として異質に
• 装丁に対してツッコんで要望
• 編集会社さんの打ち合わせにも同席
• イラスト書いてもらった！

26. 個人的に愛せる
本ができた！
読んでくれた方
細谷さん、出版会社さんありがとうございます

27. 原稿を書く時の武器

28. Markdown+Byword

29. Dropboxで共有

30. プレビューもしたいよねー
ってことで...

31. 自作アプリ「Dropdown」

32. Dropdown
• 自分のDropboxファイルをブラウザか
らプレビュー出来るWebアプリ
• Markdownっぽい拡張子のファイルは
Text::Markdownを使って整形表示
• Dropbox APIの開発モードだと1アプリ
につき5アカウントまでが自由に使える

33. use WebService::Dropbox
sub login {
my $self = shift;
my $dropbox = $self->app->dropbox;
my $url = $dropbox->login( $self->req->url->base . '/callback' );
$self->session(
request_token => $dropbox->request_token,
request_secret => $dropbox->request_secret
);
$self->redirect_to($url);
}
sub callback {
my $self = shift;
my $dropbox = $self->app->dropbox;
$dropbox->request_token( $self->session('request_token') );
$dropbox->request_secret( $self->session('request_secret') );
$dropbox->auth;
$self->session(
access_token => $dropbox->access_token,
access_secret => $dropbox->access_secret,
);
$self->redirect_to('/');
}

34. use Text::Markdown
use Text::Markdown qw/markdown/;
...;
if ( $name =~ m!.(?:md|mkdn|markdown|mkd|mark|mdown)$! ) {
$content = decode_utf8($content);
$self->stash->{markdown_html} = markdown($content);
return $self->render(
template => 'dropbox/markdown',
format => 'html'
);
}

35. 結果的に便利だった
http://github.com/yusukebe/Dropdown

36. デモ

37. もっと書きたかった
今だから言いたい事

38. チームでのWebサービス企画
• 一人で小さい規模から始めること
以外のWebサービス企画
• チームビルディング
• 打ち合わせ、ブレインストーミング
• リーダーシップ
• 戦略とマネタイズ

39. ざっくりと答えを言うと

40. 楽しくやろう！

41. オモロキの例
• 自然と気の合う仲間が集まって来た...
• 話し合いのルールを暗黙の了解で
• みんながリーダーシップを発揮する
• 打ち合わせはダラダラしない
• 最初は意見を否定しない
• マネタイズは後から

42. Perlのツッコんだ話
もしたかった！

43. Mojolicious 推し！

44. Mojolicious
• 薄い Web Application Framework
• no O/R Mapper, not full-stack, but
components are full-stack.
• つまり Mojolicious だけ追えばいい
• Router, Controller, Template が主力
• ModelはPerlオブジェクトで作りつなぐ

45. 実はKindle出版を目指してMojoilcious本を書いてる...

46. MVCのモデルについて
• Modelにビジネスロジックをまとめる
とお得なのが分かるケース
• PC用Webとスマホ用Webをつくる時
• Command Line Interface からの利用
• ある程度大きくなると「Controllerと
分けててよかった」感

47. ボケてでの事例
Bokete::Web::Controller::Boke
Bokete::Model::Boke Controllerからの呼び出し
my $b = $self->model(‘Boke’);
my $bokes = $b->recent_entries({},
Bokete::DBx { page => $page, limit => 20 });
$self->stash->{bokes} = $bokes;
SQL::Abstract::Limit + DBI
MySQL or Memcached

48. Validationも工夫
• form -> FormValidator::Lite
• data on Model -> Data::Validator
# controller
if($self->form('Boke')->has_error) {
return $self->render_fill('/boke/post');
}

49. 開発しつつ運用
• VPSを使ってもいいのは2台まで！？
• ボケてをAWSへ移行した！
• さくらVPSで10数台を使ってた...
• 運用は自動化 / 委譲をして楽をする
• Cinnamon かわいいよ

51. Cinnamon
$ cinnamon web deploy:update
$ cinnamon web server:restart
naoyaさんのレシピほぼまんま使ってるよ！
Perlだからconfig.plで条件分岐もすぐ書けちゃう！
とにかくシンプルだから「何やってるか分かる感」！

52. そろそろ締める...

53. エンジニアが
本を書くこと

54. ぐだぐだ文章書いてないで
コード書いてた方が
いいんじゃね？

55. 確かに
でも書きたかった...

56. Why?

57. 気づかせてくれた紹介文
Sendai.pmの後藤さんによる

59. そうか！
モノをつくる楽しさを
伝えたいんだった！

60. 俺はPerl他を通じて楽し
んでWebをつくってるし
その楽しさを多くの人に
知ってもらいたいし仲間
を増やしたい！

61. まとめ

62. 本を出した件
• つくる行程自体はじめてで楽しかった
• 評判やレビュー等勉強になります
• もっとツッコんだ話もしたい
• とにかく本を出せて成長出来た
• エンジニアリングの楽しさを伝えていく

63. Webサービスのつくり方
「新しい」を生み出すための33のエッセイ
Amazonやおっきめの書店で好評発売中！