この投稿は2年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2014 年 9 月 17 日 923日前)
1,272文字 (読了時間3分)

SPONSORED LINK

このサイトでは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) (電撃コミックス)

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

著者冬川基

クリエーター鎌池和馬, はいむらきよたか

出版社KADOKAWA/アスキー・メディアワークス

出版日2014 年 7 月 26 日

商品カテゴリーコミック

ページ数278

ISBN4048666983

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2014 年 9 月 17 日にWeb制作の記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

既存の社会制度の中で生き、それを享受してきた人間にとって、そのシステムに期待するものが何もなかった者たちが、格別恐れもせずにその破壊を試みる可能性を想像することはおそらく不可能なのだ。

— ミシェル・ウエルベック

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。