Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTTP入門
Similar a HTTP入門 (20)
Más de Sota Sugiura
Último
Último (10)
HTTP入門
- 2. はじめに
- 3. 目標 • 「ブラウザでURLを打ち込み、ページが出る」まで に何が起きているのかを知る • HTTPの特徴を知る • HTTPにできること/できないことを知る
- 4. アジェンダ ✓ HTTP is ✓ HTTPの役割 ✓ Web通信の流れ ✓ HTTPの実態 ✓ HTTPにできる / できないこと ✓ まとめ
- 5. HTTP is
- 6. HTTP is • HTTP = Hyper Text Transfer Protocol • HTTPとはWebブラウザとWebサーバの間でHTML などのコンテンツの送受信に用いられる通信プロト コルである。
- 7. HTTPはWebと共に生まれた • HTTPは1989年3月に誕生した • 遠隔地で研究者同士の知識を共有するための仕組み としてWWWが考案された • 構成要素としてHTML, HTTP, URLが提案された
- 10. 郵便で言うプロトコル • 送信者 • 郵便物に住所と名前を書いて、ポストに入れる • 受信者 • ポストを用意する • ポストに入った郵便物を受け取る
- 12. HTTPの役割
- 13. HTTPはWebのための技術
- 15. クライアントサーバモデル • Web通信にはクライアントとサーバが存在する • サーバはリソースを配信する • クライアントはリソースを問い合わせる • クライアントが何もしない限り通信は発生しない
- 23. HTTPはルール • 「このページください」というリクエストや「は い、このページだよ」というレスポンスの書き方が HTTPの正体 • HTTPの決まりに則って作られたHTTPメッセージ を用いてリクエスト/レスポンスを送る • リクエスト/レスポンスを解釈するための共通言語
- 24. いったんおさらい • Web通信にはクライアントとサーバが存在する • クライアントがサーバにリクエストを送る • サーバがクライアントにレスポンスを返す • リクエスト/レスポンスはHTTPで定められたルール で作られたHTTPメッセージを使用する
- 25. これだけ？
- 26. これだけじゃない(´・ω・｀)
- 27. HTTP in TCP/IP HTTP TCP IP Network HTTP TCP IP Network ユーザ サーバ TCP/IP
- 28. ざっくり流れを追う
- 29. Web通信の流れ
- 31. 例：お化粧を探したいS君 S君
- 33. Web通信の流れ ① クライアント(ユーザ)がURLを入力する ② そのURLが指すサーバがどこにあるのか調べる ③ 調べたサーバと通信開始の信号を送り合う ④ リクエストを送る
- 35. ②送信先を調べる • URLは人間が分かりやすいように考えられたもの • 機械はURLからサーバの場所を知ることができない • URLをもちいてIPアドレスをDNSサーバに問い合わ せる必要がある • ※厳密にはURL中に含まれるHost名
- 44. http://cosme.netのページが見たい ④リクエストを送る OK、ファイル送ったるわ クライアント HTTPリクエスト HTTPレスポンス cosme.net @210.129.109.21
- 46. Not only HTTP • HTTPはリクエスト/レスポンスメッセージで使われ るプロトコル • 通信先を探したり、実際に通信を行うのは別のプロ トコルが担当している • Webの通信は様々な技術によって成り立っている
- 47. HTTP in TCP/IP • そんなWebのイケてるプロトコルたちをまとめて TCP/IPと呼んだりします • HTTPもTCP/IPの一部です • TCP/IPを制するものはWebを制する • [ 検索 ] [ マスタリングTCP/IP ]
- 48. HTTPの実態
- 49. HTTPメッセージ is テキスト • HTTPメッセージの実態はテキスト • HTTPのルールに則って作られたテキストがHTTP メッセージ
- 51. GET / HTTP/1.1 Host: sota1235.com HTTP/1.1 200 OK Date: Thu, 30 Jul 2015 02:47:55 GMT Server: Apache Last-Modified: Thu, 04 Dec 2014 06:50:12 GMT ETag: "700d9f-3776-5095e5f2e5100" Accept-Ranges: bytes Content-Length: 14198 Content-Type: text/html <!DOCTYPE html> … クライアント HTTPリクエスト HTTPレスポンス cosme.net @210.129.109.21
- 52. HTTPリクエスト
- 53. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko
- 54. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko メソッド URI プロトコルバージョン
- 55. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko リクエストヘッダーフィールド メソッド URI プロトコルバージョン
- 56. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko リクエストヘッダーフィールド エンティティ メソッド URI プロトコルバージョン
- 57. HTTPレスポンス
- 58. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ………
- 59. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明
- 60. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明 レスポンスヘッダーフィールド
- 61. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明 レスポンスヘッダーフィールド ボディ
- 62. いつ使うの？ • はっきり言ってほとんど使う場面はないです • でもWebと関わる人は知っておくべき技術です • 以下のものは押さえときたい • メソッド • ステータスコード • 主要なヘッダー
- 63. ヘッダーを意識する • 普段の開発で意識しとくとよいのがヘッダー • あなたの想像よりも多機能(きっと) • 様々なヘッダー設定することで通信を制御したり、ブラウザ に特定の振る舞いを命令することができる ✓ キャッシュ ✓ CSP ✓ リソース読み込み元の制限(Same Origin Policy) ✓ ファイル転送方式(gzipによる圧縮等)
- 64. 閑話休題
- 66. 本当に(´・ω・｀)？
- 67. HTTPの特徴を見てみる
- 69. GET / HTTP/1.1 @cosmeのトップページを取得
- 70. GET / HTTP/1.1HTML上のリソース全てに する • ページで使われるjs • ページで使われるcss • ページで使われる画像 も全部！
- 71. GET / HTTP/1.1HTML上のリソース全てに する • ページで使われるjs • ページで使われるcss • ページで使われる画像 も全部！ 問題 使うリソースの数に比例してページ読み込みが 遅くなる
- 73. クライアント サーバ HTTPリクエスト HTTPレスポンス Disconnect Three Way Handshake
- 74. クライアント サーバ
- 75. クライアント サーバ 問題 同じ相手とやりとりしてるのにリクエストごとに毎回 TCP通信が発生する = IP逆引きもTCP確立もやり直し
- 76. HTTP通信の特徴 • HTTPは状態を保持しない • HTTPはステートレスなプロトコル • サーバは以前の通信内容を覚えない
- 84. 昔はよかった • HTTPは当初、ドキュメントを配信するため作ら れた • でもTwitterとかログインできるWebサービスとか ワンページアプリケーションとかできるなんて誰 も想像してなかった
- 85. 諸行無常 • 時代が変わるにつれてHTTPだけじゃ対応できな くなってきた • そもそもHTTPが古すぎる • 今主流のHTTP/1.1が策定されたのは1997年 • とてもじゃないがHTTPだけではそれらのサービ スを実装できない
- 86. 諸行無常 • 時代が変わるにつれてHTTPだけじゃ対応できな くなってきた • そもそもHTTPが古すぎる • 今主流のHTTP/1.1が策定されたのは1997年 • とてもじゃないがHTTPだけではそれらのサービ スを実装できない
- 87. でも大丈夫
- 88. 素敵な仲間たちがいるから
- 89. HTTPにできる/できないこと
- 90. HTTPにできること
- 92. TCP通信の省略 • HTTP/1.1であればConnectionヘッダーで制御可能 • Connection: Keep-Alive • 特に指定がなくてもほとんどの環境で自動的に適用 されます
- 93. クライアント サーバこれが
- 94. クライアント サーバこうなる
- 95. セキュアな通信 • HTTP/1.1であればBASIC認証, DIGEST認証が使用可 能 • HTTPの段階でセキュアに認証するために導入された • でも全然セキュアじゃないので使わないでください
- 96. セキュアな通信 • BASIC認証 • パスワードが平文でHTTPメッセージに乗っかる • DIGEST認証 • パスワードはメッセージに乗らないが認証トークンはメッ セージに乗っかる いずれも盗聴されたら終わり 認証機構をHTTPのみで実装するのはやめましょう
- 97. HTTPにできないこと
- 98. できないこと • 状態保持(ステートフルな通信) • セキュアな通信 • サーバプッシュ • 通信の並列 / 多重化
- 100. Cookie??
- 104. Cookie • ログイン情報やECのカート情報をCookieに入れてお き、次回以降は常にCookieも含めて通信する • 状態保持ができ、ステートフルな通信を実現できる • Cookieには有効期限をつけたりJSから読み込めなく したりすることもできる
- 105. セキュアな通信 • HTTPS通信で実現できる • HTTPS = HTTP + SSL / TLS • 複数プロトコルを組み合わせ、暗号化通信を実現する • BASIC, DIGESTと違い盗聴されても大丈夫！ • ただし導入にはコストがかります( ꒪⌓꒪)
- 106. サーバプッシュ • JavaScriptのAjaxによって実現される • 手法がいくつか存在する • Polling / Comet(Long Polling) / WebSocket • それぞれの長所 / 短所を知り、使い分けるのが大事 • 選択肢はComet or WebSocket
- 107. 通信の並列/多重化 • HTTP/1.1までで実現する方法はないです(´・ω・｀) • のでフロントをデザインする際はリソースの読み込 み順や通信量を意識する必要がある • ただしモダンなブラウザでは通信の並列化を行って いる
- 108. 通信の並列/多重化
- 110. 通信の並列/多重化 • だいたいのブラウザでは6個まで処理できる • 7つ目のリクエストは6個のうちどれかが完了するま でWaiting状態になる • ページが重い時はHTTPリクエストの所作を見るのを おすすめします
- 111. まとめ
- 112. Web通信で大事なこと • Web通信はクライアント/サーバがリクエスト/レスポ ンスをやりとりすることで実現される • リクエスト/レスポンスにHTTPが使用される • クライアントからアクションを起こさない限り通信 は発生しない
- 113. HTTPで大事なこと • HTTPはステートレスなプロトコル • HTTPメッセージの実態はテキスト • HTTPの役割を理解し、できる/できないことを知る
- 114. おまけ
- 116. HTTP/2.0 • 今までできなかったことができるようになるらしい • サーバプッシュ • ストリームによる通信の多重化 • ボディのバイナリ化による高速化 • リソース読み込み優先順位付け
- 117. HTTP/2.0は次回ヾ(*´∀｀*)ﾉ
- 118. 以上、解散！