Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,914 views

Published on

2014.06.14 htmldayに開催しました「ソフト道場Presents HTML5プロフェッショナル認定資格 特別対策セミナー」での講演資料です。

Published in: Internet
  • Be the first to comment

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

  1. 1. Copyright 2014 NTT Software Corporation. All rights reserved. Webページが 表示されるまで 2014.06.14 <htmlday> NTTソフトウェア 鈴木雅貴 ソフト道場Presents HTML5プロフェッショナル認定資格 特別対策セミナー
  2. 2. Copyright 2014 NTT Software Corporation. All rights reserved. 本日お話すること ● レベル1試験範囲に含まれる「Webの基礎知識」 「ネットワーク・サーバ関連技術の概要」ですが、 適当な参考書がわからなかったり、それらしきもの を見つけても内容が詳細で苦労されている方が多い ようです。 ● そこで本日は、WebブラウザでWebページを表示 する箇所に着目し、さまざまなプロトコルがどのよ うな役割を果たしているのかを解説することで、み なさまの理解の助けになることを目的とします。 2
  3. 3. Copyright 2014 NTT Software Corporation. All rights reserved. 自己紹介 ● 鈴木雅貴(すずきまさたか) ● NTTソフトウェア HTML5推進室(HAO) ● 社内案件支援 ● 社内技術導入・普及活動 ● レベル1書籍執筆や研修講師 ● 個人的に日本語組版関連のCSS仕様翻訳(停滞 中) 3
  4. 4. 宣伝
  5. 5. Copyright 2014 NTT Software Corporation. All rights reserved. © クラウドセキュリティソリューション 5
  6. 6. 本題
  7. 7. Webページが 表示されるまで
  8. 8. Copyright 2014 NTT Software Corporation. All rights reserved. 登場するプロトコル ● IP ● DNS ● TCP, UDP ● HTTP ! ● プロトコルとは、コンピュータが通信を行うために 必要な約束事 ● 通信時には同じプロトコルを使う必要がある 8
  9. 9. Copyright 2014 NTT Software Corporation. All rights reserved. 登場人物 ● PC: 略 ● Webブラウザ: PCやスマホ上で動作する、Webサ イトを閲覧するためのブラウザ(以降ブラウザ) ● サーバマシン: サーバアプリが動作するコンピュー タ機器 ● Webサーバ: サーバマシン上でWebサイトを提供 するサーバソフトウェア 9 ブラウザ PC サーバマシン Webサーバ
  10. 10. サーバマシン上の Webページを見たい
  11. 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. 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. 13. 普段IPアドレスなんて 使わないよ
  14. 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サーバ
  15. 15. Copyright 2014 NTT Software Corporation. All rights reserved. ドメイン名についてもうすこし 15 (root) jpcom example nttswww www co ● ドメイン名は以下のように、rootを頂点とした木構 造になっている ● 各階層にDNSサーバが存在し、管理を行う
  16. 16. Copyright 2014 NTT Software Corporation. All rights reserved. DNSについてもうすこし ● www.ntts.co.jpの名前解決イメージ 16
  17. 17. Copyright 2014 NTT Software Corporation. All rights reserved. どのくらいかかるか見てみましょう ● Chrome Developer Tools の「Network」タブ ● 「DNS Lookup」がそれ 17
  18. 18. これでサーバマシンに 情報を送れます
  19. 19. あれ? Webサーバはどこ?
  20. 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. 21. Copyright 2014 NTT Software Corporation. All rights reserved. TCPについてもうすこし ● TCPは事前のやりとりで通信路を確立し、その上で 情報をやりとりする ● 投げっぱなしはしない ● エラーチェックや再送など、情報を確実に送るた めの仕組みを用意している ● よく比較されるものにUDP(User Datagram Protocol)がある 21 ブラウザ PC サーバマシン 192.0.43.10 Webサーバ(80)
  22. 22. Copyright 2014 NTT Software Corporation. All rights reserved. UDPについてもうすこし ● UDPでもポート番号を同様に指定する ● 異なるのは通信路を確立せず、送信要求があると一 方的に情報を送信する点 ● エラーチェックや再送など、情報を確実に送るた めの仕組みはない ● 音声や映像など、一定時間内に一定量の情報を送信 するものに向いている 22 ブラウザ PC サーバマシン 192.0.43.10 xxサーバ(xx)情報ください! 届くかどうかわからんが送るよ!
  23. 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へ!
  24. 24. Copyright 2014 NTT Software Corporation. All rights reserved. どのくらいかかるか見てみましょう ● Chrome Developer Tools の「Network」タブ ● 「Connecting」がTCPでの通信路確立の時間 24
  25. 25. ブラウザと Webサーバがつながった
  26. 26. Webページの データがほしい…
  27. 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. 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. 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
  30. 30. Copyright 2014 NTT Software Corporation. All rights reserved. リクエストレスポンスを見てみましょう ● Chrome Developer Tools の「Network」タブ ● 左の各リソースをクリックすると詳細が見られる 30
  31. 31. HTMLが 取得できた!
  32. 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. 33. HTMLを 取得したら?
  34. 34. Copyright 2014 NTT Software Corporation. All rights reserved. HTMLを取得して行うこと ● HTMLをパース(分析)し、必要なリソースを洗い 出す ● CSS、JavaScript、画像など… ● 洗いだしたら、HTMLの記述順に取得を行う ! ● 実際にはHTMLを分析しながら取得しています 34
  35. 35. Copyright 2014 NTT Software Corporation. All rights reserved. 図にすると… 35 DNS 名前解決 TCP コネクション 確立 HTTPで データ受信 HTML 受信! リソース分 •DNS名前解決 •TCPコネクション確立 •HTTPでデータ受信 を繰り返す リソース 受信! ● これらもDeveloper Toolsで見られます
  36. 36. 必要なリソースが って あとは表示するだけ!
  37. 37. 表示プロセスは 割愛します
  38. 38. 無事Webページが 表示できました!
  39. 39. Webページ表示の流れは 理解できましたでしょうか?
  40. 40. Copyright 2014 NTT Software Corporation. All rights reserved. 参考: パフォーマンス向上手法との関係 ● DNS名前解決やTCP通信路確立にも時間がかかる ● リソースごとにDNS名前解決やTCP通信路確立が 発生 ● リソースの数を減らすことが性能向上につながる ● CSS/JavaScriptファイルの結合 ● CSSスプライト 40 仕組みを知っておくと イメージしやすい
  41. 41. Copyright 2014 NTT Software Corporation. All rights reserved. 参考: TCP/IP ● IP、DNS、TCP、UDP、HTTPなどのプロトコルは まとめてTCP/IPと呼ばれる ● TCP/IPは、IPを利用したり、IPで通信するときに 必要となる多くのプロトコル群の総称 ● まさにインターネットのためのプロトコル ● インターネットプロトコルスイートとも呼ばれる 41
  42. 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. 43. ふりかえり
  44. 44. Copyright 2014 NTT Software Corporation. All rights reserved. 本日お話したこと ● Webページの表示に関わるプロトコルの働き ● IP ● DNS ● TCP, (UDP) ● HTTP ! ● みなさまの理解の助けになりましたら幸いです 44

×