多言語テンプレート
多言語テンプレート
待合室の画面は、来訪者の母国語で自動的に表示されます。すぐに使える多言語テンプレートが用意されているので、それを選択するだけで済みます。一から作成する必要はありません。
このガイドでは、製品に同梱されている内容と、カスタマイズを行う際に知っておくべきことについて解説します。具体的には、テンプレートがすでにどのような機能を備えているか、変更してはいけない部分、そしてデザインが63の言語で正しく表示されるかを確認する方法について説明します。
目次
内容
「多言語テンプレート」は、テキストが翻訳された標準的な待合室です。状態も、レイアウトも、動作もすべて同じで、変わるのは言葉だけなのです。
ベルリンからの訪問者には、その部屋がドイツ語で表示されます。カイロからの訪問者には、アラビア語で、右から左への書き順で表示されます。日付や時刻は、訪問者それぞれの地域の慣習に従って表示されます。これらについて、言語ごとや訪問者ごとに設定を行う必要は一切ありません。
63言語に対応しています：英語に加え、62種類の翻訳パックが用意されています。
使い方
CrowdHandlerのダッシュボードで、待合室用の「多言語テンプレート」を選択してください。これで完了です。マークアップの編集も、ビルド工程も、言語ごとの設定も一切必要ありません。
この点以下の内容はすべてカスタマイズ用です。標準のテンプレートで問題ない場合は、これで完了です。
カスタムテンプレートの作成
カスタムテンプレートが利用できるプランでは、「多言語テンプレート」をダウンロードし、それを出発点としてください。標準テンプレートから始めて、そこに翻訳を追加しようとしないでください。多言語版にはすでに必要な設定が整っているため、手作業でそれをコピーするのは非効率的です。
そのダウンロードファイルには、翻訳作業を可能にする要素が2つあります。両方とも残しておいてください。
data-ch-i18n ～について <html> タグ
<html lang="en" data-chVersion="2" data-ch-i18n>
これにより、CrowdHandlerはページの言語を管理できるようになります。つまり、 <html lang> 正確かつ設定 <html dir="rtl"> 訪問者の言語設定で必要とされる場合。これを削除すると、ページは適応しなくなり、右から左への表示切り替えも機能しなくなります。
（これは逆方向の逃げ道でもあります。意図的に単一言語に限定されたカスタムテンプレートや、独自の言語切り替え機能を備えたテンプレートでは、この属性を省略しておけば、CrowdHandler はそのテンプレートには手を加えません） lang または dir （まったく。）
t() リテラルテキストの代わりに呼び出し
標準テンプレートでは英語がハードコーディングされていますが、多言語テンプレートでは翻訳済みの文字列が必要となります：
<!-- Standard template -->
<h2>Queue Full</h2>
<p>We're at capacity. You'll be let in when a spot opens up.</p>
<!-- Multi Language Template -->
<h2>{{ t('room-full-title') }}</h2>
<p>{{ t('room-full-description') }}</p>
これらを自由にスタイルを変更したり、配置を変えたり、独自のマークアップで囲んだりしてください。ただし、 t() ご自身の英文を入力してください。そうしないと、その行の翻訳が停止してしまいます。別の表現をご希望の場合は、 文字列を上書きする その代わりに、すべての言語が正常に動作し続けるようにします。
連携して t()
独自のマークアップを追加したり、既存のマークアップの位置を変更したりする際に、これが必要になります。キーリファレンスには、46個すべての文字列と、それぞれの英語表記が記載されています。
本文中：
<div class="ch-position-label">{{ t('position-label') }}</div>
属性については、すべてバインドして、英語の要素が一つも取り残されないようにします：
<input :placeholder="t('email-placeholder')" :aria-label="t('email-aria')" />
文の中に値が挿入されると：
<span>{{ t('estimate-minutes', { n: ch.estimate }) }}</span>
<span>{{ t('email-confirmation', { email: ch.email.value }) }}</span>
2番目の引数は、 {プレースホルダー} その文字列の中で。 推定所要時間（分） は 「およそ{n}分」, したがって、渡す { n: 12 } 「約12分」と表示される――そしてドイツ語の 「およそ {n} 分」 ドイツ語の語順に合わせて、同じ「12」を適切な位置に配置します。
知っておくべき2つの行動：
- 値がまだ準備できていない場合は――
ch.etaたとえば、ETAが非表示のときは、その欄は空のままですが、プレースホルダーは単に消えてしまいます。ページ上に「null」という文字が表示されることは決してありません。 - 値の引き渡しを忘れた場合、生の
{n}表示されたままになります。これは意図的な仕様であり、値の設定漏れがあった場合に、本番環境ではなくビルド中にそれが確認できるようにするためです。
電話 t() 存在しないキーを指定すると、ページにはそのキー名そのものが表示され、リテラルテキストが表示されます room-full-titel 原文が入るべき場所です。誤字を見つけ出すのに便利です。
訪問者に表示される言語
CrowdHandler はこれらを順番に処理し、翻訳が存在する最初のものを採用します：
| 注文 | シグナル |
|---|---|
| 1 | ?lang= URL における — これが何よりも優先されるため、これがテストの方法です |
| 2 | 訪問者のブラウザまたはOSの言語設定 |
| 3 | 彼らが到着した場所――（～からやってきて） .de ドメイン名から判断すると、ドイツ語のようだ |
| 4 | 英語 |
地域ごとのバリエーションは、適切に代替処理されます。ブラジルポルトガル語に設定されているユーザーには、ブラジル向けパックが提供されます。もしそれがない場合は、標準ポルトガル語が提供され、それでもない場合は英語が提供されます。つまり、 de-AT そして es-AR 英語まで下がってしまうよりは、ドイツ語やスペイン語に落ち着く。
何らかの理由（たとえば、接続が不安定な場合など）で翻訳を読み込めない場合、ページが正常に表示されない状態になるのではなく、そのルームは静かに英語で表示されます。
利用可能な言語
合計63個：英語版に加え、翻訳済みパックが62個。
| 言語 | コード |
|---|---|
| アラビア語 | ar |
| アゼルバイジャン語 | az |
| バングラ語 | bn |
| ブラジル・ポルトガル語 | pt-BR |
| ブルガリア語 | bg |
| カナダ・フランス語 | fr-CA |
| カタロニア語 | ca |
| 中国語（簡体字） | zh |
| 中国語（香港） | zh-HK |
| 中国語（台湾） | zh-TW |
| クロアチア語 | hr |
| チェコ | cs |
| デンマーク語 | da |
| オランダ語 | nl |
| 英語 | ja |
| エストニア語 | et |
| フェロー語 | fo |
| フィリピン人 | tl |
| フィンランド語 | fi |
| フランス語 | fr |
| ガリシア語 | gl |
| グルジア語 | ka |
| ドイツ語 | de |
| ギリシャ語 | el |
| グジャラート語 | gu |
| ハイチ・クレオール語 | ht |
| ヘブライ語 | 彼 |
| ヒンディー語 | こんにちは |
| ハンガリー語 | hu |
| アイスランド語 | は |
| インドネシア語 | id |
| イタリア語 | それ |
| 日本語 | ja |
| カンナダ語 | kn |
| カザフ語 | kk |
| 韓国語 | ko |
| ラトビア語 | lv |
| リトアニア語 | lt |
| マラヤーラム語 | ml |
| マラーティー語 | mr |
| メキシコ・スペイン語 | es-MX |
| ノルウェー語（ブークモール） | nb |
| ペルシア語／ファルシ語 | fa |
| ポーランド語 | pl |
| ポルトガル語 | pt |
| パンジャブ語 | pa |
| ルーマニア語 | ro |
| ロシア語 | ru |
| セルビア語（キリル文字） | sr |
| セルビア語（ラテン文字） | sr-Latn |
| スロバキア語 | sk |
| スロベニア語 | sl |
| スペイン語 | es |
| スワヒリ語 | sw |
| スウェーデン語 | sv |
| タミル語 | ta |
| テルグ語 | te |
| タイ語 | th |
| トルコ語 | tr |
| ウクライナ語 | uk |
| ウルドゥー語 | ur |
| ベトナム語 | vi |
| ウェールズ語 | cy |
ここにない言語が必要ですか？ご連絡ください。言語の追加はCrowdHandler側での変更であり、テンプレート内で設定できるものではありません。
右から左へ書く言語
アラビア語、ヘブライ語、ペルシア語、ウルドゥー語は右から左への表示になります。CrowdHandler は dir="rtl" ページ上で、レイアウトを反映させるのはCSSの役割です。
標準のスタイルシートですでに処理されているため、修正していないテンプレートでは何もする必要はありません。独自のCSSを作成する場合は、以下の2つの習慣を守れば正常に動作し続けます：
「左」「右」の代わりに論理プロパティを使用してください。それらは自動的に反転します：
/* ページの方向に合わせて反転する */
margin-inline-start: 1rem;
padding-inline: 2rem;
text-align: start;
/* RTLでは位置が固定される — 避けるべき */
margin-left: 1rem;
text-align: left;
方向性のあるアニメーションには、RTL（右から左）向けのバリエーションを用意しましょう。目に見える形で一方向に動くものには、組み込みの進行状況表示のきらめき効果のように、その鏡像となるものが必要です：
[dir="rtl"] .ch-progress-fill {
animation-name: ch-shimmer-rtl;
}
日時
電話 formatDate(date, format) そして、ロケールは考慮しないようにします：
<code>{{ formatDate(ch.requested, 'toLocaleTimeString') }}</code>
CrowdHandlerは、ユーザーに最適な地域設定を選択し、単にルームの言語だけでなく、訪問者自身に合わせて対応します。英語のルームでは、アメリカ人のユーザーには 午後2時30分 そして 2026年1月27日 一方、英国のある人は次のように見ている 14:30 そして 2026年1月27日. フランス語のページでは、どこから閲覧していても全員にフランス語の書式が適用されるため、ページ内の統一性が保たれます。
設計における具体的な成果： 日時については、固定の幅があると決めつけないでください。 14:30 そして 午後2時30分 長さが明らかに異なり、さらに長い地域もあります。
文言の変更
どの言語であっても、英語を含め、任意の文字列を上書きすることができます。これはマークアップにブロックを追加することになるため、カスタムテンプレートが必要になります — ドロップ window.CH_languages in 上記 waitスクリプト：
<script>
window.CH_languages = {
"en": {
"position-label": "You are number",
"estimate-eta": "So close: {time}"
},
"fr": {
"position-label": "Vous êtes numéro"
}
};
</script>
<script src="https://wait.crowdhandler.com/js/latest/wait.js"></script>
- 変更するキーのみをリストアップしてください。それ以外のものは、元の翻訳のままにします。
- そのキーワードに対するシステム標準の翻訳よりも、あなたの表現の方が常に優れています。
- 「」を
{プレースホルダー}. を省略して{time}～から推定-eta文から時間を静かに削除します。 - これが表現を変える正しい方法です。を置き換える
t()独自のテキストで呼び出すと、他のすべての言語でその行が崩れてしまいますが、オーバーライドを行えば63言語すべてで正常に動作します。
使用可能なすべての文字列
46個のキー。翻訳がなく、かつ上書き設定も行っていない場合、訪問者には「英語」の列が表示されます。
キャプチャ
| キー | 英語 |
|---|---|
キャプチャメッセージ |
続行するには、人間であることを確認してください |
ブロック済み
| キー | 英語 |
|---|---|
ブロックされたタイトル |
アクセス拒否 |
blocked-description |
不審な活動があったため、アカウントがブロックされました。 |
満室
| キー | 英語 |
|---|---|
room-full-title |
キューが満杯です |
部屋の詳細説明 |
現在、定員に達しています。空きが出次第、ご入場いただけます。 |
カウントダウン
| キー | 英語 |
|---|---|
カウントダウンラベル |
キューの受付開始は |
残り時間（時間単位） |
時間 |
カウントダウン（分） |
min |
カウントダウン（秒） |
秒 |
カウントダウンメッセージ |
このページを閉じないでください。キューの受付開始時に、ランダムな順番が割り当てられます。 |
3つの単位ラベルは、きついカウントダウンレイアウトを崩す可能性が最も高いものです。「hrs」は英語では3文字ですが、フィンランド語では8文字になります。
役職
| キー | 英語 |
|---|---|
位置ラベル |
あなたの役職 |
チェックイン |
チェックインします！ |
ポジションの入れ替え |
ポジションを入れ替え！ |
チェックイン そして ポジションの入れ替え 1つのスロットを共有する — ch.シャッフル その2つのうちどちらかを選ぶことになるので、どちらも同じスペースに収まる必要があります。
推計値
| キー | 英語 |
|---|---|
推定値（ほぼ） |
あと少しだ！ |
時間当たりの見積もり |
1時間以上 |
推定所要時間（分） |
およそ{n}分 |
推定-eta |
ETA: {time} |
優先順位コード
| キー | 英語 |
|---|---|
優先順位-タイトル |
優先コードはお持ちですか？ |
優先順位-プレースホルダー |
コードを入力してください |
優先順位を適用 |
応募する |
優先度-成功 |
コードが適用されました！ |
優先度エラー |
無効なコード |
在庫
| キー | 英語 |
|---|---|
在庫残数 |
残り点数 |
在庫切れ |
完売 |
セッション情報
| キー | 英語 |
|---|---|
セッション有効期限切れメッセージ |
このウィンドウは閉じないでください。自動的に次の画面に進みます。 |
セッションのタイムアウトメッセージ |
順番が回ってくると、自動的に次のページへ遷移します。お手続きには{n}分間お時間があります。 |
メール通知
| キー | 英語 |
|---|---|
メール変更タイトル |
変更通知メール |
メール通知のタイトル |
自分の順番が来たときに通知を受け取る |
メール用プレースホルダー |
your@email.com |
email-notify-btn |
通知を受け取る |
メール登録解除ボタン |
キャンセル |
メールによる確認 |
{email} 宛にメールをお送りします |
email-change-btn |
変更 |
メール利用規約 |
お客様のメールアドレスは、キューセッションが終了した際にお知らせするために一時的に保存されます。このメールアドレスは、この目的のみに使用され、その後直ちに削除されます。 |
フッター
| キー | 英語 |
|---|---|
フッターIDラベル |
ID: |
フッター（コピー） |
コピーしました！ |
フッターのコピータイトル |
Enterキーを押してコピーしてください |
フッター - 直近のリクエスト |
最終チェックイン日時： |
フッター - 提供： |
提供： |
footer-new-tab-sr |
(新しいタブで開きます) |
スクリーンリーダー用の文字列
| キー | 英語 |
|---|---|
progress-aria |
キューの進捗状況 |
checking-in-aria |
確認中 |
email-aria |
メールアドレス |
メール送信用ARIA |
送信 |
求人案内 |
役職 {position} |
発表・見通し・推定 |
現在地 {position}、推定待ち時間 {estimate} 分 |
その2つ お知らせ-* 文字列が自動的に生成され、 ch.お知らせ — マークアップにはライブ領域を記述するだけで十分です：
<div class="ch-sr-only" aria-live="polite" aria-atomic="true">{{ ch.announcement }}</div>
テンプレートのテスト
言語を強制する
追加 ?lang= URLに追加してください。これは他のどのシグナルよりも優れているため、ブラウザの設定を変更する必要はありません：
https://wait.example.com/my-event?lang=de
https://wait.example.com/my-event?lang=pt-BR
https://wait.example.com/my-event?lang=ar
ローカル環境では、アップロードする前に
ダウンロードしたテンプレートは、ホストされているCrowdHandlerスクリプトを読み込むスタンドアロンのHTMLファイルであるため、サーバーを必要とせず、デスクトップから直接ブラウザで開くことができます。
これはプレビューモードで提供され、ライブキューを伴わずにルームが稼働します。追加 ?lang= ローカルファイルのURLにアクセスして言語を切り替え、以下を変更してください。 ステータス その中では crowdhandler-data ファイルの先頭にあるブロックを使用して、各状態での翻訳内容を確認してください：
ステータス |
州 |
|---|---|
1 |
アクティブキュー |
3 |
ブロック済み |
4 |
カウントダウン |
5 |
満室 |
100 |
キャプチャ |
試してみる価値のあるチェックリスト
- 最長の単語はドイツ語とフィンランド語です。ボタンやストックバッジ、カウントダウンの単位が爆発するとしたら、それはここでしょう。
- 道案内にはアラビア語またはヘブライ語を使用してください。レイアウトが実際に反映されていることを確認し、間違った側に配置されたものがないか確認してください。
- 改行やフォントのフォールバックに関しては、ラテン文字とは動作が異なるため、日本語またはタイ語に対応する必要があります。
?lang=de-AT地域コードが英語ではなく、その基本言語に切り替わることを確認する。- フッターのタイムスタンプは、訪問者の地域によって幅が変わるため、いくつかの言語で表示されます。