Webサイトのカスタムエラードキュメントの管理（どこでも使える相対パス）


Webサイトの「404 Not Found」などのエラー表示を、Webサーバのデフォルト表示ではなく「すみません、サイトマップはこちら」などのカスタムエラードキュメントにした場合、そのHTMLに含めるリンク等のファイルパスの管理が地味ながら厄介な問題だった。なぜなら、エラードキュメントはどの階層のファイルがでエラーが出た時でも指定したファイルのHTMLコードがそのままクライアントブラウザに送られるため、相対パス、絶対パスどちらで管理したときでも以下のような問題が出る。

エラードキュメントからのファイルパスを相対パス（src=”../img/logo.png” など）で記載した場合

  • エラードキュメントを編集した階層以外で起こったエラーの場合はリンク切れしてしまう。

エラードキュメントからのファイルパスをサーバルートからの絶対パス（src=”/img/logo.png” など）で記載した場合

  • Webサーバを経由せずに表示確認ができなくなり、編集途中の表示確認でいちいちテストサーバに転送しなければならない。

公開サイトでの表示がリンク切れするのはあり得ないのでこれまでは絶対パスにしていたが、以下のようなプロジェクトではWebサーバが無くてもチェックできる相対パスでの記載が必要で、最終公開時に変換を掛けるのが面倒になってきた。

  • ファイル一式をクライアントに送ってチェックをもらうプロジェクト
  • 協業のデザイナからファイルを受け取って加工して返すフローのプロジェクト
  • Dreamweaver を使うブロジェクト（テストサーバ送信前に確認したい、デザインテンプレートの反映の便宜）

ということで、あ、こうすればいいんだ、と思いついた解法が、

Webサイトの一番深い階層と同じ階層でエラードキュメントを作る。

Webブラウザは、サイトのルートを突き抜けてしまった相対パスは、サイトルート以上に遡らない。

例えば、
http://www.example.com/news/news-123.html に src=”../../../../../../../../img/logo.png” という記述があれば、http://www.example.com/img/logo.png と読み替えてくれる。

ということで、どこでも使える相対パスのエラードキュメントは、深い場所に作って以下のようにWebサーバに設定すればOK（Apache の場合）。

ErrorDocument 500 /error/path/path/path/500.html
ErrorDocument 404 /error/path/path/path/404.html
  #️ 以下同様