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

MarkeZine Academy 2013/07/23

by Yusuke Wada a.k.a yusukebe

イントロダクション

自己紹介

ワディット

ワディット

オモロキ

オモロキ

メインワークその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です！

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ログイン掲示板

いつつくるの？

今でしょ！

開発の実際

3種の神器

レポジトリとしてのGit

GitHub

GitHub

流れ

  1. コードを書く
  2. テストを書く（最初に書くケースも）
  3. 実行する
  4. ブラウザで確認する
  5. commit/push

デプロイ

開発言語的な...

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

データベースを扱う

テーブル構造

mysql> select * from entry;
+----+---------------+-----------+---------+---------------------+
| id | title         | body   | user_id | created_on          |
+----+---------------+-----------+---------+---------------------+
|  1 | This is title | Body Text |     1 | 2013-07-23 14:00:00 |
+----+---------------+-----------+---------+---------------------+
1 row in set (0.00 sec)

SQL文

CREATE TABLE entry (
    id INT UNSIGNED AUTO_INCREMENT,
    title VARCHAR(255),
    body TEXT NOT NULL,
    user_id BIGINT UNSIGNED NOT NULL,
    created_on DATETIME NOT NULL,
    PRIMARY KEY (`id`)
) DEFAULT CHARACTER SET 'utf8' engine=InnoDB;

INSERT INTO entry
(title, body, user_id, created_on)
VALUES
('This is title', 'Body Text', 1, '2013-07-23 14:00:00');

O/R Mapper

疑似コード

$db->insert( 'entry',
    { title => 'This is title', body => 'Body text' } );
my $entry = $db->single( 'entry', { id => 1 } );
say $entry->title; # This is title
$entry->update({ title => 'Another title' });
say $entry->title; # Another title
$entry->delete();

モデルをつくってコントローラから呼び出す

コントローラにて

sub index {
    my $self = shift;
    my $entries = $self->model('Entry')->get_recent_entries({}, {
        order_by => 'id DESC', page => 1
    });
    $self->stash->{entries} = $entries;
    $self->render('index');
}

CLI

バリデーション

フロントエンドを実装する

テスト

TAP

ok $model->get_entry({ id => 1 });

プロビジョニング例

今回紹介しなかったこと

セキュリティ

デプロイの実践

まとめ