Waiting Room をカスタマイズする

Waiting Room は、ダッシュボードまたは API でカスタマイズできます。

ダッシュボードで Waiting Room をカスタマイズする

Waiting Room の外観を設計してプレビューするには、Create waiting room ページの Customization タブを選択します。

Cloudflare は、Waiting Room の外観をカスタマイズする次のオプションを提供します。

デフォルトの Waiting Room: ブランドなしの Waiting Room で、訪問者に推定待ち時間を表示します。
- デフォルトの Waiting Room ページの言語を選択します。次の言語から選べます。英語、アラビア語、ドイツ語、スペイン語、フランス語、インドネシア語、イタリア語、日本語、韓国語、オランダ語、ポーランド語、ポルトガル語（ブラジル）、トルコ語、中国語（簡体字と繁体字）。
カスタム Waiting Room: テンプレートのテキストを編集するか、独自の HTML コードを作成します。
- フォント、色、静的画像、追加言語など、HTML または CSS の内容をカスタマイズできます。
- ダッシュボードで直接編集するか、関連ファイルをインポートします。
JSON 向けの Waiting Room レスポンスを返す: トグルで、Waiting Room 内のユーザー状態を含む JSON レスポンスも有効にします。

デフォルトの Waiting Room

ブランドなしのデフォルト Waiting Room を選ぶ手順は次のとおりです。

Waiting Room を選択します。
Customization のステップへ進みます。
Default waiting room を選択します。
Waiting Room のデフォルトページの言語を選択します。

カスタム Waiting Room

Waiting Room をカスタマイズする手順は次のとおりです。

Waiting Room を選択します。
Customization のステップへ進みます。
Custom waiting room を選択します。

テキストボックス内で HTML コードを直接編集できます。

Download default template を選択すると、デフォルトテンプレートの内容を含む HTML ファイルをコンピューターにダウンロードします。
Download を選択すると、テキストボックスの内容を含む HTML ファイルをコンピューターにダウンロードします。
Copy を選択すると、テキストボックスのテキストをクリップボードにコピーします。任意のエディターに貼り付けてください。

テンプレートのテキストには、待ち時間を表示するコードが含まれています。訪問者に推定待ち時間を表示する場合は、この内容を削除しないでください。

HTML ファイルをアップロードする

Import を選択し、コンピューターから HTML ファイルをアップロードします。
ダイアログでファイルを選び、Open を選択します。HTML ファイルのサイズ上限は 1,048,576 バイト（1 MB）です。

テキストボックスでさらに編集します。Waiting Room ページに推定待ち時間を表示するには待ち時間を表示するコードを含めるか、利用できる変数を使って独自のカスタムページを作成します。

待ち時間を表示する

テンプレート HTML の <main> セクションにある次の内容が、待ち時間を表示します。

<h2 id="time-remaining">
  <noscript>
    {{#waitTimeKnown}}Your estimated wait time is {{waitTimeFormatted}}...{{/waitTimeKnown}}
    {{^waitTimeKnown}}{{#queueIsFull}}The estimated wait time is greater than a day. You will
    automatically be placed in the queue once space is available.{{/queueIsFull}}
    {{^queueIsFull}}Your estimated wait time is unavailable.{{/queueIsFull}}{{/waitTimeKnown}}
  </noscript>
</h2>

<main> のあとの <body> セクション内にある次のスクリプトが、待ち時間を取得します。

<script type="text/javascript">
  var remainingEl = document.getElementById('time-remaining');
  var waitTime = {{waitTime}};
  var waitTimeKnown = {{waitTimeKnown}};

  var remainingString = 'Your estimated wait time is ';

  if (!waitTimeKnown) {
    remainingString += 'unavailable.'
  } else {
    if (waitTime === 1) {
      remainingString += waitTime + ' minute...';
    } else {
      remainingString += waitTime + ' minutes...';
    }
  }

  remainingEl.innerText = remainingString;
</script>

Turnstile 変数

カスタマイズした Waiting Room で Turnstile を使う場合は、turnstile 変数を追加する必要があります。デフォルトのキューイングページテンプレートと、新しく作成するカスタムテンプレートには、すでにこの変数が含まれています。既存のカスタム HTML テンプレートで Turnstile 連携を有効にする場合は、ウィジェットの配置場所を Waiting Room に伝えるため、テンプレート内のどこかに {{{turnstile}}} を追加してください。Waiting Room は Mustache テンプレートを使います。エスケープせずに生の HTML をテンプレートへ含めるには、中括弧 2 つではなく 3 つが必要です。

<!DOCTYPE html>
<html>
  <head>
    <title>Waiting Room</title>
  </head>
  <body>
    <h1>You are currently in the queue.</h1>
    {{#waitTimeKnown}}
      <h2>Your estimated wait time is {{waitTimeFormatted}}.</h2>
    {{/waitTimeKnown}}
    {{^waitTimeKnown}}
      <h2>Your estimated wait time is unknown.</h2>
    {{/waitTimeKnown}}
    {{#turnstile}}
      <!-- for a managed (and potentially interactive) challenge, you may want to instruct the user to complete the challenge -->
      <p>Please complete this challenge so we know you're a human:</p>
      {{{turnstile}}} <!-- include the turnstile widget -->
    {{/turnstile}}
  </body>
</html>

Infinite Queue を使う場合（とくにインタラクティブになり得る Managed Challenge を使う場合）は、チャレンジを完了するまでキューに入らないことをユーザーに伝えるとよいです。

利用できる変数

カスタム HTML で Waiting Room を作成すると、レスポンスをカスタマイズするためのいくつかの変数を使えます。変数の完全な一覧は、Cloudflare API ドキュメントの json_response_enabled パラメーターを参照してください。

多言語対応

カスタマイズ可能な Waiting Room は、UTF-8 文字セットがサポートする任意の言語でテキストを表示できます。推定待ち時間を表示するには、ユーザーの言語に関係なく、Waiting Room テンプレート内で waitTime や waitTimeHours などの数値変数を使えます。ただし現時点では、次の変数は英語のみです。waitTimeFormatted、timeUntilEventStartFormatted、timeUntilEventEndFormatted。

パスまたはサブドメインに応じてカスタム Waiting Room 内で異なる言語を表示したい場合は、カスタム HTML に JavaScript コードを追加できます。出発点として使えるスターターテンプレートの例は次のとおりです。

パスに応じて言語を切り替える場合は、このテンプレートをダウンロードします。パスに en が含まれる場合、またはデフォルトでは英語、jp が含まれる場合は日本語、fr が含まれる場合はフランス語、es が含まれる場合はスペイン語を表示します。
サブドメインに応じて言語を切り替える場合は、このテンプレートをダウンロードします。デフォルト、またはサブドメインに en が含まれる場合は英語、jp が含まれる場合は日本語、fr が含まれる場合はフランス語、es が含まれる場合はスペイン語を表示します。

いずれかのテンプレートをダウンロードし、自由にカスタマイズしてください。サイトの言語選択の構造に合わせて、パスまたはサブドメインを更新します。各ロケールの translations オブジェクトに翻訳を追加すれば、他の言語も含められます。

リソースのホスティング

カスタマイズした Waiting Room で画像やその他のリソースを使う場合、それらのアセットを Waiting Room の対象ホスト名ではホストしないでください。対象ホスト名でホストすると、アセットへのリクエストは Waiting Room を通過できません。

Waiting Room をプレビューする

Waiting Room の外観をプレビューする手順は次のとおりです。

アプリケーションで Traffic > Waiting Room を開きます。
Waiting Room を作成するか、既存のものを編集します。
Review のステップへ進みます。
Preview waiting room を選択します。

Queueing を選ぶと、ダッシュボードで Waiting Room が有効かつ Queue-all が無効なときの外観を表示します。
Queue-All を選ぶと、ダッシュボードで Waiting Room が有効かつ Queue-all が有効なときの外観を表示します。Waiting Room で Queue-all が有効なときは、推定待ち時間は表示されません。

トラブルシューティング

プレビューで想定と違う表示になる場合は、カスタムコードの構文を確認してください。多くの場合、各タグを対応する終了タグ（タグ名の前に / を付けたもの）で閉じていません。

API で Waiting Room をカスタマイズする

Waiting Room API を使うと、仮想 Waiting Room に入った訪問者へ配信するウェブページをカスタマイズできます。

次の PATCH リクエストでは、custom_page_html フィールドにカスタマイズした Waiting Room の HTML コードを入れます。

Required API token permissions

At least one of the following token permissions is required:

Waiting Rooms Write

Patch waiting roombash

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/waiting_rooms/$WAITING_ROOM_ID" \
	--request PATCH \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"name": "webshop-waiting-room",
		"host": "example.com",
		"new_users_per_minute": 200,
		"total_active_users": 300,
		"custom_page_html": "<p>Include custom HTML here</p>"
	}'

レスポンス:

{
  "success": true,
  "errors": [],
  "messages": [],
  "result": [
    {
      "id": "1111111111111111111111",
      "name": "webshop-waiting-room",
      "description": "Waiting room for webshop",
      "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>Include custom HTML here</p>",
      "created_on": "2014-01-01T05:20:00.12345Z",
      "modified_on": "2014-01-01T05:20:00.12345Z"
    }
  ]
}

カスタマイズした Waiting Room の HTML コードをプレビューする

カスタム HTML で Waiting Room のウェブページを設定する API リクエストを出す前に、プレビュー用エンドポイントへアップロードしてカスタム HTML を確認できます。

POST https://api.cloudflare.com/client/v4/zones/{zone_id}/waiting_rooms/preview

リクエストボディの custom_html フィールドに、カスタマイズした HTML 内容を含めます。

{
  "custom_html": "<p>Include custom HTML here</p>"
}

プレビュー用エンドポイントへ渡す HTML は custom_html フィールドです。一方、API で Waiting Room を設定するときは、HTML を custom_page_html フィールドに渡します。

リクエストの例:

Required API token permissions

At least one of the following token permissions is required:

Waiting Rooms Write

Create a custom waiting room page previewbash

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/waiting_rooms/preview" \
	--request POST \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"custom_html": "<p>Include custom HTML here</p>"
	}'

プレビュー用エンドポイントは、レスポンスボディにカスタムページを確認できる一時 URL を返します。

{
  "result": {
    "preview_url": "https://waitingrooms.dev/preview/111111111111"
  },
  "success": true,
  "errors": [],
  "messages": []
}

プレビューリンクへのアクセスに Cloudflare アカウントは不要です。複数のデバイスで Waiting Room のウェブページを検証できます。

デフォルトまたは現在の Waiting Room ウェブページをプレビューする

プレビュー URL を生成したあと、次のエンドポイントで、Waiting Room に現在設定されているウェブページ（カスタムページが未設定ならデフォルトページ）へのプレビューリンクを生成します。

GET https://waitingrooms.dev/preview/{preview_id}

レスポンス内のリンクは、custom_page_html フィールドの内容を mustache ↗ で描画して表示します。

オプションの force_queue クエリパラメーターを使うと、すべてのトラフィックを強制キューしたときの Waiting Room ウェブページをプレビューできます。