ゆるべん Webアプリ開発概要 20130127

ゆるべんWebアプリ開発概要

Ver. 1.02013/1/27@yktmnb

http://wooven.org/

Y (@yktmnb)

SE (System Entertainer)

http://yktmnb.b.sourceforge.jp/

道産子（札幌系）、東京住まい

Profile

2

「Webアプリケーションって、どうやって動いてるの？」について、できるだけ簡単に説明することを目的とした資料です。

1時間程度で、なんとなく分かってもらうことが目的です。まずはスタート地点に立つ！

特定の開発言語や開発手法に依存しないことを前提としています。

About

3

•プログラムを書いたことのある人• Web全般の基礎知識（HTMLとか、

JavaScriptとか）を知っていて、これからWebアプリケーションを作ってみたい人

•関連キーワード（知識体系）を知りたい人

Target

4

• Webアプリの動く仕組みがざっくりわかる

• Webアプリを動かしてみたくなる

•何が分からないのか分かるようになる

Goal

5

Index

• Service

• Internet

• Cloud

• Database

• How to

6

Service

•「サービス」って経済用語• 第一次産業（農業、林業、漁業、...）でも、第二次産業（製造業、建築業、工業、...）でもない「第三次産業」が扱う「商品」のこと

（例）理美容、不動産、飲食、旅行、金融、運送、エンタメ、教育、医療、...

• 基本的には「サービス」＝「形が残らない」

• 要は、相手の要求を満足してあげられたら、なんでも「サービス」と呼べる

What’s Service ?

8

とりあえず・・・

「サービス」と聞いたら「何かしてくれそう！」と思うことにしよう

• ちなみに「有償」か「無償」はサービス次第

What’s Service ?

9

「サービス」にはサービスごとに提供ルールがあり、お客はこのルールに従います。（例）吉野家の場合：店に入る→席に座る→「牛丼つゆだくだくスプーン玉」→商品が出てくる→食う→席でお会計→店を出る

（例）松屋の場合　：店に入る→食券を買う→席に座る→食券を渡す→商品が出てくる→食う→無言で店を出る

• このサービスごとの提供ルール（決まりごと）を「プロトコル」と呼びます。

• なので、松屋で店に入るなり席に座って「牛丼」とか言ってはいけない（プロトコルエラー）

What’s Service ?

10

「サービス」を提供してくれる人／モノのことを「サーバ（Server）」と呼ぶことにしよう。

（例）ビールサーバ・・・ビール（というサービス）を提供してくれるモノ

What’s Server ?

11

「サービス」を利用する人／モノのことを「クライアント（Client）」あるいは「ユーザ（User）」と呼ぶことにしよう。

What’s Client ?

12

クライアント（客）

サーバ（すき家）

注文「牛丼、玉」

商品「たまごの付いた牛丼」

•サービス

•プロトコル

•クライアント／サーバ

Remember me !

13

Internet

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

History

15

Browser

16

Browser

17

•URL...?•HTTP...?

•HTML...?•CSS...?•JavaScript...?

•URI （Uniform Resource Identifier）

•HTTP （Hyper Text Transfer Protocol）

•HTML（Hyper Text Markup Language）

World Wide Web

18 Mapping the internet | nicolasrapp.comhttp://nicolasrapp.com/?p=1180

•URI 「お店の住所」

•HTTP 「注文のルール（プロトコル）」

•HTML「商品」

World Wide Web

19 Mapping the internet | nicolasrapp.comhttp://nicolasrapp.com/?p=1180

World Wide Web

20

Webブラウザ（クライアント）

Google社のWebサーバ

① URL は 「http://www.google.co.jp/」

ｶﾀｶﾀｶﾀｶﾀ...ﾀｰﾝ!

※実際にはDNSサーバを経由しているが、ここでは割愛

②何かください（HTTPリクエスト）

④これをあげよう（HTTPレスポンス）

③「来たか・・・!!」ｶﾞﾀｯ

⑤もらった何か（HTML）を表示

World Wide Web

21

URI

URL (Uniform Resource Locator)

HTTP

HTMLインターネット上のどこにあるかを指定

インターネット上での通信プロトコルを指定

インターネット上でサービス（HTMLとか）を提供してくれるモノ（PCなど）を「Web サーバ」と呼ぶことにしよう。

→自分のPCをWebサーバにすることは「可能」

Web Server

22

自分の「PC」や会社の「PC」を「サーバ」に変身させるためには「ミドルウェア」が必要だと覚えよう

→PCはそのままではサーバとして動かない。たとえばHTMLを提供するサーバにしたいならば「Apache HTTP Server」というソフト（ミドルウェア）をインストールする必要がある

Middleware

23

「サーバ」に変身した「PC」は、何が変わったの？？というか、ミドルウェアは自分のPCに何をしたんだー！！

→あるPC上の設定が、変わってます

Middleware

24

URL を思い出してみよう。

「http://www.google.co.jp/」

↓　実際には

「http://www.google.co.jp:80/index.html」

URL には、いくつか省略してよいルールがある。

One more time...

25

URL を分解してみよう。

「http://www.google.co.jp:80/index.html」

「http」・・・プロトコル（正式にはスキーム名）

「www.google.co.jp」・・・ドメイン名（正式にはホスト名≒Web上の住所）

　　　「:80」・・・ポート番号（！？）　　　　　　　　　

「index.html」・・・ファイル名（正式にはパス名）　　　　　

U・R・L

26

ネットワーク上でサービスを提供するためには「ポート番号」という「通信の通り道」を「開ける」必要がある、と覚えよう。

•PCはデフォルトでは通信の通り道が塞がっている

•ミドルウェアは通り道を開ける設定をしている

•Webサーバは 80 番ポートを開けている

Port number

27

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

Web Apps

28

Web Server

29

Webブラウザ（クライアント）

Google社のWebサーバ

何かください（HTTPリクエスト）

これをあげよう（HTTPレスポンス）

Web サーバはクライアントからのHTTPリクエストに対して、HTMLをHTTPレスポンスとして返す

Web Server

30

Web サーバの URL は、常に同じ「ファイル」を示します

（例）http://somewhere/path/to/hoge.html

　→必ず「hoge.html」という HTML が返ってくる

一昔前の「ホームページ」ってこんなのだったよね（Web 1.0 とか言われたり）

Web Apps

31

「Web アプリケーション」は、ある URL に HTTP リクエストが来たときに動く「プログラム」と覚えよう

（例）http://somewhere/path/to/hoge.php

　→プログラム「hoge.php」の実行結果が HTTP レスポンスとして返ってくる

Gmail （というWeb アプリ）にアクセスすると、毎回実行結果（= 受信メールの一覧）が異なるイメージと同じ

Web Apps

32

Webブラウザ（クライアント）

食べログのWeb アプリケーション

サーバ

川崎のラーメン店の総合ランキングが知りたーい！

（HTTPリクエスト）

こんなん出ましたけどー（HTTPレスポンス）

ユーザのクチコミ評価結果から

ランキングを生成！！

指定場所や時期でランキング結果が毎回変わる！

Web Apps Server

33

「Web アプリケーションサーバ」は、Web アプリを動かす際に必要なミドルウェアと覚えよう

Web アプリの言語によって、必要となるミドルウェアが異なります（例）Java で Web アプリを作る・・・Apache Tomcat とか

（例）VB や C# で Web アプリを作る・・・Microsoft IIS とか

Server Apps vs Client Apps

34

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

（例）ブラウザ・・・人（ユーザ）が実行した時

（例）Web アプリ・・・HTTP リクエストが来た時

Cloud

•クラウド・コンピューティングって何？• 要は「ネット上で公開したサービス」のこと

• 技術用語ではなく、ビジネス用語

• 明確な定義は無いので「この技術使わないとクラウドじゃない！」ということでもない

What’s Cloud ?

36

•会社の偉い人「社内でサーバ立ててシステム運用？（＝従来のSIってこと）んなことしたら開発費や保守費かかってマジ半端ない＼(^o^)／」

•エリック・シュミット「だったらネット上のサービス借りたらいいさ（ﾄﾞﾔ」

•すぐに使えるお手軽さがウリ♪

Why Cloud ?

37

XaaSCloud = X as a Service

38

SaaS (Software as a Service)

PaaS (Platform as a Service)

IaaS (Infrastructure as a Service) = HaaS (Hardware as a Service)

Soft

Hard

DaaS (Desktop as a Service)

MaaS (Metal as a Service)

STaaS (Storage as a Service)

LBaaS (Load Balancer as a Service)

DaaS (Database as a Service) aPaaS (application Platform as a Service)

iPaaS (integration Platform as a Service)

XaaS

クラウド = ネット上のサービスなら何でも

39

SaaS (Software as a Service)

PaaS (Platform as a Service)

IaaS (Infrastructure as a Service) = HaaS (Hardware as a Service)

具体的

自由度高

DaaS (Desktop as a Service)

MaaS (Metal as a Service)

STaaS (Storage as a Service)

LBaaS (Load Balancer as a Service)

DaaS (Database as a Service) aPaaS (application Platform as a Service)

iPaaS (integration Platform as a Service)

SaaS (Software as a Service)

PaaS (Platform as a Service)

いわゆる「Webアプリ」

Webアプリを動かす環境

IaaS (Infrastructure as a Service)

サーバを自由に使わせてくれるらしいよ

公開されているサービスを使う

決められたルールでサービスを作る

ルールも自作レンタルサーバ

SaaS vs PaaS vs IaaS

40

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

•パブリック・クラウドって何？• インターネット上に公開したサービスのこと

•プライベート・クラウドって何？• （たとえば社内とか）限定された範囲に公開したサービスのこと

• ある意味、「社内サーバ」をカッコよく言い直しただけといえば・・・おや、誰か来t(ry

Public ? Private ?

41

• Web アプリの「開発」は自分のPCで

• Web アプリの「公開」はクラウドで

• IaaS 環境なら自由に動かせる

• その分、公開までの手間はかかる

• PaaS 環境には制約がある

• たとえば、Google App Engine 上では Java と Python しか動かせない、ファイルが保存できない、とか（ただし、その分公開するまでの手間は楽）

Trend

42

Database

Webアプリの実行結果を保存しておくには、どうしたらよいだろう？（例）カウンターの数字を保存したい

（例）掲示板の書き込みを保存したい

もちろん、ファイルに書き込んでもOK！

Data

44

次の要件にピン！ときたら「データベース」を使うことを検討しよう（例）データが壊れたり、データ同士の矛盾がないように安全に保管する必要がある。

（例）たくさん保存したデータの中から検索する必要がある。しかも高速に。

データベースは「安全にデータを保管し、高速にデータを探すことに特化したミドルウェア」と覚えよう（よく、「DBサーバ」と呼んだりします）

Database

45

データベースにも種類があります。

特に有名なのが、表で管理する「リレーショナル・データベース（RDB）」。

有償製品だと Oracle や SQL Server、無償だと MySQL、PostgreSQL あたりが有名。

Database

46

保管している表にデータを登録したり、表からデータを検索するためには「SQL」という言語を使う必要があることを覚えておこう。

Database

47

ID 名前 既婚1 X YES2 Y NO3 Z YES

「人物」表

SELECT 名前 FROM 人物 WHERE 既婚=’NO’;

最近、RDB や SQL を使わないデータベースが登場し、流行っているような気がする・・・

ひとくくりに「NoSQL」と呼んだりしているけど、特に「KVS（Key-Value Store）」は Google の「Bigtable」で有名。

保管したいデータの特性で RDB か NoSQL を選ぶ！

Trend

48

How to

結局、Webアプリってどうやって作るの？1.作りたいサービス（=Webアプリ）を考える

2.実行環境（開発言語）を決める

3.開発環境を用意する

4.作る

5.公開する

Constructions

50

1.作りたいサービス（=Webアプリ）を考える

一番重要。なぜそのサービスは必要なの？

誰のため？何のため？

もちろん、自己満でも練習のためでもOK！

Constructions

51

2.実行環境（開発言語）を決める

これも重要。そのサービスはどこに公開するの？

インターネット？社内？学内？自宅？

ネット上なら PaaS 使う or 自宅サーバにチャレンジ

自分の得意な言語から実行環境を決めるのがオススメ

Constructions

52

3.開発環境を用意する

開発言語まで決まれば、あとは言語ごとに決められた手順で開発環境を作るだけ！

SDK（Software Development Kit）やミドルウェア、IDE（Integrated Development Environment）など、ネット上にたくさん情報があるのでググるべし

Constructions

53

4.作る

サービスが提供する「画面」を考えたり、画面上のボタンをクリックしたときの「動作」を考えたり・・・

まずは自分のPC上で Hello World を動かしてみよう！

ブラウザから自分のサービスにアクセスして動いた時の感動は・・・ひとしおです

Constructions

54

5.公開する

自分のPC上でサービスが完成したら、みんなに使ってもらおう！

ちなみに、公開用のマシン（サーバ）に作ったWebアプリを置くことを「デプロイ（deploy）する」と言います

Constructions

55

•これから深く勉強するためには・・・？1. 公開されている技術仕様、知識体系を学ぶ。

2. 人のソースを読む。

3. 手を動かしてみる。作って覚える。

•自分が困っていること、悩んでいることの大半は、先人も同じ道を辿っているはず、と思うべし（探せば解が見つかる）

Why not ?

56

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

57

This is all

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

See more...• Webアプリの開発全般を深く知りたい

• 「ソフトウェア工学」や「ソフトウェア開発工程」を勉強しよう• Git とか Subversion はソフトウェア開発工程の「ソフトウェア構成管理」を実現するためのツールの一例です

• ソフトウェア開発工程モデルの例• 「アジャイル」→比較的小規模ならこちら

• 「ウォーターフォール」→大規模はこっち

• 情報処理技術者試験を受験してみよう60

See more...

•プログラムの設計手法を深く知りたい• 「オブジェクト指向設計の原則」「パターン」を勉強しよう

• パターンの例• 「デザインパターン」まずはこれを理解

• 「J2EEパターン」Javaで作る人は推奨

• 「アーキテクチャ・パターン」アーキテクト目指すなら「POSA」を理解すること（あの「MVC」もPOSAの一例です）

61

See more...

•プログラムのテスト手法を深く知りたい

• IEEE が「テスト設計技法」を定義しています

• アプリケーション開発で最も奥が深く、どうテストすべきなのか…（むしろ知りたいくらい）

• とりあえず、「バグのないプログラムはない」とだけ覚えておこう

62

See more...

• Web のセキュリティを深く知りたい

• IPA が無償で情報公開しています

• 安全なウェブサイトの作り方

• http://www.ipa.go.jp/security/vuln/websecurity.html

•ログインの仕組みについて深く知りたい

• 「認証」「認可」について勉強しよう

63

See more...•アプリ開発でお金を稼ぎたい

• 「共通フレーム2007」を勉強しよう

• プロセス、共通言語、見積もり手法や契約方法等、基本的な枠組みが定義されています

• 顧客とのやりとり手法なら「REBOK（要求工学知識体系）」や「BABOK（ビジネス分析知識体系）」を勉強しよう

• プロジェクトの管理手法なら「PMBOK（プロジェクト管理知識体系）」を勉強しよう

64

おまけ巷で話題となりつつある「Firefox OS」上で動くアプリも立派な「Webアプリ」。

「Webアプリ」が必ずしもサーバ技術とは言えなくなってきたので、「サーバサイドWebアプリケーション」「クライアントサイドWebアプリ」と呼ぶ必要があるのかも・・・

See more...

65

End