このサイトではCloudFlareというCDNホスティングの有料版を使っています。で、たまにサイトが落ちてしまった場合、次のようなエラーページを表示してくれます。

それはまあいいんですが、なんとなくリュックを背負ったあのお姉さんというか、サイトをはじめて訪れた方には「ファッ!?」といった思いを抱かせてしまうことでしょう。
で、もしかしたら有料版だけかもしれないんですが、このエラーページをカスタマイズする方法が存在します。

この画像の通り、なんらかの変数を仕込んだHTMLファイルを指定すれば、そのデザインでエラーメッセージが表示されます。

要するにHTMLをアップロードしてそのURLを入力すればいいわけですが、運用しているサイトとは別のサーバに上げておく必要があります。だって、そのサイトと同じサーバに上げちゃったら、サーバが落ちてるときにエラー用ファイルが取得できないわけですからね。なので、ぼくはDropboxのPublicフォルダ機能を使いました。
- HTMLを生成するPHPスクリプトを用意
- そのファイルを全部Dropboxに上げる
- 公開用リンクをCloudFlareに指定
アップロードしてからじゃないとプレビューできないというのが大変辛いのですが、なんとか全部スタイリングし終えました。Githubにリポジトリを作ったので、マークアップとかCSSとか見ておいてください。
それでは、実際に作ったエラーページのデザインをお見せして終わりにします。ちなみに、背景画像は今年の山梨大雪害でぶっ壊れた破滅ゲストハウスの写真です。




そうそう、CloudFlareといえば、いまはもうなくなってしまったGoogle自動翻訳ページ。
いちど日本語サイトも作っていたのですが、機械翻訳だったのでRailgunというサービスが「とある科学の超電磁砲™起源ネットワークオプティマイザ」と翻訳されていました。詳細は【CloudFlare】「とある科学の超電磁砲」のページが削除された模様です。に詳しいですね。
他にもClickyというサービスがなぜか「FC2」と訳されていたり、けっこう笑えたのですが、さすがにやめたみたいですね。誰か心優しい日本人が忠告してあげたんでしょうか。