CDN Error Mockups

説明

CDN Error Mockups は、本物のような Cloudflare 風エラー画面を作成できるブロックです。
エラーページのテンプレート、メンテナンスページ、デザインのプレビュー、遊び心のあるサイト演出に使用できます。

このブロックは独自に開発したもので、Cloudflare, Inc. との提携や関係はなく、同社の承認も受けていません。

機能

• エラーのタイトル、HTTP エラーコード、説明メッセージをカスタマイズ。
• 「ブラウザー」「Cloudflare」「ホスト」のラベルとステータスを個別に設定。
• エラー元として表示するサービスを選択。
• 外部サービスに接続せず、訪問者の IP アドレスを表示。
• ページの読み込み時に、モック用の Ray ID とタイムスタンプを新しく生成。
• キーボードフォーカスを維持し、表示した IP アドレスを支援技術に通知。
• 3つのサービスのステータス表示が、デスクトップ画面と狭い画面の両方に対応。
• ブロックの CSS を周囲の WordPress テーマから分離。

使用方法

1. ブロックエディターで投稿、固定ページ、またはテンプレートを開きます。
2. 「CDN Error Mockup – Cloudflare」ブロックを追加します。
3. ブロック設定サイドバーで次の項目を設定します:
   • タイトルとエラーコード。
   • 「What happened?」と「What can I do?」のメッセージ。
   • 「ブラウザー」「Cloudflare」「ホスト」の名前、場所、ステータステキスト。
   • エラー元として表示するサービス。
4. ページを公開またはプレビューします。

このブロックは次の用途に適しています:

• 404などのエラーテンプレート。
• メンテナンスページや一時的な障害ページ。
• テーマやページビルダーでのプレビュー。
• デモ、教材、ユーモアを目的としたコンテンツ。

IP アドレスの表示とプライバシー

訪問者が「Click to reveal」を選択したときだけ、IP アドレスを取得します。
リクエストは、同じ WordPress サイト内にあるこのプラグインの REST API エンドポイントへ送信されます。
外部の IP アドレス検索サービスには接続しません。

エンドポイントは CF-Connecting-IP、X-Forwarded-For、REMOTE_ADDR を確認します。
転送ヘッダーの内容は不正確な場合や偽装される場合があるため、CDN やリバースプロキシを使用するサイトではプロキシを正しく設定してください。
表示される値は参考情報であり、認証や認可には使用しないでください。

ソースコード

読みやすい形式の JavaScript と SCSS のソースは、src ディレクトリで公開しています。
プラグインに同梱されるコンパイル済みアセットは build に格納されています。

クレジット

このプロジェクトは、MIT ライセンスで提供されている donlon の cloudflare-error-page のアイデアとコードに基づいています。
詳しくは THIRD_PARTY_LICENSES.md をご覧ください。