1. ゆるべん
Webアプリ開発概要
Ver. 1.0
2013/1/27
@yktmnb
http://wooven.org/

2. Profile
Y (@yktmnb)
SE (System Entertainer)
http://yktmnb.b.sourceforge.jp/
道産子（札幌系）、東京住まい
2

3. About
「Webアプリケーションって、どうやって動
いてるの？」について、できるだけ簡単に説
明することを目的とした資料です。
1時間程度で、なんとなく分かってもらうこ
とが目的です。まずはスタート地点に立つ！
特定の開発言語や開発手法に依存しないこと
を前提としています。
3

4. Target
• プログラムを書いたことのある人
• Web全般の基礎知識（HTMLとか、
JavaScriptとか）を知っていて、これから
Webアプリケーションを作ってみたい人
• 関連キーワード（知識体系）を知りたい人
4

5. Goal
• Webアプリの動く仕組みがざっくりわかる
• Webアプリを動かしてみたくなる
• 何が分からないのか分かるようになる
5

6. Index
• Service
• Internet
• Cloud
• Database
• How to
6

7. Service

8. What’s Service ?
• 「サービス」って経済用語
• 第一次産業（農業、林業、漁業、...）でも、
第二次産業（製造業、建築業、工業、...）で
もない「第三次産業」が扱う「商品」のこと
（例）理美容、不動産、飲食、旅行、金融、
運送、エンタメ、教育、医療、...
• 基本的には「サービス」＝「形が残らない」
• 要は、相手の要求を満足してあげられたら、
なんでも「サービス」と呼べる
8

9. What’s Service ?
とりあえず・・・
「サービス」と聞いたら「何かして
くれそう！」と思うことにしよう
• ちなみに「有償」か「無償」はサービス次第
9

10. What’s Service ?
「サービス」にはサービスごとに提供ルール
があり、お客はこのルールに従います。
（例）吉野家の場合：店に入る→席に座る→「牛丼つゆだくだくスプーン
玉」→商品が出てくる→食う→席でお会計→店を出る
（例）松屋の場合 ：店に入る→食券を買う→席に座る→食券を渡す→商
品が出てくる→食う→無言で店を出る
• このサービスごとの提供ルール（決まりごと）
を「プロトコル」と呼びます。
• なので、松屋で店に入るなり席に座って「牛丼」とか言ってはいけ
ない（プロトコルエラー）
10

11. What’s Server ?
「サービス」を提供してくれる人／
モノのことを「サーバ（Server）」
と呼ぶことにしよう。
（例）ビールサーバ・・・ビール（とい
うサービス）を提供してくれるモノ
11

12. What’s Client ?
「サービス」を利用する人／モノのこ
とを「クライアント（Client）」ある
いは「ユーザ（User）」と呼ぶことに
しよう。
注文「牛丼、玉」
クライアント
サーバ
（客） （すき家）
商品「たまごの付いた牛丼」
12

13. Remember me !
• サービス
• プロトコル
• クライアント／サーバ
13

14. Internet

15. History
• （参考）ウェブの進化
• http://www.evolutionoftheweb.com/?hl=ja
15

16. Browser
16

17. •URL...?
•HTTP...? Browser
•HTML...?
•CSS...?
•JavaScript...?
17

18. World Wide Web
• URI （Uniform Resource Identifier）
• HTTP （Hyper Text Transfer Protocol）
• HTML（Hyper Text Markup Language）
Mapping the internet | nicolasrapp.com
18 http://nicolasrapp.com/?p=1180

19. World Wide Web
• URI 「お店の住所」
• HTTP 「注文のルール（プロトコル）」
• HTML「商品」
Mapping the internet | nicolasrapp.com
19 http://nicolasrapp.com/?p=1180

20. World Wide Web
① URL は
「http://www.google.co.jp/」
ｶﾀｶﾀｶﾀｶﾀ...ﾀｰﾝ!
③「来たか・・・!!」ｶﾞﾀｯ
②何かください
Webブラウザ（クライアント）
（HTTPリクエスト）
④これをあげよう
Google社の
（HTTPレスポンス）
Webサーバ
⑤もらった何か
（HTML）を表示 ※実際にはDNSサーバを経由しているが、ここでは割愛
20

21. World Wide Web
インターネット上での
URI
通信プロトコルを指定 HTTP
URL
(Uniform
Resource
Locator)
インターネット上の HTML
どこにあるかを指定
21

22. Web Server
インターネット上でサービス（HTML
とか）を提供してくれるモノ（PCな
ど）を「Web サーバ」と呼ぶことにし
よう。
→自分のPCをWebサーバにすることは
「可能」
22

23. Middleware
自分の「PC」や会社の「PC」を「サー
バ」に変身させるためには「ミドルウ
ェア」が必要だと覚えよう
→PCはそのままではサーバとして動かない。たとえ
ばHTMLを提供するサーバにしたいならば
「Apache HTTP Server」というソフト（ミドルウ
ェア）をインストールする必要がある
23

24. Middleware
「サーバ」に変身した「PC」は、何が
変わったの？？というか、ミドルウェ
アは自分のPCに何をしたんだー！！
→あるPC上の設定が、変わってます
24

25. One more time...
URL を思い出してみよう。
「http://www.google.co.jp/」
↓ 実際には
「http://www.google.co.jp:80/index.html」
URL には、いくつか省略してよいルールがある。
25

26. U・R・L
URL を分解してみよう。
「http://www.google.co.jp:80/index.html」
「http」・・・プロトコル（正式にはスキーム名）
「www.google.co.jp」・・・ドメイン名（正式にはホスト名≒Web上の住所）
「:80」・・・ポート番号（！？）
「index.html」・・・ファイル名（正式にはパス名）
26

27. Port number
ネットワーク上でサービスを提供するためには「ポー
ト番号」という「通信の通り道」を「開ける」必要が
ある、と覚えよう。
•PCはデフォルトでは通信の通り道が塞がっている
•ミドルウェアは通り道を開ける設定をしている
•Webサーバは 80 番ポートを開けている
27

28. Web Apps
そろそろ、Web アプリの話をしよう。
28

29. Web Server
Web サーバはクライアントからのHTTPリクエストに
対して、HTMLをHTTPレスポンスとして返す
何かください
Webブラウザ（クライアント）
（HTTPリクエスト）
これをあげよう
Google社の
（HTTPレスポンス）
Webサーバ
29

30. Web Server
Web サーバの URL は、常に同じ「ファイル」を示し
ます
（例）http://somewhere/path/to/hoge.html
→必ず「hoge.html」という HTML が返ってくる
一昔前の「ホームページ」ってこんなのだったよね
（Web 1.0 とか言われたり）
30

31. Web Apps
「Web アプリケーション」は、ある URL に HTTP リ
クエストが来たときに動く「プログラム」と覚えよう
（例）http://somewhere/path/to/hoge.php
→プログラム「hoge.php」の実行結果が HTTP レ
スポンスとして返ってくる
Gmail （というWeb アプリ）にアクセスすると、毎
回実行結果（= 受信メールの一覧）が異なるイメージ
と同じ
31

32. Web Apps
川崎のラーメン店の ユーザのクチコミ
総合ランキングが知りたーい！ 評価結果から
（HTTPリクエスト） ランキングを生成！！
Webブラウザ（クライアント）
こんなん出ましたけどー 食べログの
Web アプリケーション
（HTTPレスポンス）
サーバ
指定場所や時期で
ランキング結果が
毎回変わる！ 32

33. Web Apps Server
「Web アプリケーションサーバ」は、Web アプリを
動かす際に必要なミドルウェアと覚えよう
Web アプリの言語によって、必要となるミドルウェア
が異なります
（例）Java で Web アプリを作る・・・Apache Tomcat とか
（例）VB や C# で Web アプリを作る・・・Microsoft IIS とか
33

34. Server Apps vs Client Apps
Web アプリをはじめとする「サーバサイド・アプリケ
ーション」と、ブラウザやスマホアプリ、Flash とい
った「クライアントサイド・アプリケーション」は、
呼び出されるタイミング（イベント）が異なることを
覚えておこう（= プログラムの書き方が異なる）
（例）ブラウザ・・・人（ユーザ）が実行した時
（例）Web アプリ・・・HTTP リクエストが来た時
34

35. Cloud

36. What’s Cloud ?
• クラウド・コンピューティングって何？
• 要は「ネット上で公開したサービス」のこと
• 技術用語ではなく、ビジネス用語
• 明確な定義は無いので「この技術使わないと
クラウドじゃない！」ということでもない
36

37. Why Cloud ?
• 会社の偉い人「社内でサーバ立てて
システム運用？（＝従来のSIってこと）
んなことしたら開発費や保守費かかって
マジ半端ない＼(^o^)／」
• エリック・シュミット「だったらネット
上のサービス借りたらいいさ（ﾄﾞﾔ」
• すぐに使えるお手軽さがウリ♪
37

38. Cloud = X as a Service
XaaS Soft
SaaS (Software as a Service)
PaaS (Platform as a Service)
DaaS (Database as a Service) aPaaS (application Platform as a Service)
iPaaS (integration Platform as a Service)
IaaS (Infrastructure as a Service) = HaaS (Hardware as a Service)
DaaS (Desktop as a Service) STaaS (Storage as a Service)
MaaS (Metal as a Service) LBaaS (Load Balancer as a Service)
Hard
38

39. クラウド = ネット上のサービスなら何でも
XaaS 公開されている 具体的
SaaS (Software as a Service) サービスを使う
いわゆる「Webアプリ」
決められたルールで
PaaS (Platform as a Service) サービスを作る
DaaS (Database as a Service) aPaaS (application Platform as a Service)
Webアプリを動かす環境
iPaaS (integration Platform as a Service)
ルールも自作
IaaS (Infrastructure as a Service) = HaaS (Hardware as レンタルサーバ
a Service)
DaaS (Desktop as a Service) STaaS (Storage as a Service)
サーバを自由に使わせてくれるらしいよ
MaaS LBaaS
(Metal as a Service) (Load Balancer as a Service)
自由度高
39

40. SaaS vs PaaS vs IaaS
出展：SaaS/PaaS/IaaSとは（http://itpro.nikkeibp.co.jp/article/Keyword/20110216/357282/）
図：SaaS/PaaS/IaaSの構成要素
40

41. Public ? Private ?
• パブリック・クラウドって何？
• インターネット上に公開したサービスのこと
• プライベート・クラウドって何？
• （たとえば社内とか）限定された範囲に公開
したサービスのこと
• ある意味、「社内サーバ」をカッコよく言い
直しただけといえば・・・おや、誰か来t(ry
41

42. Trend
• Web アプリの「開発」は自分のPCで
• Web アプリの「公開」はクラウドで
• IaaS 環境なら自由に動かせる
• その分、公開までの手間はかかる
• PaaS 環境には制約がある
• たとえば、Google App Engine 上では Java と
Python しか動かせない、ファイルが保存できない、
とか（ただし、その分公開するまでの手間は楽）
42

43. Database

44. Data
Webアプリの実行結果を保存しておくに
は、どうしたらよいだろう？
（例）カウンターの数字を保存したい
（例）掲示板の書き込みを保存したい
もちろん、ファイルに書き込んでもOK！
44

45. Database
次の要件にピン！ときたら「データベー
ス」を使うことを検討しよう
（例）データが壊れたり、データ同士の矛盾がないよ
うに安全に保管する必要がある。
（例）たくさん保存したデータの中から検索する必要
がある。しかも高速に。
データベースは「安全にデータを保管し、高速にデー
タを探すことに特化したミドルウェア」と覚えよう
（よく、「DBサーバ」と呼んだりします）
45

46. Database
データベースにも種類があ
ります。
特に有名なのが、表で管理
する「リレーショナル・デ
ータベース（RDB）」。
有償製品だと Oracle や SQL
Server、無償だと
MySQL、PostgreSQL あた
りが有名。
46

47. Database
保管している表にデータを登録したり、表からデー
タを検索するためには「SQL」という言語を使う必
要があることを覚えておこう。
ID 名前 既婚
1 X YES
2 Y NO
3 Z YES
「人物」表
SELECT 名前 FROM 人物 WHERE 既婚=’NO’;
47

48. Trend
最近、RDB や SQL を使わないデータベースが登場
し、流行っているような気がする・・・
ひとくくりに「NoSQL」と呼んだりしているけど、
特に「KVS（Key-Value Store）」は Google の
「Bigtable」で有名。
保管したいデータの特性で RDB か NoSQL を選ぶ！
48

49. How to

50. Constructions
結局、Webアプリってどうやって作るの？
1.作りたいサービス（=Webアプリ）を考える
2.実行環境（開発言語）を決める
3.開発環境を用意する
4.作る
5.公開する
50

51. Constructions
1.作りたいサービス（=Webアプリ）を考える
一番重要。なぜそのサービスは必要なの？
誰のため？何のため？
もちろん、自己満でも練習のためでもOK！
51

52. Constructions
2.実行環境（開発言語）を決める
これも重要。そのサービスはどこに公開するの？
インターネット？社内？学内？自宅？
ネット上なら PaaS 使う or 自宅サーバにチャレンジ
自分の得意な言語から実行環境を決めるのがオススメ
52

53. Constructions
3.開発環境を用意する
開発言語まで決まれば、あとは言語ごとに決められた手
順で開発環境を作るだけ！
SDK（Software Development Kit）やミドルウェア、
IDE（Integrated Development Environment）など、
ネット上にたくさん情報があるのでググるべし
53

54. Constructions
4.作る
サービスが提供する「画面」を考えたり、画面上のボタ
ンをクリックしたときの「動作」を考えたり・・・
まずは自分のPC上で Hello World を動かしてみよう！
ブラウザから自分のサービスにアクセスして動いた時の
感動は・・・ひとしおです
54

55. Constructions
5.公開する
自分のPC上でサービスが完成したら、みんなに使っても
らおう！
ちなみに、公開用のマシン（サーバ）に作ったWebアプ
リを置くことを「デプロイ（deploy）する」と言います
55

56. Why not ?
• これから深く勉強するためには・・・？
1. 公開されている技術仕様、知識体系を学ぶ。
2. 人のソースを読む。
3. 手を動かしてみる。作って覚える。
• 自分が困っていること、悩んでいることの
大半は、先人も同じ道を っているはず、
と思うべし（探せば解が見つかる）
56

57. アプリ開発は習うより慣れろ！
自分の手を動かして、体で覚えよう！！
57

58. This is all

59. See more...
• 以下、プロを目指す人に向けて・・・
• HTTP や HTML の仕様を深く知りたい
• 「RFC（Request for Comments）」や
「W3C」の技術仕様を読んでみよう！
• RFC 2616 (HTTP 1.1)
• http://tools.ietf.org/html/rfc2616
• HTML 4.0 Specification
• http://www.w3.org/TR/REC-html40-971218/
59

60. See more...
• Webアプリの開発全般を深く知りたい
• 「ソフトウェア工学」や「ソフトウェア開発
工程」を勉強しよう
• Git とか Subversion はソフトウェア開発工程の「ソフトウェア
構成管理」を実現するためのツールの一例です
• ソフトウェア開発工程モデルの例
• 「アジャイル」→比較的小規模ならこちら
• 「ウォーターフォール」→大規模はこっち
• 情報処理技術者試験を受験してみよう
60

61. See more...
• プログラムの設計手法を深く知りたい
• 「オブジェクト指向設計の原則」「パターン」
を勉強しよう
• パターンの例
• 「デザインパターン」まずはこれを理解
• 「J2EEパターン」Javaで作る人は推奨
• 「アーキテクチャ・パターン」アーキテクト目指すなら「POSA」
を理解すること（あの「MVC」もPOSAの一例です）
61

62. See more...
• プログラムのテスト手法を深く知りたい
• IEEE が「テスト設計技法」を定義しています
• アプリケーション開発で最も奥が深く、どうテ
ストすべきなのか…（むしろ知りたいくらい）
• とりあえず、「バグのないプログラムはない」
とだけ覚えておこう
62

63. See more...
• Web のセキュリティを深く知りたい
• IPA が無償で情報公開しています
• 安全なウェブサイトの作り方
• http://www.ipa.go.jp/security/vuln/websecurity.html
• ログインの仕組みについて深く知りたい
• 「認証」「認可」について勉強しよう
63

64. See more...
• アプリ開発でお金を稼ぎたい
• 「共通フレーム2007」を勉強しよう
• プロセス、共通言語、見積もり手法や契約方法等、基本
的な枠組みが定義されています
• 顧客とのやりとり手法なら「REBOK（要求工
学知識体系）」や「BABOK（ビジネス分析知
識体系）」を勉強しよう
• プロジェクトの管理手法なら「PMBOK（プロ
ジェクト管理知識体系）」を勉強しよう
64

65. See more...
おまけ
で話題となりつつある「Firefox OS」上で動くアプリ
も立派な「Webアプリ」。
「Webアプリ」が必ずしもサーバ技術とは言えなくなっ
てきたので、「サーバサイドWebアプリケーション」
「クライアントサイドWebアプリ」と呼ぶ必要があるの
かも・・・
65

66. End