テンプレートの状態

Vueのステートとメソッド — 反応性 ch オブジェクトおよび利用可能なテンプレートメソッド。

この待合室テンプレートは、次のような単一のリアクティブな Vue 3 オブジェクトによって動作しています。 ch. このオブジェクトには、キューの状態（位置、推定待機時間、カウントダウンタイマー、フォームデータ、機能フラグなど）がすべて格納されており、アプリケーションが CrowdHandler API をポーリングするたびに自動的に更新されます。これらの状態を自分で管理する必要はなく、標準の Vue ディレクティブを使用してそのプロパティにバインドするだけで済みます（v-if, v-else, {{ }} 補間、 :style、など）を使用すると、テンプレートは変更にリアルタイムで反応します。例えば、 ch キューの現在の状態を表す、読み取り専用のデータAPIとして。

状態オブジェクト

主要な状態： `ch`

物件	種類	説明
`ch.isLoaded`	ブール値	`true` 初期データが読み込まれたとき
`ch.isActive`	ブール値	`true` ユーザーがアクティブキューにいるとき
`ch.isCountdown`	ブール値	`true` キューがまだ開いていない場合
`ch.isBlocked`	ブール値	`true` ユーザーがブロックされた場合
`ch.isRoomFull`	ブール値	`true` キューが満杯のとき
`ch.isError`	ブール値	`true` エラーが発生したとき
`ch.captchaRequired`	ブール値	`true` キャプチャの入力が必須となる場合
`ch.position`	数値 \| null	現在のキュー内の位置（1から始まる）。 `null` チェックインの際
`ch.estimate`	数値 \| null	推定待ち時間（分）
`ch.eta`	文字列 \| null	到着予定時刻（書式付き時刻文字列）
`ch.title`	文字列	イベント／会場名
`ch.message`	文字列	ルーム設定からのカスタムメッセージ
`ch.logo`	文字列	ロゴ画像のURL
`ch.stock`	数値 \| null	在庫状況（構成済みの場合）
`ch.onsale`	文字列	キューの受付開始日（ISO日付）
`ch.requested`	文字列	最後のAPIリクエストのタイムスタンプ
`ch.sessionsExpire`	番号	セッションの有効期限があるかどうか（0以外 = true）
`ch.sessionsTimeout`	番号	セッションのタイムアウトまでの残り時間（分）
`ch.emailAvailable`	番号	メール通知が有効かどうか（0以外＝true）
`ch.お知らせ`	文字列	スクリーンリーダーの読み上げ用テキスト
`ch.progress`	番号	進行状況バーのパーセンテージ（0～100）
`ch.nextPoll`	番号	前回の投票からの経過秒数
`ch.pollTTL`	番号	現在のポーリング間隔（秒単位）（デフォルトは60、変更可能）
`ch.css.title`	文字列	動的なタイトルサイズクラス (`""`, `"ch-title-lg"`、または `"ch-title-xl"`)

トークンの状態： `ch.token`

物件	種類	説明
`ch.token.value`	文字列 \| null	トークンの全額
`ch.token.obfuscated`	文字列 \| null	表示用に一部非表示にしたトークン
`ch.token.copied`	ブール値	`true` ユーザーがトークンをコピーした直後
`ch.token.copy(event, ch)`	関数	トークンをクリップボードにコピーする

メールの状態： `ch.email`

物件	種類	説明
`ch.email.value`	文字列	入力されたメールアドレス
`ch.email.valid`	ブール値	メールの形式が有効かどうか
`ch.email.submitted`	ブール値	メールの送信に成功したかどうか
`ch.email.submitting`	ブール値	`true` 提出中
`ch.email.changing`	ブール値	`true` ユーザーが以前に送信したメールアドレスを変更する場合

優先度コードの状態： `ch.priority`

物件	種類	説明
`ch.priority.available`	数値 \| null	優先度コードが有効か（0以外 = 有効）
`ch.priority.code`	文字列 \| null	優先権コードを入力しました
`ch.priority.valid`	ブール値 \| null	コードの書式が有効かどうか
`ch.priority.submitted`	ブール値	コードが提出されたかどうか
`ch.priority.submitting`	ブール値	`true` 提出中
`ch.priority.success`	ブール値	`true` コードが承認された場合
`ch.priority.error`	ブール値	`true` コードが却下された場合

カウントダウン状態： `ch.countdown`

以下の場合に利用可能です ch.isCountdown は正しい。

物件	種類	説明
`ch.countdown.sHours`	文字列	時間、先頭にゼロを埋めた形式（「02」）または「--」をinitの前に指定
`ch.countdown.sMinutes`	文字列	minutes、先頭にゼロを埋めた形式（「05」）または「--」を init の前に付ける
`ch.countdown.sSeconds`	文字列	init の前に秒数、先頭ゼロ埋め（「30」）または「--」を指定
`ch.countdown.hours`	番号	数値としての時間
`ch.countdown.minutes`	番号	数字としての議事録
`ch.countdown.seconds`	番号	秒を数値として
`ch.countdown.totalseconds`	番号	残り合計秒数

利用可能な方法

方法	説明
`validateEmail()`	メールアドレスの形式を検証し、更新します `ch.email.valid`
`submitEmail()`	通知用のメールアドレスを登録する
`changeEmail()`	「メールアドレスの変更中」の状態になる
`cancelChangeEmail()`	メールアドレスの変更をキャンセルし、確認画面に戻ります
`checkValidPriorityCode()`	優先順位コードの形式を検証します
`prioritySubmit()`	優先順位コードを送信する
`formatDate(date, format)`	日付文字列をフォーマットします（以下を参照）。

formatDate のオプション

formatDate(ch.requested, 'toLocaleString')      // "2026年1月27日 午後2時30分00秒"
formatDate(ch.requested, 'toLocaleDateString')   // "1/27/2026"
formatDate(ch.requested, 'toLocaleTimeString')   // "2:30:00 PM"
formatDate(ch.requested, 'dayMonth')             // "1月27日"
formatDate(ch.requested, 'weekdayMonthDay')      // "1月27日（火）"
formatDate(ch.requested, 'iso')                  // "2026-01-27T14:30:00.000Z"
formatDate(ch.requested, 'YYYY-MM-dd HH:mm:ss') // "2026-01-27 14:30:00"

状態オブジェクト#

主要な状態： ch#

トークンの状態： ch.token#

メールの状態： ch.email#

優先度コードの状態： ch.priority#

カウントダウン状態： ch.countdown#

利用可能な方法#

formatDate のオプション#