Middleman のプレビューサーバーの 404 Not Found 画面をカスタマイズする

現在、開発している AngularJS アプリケーションは、土台を Middleman で作り、Amazon S3 の 静的ウェブサイトホスティング を使って公開する仕組みになっており、エラーページにロジックを書く必要がありました。 (後述します)

Middleman のプレビューサーバーの 404 Not Found 画面は、上記の画像の様なそっけないもので、ライブラリにべた書きされています。

参照: middleman-core/core_extensions/request.rb

これでは、エラーページの確認が難しいので、この 404 画面をカスタマイズする機能拡張を書きました。

config.rb (抜粋)

lib/middleman/extensions/custom_not_found.rb

error_page.html.slim

Slim テンプレートには以下の様な JavaScript が記述されています。

HTML レンダリング結果は以下の様になります。

S3 設定

この error.html を Amazon S3 のコンソール上でエラーページとして設定しておくことで、HTML5 mode の AngularJS アプリケーションで、リロードされた場合も、/index.html に実装されている本体に転送し、リロード前の状態を復元することが可能になります。