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


# 追記

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

- [Customize a waiting room · Cloudflare Waiting Room docs](https://developers.cloudflare.com/waiting-room/how-to/customize-waiting-room/)

> 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).

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/86a184ac-0329-4eed-434e-6cc2d76a9be7.png)

# Waiting Room の Plan

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

> [Features by plan type · Cloudflare Waiting Room docs](https://developers.cloudflare.com/waiting-room/plans/)
>
> ![image-20220530164617959](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220530164617959.png)

# API で設定可能な情報確認

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

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

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

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

> https://api.cloudflare.com/#waiting-room-create-waiting-room
>
> ![wrlang](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/wrlang.png)

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

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

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

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

```json: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` に変更します。

```shell
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"}' 
```

```json: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](https://developers.cloudflare.com/waiting-room/additional-options/test-waiting-room/#2-run-sample-script)

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

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

↓ FIFO

![image-20220530164329175](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220530164329175.png)

↓ Queue all

![image-20220530165411560](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220530165411560.png)

↓ Reject

![image-20220530165512345](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220530165512345.png)

# デフォルトテンプレートのプレビューページ
通常、Waiting Room の編集画面からプレビュー画面にアクセスできますが、
https://waitingrooms.dev/preview/default?force_queue=false&queue_is_full=false&queueing_method=reject
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/6abd64fd-ca51-e0db-8cbf-3370fc24818f.png)

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