Cloudflare Waiting Room デフォルトテンプレートを日本語化する

追記

ダッシュボードでも設定できるようになりました。

• Customize a waiting room · Cloudflare Waiting Room docs

Default waiting room: An unbranded waiting room that displays an estimated waiting time to visitors.

• Select a language for your default waiting room page. You can choose from the following languages: English, Arabic, German, Spanish, French, Indonesian, Italian, Japanese, Korean, Dutch, Polish, Portuguese (Brazilian), Turkish and Chinese (Simplified and Traditional).

Waiting Room の Plan

以前までは、日本語化するだけの目的でも Customized templates 機能が有効なプランを購入する必要がありました。

Features by plan type · Cloudflare Waiting Room docs

API で設定可能な情報確認

Waiting Room のデフォルトテンプレートで、言語変更が設定できるようになりました。

日本語化するだけの目的では、上位プランの購入は不要です。

Cloudflare のロゴを消したい、もっとページをカスタマイズしたい場合には、引き続き Customized templates 機能が有効なプランを購入する必要があります。

日本語だけでなく、他の主要言語にも対応していますね。

https://api.cloudflare.com/#waiting-room-create-waiting-room

デフォルトテンプレートを日本語化

既存の Waiting Room をリストします。

export ZONE_ID='YOUR_ZONE_ID' 
cli4 zones/:$ZONE_ID/waiting_rooms | jq -r '.[2]'

default_template_language が en-US になっていることが確認できます。

result.json

{
  "cookie_attributes": {
    "samesite": "auto",
    "secure": "auto"
  },
  "created_on": "2021-10-20T05:14:59.449217Z",
  "custom_page_html": "",
  "default_template_language": "en-US",
  "description": "",
  "disable_session_renewal": false,
  "host": "wait.example.com",
  "id": "ea05cb62a47a8e66e387002eae48ab1d",
  "json_response_enabled": false,
  "modified_on": "2022-05-30T07:28:46.20971Z",
  "name": "waiting_room",
  "new_users_per_minute": 200,
  "next_event_prequeue_start_time": null,
  "next_event_start_time": null,
  "path": "/product1",
  "queue_all": false,
  "queueing_method": "fifo",
  "session_duration": 5,
  "suspended": false,
  "total_active_users": 200
}

default_template_language を ja-JP に変更します。

curl -s -X PATCH "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/waiting_rooms/ea05cb62a47a8e66e387002eae48ab1d" \
-H "X-Auth-Email: $EMAIL" \
-H "X-Auth-Key: $APIKEY" \
-H "Content-Type: application/json" \
--data '{"name":"waiting_room","host":"wait.example.com","new_users_per_minute":200,"total_active_users":200,"queueing_method":"fifo","default_template_language":"ja-JP"}' 

result.json

{
  "result": {
    "id": "ea05cb62a47a8e66e387002eae48ab1d",
    "name": "waiting_room",
    "description": "",
    "host": "wait.example.com",
    "path": "/product1",
    "suspended": false,
    "queue_all": false,
    "new_users_per_minute": 200,
    "total_active_users": 200,
    "session_duration": 5,
    "custom_page_html": "",
    "disable_session_renewal": false,
    "json_response_enabled": false,
    "queueing_method": "fifo",
    "cookie_attributes": {
      "samesite": "auto",
      "secure": "auto"
    },
    "default_template_language": "ja-JP",
    "created_on": "2021-10-20T05:14:59.449217Z",
    "modified_on": "2022-05-30T07:38:38.256057Z",
    "next_event_start_time": null,
    "next_event_prequeue_start_time": null
  },
  "success": true,
  "errors": [],
  "messages": []
}

デフォルトテンプレート表示確認

ドキュメントにあるテストスクリプトを流して、Waiting Room での待ち状態を作ります。

Test a waiting room · Cloudflare Waiting Room docs

./simulate_requests -s .1 -n 300 -m 300 -o results https://wait.example.com/product1

その後、実際にアクセスしてみると、見事デフォルトテンプレートが日本語化されました！
やはり日本語化してあるだけでも、おもてなし感が違いますね

↓ FIFO

↓ Queue all

↓ Reject

デフォルトテンプレートのプレビューページ

通常、Waiting Room の編集画面からプレビュー画面にアクセスできますが、
https://waitingrooms.dev/preview/default?force_queue=false&queue_is_full=false&queueing_method=reject

言語変更に関するプレビューは default となっている部分を ja-JP などに変更すれば、日本語でいくつかのパターンをプレビューできます。
https://waitingrooms.dev/preview/ja-JP?force_queue=false&queue_is_full=false&queueing_method=reject