Web のクライアントサーバモデル

(1)

第2回の内容

• クライアントサーバモデル

• URI

(2)

(3)

クライアントサーバモデル

ユーザークライアントサーバ処理処理要求の入力処理要求処理結果結果の提示

(4)

Webのクライアントサーバモデル

ユーザー Webブラウザ Webサーバ

URIの指示 HTTPリクエスト

HTTPレスポンス Webページの描画

(5)

(6)

Webブラウザのアドレスバー

(7)

URIの例

(8)

URIの例

(9)

URIの例

(10)

URIの例

http://p-search.kantei.go.jp/ja_kantei/search.x?q=%E6%95%99 %E8%82%B2&ie=UTF-8&page=1&submit.x=0&submit.y=0

(11)

URIの構造

http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5

<scheme>://<host>:<port><path>?<query>#<fragment> URIの例

(12)

URIの構造

(13)

URIの構造

http

(14)

URIの構造

http

www.example.ac.jp

(15)

URIの構造

http

www.example.ac.jp /path/to/resource 8080

(16)

URIの構造

http

www.example.ac.jp /path/to/resource

(17)

URIの構造

http

www.example.ac.jp /path/to/resource

8080 qt=%E3%81%82&page=1

(18)

URIの構造 – スキーム名

<scheme>://<host>:<port><path>?<query>#<fragment> http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5 スキーム名: リソースにアクセスする方法スキーム名説明 http HTTP https TLSでセキュリティ保護されたHTTP

(19)

URIの構造 – ホスト名とポート番号

<scheme>://<host>:<port><path>?<query>#<fragment> http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5 ホスト名とポート番号: リソースを提供するWebサーバの名前とポートスキーム既定値 http 80 https 443 ポート番号既定値の場合は「_{:」も含めて省略}

(20)

URIの構造 – パスとクエリ

<scheme>://<host>:<port><path>?<query>#<fragment> http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5 パスとクエリ: Webサーバ内でのリソースの名前

• パスは「/」区切りの階層構造

• クエリがない場合は「?」も含めて省略

key₁=value₁&key₂=value₂&⋯ key=valueの組を&でつないだ形式

(21)

リソースの特定

• スキーム名からクエリまででリソースを特定

<scheme>://<host>:<port><path>?<query>#<fragment> http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5 Webサーバ Webサーバ内におけるリソースアクセス手段

(22)

URIの構造 – フラグメント識別子

<scheme>://<host>:<port><path>?<query>#<fragment> http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5 フラグメント識別子 • リソース内の一部分を指し示す • フラグメント識別子がない場合は「#」も含めて省略

(23)

URIの構造の例

(24)

URIの構造の例

http://www.ouj.ac.jp/

(25)

URIの構造の例

http://www.ouj.ac.jp/

スキーム名 http

ホスト名 www.ouj.ac.jp

(26)

URIの構造の例

http://www.ouj.ac.jp/ スキーム名 http ホスト名 www.ouj.ac.jp ポート番号 (省略) パス / クエリ (なし) フラグメント識別子 (なし)

(27)

URIの構造の例

(28)

URIの構造の例

http://www.ouj.ac.jp/hp/kamoku/H26/kyouyou/B/joho/1570102.html

ホスト名 www.ouj.ac.jp

(29)

URIの構造の例

http://www.ouj.ac.jp/hp/kamoku/H26/kyouyou/B/joho/1570102.html スキーム名 http ホスト名 www.ouj.ac.jp ポート番号 (省略) パス /hp/kamoku/H26/kyouyou/B/joho/1570102.html クエリ (なし) フラグメント識別子 (なし)

(30)

URIの構造の例

(31)

URIの構造の例

http://www.kantei.go.jp/ スキーム名 http ホスト名 www.kantei.go.jp ポート番号 (省略) パス / クエリ (なし) フラグメント識別子 (なし)

(32)

URIの構造の例

http://p-search.kantei.go.jp/ja_kantei/search.x?q=%E6%95%99 %E8%82%B2&ie=UTF-8&page=1&submit.x=0&submit.y=0

(33)

URIの構造の例

http://p-search.kantei.go.jp/ja_kantei/search.x?q=%E6%95%99

(34)

URIの構造の例

スキーム名 http ホスト名 p-search.kantei.go.jp ポート番号 (省略) http://p-search.kantei.go.jp/ja_kantei/search.x?q=%E6%95%99 %E8%82%B2&ie=UTF-8&page=1&submit.x=0&submit.y=0

(35)

URIの構造の例

ホスト名 p-search.kantei.go.jp

ポート番号 (省略)

パス /ja_kantei/search.x

(36)

URIの構造の例

スキーム名 http ホスト名 p-search.kantei.go.jp ポート番号 (省略) パス /ja_kantei/search.x クエリ q=%E6%95%99%E8%82%B2&ie=UTF-8&page=1 &submit.x=0&submit.y=0 フラグメント識別子 (なし) http://p-search.kantei.go.jp/ja_kantei/search.x?q=%E6%95%99 %E8%82%B2&ie=UTF-8&page=1&submit.x=0&submit.y=0

(37)

URIの構造の例

クエリ q=%E6%95%99%E8%82%B2&ie=UTF-8&page=1

&submit.x=0&submit.y=0

フラグメント識別子 (なし)

(38)

URIの構造の例

(39)

URIの構造の例

(40)

URIの構造の例

(41)

URIの構造の例

(42)

パスの階層構造

/ a c g /a/c/g

(43)

絶対パスと相対パス

絶対パス「_{/」から始まるパス} 相対パス現在のパスを起点としたパス絶対パスに変換できる「_{.」は現在の階層} 「_{..」は1つ上の階層}

(44)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g

(45)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g 相対パス絶対パス h /a/c/h

(46)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g 相対パス絶対パス h /a/c/h . /a/c/

(47)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g 相対パス絶対パス h /a/c/h . /a/c/ ./h /a/c/h

(48)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g 相対パス絶対パス h /a/c/h . /a/c/ ./h /a/c/h .. /a/

(49)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g 相対パス絶対パス h /a/c/h . /a/c/ ./h /a/c/h .. /a/ ../d/i /a/d/i

(50)

絶対パスと相対パス

/ a c g h d i b e f j 現在のパス: _/a/c/g 相対パス絶対パス h /a/c/h . /a/c/ ./h /a/c/h .. /a/ ../d/i /a/d/i ../.. /

(51)

絶対パスと相対パス

/ a c g h d i b e f j 相対パス絶対パス h /a/c/h . /a/c/ ./h /a/c/h .. /a/ ../d/i /a/d/i ../.. / ../../b/e /b/e 現在のパス: _/a/c/g

(52)

絶対パスと相対パス

現在のパス相対パス絶対パス

/a/b

.

/a/

..

/

/a/b/

.

/a/b/

..

/a/

(53)

絶対URIと相対URI

ベースURI 現在のURI 絶対URI スキーム名から始まる完全なURI 相対URI ベースURIからの相対的なURI 絶対URIの先頭からいくつかの構成要素を省略省略された部分はベースURIの対応する構成要素と同じ

(54)

絶対URIと相対URI

相対URI 絶対URI

(55)

絶対URIと相対URI

相対URI 絶対URI

//host2/a/b http://host2/a/b

(56)

絶対URIと相対URI

相対URI 絶対URI

//host2/a/b http://host2/a/b

/c/d http://host1/c/d

(57)

絶対URIと相対URI

相対URI 絶対URI //host2/a/b http://host2/a/b /c/d http://host1/c/d ./ http://host1/a/ ベースURI _{⋯ http://host1/a/b?k1=v1}

(58)

絶対URIと相対URI

相対URI 絶対URI //host2/a/b http://host2/a/b /c/d http://host1/c/d ./ http://host1/a/ ../e http://host1/e ベースURI _{⋯ http://host1/a/b?k1=v1}

(59)

絶対URIと相対URI

相対URI 絶対URI //host2/a/b http://host2/a/b /c/d http://host1/c/d ./ http://host1/a/ ../e http://host1/e ?k2=v2 http://host1/a/b?k2=v2 ベースURI _{⋯ http://host1/a/b?k1=v1}

(60)

絶対URIと相対URI

相対URI 絶対URI //host2/a/b http://host2/a/b /c/d http://host1/c/d ./ http://host1/a/ ../e http://host1/e ?k2=v2 http://host1/a/b?k2=v2 #f1 http://host1/a/b?k1=v1#f1 ベースURI _{⋯ http://host1/a/b?k1=v1}

(61)

絶対URIと相対URI

相対URI 絶対URI //host2/a/b http://host2/a/b /c/d http://host1/c/d ./ http://host1/a/ ../e http://host1/e ?k2=v2 http://host1/a/b?k2=v2 #f1 http://host1/a/b?k1=v1#f1 ../g?k3=v3#f3 http://host1/g?k3=v3#f3 ベースURI _{⋯ http://host1/a/b?k1=v1}

(62)

相対URIでのハイパーリンク

http://www.ouj.ac.jp/hp/kamoku/H26/

kyouyou/B/joho/1570102.html http://www.ouj.ac.jp/hp/kamoku/H26/ kyouyou/B/ippan_shizen/1234188.html

(63)

http以外のスキーム

スキーム例

(64)

http以外のスキーム

スキーム例

https https://upo-net.ouj.ac.jp/

(65)

http以外のスキーム

スキーム例

https https://upo-net.ouj.ac.jp/

ftp ftp://ftp.freebsd.org/pub/FreeBSD/README.TXT mailto mailto:[email protected]

(66)

http以外のスキーム

スキーム例 https https://upo-net.ouj.ac.jp/ ftp ftp://ftp.freebsd.org/pub/FreeBSD/README.TXT mailto mailto:[email protected] tel tel:+81-43-276-5111

(67)

(68)

Webのクライアントサーバモデル

ユーザー Webブラウザ Webサーバ

URIの指示 HTTPリクエスト

HTTPレスポンス Webページの描画

(69)

URIの解釈

http://www.example.ac.jp:8080/path/to/resource?qt=%E3%81%82&page=1#r5 Webサーバ Webサーバ内におけるリソースアクセス手段 • www.example.ac.jpの8080番ポートに接続し • HTTPで • /path/to/resource?qt=%E3%81%82&page=1を要求

(70)

HTTPのリクエストメッセージの例

GET /test.html HTTP/1.1 Host: www.example.ac.jp

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate

Connection: keep-alive

(71)

HTTPのレスポンスメッセージの例

HTTP/1.1 200 OK

Date: Mon, 14 Apr 2014 07:25:45 GMT Server: Apache

Last-Modified: Mon, 14 Apr 2014 06:58:19 GMT Etag: "b0-4f6fb355798c0"

Accept-Ranges: bytes Content-Length: 176

Keep-Alive: timeout=5, max=100 Connection: Keep-Alive

Content-Type: text/html; charset=utf-8 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テストページ</title> </head> <body> <h1>テストページ</h1> </body> </html>

(72)

HTTPのリクエストメッセージ

GET /test.html HTTP/1.1 Host: www.example.ac.jp

User-Agent: Mozilla/5.0 (Windows NT 6.1; ⋯ Accept: text/html,application/xhtml+xml, ⋯ Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate

Connection: keep-alive リクエストラインメッセージヘッダ空行メッセージボディ

(73)

リクエストライン

GET /test.html HTTP/1.1

• HTTP/1.1 を使って

• /test.html を

(74)

HTTPのレスポンスメッセージ

HTTP/1.1 200 OK

⋮

Connection: Keep-Alive

Content-Type: text/html; charset=utf-8 <!DOCTYPE html> <html lang="ja"> ⋮ </html> ステータスラインメッセージヘッダ空行メッセージボディ

(75)

ステータスライン

• 200 ⋯ ステータスコード

HTTP/1.1 200 OK

ステータスコード意味 200 リクエストに成功した 404 リソースが存在しない 403 権限がない 500 サーバ側でエラーが起こった

(76)

(77)

送り返されるリソース

HTTP/1.1 200 OK

⋮

Content-Type: text/html; charset=utf-8 <!DOCTYPE html> <html lang="ja"> ⋮ </html> リソースメディアタイプ

(78)

メディアタイプ

タイプ説明 text テキスト情報 image 画像データ audio 音声データ video 映像データ application その他の種類のデータ

タイプ

_{/サブタイプ}

(79)

メディアタイプ

メディアタイプ説明 application/octet-stream 任意のバイナリデータ application/pdf PDF application/xhtml+xml XHTML文書 application/zip ZIP書庫 image/jpeg JPEGフォーマットの画像 image/png PNG画像 text/css CSS text/html HTML文書 text/plain プレーンテキスト

(80)

メディアタイプのパラメータ

• charsetパラメータ ⋯ 文字コード

• text/html; charset=utf-8

⋯ UTF-8で書かれたHTML文書

(81)

送り返されるリソース

HTTP/1.1 200 OK

⋮

Content-Type: text/html; charset=utf-8 <!DOCTYPE html> <html lang="ja"> ⋮ </html> リソースメディアタイプ

(82)

Web のクライアントサーバモデル

第2回の内容

• クライアントサーバモデル

• URI

クライアントサーバモデル

Webのクライアントサーバモデル

Webブラウザのアドレスバー

URIの例

URIの例

URIの例

URIの例

URIの構造

URIの構造

URIの構造

URIの構造

URIの構造

URIの構造

URIの構造

URIの構造 – スキーム名

URIの構造 – ホスト名とポート番号

URIの構造 – パスとクエリ

リソースの特定

• スキーム名からクエリまででリソースを特定

URIの構造 – フラグメント識別子

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

URIの構造の例

パスの階層構造

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

絶対パスと相対パス

現在のパス 相対パス 絶対パス

/a/b

.

/a/

..

/

/a/b/

.

/a/b/

..

/a/

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

絶対URIと相対URI

相対URIでのハイパーリンク

http以外のスキーム

http以外のスキーム

http以外のスキーム

http以外のスキーム

Webのクライアントサーバモデル

現在のパス相対パス絶対パス

_{/サブタイプ}