1日でわかるWebサービス制作の全て ～企画から実装まで～

イントロダクション

自己紹介

ワディット

ワディット

オモロキ

オモロキ

メインワークその1

ボケて

メインワークその2

Webサービスのつくり方

その他つくったモノ

君のラジオ

君のラジオ

anpiレポート

anpiレポート

CDTube

CDTube

ボケて（bokete）

現状

歩み

ボケての歩み

本題「Webサービスをつくるに当たって」

Webサービスの定義

訪問者に対して何かしらの サービス を提供するWeb

事例紹介「クックパッド」

クックパッド

事例紹介「nanapi」

クックパッド

サービスを提供する＝ユーザーがいる

個人や小さな規模からも始められる

得られること

  1. 勉強になる
  2. 2枚目の名刺として
  3. ユーザーの反応が楽しい
  4. もしかしてお金になるかも…

嬉しい瞬間

「あのサービスをつくったゆーすけべーさんですよね？」

6畳一間から世界を変える

デスク

肝に銘じたい言葉

Shut the fuck up and write some code.

例えば…

twitter_search.pl

use Net::Twitter::Lite::WithAPIv1_1;
use Config::Pit;
use Encode;
use utf8;

binmode STDOUT, ':utf8';

my $config = pit_get('twitter-api');
my $nt     = Net::Twitter::Lite::WithAPIv1_1->new(
    consumer_key        => $config->{consumer_key},
    consumer_secret     => $config->{consumer_secret},
    access_token        => $config->{token},
    access_token_secret => $config->{token_secret}
);
my $result = $nt->search(
    {
        q                => 'おはよう',
        include_entities => 1,
        result_type      => 'recent',
        count            => 100
    }
);

for my $tweet ( @{ $result->{statuses} } ) {
    print "$tweet->{text}\n";
    print "----------------------------------------\n";
}

とにかく手を動かすことが大事

そこに1,000人いたとして、アイデアを思いつくのが100人、アイデアを実現するのが10人、アイデアで成功する人は1人

企画と開発準備

つくり方をつくる

デザイン思考の道具箱

デザイン思考の道具箱

創造のサイクルを回せ

創造のサイクル

  1. 哲学
    • 個々人が持つある興味に対する揺るがない信念
  2. アイデア
    • 哲学を叶える個別具体的なアイデア
  3. テーマ
    • 勝負する領域
  4. コンセプト
    • アイデアを束ねるつくるモノを一言で表すような枠組み
  5. 名前
    • これが無くては始まらない。キラキラネームかセルフトーキングか
  6. デザイン
    • 見た目のみならず、ディテールを妥協して決めていく作業
  7. 内部設計
    • 実装に向けてのシステムの内側を設計する

例えば…

クックパッド の場合…

アイデアとコンセプトの違い

例: ボケては「写真で一言ボケる」Webサービス

アイデアは組み合わせ

アイデアとは既存の要素の新しい組み合わせ以外の何のものでもないということである

「アイデアのつくり方」より

シャワーを浴びている時に降ってくる

シーズとニーズの話

究極のブレインストーミング

IDEO

7 Ways to Unleashing your Creativity より

ブレストにはルールがある

リスク、リスク、リスク

そにはリスクが潜んでいる

台風

開発の準備をしよう

「企画倒れ」にならないよう開発へのハードルを下げていく

やるやる詐欺にはなりたくない

エディタという道具

emacs

勉強会

Perl入学式

巨人の方に乗る

Standing on the shoulders of giants

CPANライブラリのエコシステム

Webテクノロジー・オーバービュー

Webの基礎技術を学びながらつくる

オススメ本

Webを支える技術

ホームページをブラウザで閲覧する際の裏側

サーバ・クライアント

このやり取り自体が取り決め＝ プロトコル として定められている

HTTP、URI、HTML

HTTP、URI、HTML

あくまで取り決めなので「そういうモノ」として捉える

URI / URL

http://example.com/about.html

HTTPのメソッド

クライアントからサーバへのリクエスト。リソースを扱うため、主に4つが使われている

telnetでGET

$ telnet yusukebe.com 80

GET / HTTP/1.1
Host: yusukebe.com

Webページを構成する要素

HTML - HyperText Markup Language

ある程度構造化したテキストをマークアップで書ける

<h2 class="title">タイトル</h2>

CSS - Cascading Style Sheets

CSSセレクタを利用しHTMLを装飾する

h2.title { color:#333; }

JavaScript

ページ自体をブラウザ側で操作し動きを与える

$('h2.title').fadeOut();

動的サイトと静的サイト

静的サイトと動的サイト

Webプログラミング言語

などが主流であるが C言語 でも不可能ではない

Web Application Framework

例えば、Ruby on Rails

それ以前

CGI

MVCモデル

役割を分離して考えておくとよいよねぇ〜

Webサーバ、ミドルウェア色々

クラウドとしてのAWS

ライブコーディングその1

なんかつくります！

例: Twitterログイン掲示板

いつつくるの？

今でしょ！

開発環境の紹介

use Perl

TMTOWTDI

ラリー・ウォール

やり方はひとつじゃない

実はこの資料もPerlでHTML化

CPANライブラリ

search.cpan.org

WebServiceOneDay.pm

package WebServiceOneDay;
use strict;
use warnings;
use Text::Markdown qw/markdown/;
use Path::Class qw/file/;
use Encode qw/decode_utf8/;
use Data::Section::Simple qw/get_data_section/;
use Text::MicroTemplate qw/render_mt/;

…;

Perl Mongers !!

YAPC::Asia 2011

Web Application Framework

Mojolicious

スケルトン

$ mojo generate app MyApp::Web

すると… 

tree ./
./
├── lib
│   └── MyApp
│       ├── Web
│       │   └── Example.pm
│       └── Web.pm
├── log
├── public
│   └── index.html
├── script
│   └── my_app_web
├── t
│   └── basic.t
└── templates
    ├── example
    │   └── welcome.html.ep
    └── layouts
        └── default.html.ep

ルーティング

package MyApp::Web;
use Mojo::Base 'Mojolicious';

sub startup {
    my $self = shift;
    my $r = $self->routes;
    $r->namespaces(['MyApp::Web::Controller']);
    $r->get('/')->to('root#index');
}

1;

コントローラ

package MyApp::Web::Controller::Root;
use Mojo::Base 'Mojolicious::Controller';

sub index {
    my $self = shift;
    my $message = "Hello, I'm from Yokohama!";
    $self->stash->{message} = $message;
    $self->render();
}

1;

テンプレート

% layout 'default';
% title 'Welcome';

<h2><%= $message %></h2>

さて

なにをつくりましょうか！

ライブコーディングその2

まとめ