WEB — Webサイトの基礎
HTTPステータスで分かること・分からないこと
Webページの応答には200や404などのステータスが付いています。数字は切り分けの手がかりになりますが、ページの内容や見た目が正しいことまで保証しません。
この記事の目次
代表的な応答を読む
| 応答 | 読み取れること |
|---|---|
| 200 | リクエストが成功として処理された |
| 301・302 | 別のURLへの転送が案内された |
| 403 | サーバーがアクセスを拒否した |
| 404 | 対象のリソースが見つからない |
| 500 | サーバー内部でエラーが起きた |
| 503 | サービスを現在利用できない |
403は必ずしもリンク先の消滅を意味しません。認証やアクセス制御などの条件も確認します。
HTMLと画像を別々に見る
ページ本体が200でも、CSSや画像だけ404になっていることがあります。開発者ツールのネットワーク一覧で、失敗しているリクエストを特定します。全体の見た目だけで原因のファイルを決めつけないでください。
エラー文と応答コードを照合する
「ページがありません」と表示しているのに200を返す場合など、見た目と応答が一致しないことがあります。公開する側は、意図したページと適切な応答になっているか確認します。
報告には条件を添える
対象URL、時刻、コード、実際の表示を記録します。ログインの有無や特定のネットワークだけで変わるかも手がかりです。スクリーンショットを共有する場合は、個人情報や認証情報が写っていないか確認してください。
画像を選ぶと拡大できます。
- サーバーの応答コードから、処理結果の種類を読みます。
- HTMLとは別に、画像やCSSの応答も確認します。
- 画面の文言と、実際の応答が一致しているか見ます。
一ページは複数の応答でできている
ブラウザがページを表示するとき、本文のHTMLに加えて、画像やスタイルなどを取得する場合があります。ページ本体の応答が成功していても、必要な画像が見つからなければ見た目は完成しません。ステータスを読むときは、どのURLへのリクエストなのかを必ずセットで見ます。
ネットワーク一覧に赤い行があっても、それが今回の表示不具合と関係するかは確認が必要です。広告や外部機能など、ページ本体とは別のリクエストもあります。失敗したURL、呼び出している箇所、画面上の症状を対応させて調べます。
記事は読めるが写真だけ出ない例
記事の文章は表示され、写真の場所だけ空いている場面を考えます。ページ本体と画像の応答を分け、画像のURLを確認します。画像が404なら、指定したファイル名と公開先の配置を照合します。大文字小文字やディレクトリの違いがないかも、実際の名前で比べます。
画像への応答が200でも、返っている内容が期待した画像かを確認します。エラーページなど別の内容が返っていれば、数字だけでは成功と扱えません。問題のある参照を修正したら、同じ画像を使うページにも影響がないか見ます。本文が読めたことと、ページ全体の要素がそろったことを分けて検査します。
報告を原因の推測と分ける
| 種類 | 記録の例 |
|---|---|
| 観察した事実 | 対象URLが404を返した |
| 画面の結果 | 記事内の写真が表示されない |
| 比較した条件 | トップの画像は表示される |
| 調査の候補 | 画像の保存先と参照名を確認する |
「サーバーが壊れた」と結論から報告するより、確かめた応答を残すほうが担当者は調べやすくなります。認証の有無で変わる場合は、その条件も書きます。診断情報を共有する際は、ヘッダーや画面に含まれる認証情報をそのまま貼らず、必要な範囲を取り出します。数字は調査の入口として使い、内容と条件で意味を確かめます。