【T3a】HTTPのやり取りを確かめる(4/5)
| プロジェクトタイプ | ASP.NET Core (空) |
|---|---|
| プロジェクト名 | T3a |
| ソリューション名 | PIT3 |
| ターゲットフレームワーク | .NET 8.0(長期的なサポート) |
| 最上位レベルのステートメントを使用しない | 使用する(チェックオフ) |
注意
- 本ページの作業内容は 前のページまでの続き になっていることに注意せよ．
- 先に前のページまでをすべて読み，指示されている作業を済ませてから本ページを読むこと．
- プロジェクトの作成作業については準備作業を参照せよ．
3a-4. Firefoxの機能を使ってHTTPのやり取りを確認する
それではまずはウェブブラウザ Firefox を使用して，先ほどのページにアクセスした際に やり取りされているテキストメッセージを観察してみよう． このためには Firefox の 開発ツール を利用する．開発ツールはF12キーを押すと開始される(_)． をクリックすると表示のレイアウトを変更することができる(_)ので好きな表示方法で 使用して良い．本稿では以降は「 下側に表示 」で説明する．
開発ツールでは，表示中のページのHTMLの内容や実行されているスクリプトをデバッグするなど様々なことを行うことができるが， 今回は開発ツールの ネットワークモニター (「ネットワーク」タブ)を使って， ウェブブラウザがページにアクセスした際のやり取りを観察することにする．
「ネットワーク」をクリックして，「キャッシュを無効化」にチェックを入れる (_)．この状態でウェブブラウザのを押すか F5 キーを押下しよう． すると_のような表示になる．これは今の操作によって行われた個々のファイルに対するHTTPのやり取りを 一覧表として表示したものである．
現在表示されているページのURLはhttp://localhost:であるが，これは
「ポート番号/Greeting.htmllocalhostという名前のコンピューターにある/Greeting.htmlというファイル」を指し示している．
_のリストのうち「ドメイン」の列がlocalhost:，「ファイル」の列がポート番号Greeting.htmlである項目をクリックして選択しよう．
すると_のような表示になり，このファイルを取得した際のリクエストとレスポンスを見ることができる．
では実際に今の操作でウェブブラウザが送信したメッセージを見てみよう．生のリクエストメッセージを見るには， 一覧から前述の項目を右クリックし，「値をコピー」→「要求ヘッダーをコピー」をクリックして(図3a-5-4)， 適当なテキストエディタを開いて貼り付けてみよう(_)．
おおむね_のような内容のテキストメッセージとなっているはずである(最後の空行はこの方法だと省略されてしまうが実際には送信されている)．
最初の行(_①)はスタートラインと呼ばれ，リクエストの場合は_に示すフォーマットをもつ．
GET ファイルパス HTTP/1.1
ファイルパスはサーバーに対して要求するファイルのパス(場所)である．
_の場合は「GET /Greeting.html HTTP/1.1」となっており，つまりサーバーに対して
「/Greeting.htmlにあるファイルをください」という要求をしていることを意味している．
リクエストのスタートラインの最初のGETのような部分を メソッド といい，
この要求がファイルパスが指し示すリソース(≒ファイル)に対して何を行うのかを示している．
GETの場合はGETリクエストといい，ファイルパスが指し示すファイルの内容をこちらに転送せよ，
という要求を表している．ウェブページ上でリンクをクリックしてアクセスしたときなど，WWWではほとんどのデータがGETリクエストを用いて取得されている
(_)．
HTTPにはこのほかにも_のようなメソッドがある．
| メソッド | 意味合い |
|---|---|
GET | 対象のリソースの内容の転送の要求 |
HEAD | GETと同じだが内容なしのヘッダーのみの要求 |
POST | 対象のリソースに対する処理要求 |
PUT | 対象リソースの作成もしくは上書きの要求 |
DELETE | 対象リソースの削除の要求 |
スタートラインに続くHost: localhost:のような部分(_②)はヘッダーと呼ばれ，
様々な付帯情報が記載される．ヘッダーはポート番号フィールド名: フィールド値
| フィールド | _における値 |
|---|---|
Hostフィールド | Host: localhost:5298意味: Hostフィールドは要求先のサーバーの名前(ドメイン名)とポート番号を意味する必須のフィールド．この場合は localhost(自分自身を意味するホスト名)のポート5298番へのアクセスであることを示す． |
User-Agentフィールド | Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0意味: ユーザーエージェント(≒ウェブブラウザの種類)を示す． Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0は Firefox であることを示す文字列である．この値はウェブブラウザごとに異なる(参考:User-Agent - HTTP - MDN)． |
Acceptフィールド | text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8意味: クライアントが受け入れ可能なメディアタイプ(≒ファイル形式)を示す． この場合は，「HTMLファイル( text/html)」「XHTMLファイル(application/xhtml+xml)」，「XMLファイル(application/xml)」 が最優先， 「AVIF(image/avif)」などが受け入れ可能であることを意味している． |
これに対するレスポンスはHTMLそのものとなる．ただし，実際にはリクエストと同様にスタートラインとヘッダー部分が付加されている．
このヘッダーを確認するには，ネットワークモニターの一覧から「ファイル」の列がGreeting.htmlである項目を選択して，
「応答ヘッダー」の部分の「生ヘッダー」をオンにする(_(1))．
実際に返却されているレスポンス全体は，
一覧から「ファイル」の列がGreeting.htmlである項目を右クリックし，「値をコピー」→「応答ヘッダーをコピー」の結果と
「応答をコピー」の結果をこの順番でつなぎ合わせたものと同等である(_(2))．
これは_のようなテキストメッセージであり，実際にサーバーからはこれが返却されている．
レスポンスのスタートライン(_①)は，_に示すフォーマットをもつ．
HTTP/1.1ステータスコードレスポンスフレーズ
ステータスコードはクライアントからの要求の実行結果を示す3桁の数字である．
レスポンスフレーズはステータスコードを人間が読みやすい形式にした表現である．
_の場合は「HTTP/1.1 200 OK」となっており，このステータスコード200というのは
成功裏に要求が完遂されたことを意味している．ほかのステータスコードの一例を_に示す．
この中でも「404 Not Found」などは目にしたことがあるのではないだろうか．
| カテゴリー | ステータスコード | フレーズ | 意味 |
|---|---|---|---|
| 200番台(成功) | 200 | OK | 成功裏に要求が完遂された． |
204 | No Content | 要求されたリソースを見つけたが送る内容がない． | |
| 300番台(リダイレクト) | 301 | Moved Permanently | 要求されたリソースが恒久的に移動された． |
302 | Found | 要求リソースが一時的に別の場所に移動された． | |
| 400番台(クライアント側のエラー) | 403 | Forbidden | 要求リソースへのアクセスが許可されていない． |
404 | Not Found | 要求リソースが見つからない． | |
| 500番台(サーバー側のエラー) | 500 | Internal Server Error | 処理中にエラーが生じた． |
503 | Service Unavailable | サーバーは一時的に要求を処理できない． |
これに続いてレスポンスもリクエストと同様に，様々な情報を表すヘッダー(_②)をもつ． そしてこのあとに空行が続きボディ(_③)としてHTML本体が続く．
ここまで見てきたように．HTTPではリクエストのためのメッセージもレスポンスのためのメッセージも 同様の構造を持っており，_に示すように スタートライン， ヘッダー ， ボディ (省略可能)の3つの部分を持つ．
ここまでは Firefox がリクエストの生成をしてくれていたわけだが，次節では_のようなリクエストを 手打ちで実行してみよう．Visual Studio のデバッグ実行は停止せずにそのままの状態で次に進むこと．