「Webサービスのつくり方」のつくり方

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

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

「Webサービスのつくり方」のつくり方

最近のお仕事
• オモロキ業務
• ボケて開発運用
• 7割程度
• ワディット業務 http://bokete.jp/

• メルマガ、執筆、講演
• 3割程度

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

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

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

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

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

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

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

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

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

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

はじめにエッセイ風に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サービスを動かすための要素

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

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

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

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

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

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

プレビューもしたいよねー

ってことで...

Dropdown
• 自分のDropboxファイルをブラウザか
らプレビュー出来るWebアプリ

• Markdownっぽい拡張子のファイルは
Text::Markdownを使って整形表示

• Dropbox APIの開発モードだと1アプリ
につき5アカウントまでが自由に使える

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('/');
}

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'
);
}

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

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

チームでのWebサービス企画
• 一人で小さい規模から始めること
以外のWebサービス企画

• チームビルディング
• 打ち合わせ、ブレインストーミング
• リーダーシップ
• 戦略とマネタイズ

ざっくりと答えを言うと

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

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

Mojolicious
• 薄い Web Application Framework
• no O/R Mapper, not full-stack, but
components are full-stack.

• つまり Mojolicious だけ追えばいい
• Router, Controller, Template が主力
• ModelはPerlオブジェクトで作りつなぐ

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

MVCのモデルについて
• Modelにビジネスロジックをまとめる
とお得なのが分かるケース

• PC用Webとスマホ用Webをつくる時
• Command Line Interface からの利用
• ある程度大きくなると「Controllerと
分けててよかった」感

ボケてでの事例
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

Validationも工夫
• form -> FormValidator::Lite
• data on Model -> Data::Validator
# controller

if($self->form('Boke')->has_error) {
return $self->render_fill('/boke/post');
}

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

Cinnamon
$ cinnamon web deploy:update
$ cinnamon web server:restart

naoyaさんのレシピほぼまんま使ってるよ！
Perlだからconﬁg.plで条件分岐もすぐ書けちゃう！
とにかくシンプルだから「何やってるか分かる感」！

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

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

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

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

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

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

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

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

「Webサービスのつくり方」のつくり方

「Webサービスのつくり方」のつくり方

Recommended

More Related Content

What's hot

What's hot(20)

Similar to 「Webサービスのつくり方」のつくり方

Similar to 「Webサービスのつくり方」のつくり方(20)

More from Yusuke Wada

More from Yusuke Wada(20)

Recently uploaded

Recently uploaded(6)