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

*2014-12-11*

> Middleman のプレビューサーバーの 404 Not Found 画面をカスタマイズする必要があったので、機能拡張を書きました。

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

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

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

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

<!--more-->

## config.rb (抜粋)



## lib/middleman/extensions/custom\_not\_found.rb



## error_page.html.slim

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



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



## S3 設定

![](s3console.png)

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


[HTML5 mode]: https://docs.angularjs.org/guide/$location#hashbang-and-html5-modes
[Middleman]: http://middlemanapp.com/jp/
[middleman-core/core_extensions/request.rb]: https://github.com/middleman/middleman/blob/v3.3.7/middleman-core/lib/middleman-core/core_extensions/request.rb#L284
[AngularJS]: https://angularjs.org
[プレビューサーバー]: http://middlemanapp.com/jp/basics/getting-started/#開発サイクル-(middleman-server)
[Amazon S3]: http://aws.amazon.com/jp/s3/
[静的ウェブサイトホスティング]: http://aws.amazon.com/jp/websites/