テンプレートの概要

クイックスタート— ブランドイメージに合わせた待合室を数分で立ち上げる。

関連項目： テンプレートのマークアップと構造|テンプレートの状態とメソッド|スタイル設定とCSS変数

ブランド感を演出する待合室づくり：3つのステップ

待合室テンプレートのカスタマイズは簡単です。テキストエディタでHTMLファイルを開き、ブランドに合わせてCSS変数をいくつか変更するだけで完了です。ビルドツールも、学ぶ必要のあるフレームワークもありません。編集してページを更新するだけです。

1. テンプレートを開く

開く index.html aとbの両方で テキストエディタ そして、a ブラウザ. ファイルの上の方を見ると、 <style> CSSのカスタムプロパティを使用したブロック — これらは待合室の全体的な外観を制御します：

<style>
  :root {
    --ch-brand-primary:    #424242;   /* Title, accent, stock pill */
    --ch-brand-secondary:  #4b4b4b;   /* Buttons, focus rings */
    --ch-bg:               #FFFFFF;   /* Page background */
    --ch-surface:          #F0F4F8;   /* Card / panel backgrounds */
    --ch-progress-color:   #004f84;   /* Progress bar colour */
  }
</style>

ヘックス値を自社ブランドの色に合わせて変更し、保存してからブラウザを更新してください。これで完了です。テーマエンジンが、その他の色（テキストのコントラスト、ホバー状態、枠線、影）をすべて自動的に生成します。

2. フォントを設定する（任意）

カスタムフォントを使用するには、 @import その上部に <style> フォント変数をブロックして上書きします：

<style>
  /* Import your fonts first */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root {
    --ch-font-primary: 'Inter', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
</style>

フォントの読み込み中にページが正しく表示されるよう、カスタムフォントの後に必ずシステムの代替フォントを指定してください。もしこれを省略すると、 @import, ブラウザにはそのフォントファイルが存在しないため、利用可能な最初のフォールバックフォントが適用されます。

3. 変更内容をプレビューする

このテンプレートには、 <script id="crowdhandler-data"> JSON設定オブジェクトを含むタグ。以下を追加してください。 "dev": true プレビューモードに入ると、本番のAPIに接続することなく、あらゆるキューの状態をテストできます：

<script id="crowdhandler-data" type="application/ld+json">
{
    "dev": true,
    "status": 1,
    "title": "My Event",
    "position": 150,
    "estimate": 12,
    "simulatePolling": true
}
</script>

変更 ステータス さまざまな状態を確認するには（1 = アクティブキュー、3 = ブロック中、4 = カウントダウン、5 = 満員）。保存して更新すると、それぞれの状態をプレビューできます。削除 "dev" 公開の準備が整ったら。

さらに深く掘り下げる

ブランドイメージを反映した待合室を作るには、上記の手順だけで十分です。レイアウト、動作、機能を完全に制御したい場合は、詳細なガイドでそのすべてを網羅しています：

  • テンプレートのマークアップと構造 — HTMLの構造、Vueディレクティブ、キューの状態階層、およびメール通知、優先度コード、在庫インジケーターなどの機能を追加・削除する方法。
  • Vueのステートとメソッド — 完全版 ch オブジェクトのリファレンス：各プロパティ、その型、およびそれが制御する内容。テンプレート内で利用可能なフォームメソッドやヘルパー関数も含まれます。
  • スタイリングとCSS変数 — CSSのカスタムプロパティの完全な一覧、2層式テーマエンジンの仕組み、および余白、border-radius、プログレスバーの高さといった構造的なプロパティを上書きする方法について解説します。