待機室のカスタマイズ
ダッシュボードまたはAPIを介して待機室をカスタマイズできます。
待機室の外観をデザインしてプレビューするには、待機室の作成ページのカスタマイズタブを選択します。
Cloudflareは、待機室の外観をカスタマイズするオプションを提供しています：
- デフォルトの待機室: 訪問者に推定待機時間を表示するブランディングのない待機室です。
- デフォルトの待機室ページの言語を選択します。以下の言語から選択できます：英語、アラビア語、ドイツ語、スペイン語、フランス語、インドネシア語、イタリア語、日本語、韓国語、オランダ語、ポーランド語、ポルトガル語（ブラジル）、トルコ語、中国語（簡体字および繁体字）。
- カスタム待機室: テンプレートテキストを編集するか、自分自身のHTMLコードを作成します：
- フォント、色、静的画像、追加の言語など、HTMLまたはCSSコンテンツの両方をカスタマイズします。
- ダッシュボードで直接コンテンツを編集するか、関連ファイルをインポートします。
- JSONフレンドリーな待機室レスポンスを返す: ユーザーの待機室でのステータスを含むJSONレスポンスを有効にするためのトグルを切り替えます。
デフォルトのブランディングのない待機室を選択するには：
- 待機室を選択します。
- カスタマイズステップに進みます。
- デフォルトの待機室を選択します。
- 待機室のデフォルトページの言語を選択します。
待機室をカスタマイズするには：
- 待機室を選択します。
- カスタマイズステップに進みます。
- カスタム待機室を選択します。
テキストボックス内でHTMLコードを直接編集できます：
- デフォルトテンプレートをダウンロードを選択して、デフォルトテンプレートコンテンツを含むHTMLファイルをコンピュータにダウンロードします。
- ダウンロードを選択して、テキストボックスの内容を含むHTMLファイルをコンピュータにダウンロードします。
- コピーを選択して、テキストボックスのテキストをクリップボードにコピーし、選択したエディタに貼り付けます。
テンプレートテキストには待機時間を表示するコードが含まれています。訪問者に推定待機時間を表示したい場合は、このコンテンツを削除しないでください。
- インポートを選択して、コンピュータからHTMLファイルをアップロードします。
- ダイアログでファイルを選択し、開くを選択します。HTMLファイルのサイズ制限は1,048,576バイト（1 MB）です。
テキストボックス内でさらに編集を行います。待機室ページに推定待機時間を表示するために待機時間を表示するコードを含めるか、利用可能な変数を使用して独自のカスタムページを作成します。
テンプレートHTMLコードの<main>セクション内の以下のコンテンツが待機時間を表示します：
<h2 id="time-remaining"> <noscript> {{#waitTimeKnown}}あなたの推定待機時間は{{waitTimeFormatted}}です...{{/waitTimeKnown}} {{^waitTimeKnown}}{{#queueIsFull}}推定待機時間は1日を超えています。空きが出次第、自動的にキューに入れられます。{{/queueIsFull}} {{^queueIsFull}}あなたの推定待機時間は利用できません。{{/queueIsFull}}{{/waitTimeKnown}} </noscript></h2><body>セクション内の<main>の後にある以下のスクリプトが待機時間を取得します：
<script type="text/javascript"> var remainingEl = document.getElementById('time-remaining'); var waitTime = {{waitTime}}; var waitTimeKnown = {{waitTimeKnown}};
var remainingString = 'あなたの推定待機時間は';
if (!waitTimeKnown) { remainingString += '利用できません。' } else { if (waitTime === 1) { remainingString += waitTime + '分...'; } else { remainingString += waitTime + '分...'; } }
remainingEl.innerText = remainingString;</script>カスタムHTMLで待機室を作成する際に、レスポンスをカスタマイズするためにいくつかの変数にアクセスできます。変数の完全なリストについては、Cloudflare APIドキュメントのjson_response_enabledパラメータを参照してください。
カスタマイズ可能な待機室は、UTF-8文字セットでサポートされている任意の言語でテキストを表示できます。推定待機時間を表示するには、待機室テンプレート内でwaitTimeやwaitTimeHoursのような数値変数を使用できますが、ユーザーの言語に関係なく使用できます。ただし、現時点では、以下の変数は英語でのみ利用可能です：waitTimeFormatted、timeUntilEventStartFormatted、およびtimeUntilEventEndFormatted。
パスやサブドメインに応じてカスタム待機室内で異なる言語を表示したい場合は、カスタムHTMLにJavaScriptコードを追加できます。以下に、スタートテンプレートのいくつかを例として示します：
-
パスに基づいて異なる言語を表示するには、このテンプレートをダウンロードします。このテンプレートは、パスに
enが含まれている場合は英語、デフォルトとしてパスにjpが含まれている場合は日本語、frが含まれている場合はフランス語、esが含まれている場合はスペイン語でコンテンツを表示します。 -
サブドメインに基づいて異なる言語を表示するには、このテンプレートをダウンロードします。このテンプレートは、デフォルトまたはサブドメインに
enが含まれている場合は英語、jpが含まれている場合は日本語、frが含まれている場合はフランス語、esが含まれている場合はスペイン語でコンテンツを表示します。
これらのテンプレートのいずれかをダウンロードし、好きなようにカスタマイズしてください。パスやサブドメインを更新して、サイトの言語選択構造を反映させます。これらのテンプレートを編集して、各ロケールのtranslationsオブジェクトに翻訳を追加することで、他の言語を含めることができます。
カスタマイズされた待機室に画像やその他のリソースを使用している場合は、待機室でカバーされているホスト名にこれらのアセットをホストしないでください。そうしないと、これらのアセットへのリクエストは待機室を通過できなくなります。
待機室の外観をプレビューするには：
- キューイングを選択して、ダッシュボードで有効になっているときの待機室の外観を表示し、Queue-allが有効でない場合。
- Queue-Allを選択して、ダッシュボードで有効になっているときの待機室の外観を表示し、Queue-allが有効な場合。Queue-allが待機室に対して有効な場合、推定待機時間は表示されません。
待機室のプレビュー中に予期しないことに気付いた場合は、カスタムコードの構文を確認してください。タグを適切な閉じタグ（タグ名に/を付けたもの）で閉じるのを忘れることがよくあります。
待機室APIを使用して、訪問者が仮想待機室に配置されたときに提供されるウェブページをカスタマイズできます。
以下のPATCHリクエストでは、custom_page_htmlフィールドにカスタマイズされた待機室のHTMLコードが含まれています：
curl --request PATCH \"https://api.cloudflare.com/client/v4/zones/{zone_id}/waiting_rooms/{waiting_room_id}" \--header "Authorization: Bearer <API_TOKEN>" \--header "Content-Type: application/json" \--data '{"custom_page_html": "<p>ここにカスタムHTMLを含めてください</p>"}'{ "success": true, "errors": [], "messages": [], "result": [ { "id": "1111111111111111111111", "name": "webshop-waiting-room", "description": "ウェブショップの待機室", "host": "example.com", "path": "/shop", "suspended": false, "queue_all": false, "new_users_per_minute": 200, "total_active_users": 300, "session_duration": 1, "disable_session_renewal": false, "json_response_enabled": false, "queueing_method": "FIFO", "cookie_attributes": { "samesite": "auto", "secure": "auto" }, "custom_page_html": "<p>ここにカスタムHTMLを含めてください</p>", "created_on": "2014-01-01T05:20:00.12345Z", "modified_on": "2014-01-01T05:20:00.12345Z" } ]}カスタマイズされたHTMLで待機室ウェブページを構成するためにAPIリクエストを行う前に、プレビューエンドポイントにアップロードしてカスタムHTMLをプレビューできます：
POST https://api.cloudflare.com/client/v4/zones/{zone_id}/waiting_rooms/previewリクエストボディには、custom_htmlフィールドにカスタマイズされたHTMLコンテンツを含めます：
{ "custom_html": "<p>ここにカスタムHTMLを含めてください</p>"}プレビューエンドポイントにHTMLコンテンツをcustom_htmlフィールドで渡しますが、待機室を構成するためにAPIを使用する際には、HTMLコンテンツをcustom_page_htmlフィールドで渡します。
リクエストの例：
curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/waiting_rooms/preview" \--header "Authorization: Bearer <API_TOKEN>" \--header "Content-Type: application/json" \--data '{"custom_html": "<p>ここにカスタムHTMLを含めてください</p>"}'プレビューエンドポイントは、カスタムページをプレビューできる一時的なURLをレスポンスボディに返します：
{ "result": { "preview_url": "https://waitingrooms.dev/preview/111111111111" }, "success": true, "errors": [], "messages": []}Cloudflareアカウントを持っていなくてもプレビューリンクにアクセスできるため、複数のデバイスで待機室ウェブページを検証できます。
プレビューURLを生成した後、次のエンドポイントを使用して、待機室の現在構成されているウェブページへのリンクを生成するか、カスタムページが構成されていない場合はデフォルトページを生成します。
GET https://waitingrooms.dev/preview/{preview_id}レスポンス内のリンクは、custom_page_htmlフィールドの内容を表示し、mustache ↗でレンダリングされます。
オプションのforce_queueクエリパラメータを使用して、すべてのトラフィックが強制的にキューに入れられているときに待機室ウェブページをプレビューします。