fbpx

メニュー

ClouFlareのエラーページをカスタマイズするよ

高橋文樹 高橋文樹

この投稿は 10年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

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

安藤さんがくれたCloudFlareのエラー画面
安藤さんがくれたCloudFlareのエラー画面

それはまあいいんですが、なんとなくリュックを背負ったあのお姉さんというか、サイトをはじめて訪れた方には「ファッ!?」といった思いを抱かせてしまうことでしょう。

で、もしかしたら有料版だけかもしれないんですが、このエラーページをカスタマイズする方法が存在します。

CloudFlareのカスタムエラーページ設定画面
CloudFlareのカスタムエラーページ設定画面

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

URLを指定するとプレビューできる
URLを指定するとプレビューできる

要するにHTMLをアップロードしてそのURLを入力すればいいわけですが、運用しているサイトとは別のサーバに上げておく必要があります。だって、そのサイトと同じサーバに上げちゃったら、サーバが落ちてるときにエラー用ファイルが取得できないわけですからね。なので、ぼくはDropboxのPublicフォルダ機能を使いました。

  • HTMLを生成するPHPスクリプトを用意
  • そのファイルを全部Dropboxに上げる
  • 公開用リンクをCloudFlareに指定

アップロードしてからじゃないとプレビューできないというのが大変辛いのですが、なんとか全部スタイリングし終えました。Githubにリポジトリを作ったので、マークアップとかCSSとか見ておいてください。

それでは、実際に作ったエラーページのデザインをお見せして終わりにします。ちなみに、背景画像は今年の山梨大雪害でぶっ壊れた破滅ゲストハウスの写真です。

サーバが落ちていて、キャッシュが取れなかった時
サーバが落ちていて、キャッシュが取れなかった時
名前解決でエラーがあったとき
名前解決でエラーがあったとき
50x系のエラー
50x系のエラー
100x系エラー?
いま攻撃受けてるからおまえのことチェックするよ

そうそう、CloudFlareといえば、いまはもうなくなってしまったGoogle自動翻訳ページ。

いちど日本語サイトも作っていたのですが、機械翻訳だったのでRailgunというサービスが「とある科学の超電磁砲™起源ネットワークオプティマイザ」と翻訳されていました。詳細は【CloudFlare】「とある科学の超電磁砲」のページが削除された模様です。に詳しいですね。

他にもClickyというサービスがなぜか「FC2」と訳されていたり、けっこう笑えたのですが、さすがにやめたみたいですね。誰か心優しい日本人が忠告してあげたんでしょうか。

とある魔術の禁書目録外伝 とある科学の超電磁砲 (10) (電撃コミックス)

価格¥715

冬川基

その他鎌池和馬, はいむらきよたか

発行KADOKAWA

発売日2014 年 7 月 26 日

Amazonを開く

Supported by amazon Product Advertising API

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。