← ユースケース

チケット発売・限定販売のためのバーチャル待合室

販売ページの前に公平でリアルタイムな列を用意します。訪問者は自分の順番が進むのを見ながら、設定したペースで入場し、サイトは署名付きパスを確認します。Laravel や Filament を含め、どのホスティングでも使えます。

チケットの一般発売、限定アイテムのリリース、予約開始。1 日分のアクセスが販売開始の最初の 1 分に集中します。オートスケールは間に合わず、全員の決済が遅くなり、最後は回線の速さの勝負になります。待合室は、混み合うページの前に落ち着いた公平な列を作ります。訪問者は番号を受け取り、列が進む様子をリアルタイムで見ながら、サイトが処理できるペースで入場します。申し込みも設定もセルフサービスで、営業との商談も、ホスティングや CDN の乗り換えも不要です。

訪問者に見えるもの

• 整理番号と「あなたの前に 4,812 人」の表示。待っている間もリアルタイムに更新されます。
• 再読み込みやタブの追加で、順番を失うことも、前に割り込むこともありません。
• 英語、繁体字中国語、簡体字中国語、日本語、韓国語、タイ語、ベトナム語に対応したホスト型待合ページ。
• 販売開始前のわかりやすいカウントダウンと、終了時のはっきりした「完売」表示。

あなたが得られるもの

• 設定したペース（例：1 分あたり 300 人）で進む列。
• 大事な瞬間に使えるボタン：列を一時停止、今すぐ 500 人を入場、在庫がなくなったら終了。
• 入場した訪問者ごとに署名付きのパスを発行。サイトはパスを確認してから保護されたページを返すので、URL を推測しても列は飛ばせません。
• 必要なら、パスのチケット ID を使って 1 つの番号につき決済 1 回に制限できます。
• 列に並んでいる訪問者はアプリの接続数を使わないので、混雑中もサイトの他のリアルタイム機能に余裕が残ります。
• 列に並ぶ全員へのお知らせ（例：「Aエリアは完売」）を、待合ページにすぐ表示できます。

待合室はどの Hibira プランにも追加できるアドオンです。1 部屋、月 5,000 人の待機訪問者までは無料。有料プランは月 $29 から、単発イベントパスは 72 時間 $49 です。プランの上限を超えた訪問者はクレジットから差し引かれ、誰も締め出されません。詳しくは料金をご覧ください。

使う機能

• Hibira アプリの待合室。ポータルまたは署名付き HTTP API で管理します。
• ホスト型待合ページ ws.hibira.io/wait/APP_KEY/ROOM、または @hibira-io/waiting-room で作る独自ページ。
• 部屋ごとの cache チャンネル（cache-waitroom-ROOM）：1 つのメッセージで待っている全員に列の進み具合を伝え、各ブラウザが自分の順番を計算します。
• アプリの secret で署名した（HMAC-SHA256）パス。サイト側で検証でき、Hibira への問い合わせは不要です。

接続方法を選ぶ

サイトがどこで動いているかで選びます。上にあるものほど回避されにくくなります。

ステップ 1：部屋を作る

ポータルで作るか、イベント送信と同じ方法で署名した HTTP API リクエストで作ります。

POST /apps/APP_ID/waiting_rooms/presale
{
  "admit_per_minute": 300,
  "state": "paused",
  "starts_at": "2026-12-04T12:00:00+09:00",
  "title": "Winter tour presale",
  "return_urls": ["https://shop.example.com/"]
}

open は設定したペースで入場、paused は列を止め、closed は売り切れ時に番号の発行をやめます。starts_at より前に来た訪問者は番号を受け取ってカウントダウンを見ながら待ち、その時刻に列が動き始めます。

ステップ 2：エッジでページを守る

Cloudflare Workers、Next.js の middleware、Deno、Bun なら、1 回の呼び出しで済みます。

// middleware.js (Next.js)
import { NextResponse } from 'next/server';
import { protect } from '@hibira-io/waiting-room/server';

export async function middleware(request) {
  const blocked = await protect(request, {
    appKey: process.env.HIBIRA_KEY,
    secret: process.env.HIBIRA_SECRET,
    room: 'presale',
  });
  return blocked ?? NextResponse.next();
}

export const config = { matcher: ['/drop/:path*'] };

パスのない訪問者は待合ページに送られます。順番が来るとパスを持って戻り、protect() が確認して HttpOnly cookie に保存します。Express では同じパッケージの expressWaitingRoom() を使います。

ステップ 3：Laravel

hibira-io/laravel 0.4 以降（ブロードキャストですでに使っているかもしれません）なら、コマンドで部屋を作成し、ミドルウェア 1 つでルートを守れます。

composer require hibira-io/laravel:^0.4
php artisan hibira:waiting-room presale create --rate=300 --title="Winter presale"

Route::middleware('hibira.waiting:presale')->group(function () {
    Route::get('/drop', [DropController::class, 'show']);
    Route::post('/drop/checkout', [DropController::class, 'checkout']);
});

パスのない訪問者は、アプリと同じ言語の待合ページへ送られます。戻ってきたパスはアプリシークレットで検証され、API 呼び出しは不要です。パスは有効期限まで HttpOnly クッキーに保存されます。パスのない POST には 403 が返ります。コントローラーではリクエストからパスを取得できます。

$pass = $request->attributes->get('hibira_pass');
$pass->number;   // queue number
$pass->ticketId; // record it at checkout: one order per number

部屋はコード、キューのジョブ、コマンドラインから操作できます。

use Hibira\Laravel\Facades\Hibira;

Hibira::waitingRoom('presale')->pause();
Hibira::waitingRoom('presale')->admit(500);
Hibira::waitingRoom('presale')->notice('Zone A is sold out');
Hibira::waitingRoom('presale')->close();

ローカル開発では HIBIRA_WAITING_ROOMS=false を設定すると列をスキップできます。

ステップ 4：Filament から列を操作する

販売当日に、チームが別の管理画面を開く必要はありません。hibira-io/filament 0.5 以降なら、1 行でパネルに「待合室」ページが追加されます。

HibiraPlugin::make()->waitingRooms(
    authorize: fn ($user) => $user->is_admin,
)

このページには、部屋ごとの待機人数、列の進み具合、入場ペースがリアルタイムで表示されます。チームはここから一時停止と再開、今すぐ入場、お知らせの掲載、完売時のクローズ、部屋の作成や編集ができます。authorize を省略すると、パネルの全ユーザーが開けます。

ステップ 5：独自の待合ページ

ほとんどのサイトはホスト型ページで十分です。ブランドに完全に合わせたい場合は自作できます。

import { joinWaitingRoom } from '@hibira-io/waiting-room';

joinWaitingRoom({
  key: 'APP_KEY',
  room: 'presale',
  onUpdate: ({ ahead, etaMinutes }) => render(ahead, etaMinutes),
  onTurn: (turn) => turn.redirect('https://shop.example.com/drop'),
  onClosed: () => showSoldOut(),
});

クライアントは訪問者のチケットをブラウザに保存するので、再読み込みしても順番は変わりません。接続できない場合は数秒ごとに状態を確認する方式に切り替わり、誰も締め出されません。

ステップ 6：アプリ内で並ぶ

モバイルやゲームのクライアントは、ホスト型ページと同じ公開エンドポイントを使います。列に加わり、部屋の cache チャンネルを購読し、番号が来たらパスを受け取り、以降の API 呼び出しに付けて送ります。API 側ではアプリシークレットでパスを確認し、Hibira への呼び出しは不要です。Laravel なら WaitingRoom::verifyPass($pass, 'presale') で確認できます。

POST /waitroom/APP_KEY/presale/join         -> {"ticket": "…", "number": 5121}
GET  /waitroom/APP_KEY/presale              -> {"admitted": 4980, "state": "open", …}
POST /waitroom/APP_KEY/presale/pass         {"ticket": "…"}  -> {"pass": "…"}

Queue-it、Cloudflare Waiting Room との比較

2026 年 11 月時点の各社の公開価格・プランページに基づきます。プランは変わることがあるため、決める前に各社に確認してください。

価格とそれぞれが向いているケースを含む詳しい比較：Queue-it、Cloudflare Waiting Room、CrowdHandler、Queue-Fair。

ヒント

• 本当に売り切れるページを守りましょう：商品ページ、カート、決済。トップページや画像は待合室の外に置きます。
• ブラウザだけでなく、重要なリクエストでパスを確認してください。訪問者は自分のページのスクリプトを書き換えられますが、署名は偽造できません。
• 1 つの番号で 1 回だけ購入させたい場合は、決済時にパスのチケット ID を記録し、同じ ID での 2 回目の注文を拒否します。
• 販売の 15〜30 分前に部屋を開け、starts_at を設定しましょう。早く来た訪問者はサイトで再読み込みを連打する代わりに、カウントダウンで待ちます。
• まずは決済が余裕を持って処理できるペースで始め、エラー率を見ながら上げていきます。一時停止はいつでもワンクリックです。