Webページが表示されるまで

2. Copyright 2014 NTT Software Corporation. All rights reserved. 本日お話すること ● レベル1試験範囲に含まれる「Webの基礎知識」「ネットワーク・サーバ関連技術の概要」ですが、適当な参考書がわからなかったり、それらしきものを見つけても内容が詳細で苦労されている方が多いようです。 ● そこで本日は、WebブラウザでWebページを表示する箇所に着目し、さまざまなプロトコルがどのような役割を果たしているのかを解説することで、みなさまの理解の助けになることを目的とします。 2

4. 宣伝

6. 本題

7. Webページが表示されるまで

9. Copyright 2014 NTT Software Corporation. All rights reserved. 登場人物 ● PC: 略 ● Webブラウザ: PCやスマホ上で動作する、Webサイトを閲覧するためのブラウザ（以降ブラウザ） ● サーバマシン: サーバアプリが動作するコンピュータ機器 ● Webサーバ: サーバマシン上でWebサイトを提供するサーバソフトウェア 9 ブラウザ PC サーバマシン Webサーバ

10. サーバマシン上の Webページを見たい

11. Copyright 2014 NTT Software Corporation. All rights reserved. まずサーバマシンに接続したい ● インターネット上の無数のマシンから、対象のサーバマシンをどう識別する？ ● IPアドレスを使う ● 192.0.43.10のような数字の羅列 ● これを住所として目的のサーバにデータを送信 ● この仕組みを規定しているのがIP(Internet Protocol) 11 ブラウザ PC サーバマシン 192.0.43.10 Webサーバ 192.0.43.10へ！

12. Copyright 2014 NTT Software Corporation. All rights reserved. IPについてもうすこし ● IPは目的地まで情報を届けるためのプロトコル ● 住所にはIPアドレスを用いるが、その住所までり着く経路選択もIPで行う ● 基本戦略は、次はどのルータへ行けば目的地に着くかを、ルータに尋ねる ● ルータはどちらへ行けばよいかの情報（ルーティングテーブル）を持っている 12 ブラウザ PC サーバマシン 192.0.43.10 WebサーバルータA ルータC ルータD ルータF ルータB ルータE Cに行って！ Fに行って！

13. 普段IPアドレスなんて使わないよ

14. Copyright 2014 NTT Software Corporation. All rights reserved. IPアドレスに別名をつけましょう ● IPアドレスみたいな数字の羅列、覚えてられない！ ● ドメイン名を使う ● example.comのようなドメイン名と呼ばれる別名を付け、IPアドレスと紐付けて覚えやすくする ● 紐付けはDNS（Domain Name Service）で管理 ● DNSサーバに聞けばIPアドレスが！（名前解決） 14 ブラウザ PC Webサーバ example.comは？ 192.0.43.10！ 192.0.43.10へ！サーバマシン 192.0.43.10 DNSサーバ

18. これでサーバマシンに情報を送れます

19. あれ？ Webサーバはどこ？

20. Copyright 2014 NTT Software Corporation. All rights reserved. Webサーバに接続したい ● サーバマシン上にはsshなどのサーバも動作しており、IPアドレスだけではWebサーバを識別できない ● ポート番号を指定 ● サーバの種類（ssh, FTPなど）によって予めポート番号が決められている（Webサーバは80番） ● この仕組みを規定しているのが TCP(Transmission Control Protocol) 20 ブラウザ PC サーバマシン 192.0.43.10 Webサーバ(80) 192.0.43.10:80へ！ 80へ！

21. Copyright 2014 NTT Software Corporation. All rights reserved. TCPについてもうすこし ● TCPは事前のやりとりで通信路を確立し、その上で情報をやりとりする ● 投げっぱなしはしない ● エラーチェックや再送など、情報を確実に送るための仕組みを用意している ● よく比較されるものにUDP（User Datagram Protocol）がある 21 ブラウザ PC サーバマシン 192.0.43.10 Webサーバ(80)

22. Copyright 2014 NTT Software Corporation. All rights reserved. UDPについてもうすこし ● UDPでもポート番号を同様に指定する ● 異なるのは通信路を確立せず、送信要求があると一方的に情報を送信する点 ● エラーチェックや再送など、情報を確実に送るための仕組みはない ● 音声や映像など、一定時間内に一定量の情報を送信するものに向いている 22 ブラウザ PC サーバマシン 192.0.43.10 xxサーバ(xx)情報ください！届くかどうかわからんが送るよ！

23. Copyright 2014 NTT Software Corporation. All rights reserved. ポート番号、指定してますか？ ● 普段はしないですよね ● URLの先頭部分を使う ● http://example.com/ の http:// でWebサーバとの通信に用いるプロトコル（HTTP）を指定している ● つまり、ポート番号80を指定したことになる 23 ブラウザ PC サーバマシン 192.0.43.10 Webサーバ(80) http://example.com/ 80へ！

25. ブラウザと Webサーバがつながった

26. Webページのデータがほしい…

27. Copyright 2014 NTT Software Corporation. All rights reserved. Webページの取得 ● まずはHTMLファイルを取得する ● 取得にはHTTP（HyperText Transfer Protocol）を用いる ● TCPの通信路を利用して以下のやりとりを行う ● Webブラウザから「HTMLください」リクエストを送信 ● WebサーバからレスポンスでHTML送信 27 ブラウザ PC サーバマシン 192.0.43.10 Webサーバ(80) HTMLください！おっけい、HTML送るね！

28. Copyright 2014 NTT Software Corporation. All rights reserved. HTTPについてもうすこし ● リクエストにGET（取得）などのコマンドを使う ● 他にはPOST（登録）、PUT（保存）などなど… ● レスポンスに数字3桁のレスポンスコードを使う ● 200（OK）、404（Not Found）、 500（Internal Server Error）などなど… ● これらをヘッダとして送る ● ボディは必要に応じて使う（HTMLデータなど） 28 GET / HTTP/1.0 HTTP/1.0 200 OK

29. Copyright 2014 NTT Software Corporation. All rights reserved. HTTPについてもうすこし（2） ● HTTPメッセージはヘッダとボディに別れる ● ヘッダ ● リクエストやレスポンスがどんなものかを示す ● ボディ ● メッセージのデータ ● 単にデータを取得するリクエストやエラーには存在しない 29 GET http://example.com/ HTTP/1.0 HTTP/1.0 200 OK

31. HTMLが取得できた！

32. Copyright 2014 NTT Software Corporation. All rights reserved. HTMLを取得するまでの流れをまとめると 1. DNSでURLのドメイン名からIPアドレスを取得（DNS名前解決） 2. TCP通信路（TCPコネクション）確立 3. HTTPでリクエストを送りデータ受信 32 DNS 名前解決 TCP コネクション確立 HTTPでデータ受信 HTML 受信！

33. HTMLを取得したら？

36. 必要なリソースがってあとは表示するだけ！

37. 表示プロセスは割愛します

38. 無事Webページが表示できました！

39. Webページ表示の流れは理解できましたでしょうか？

40. Copyright 2014 NTT Software Corporation. All rights reserved. 参考: パフォーマンス向上手法との関係 ● DNS名前解決やTCP通信路確立にも時間がかかる ● リソースごとにDNS名前解決やTCP通信路確立が発生 ● リソースの数を減らすことが性能向上につながる ● CSS/JavaScriptファイルの結合 ● CSSスプライト 40 仕組みを知っておくとイメージしやすい

41. Copyright 2014 NTT Software Corporation. All rights reserved. 参考: TCP/IP ● IP、DNS、TCP、UDP、HTTPなどのプロトコルはまとめてTCP/IPと呼ばれる ● TCP/IPは、IPを利用したり、IPで通信するときに必要となる多くのプロトコル群の総称 ● まさにインターネットのためのプロトコル ● インターネットプロトコルスイートとも呼ばれる 41

42. Copyright 2014 NTT Software Corporation. All rights reserved. 参考: TCP/IPの階層モデル ● TCP/IPは機能を分割し4階層に分けている ● 各階層は下位層から特定のサービスを受け、上位層にサービスを提供する 42 階層名役割主要プロトコルアプリケーション層アプリケーションプログラム HTTP, DNS, SMTP, FTP トランスポート層コンピュータ内のプログラム間で通信できるようにする TCP, UDP インターネット層目的地までパケットを届ける IP, ICMP ネットワークインタフェース層 OSとハードウェアの橋渡し ARP, RARP （ハードウェア）ーー

43. ふりかえり

Webページが表示されるまで

Masataka Suzuki

Webページが表示されるまで