HTML5手習い

HTTPとは

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTTPの概要を説明し、HTTPがリクエスト・レスポンス型のプロトコルであること、リソースとメソッドなどについて学びます。また、HTML、HTTP、ブラウザの関係や、ChromeのデベロッパーツールでHTTP通信の内容を確認する方法について説明します。
講師:
07:21

字幕

このレッスンでは Web の中核である HTTP について学びます HTTP とは インターネット上にあるサーバーと ユーザの PC 上のブラウザなどのHTTP クライアントが通信をするための取り決めです index.html や IMG タグから 参照されている画像などは 基本的に全て HTTP プロトコルで 取得されます HTTP は より下位の TCP/IP という レイヤの上に構築されています TCP はデータの確実な配送を保障し IP はデータの配送をするための プロトコルです HTTP のメッセージは まず TCP のレイヤで包まれ それからさらに IP のレイヤで 包まれることになります これは実際にインターネット上を伝送される データもこのような形で配送される事になります TCP では IP アドレスとポート番号という形で 配送先のアプリケーションを指定します そのため HTTP においても IP アドレスと ポート番号という2つの組が必要になります なお IP アドレスは通常 DNS ― ドメインネームシステムによって解決されるため 普段ユーザーが 目にすることはあまりありません HTTP は リクエストレスポンス型のプロトコルです つまり HTTP による通信は― 必ずクライアントが サーバーに対してリクエストを行い それに対してレスポンスを返すという 形式になっているのです HTTP のリクエストは リソースに対するメソッドになっています リソースというのは HTML ファイルや 画像ファイルなどの事です これに対して 取得をするのか あるいは画像ファイルをポスト― すなわち サーバー側に投稿するのかと いったことを指定する形式になっています HTTP リクエストでは 実際にこのように― GET の後にパス名が続いて プロトコルのバージョン番号が続くという リクエストラインと呼ばれるものが 記述されています HTTP メッセージの構造は リクエストでも レスポンスでも ある程度共通しています まず最初にリクエストでは リクエストラインと呼ばれる― メソッド パス名 バージョン番号が 記述されたラインが続き 続いてリクエストヘッダが続きます リクエストヘッダには コンテンツのサイズや クライアントがどのようなコンテンツを 再生する事ができるのかといった 様々な情報が含まれています それに続いて もしあるのならば データが付与されます リクエストにはデータがない場合もあります レスポンスでは ステータスラインと呼ばれる そのリクエストが成功したのか失敗したのか といったことを示す行が含まれています また リクエストと同様にヘッダが続き その後にボディ― すなわち HTML ファイルや 画像ファイルなどの実際の中身が続きます HTML に関連するデータは基本的に HTTP で取得されます すなわち まず最初に HTML ファイルが HTTP によって取得され その中身をブラウザが解釈します そして HTML の中に何か 取得の必要なリソースが記述されていれば そちらも HTTP で取得します つまり HTTP で HTML や そこから参照されたデータを取得し それをまとめて描画するのが ブラウザがやっていることなのです JavaScript から 直接 HTTP を使って 様々なデータを取得する事も可能です これはサーバー API を 使用する場合などに用いられます Google Chrome を使用して 実際に HTTP でやり取りされる メッセージの中身を見ることができるので 試してみましょう まず開発者コンソールを開きます Mac の方は Command + Option + I Windows の方は Ctrl + shift + I です これを開いて Network のタブを選択します こちらのタブが HTTP やその他のプロトコルで やり取りされるデータが表示される場所です それでは試しに Google のトップページと HTTP で通信をしてみましょう アドレスバーに http://google.co.jp と入力して Enter を押してください するとこのようにページを開いた時に 行われた通信が― 上から順に時系列で表示されています 一番上をクリックすると このような内容が表示されます Status Code 301 はリダイレクトが 行われたことを示しています 2番目はリダイレクトされた先で 更にリダイレクトされたことを示しています 3番目でようやくトップページの 本体の HTML 取得に成功しています Status Code 200 は成功の意味です Remote Address はサーバー側の IP アドレスとポート番号の推移を示しています ヘッダをもう少し詳細に見てみると 実に様々な情報が記述されています たとえばこの Response ヘッダの Content タイプは― ボディの種別 テキストの HTML である事が示されています Response タブを開いてみましょう するとメッセージのボディの 中身が表示されています このように HTML が記述されています また画像の例も見てみましょう このように HTML の場合と同様に ヘッダに関する情報が表示されております 例えば Content-length は 画像のサイズを示しており プレビューを見るとこのように どのような画像が取得されたのかが表示されます このレッスンでは― Web の中核である HTTP とは どのようなプロトコルであるのかを学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。