実践！

未踏ウェブサービス構
築
インタラクションデザインプロ
ジェクト
博士課程２年
永田周一
 自己紹介
 永田周一

 紙 copi 、 NOTA の開発者

 LiveCoding 第 1 回主催者
 2007 年より渡米、シリコンバレーで会社設立
 休学し、 Palo Alto というパソコン発祥の地で約 1 年
を過ごす。
 現地で、多くの開発者、研究者、起業家と交流
 開発事例：紙 copi
 1999 年〜

 スクラップブック、メモ帳
 保存動作がなく、ファイルの概念をなくす

 ユーザー数 20 万人超
 研究事例 : NOTA
 2002 年未踏ソフトウェア創造事業

 ウェブ上でリアルタイムにコラボレーションす
る試み

 リアルタイム通信はこれから普及すると言われ
ている
 研究事例 : TwitPaint
 2009 年〜

 お絵かきコンテンツが、細胞分裂するように、コピー
、変化を繰り返しながらウェブ上で増殖していく。

 連画、 CreativeCommons のコンセプトモデル

 目標
 実践的ウェブサービスが設計・構築・運
用までできるレベルになること

 （かなりきびしいが、最短で学べる）
 講義概要

実技 課題
 お約束
 作業・開発日記を書く
 メモを整理して、箇条書きで良いのでブログを書く

 課題に挑戦
 課題終了後、次回の講義で、ショートティーチング
がある
 開発方法
 コードは書かかないと身に付かない（王道のみちはとらな
い）

 ０からの設計ができるようにインターフェイスとデザイン
のセンスも同時に身につけよう

 プログラミング苦手意識ははじめに消せ

 教える方もダイナミックに
 講義方針
 目標：実践的ウェブサービスの設計・構築・運用

 シリコンバレー流のプラグマティックな開発技法
を伝えます。

 プログラミングは「全部自分で経験すること」が
一番大事。

 そのために、答えは教えない。ヒントだけ教えるので
、自分で考えてやってくる。
 それを繰り返すと、一通りのことが身に付いていると
いうカリキュラムをめざす。
 講義予定
1. サーバーの仕組みを知る
 DNS 、 SSH 、 PHP 基礎（各種コマンドとファイルの読み
書き）

2. インタラクティブなウェブを作る
 ユーザーの入力： Form の使い方 Post か Get か？
 デザイン：画像の種類とウェブデザインの作り方

3. DataBase 入門
 MySQL 、クエリ構文、テーブルの設計

1. 最新動向への対対
 Javascript と Flash 、 RSS
 今回は扱いません
5. クロスプラットフォームテクニック
 文字コード問題、 CSS か Table か、 RSS/HTML の仕
様と実際

5. 大きなプロジェクトの管理
 複数ファイルの管理法、バージョン管理方法

5. サーバー運用とセキュリティ
 Apache 設定法、バーチャルドメイン、アクセス解析
、バックアップ法、負荷分散

 上記＋ Tips 的なもの＋哲学的なもので構成

 プログラミングの要諦
 プログラミングは会話であり、相互作用
である

安野光雅
「はじめてであ
うすうがくの絵
本　２」

ふしぎなきかい
 ミッション　第 1 回
 マイ・ドメインを取得する
 Value Domain でオリジナルなドメインをとってみる
 DNS サーバーの設定をして Web サーバーの IP を振る

 ウェブサイトを作る
 SCP のマスター、シェル（ SSH ）のマスター
 コマンド （ chmod 、 cp 、 mv 、 cd 、 ls 、 mkdir ）とパラメー
タ
 http://itc.sfc.keio.ac.jp/pukiwiki/
 ミッション　第 1 回
 PHP を使う
 PHP は、 HTML の延長で考えられた
 <? ?> を書くことでその中で暴れられる

 Print 文をマスター
 日付と時間の構文を例に if 文をマスター
 File の読み書きと for 文をマスター

 課題：未踏なアクセスカウンターを作る
 プログラマー Tips
 Google を使い倒す（ AND 検索、キャッシュ、
言語、その他テクマスター）

 メモを取る習慣づけ（ Social Bookmark 、メ

モソフト etc ）

 Gyazo.com が便利
 連絡先
 メーリングリスト
 rakusai@gmail.com
 Twitter : rakusai
 Github: rakusai
第 2回
 ミッション第 1 回総評
 Google Bot カウンター
 画像カウンター
 ライフゲームカウンター
 リロード / リセットボタン
 ミッション　第 1 回総括
 言語の基礎理解
 HTML タグと PHP タグの区別
 <?= $ 変数 ?> と <? Print(“Hello”); ?> の違い
 画像の出力
 表示とロジックの分離

 SSH とシェル
 Linux コマンドの基礎
 アクセスカウンター
 ポイント：数の繰り上がり動作、視対 的な効果、その
他の工夫
 LL と HTTP
 LL = Lightweight Language とは？
 軽量プログラミング言語
 コンパイル不要

 動的な型指定

 この授業で扱う例： Ruby, Perl, PHP, Python

 HTTP との親和性
 書いたものがブラウザを通してすぐに出力される
 コーディング時間の短縮

 文字列処理が柔軟かつ容易

 HTTP とは
 HTTP/HTML の応用範囲
 Web サービス
 Google, Mixi

 スマートフォン / 携帯
 iPhone, Android のアプリケーション
 ウェブコンポーネントを利用
 通信はほぼ HTTP
 家電
 電気の制御
 テレビ / ビデオ
 カーナビ
 ミッション　第 2 回
 インタラクティブなウェブ

 Form タグを制覇する
 Post と Get の違い
 URL として送るか、裏側で送るか、

 ブラウザ挙動の違い（「戻る」、ブックマーク）

 用途の違い（投稿型、表示型）

 GET の恐怖（先読み、クロールで削除、注文）
 ミッション　第 2 回
 配列を使いこなす
 ダイナミックな配列こそ、 LL の醍醐味
 配列＋ for/while 文

 連想配列、多重配列

 ウェブ制作で使う画像を完全マスター
 JPEG 、 GIF 、 PNG の違い
 Inkscape, Gimp, Illustrator, Photoshop を使った
ロゴ制作
 ミッション 第 2 回 課題
 課題：
 オリジナルのブログシステムを創りなさい。
 Twitter のようなシステムも広義のブログとみなし
ます。

 書き込み機能とデータを一覧で管理する機能があれ
ば、ブログでないシステムでもかまいません。

 簡単なオリジナルのロゴデザインを創りなさい。
 プログラマー Tips
 コメントを見れば、レベルが分かる

 ハッカーの心構え
 高林 @Google
 http://0xcc.net/pub/osm2006/
第 3回
 第 2 回ミッション 総括
 CSV による複数のデータ管理

 ポイント：　ブログはインタラクティブ
なウェブの基本。どんなデータを共有す
るか？　書き込みやすいインタフェース
か？　 POST/GET などの処理
 HTTP の簡易性
ネットワークプログラムの
基礎
OSI 参照モデル
Request for Comments

RFC
Ex: http://www.studyinghttp.net/cgi-bin/rfc.cgi?2616
 抽象化
 関数化
 deletect_encode(data)

 オブジェクト化
 missile1 = new Missile();
 missile1. launch(Iraq)

 フレームワーク化
 よくあるパターンを抽出して再利用
 MVC, モデル、ビュー、コントローラー
 抽象化と発想
 抽象化とは？
 複対 な処理を一つにまとめ、それらを関数化、オブ
ジェクト化、フレームワーク化して、容易に開発で
きるようにする作業
 機械語をなるべく人間が理解しやすいモデルまたは
言語へと対 換すること
 メリット
 高度なことが簡単になる
 デメリット
 新しい発想（可能性）の視野が狭くなる
大規模なウェブとデータベー
ス
 OBAMA キャンペーンと MYSQL
 http://opendatabaselife.blogspot.com/2009/0
 データ量は 5TB を超えた。

 1 時間に 200 万通

 MyISAM ではロック競合が深刻だったので
InnoDB にした。
 ミッション　第 3 回
 Database
 使い方
 MySQL Query Browser 、 SSH 、ユーザー権限
 SELECT 文をマスターする（全世界共通）
 WHERE 、 ORDER 、 LIMIT
 リレーショナルデータベースと設計
 正規化のやりかた
 インデックスとは？

 カラムの型
 SELECT 文
 SELECT

*
FROM users
WHERE id > 50
LIMIT 0 , 30
ORDER BY date DESC
 正規化とは
 Users  Users
 Name  Name
 Group_Name
 Group_id
 Group_Place

 Group_Membe
r  Group
 Name

 Place
現在は、スケーラビリティの確保のため、
不必要なの正規化を行わない傾向にある  Member
 インデックス
 大量のデータから目的のものを高速に検索・抽出・
ソートするための技法

 辞書の目次のようなもの。
 必要に応じて複数のインデックスを作成する

 例）ユーザーデータが 1 万件あったとき、 5000 番

目の行にある「たなか」を検索する手順
ミッション　第 3 回

File1 FIle2

Lib
 プログラマー Tips
 フリーソフトを組み合わせて活用する方法を
磨け

 正規表現をマスターして対 索・置換の達人に
 例：メールの部分だけ抜き出す
 /([a-z\.\-]+@)/
 ミッション　第 4 回
 Flash
 ベクター
 MovieClip
 シンボリック
 ActionScript
 Movie Clip を動かす
 CGI 連携

 JavaScript
 id をつける
 getElementById();
 JavaScript
 概要
 リッチインタフェースアプリケーション RIA
 Google Maps のような Ajax

 JavaScript != Java

 もっとも簡単で、どこでも動く開発言語

 HTML の動的な書き換え＋アニメーション
 JavaScript の基礎
 HTML の要素に id をつける　
 getElementById(); 　
 イベント
 onclick, onmouseover, etc.
 ダイアログ
 alert, confirm 　
 オブジェクトの操作
 style, innerHTML, etc.
 Mixi アプリケーション
 個人認証を確保したうえで、ソーシャル
サービスを開発できるプラットフォーム

 開発者登録
 http://developer.mixi.co.jp/
 無料

 OpenSocial
 SNS 上のアプリケーションの共通企画
 Mixi アプリの実装
 XML ファイルを用意　
 アプリケーション登録で XML ファイルを
指定
 友達リストの表示
 iFrame を表示
 ミッション　第 4 回

 今回の（最終）課題：
 これまで習った技術を統合して、 Mixi アプリケー
ションを開発してください。
 実装方法、言語は、問いません。
 プログラマー Tips
 プログラミングの省略単語の意味を調べ
て理解を深める
 Int ? Def ? Function ?
 ミッション　第 5 回
 クロスプラットフォームテクニック
 文字コード問題、 CSS か Table か、仕様と実際

 COOKIE 、 SESSION 、 BASIC 認証

 ログイン処理をまなぶ

 今回の課題
 ブログをセットアップして、カスタマイズしよう
 WordPress （大規模プロジェクト）
 プログラマー Tips
 仕対書は、手書きで書け
 何枚も書いて、紙芝居のようにめくる
 Paper Prototyping という手法

 裏技の実装
 迷ったときに出しにくい方法で実装