編集長ブログ―安田英久
HTTPヘッダーを知っていますか?

HTTPヘッダーを理解しておくとサイト上での仕組み作りの視野が広がるかもしれません。
安田英久(Web担 編集長) 2010/1/12(火) 11:00 このエントリーをはてなブックマークに追加 印刷用
この記事を読むのにかかる時間: 約 5 分
Google+ページでもWeb担向け情報発信中!

今日は、少し技術的な話ですが、Web担当者も知っておくといい知識を。テーマは「HTTPヘッダー」です。知らなくてもWebサイトは作れますが、知っておくとサイト上での仕組み作りの視野が広がるかもしれません。

ブラウザでWebページを表示するときに、ブラウザはWebサーバーと通信しています。そのときに使われるのが「HTTP」というルールです。

HTTPは「HTTPリクエスト」と「HTTPレスポンス」に分けて考えます。ブラウザがサーバーに「このページを見たい」と頼む通信が「HTTPリクエスト」で、そのリクエストに応えてサーバーがブラウザに返す通信が「HTTPレスポンス」です。

HTTPリクエスト

まず、ブラウザ → サーバーの「HTTPリクエスト」から説明しましょう。

HTTPリクエストはブラウザが送るものですから、HTTPリクエストを作るのはブラウザです。サーバーは、受け取ったHTTPリクエストの内容からどんな情報を返すかを判断します。

HTTPリクエストには「HTTPリクエスト行」「HTTPヘッダー」「データ本体」の3つのパートがあります。

  • HTTPリクエストの1行目が、リクエスト内容を示す「HTTPリクエスト行」です。ここには、「メソッド」「URL」「HTTPのバージョン」の3つの情報が含まれています。

    「メソッド」はWebではほとんどの場合「GET」で、この場合、HTTPリクエストでは「データ本体」は送られません。メソッドが「POST」の場合(フォームから情報を送信するなどでmethod="POST"が指定されている場合)は、HTTPヘッダーの後にデータ本体が続きます。

  • 2行目以降が「HTTPヘッダー」で、次のようなものが代表的です。

    • ユーザーエージェント名(User-Agent)
      ブラウザの種類やOSの情報。アクセスしているのがブラウザではなく検索エンジンのクローラの場合、「Googlebot」などの名前が入ります。

    • リファラ(Referer)
      どのページから発生したリクエストなのかを示します。よく知られているのは、ページAにあるリンクをクリックしてページBに行った場合に、ページBへのHTTPリクエストにリファラーとしてページAが入ることです。ほかにも、ページCを表示する際にページ内で使われている画像をリクエストする際に、画像のHTTPリクエストにリファラーとしてページCが入っています。

    • 更新されていたら(If-Modified-Since)/同じでなければ(If-None-Match)
      ブラウザは、一度表示したデータを「ローカルキャッシュ」として保存しておき、同じデータは何度も通信して取得しなくてもいいようにしています。そのときに、ローカルキャッシュのデータが変更されていないかチェックするために、ファイルの変更日付や管理情報をリクエストに含めておきます。すると、「更新されていなければその旨教えて」という意味になります。

    • クッキー(Cookie)
      ブラウザに保存されているクッキーデータは毎回サーバーに送られています。ログイン状態を続けられるのは、ログイン時にサーバーから送られたクッキーをブラウザが保存しておいて、リクエストの際に送っているからですね。

    • 受け取り希望(Accept、Accept-Language、Accept-Encoding、Accept-Charset)
      どんなデータを受け取りたいか、画像の種類や、言語、文字コードなどの希望を伝えます。英語バージョンと日本語バージョンなど複数の内容を提供している場合、サーバーはこの情報を元に適切な情報を返したり、動的なページでうまく提案したりできます。

HTTPレスポンス

次に、サーバー → ブラウザの「HTTPレスポンス」を説明します。

HTTPレスポンスはサーバーがブラウザに送るものですから、HTTPレスポンスを作るのはサーバーです。ブラウザは、受け取ったHTTPレスポンスを処理して画面に表示します。

HTTPレスポンスには「レスポンス状態行」「HTTPヘッダー」「データ本体」の3つのパートがあります。「データ本体」は、みなさんが通常見ているHTMLや画像のデータです。実際にはブラウザは、データ本体の前に「レスポンス状態行」と「HTTPヘッダー」を受け取っていますが、通常、画面には表示してくれません。

  • HTTPレスポンスの1行目が、リクエストに対する返答の状態を示す「レスポンス状態行」です。ここには、「状態コード」(「HTTPステータスコード」とも呼ばれる)などが含まれます。

    HTTPステータスコードは3桁の数字で表されます。よく使われるステータスコードは、次のように分類されます。

    • 200番台は成功
      • 200:OK、データを送ります
    • 300番台はリダイレクト
      • 301:新しい場所から取得してください(今後もずっと)
      • 302:新しい場所から取得してください(今回だけ)
      • 304:変更されていません(データ本体は送られない)
    • 400番台はクライアント側のエラー
      • 401:ユーザー認証が必要です
      • 403:アクセスが禁止されています
      • 404:見つかりませんでした
    • 500番台はサーバー側のエラー
      • 500:内部エラー
      • 503:現在はサービス提供不可能
  • HTTPヘッダー」は、データ本体の前に送られてくる、各種の状態を示す情報が入れられている部分です。HTTPレスポンスの代表的なHTTPヘッダーには次のようなものがあります。

    • コンテンツタイプ(Content-Type)
      データがHTMLなのか画像なのかや、文字コードなどの情報。

    • 再利用期限(Expires)
      取得したデータを再度サーバーに問い合わせなくてもブラウザが再利用していい期限(キャッシュの制御に使われる)。

    • データの最終更新日時(Last-Modified)やエンティティ情報(ETag)
      HTMLや画像などがいつ更新されたものかの情報や、サーバー上のファイルの場所ID、ファイルのサイズ、更新日時などから算出した、更新チェック情報。次回同じデータをリクエストする際に、これらの情報を使って更新されているかどうかを確認します。

    • キャッシュ制御(Cache-ControlやPragma)
      ブラウザや通信を橋渡しするプロキシが、データのキャッシュをどう扱うかの情報。

    • 接続状況(Connection)
      接続を持続するのか(keep-alive)、毎回接続を切断するのか(close)。ブラウザもサーバーもHTTPバージョン1.1の持続接続(keep-alive)を使える場合、通信のやりとりが効率良くなります。

    • 移動先(Location)
      リクエストと違う場所からデータを取得するように示す指示。新しい場所のURLが含まれます。いわゆるリダイレクト先を示す情報です。

HTTPヘッダーの小ネタ

ちなみに、HTTPヘッダーに関する小ネタとして、次のようなものがあります。

  • 「リファラー」の綴りは本当は「referrer」が正しいのだだけれども、当初間違って使われた「referer」がそのまま使われている。

  • HTMLの<meta http-equiv="xxx" content="xxx">タグは、「この内容がHTTPレスポンスのHTTPヘッダーに含まれていたとして扱いなさい」という意味。だから、meta http-equivでContent-TypeやCache-Controlを指定するんですね。

HTTPヘッダーの確認方法

いかがでしょうか、「HTTPヘッダー」や「ステータスコード」といった用語に少しなじみができたでしょうか?

実際にどんなHTTPヘッダーがやりとりされているのかを確認するには、
http://web-sniffer.net/
にアクセスして、サイトのURLを入力してみるといいでしょう。

または、ブラウザにFirefoxを使ってアドオンをインストールするのが簡単です。HTTPヘッダーを確認できるアドオンには次のようなものがあります。

  • Firebug
    https://addons.mozilla.jp/firefox/details/1843
    インストール後、[ツール]>[Firebug]>[Firebugを開く]でFirebugを開いて[接続]タブを[有効]にし、目的のサイトへアクセス。各通信が表示されるので左の[+]ボタンで項目を開いて[ヘッダ]タブを確認。使い終わったら[接続]タブを[無効]にしておくといい。
  • Live HTTP Headers
    https://addons.mozilla.jp/firefox/details/3829
    インストール後、目的のサイトへアクセス。[ツール]>[ページ情報]メニューでダイアログボックスを開いて[ヘッダ]タブを確認。
    または、[ツール]>[Live HTTP Headers]メニューでダイアログボックスを開いた状態で目的のサイトへアクセス。
  • Tamper Data(英語版のみ)
    https://addons.mozilla.org/en-US/firefox/addon/966
    インストール後、[ツール]>[Tamper Data]でTamper Dataを開いて目的のサイトへアクセス。各通信が表示されるので確認したい項目をクリックすると下にヘッダーが表示される。[Start Tamper]でリクエストのヘッダー内容を偽装することも可能。
このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

人気記事トップ10(過去7日間)

今日の用語

ステークホルダー
消費者や投資家、顧客企業など企業を取り巻く利害関係者全体を示す。 他に、産 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオートノミー株式会社
トランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ
株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告