概要
Webアプリケーションを開発する際、404や500などHTTPステータスコードに応じたエラー画面をサイト専用で用意することが多い。
エラーページなので、画面のレイアウトやコンテンツの構成は統一させて表示するメッセージだけ変えたいと考えるのが普通だと思うが、ログインやサイト共通のヘッダー、サイトのベースレイアウトなどが絡んでくると少し厄介になる。
結論からいくと、
-
最小コストで用意するなら
-
HTML1枚で完結させるようにした40X・500ページを返す
-
ユーザーコミュニケーションを重視するなら
-
通常UIに準拠してログイン状態等も考慮して、40Xページを返す
-
HTML1枚で完結させるようにした、500ページを返す
が良いと思う。
主要なHTTPステータスコード整理
404 Not Found
- ページが見つからない
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 稼働中 | 判定可能 |
- cssや画像ファイルが閲覧可能
- ログイン用メニュー等も表示可能
403 Forbidden
- ページの閲覧権限がない
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 稼働中 | 判定可能 |
- cssや画像ファイルが閲覧可能
- ログイン用メニュー等も表示可能
その他の40X
基本
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 稼働中 | 判定可能 |
になる（はず）。
500 Internal Server Error
- サーバ内部エラー
- 想定外の問題が発生して適切なレスポンスを返せていない状態
アプリケーション内でエラーが発生した場合
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 稼働中 | 判定不能 |
- cssや画像ファイルは閲覧可能
- ログイン用メニュー等は表示不能
アプリケーションが応答を返せない場合
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 停止中 | 判定不能 |
- cssや画像ファイルが閲覧不能
- ログイン用メニュー等も表示不能
503 Service Unavailable
- サービス利用不可
- メンテナンス中など
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 停止中 | 判定不能 |
- cssや画像ファイルが閲覧不能
- ログイン用メニュー等も表示不能
その他の50X
基本
| Webサーバ | ログイン状態 |
|:-:|:-:|:-:|
| 停止中 | 判定不能 |
になる（はず）。
どうつくればよいか
最小コストで用意するなら
- HTML1枚で完結させる
- CSSはインライン or HTML内埋め込み
- 画像はData URIスキームで埋め込み
ユーザーコミュニケーションを重視するなら
404、403、その他40X
- 通常UIをベースに、未ログイン時とログイン時で戻るボタン等も出し分けてつくる
- ログイン中なら上部にメニュー出すなど
500、その他50X
- HTML1枚で完結させる
- CSSはインライン or HTML内埋め込み
- 画像はData URIスキームで埋め込み