コンテンツにスキップ

モバイルおよびその他の非ブラウザトラフィックのためのJSONレスポンスを取得する

モバイルアプリやウェブアプリのような非ブラウザ環境でトラフィックを管理する必要がある場合、CloudflareはAPIエンドポイントを介して利用できるJSONフレンドリーな待機室を提供します。

  1. ユーザーがキューに入ると、私たちは独自のJSONレスポンスを返します。
  2. ユーザーが待機室を離れると、リクエストをオリジンサーバーに転送し、オリジンサーバーからのレスポンス（JSON、XML、HTMLページなど）を返します。

待機室のレスポンスをJSON形式で利用するためには、以下の手順を実行する必要があります。

ステップ1 – JSONレスポンスを有効にする

JSONレスポンスを受け取るには、まず待機室でそのオプションを有効にする必要があります。

ステップ2 – JSONデータを取得する

Accept: application/jsonヘッダーを使用して待機室エンドポイントにリクエストを送信します。ヘッダーは正確にAccept: application/jsonと一致する必要があります。もし他の内容やAccept: application/json, text/htmlのような追加の内容が含まれている場合、レスポンスはJSON形式で返されません。ユーザーがキューで進むためには、refreshIntervalSecondsごとにリクエストを再試行する必要があります。

リクエスト
curl "https://example.com/waitingroom" \
--header "Accept: application/json"
レスポンス
{
  "cfWaitingRoom": {
    "inWaitingRoom": true,
    "waitTime": 5,
    "waitTimeKnown": true,
    "waitTimeFormatted": "5分",
    "queueIsFull": false,
    "queueAll": false,
    "lastUpdated": "2021-08-03T23:46:00.000Z",
    "refreshIntervalSeconds": 20
  }
}

リクエストヘッダーのクッキー

待機室は、ユーザーのキュー内の位置を決定する待機室クッキーによって駆動されます。このため、各リクエストのレスポンスヘッダーでクッキーが更新されます。待機室で保護されたエンドポイントへの各リクエストでは、前回のリクエスト中に取得した最新のクッキーを含める必要があります。これは、ユーザーがキューに入っているかどうかに関わらず必須です。リクエストにクッキーが含まれていない場合、待機室はこれを新しいユーザーと見なし、レスポンスヘッダーに新しいクッキーを返します。その結果、ユーザーはキューの最後に配置されます。したがって、非ブラウザ環境で待機室を利用する際には、リクエストヘッダーに待機室クッキーを含め、各リクエスト後に更新することが重要です。

詳細については、待機室クッキーを参照してください。

キュー内の進行

ブラウザ環境では、ページは自動的にrefreshIntervalSecondsごとに更新され、ユーザーがキューで進むことを保証します。非ブラウザ環境では、待機室のJSONフレンドリーAPIが利用されている場合、バックエンドサービス（またはAPI）がrefreshIntervalSecondsごとに待機室の設定されたエンドポイントにリクエストを更新/送信することが期待されます。

JSONフレンドリーなレスポンスを利用できる場所は以下の通りです（このリストは網羅的ではありません）：

  1. モバイルアプリのトラフィック

    • 待機室変数の統合 – モバイルアプリに新しいテンプレートを作成してJSONレスポンスを受け取ります。これらの変数の完全なリストについては、Cloudflare APIドキュメントのjson_response_enabledパラメータを参照してください。
    • クッキーを許可 – 上記のように、待機室はクッキーを必要とします、モバイルアプリはクッキーをサポートする必要があります。使いやすさのために、CookieJar ↗のようなクッキーマネージャーの使用を検討してください。
    • JSONデータを消費 - Accept: application/jsonヘッダーを使用して待機室エンドポイントにリクエストを送信します。

  2. Cloudflare Workers内（または独自のバックエンドサービス内）

    • 待機室変数の統合 – バックエンドAPIでJSONレスポンスを期待します。これらの変数の完全なリストについては、Cloudflare APIドキュメントのjson_response_enabledパラメータを参照してください。

    • リクエストヘッダーにクッキーを含める – 上記のように、待機室はクッキーを必要とします、バックエンドAPIはクッキーをサポートする必要があります。使いやすさのために、CookieJar ↗のようなクッキーマネージャーの使用を検討してください。

    • JSONレスポンスを有効にする - ダッシュボードまたはAPI経由で。

    • JSONデータを消費 - Accept: application/jsonヘッダーを使用して待機室エンドポイントにリクエストを送信します。

      ここでは、Worker内で待機室エンドポイントを使用する例を示します。リクエストヘッダーには、待機室APIに必要なacceptおよびcookieヘッダーの値が含まれています。acceptヘッダーは、ユーザーがキューにいる場合にJSONフレンドリーなレスポンスが返されることを保証します。そうでない場合、リクエストがオリジンに送信されると、オリジンが返すレスポンスがそのまま返されます。この例では、ハードコーディングされた__cfwaitingroom値がクッキー欄に埋め込まれています。しかし、実際のアプリケーションでは、待機室APIから返されたクッキーが、ユーザーが適切にキューに配置され、ユーザーの順番が来たときにオリジンに通過できるように、各後続のリクエストで使用されることが期待されます。

const waitingroomSite = 'https://examples.cloudflareworkers.com/waiting-room';


async function handleRequest() {
  const init = {
    headers: {
      'accept': 'application/json',
      'cookie': '__cfwaitingroom=F)J@NcRfUjXnZr4u7x!A%D*G-KaPdSgV'
    }
  }


  return await fetch(waitingroomSite, init)
    .then(response => response.json())
    .then(response => {
      if (response.cfWaitingRoom.inWaitingRoom) {
        return Response('待機室にいます', { 'content-type': 'text/html' });
      }
      else {
        return new Response(response);
      }
    })
}


addEventListener('fetch', event => {
  return event.respondWith(handleRequest());
});
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings