フォームコンテナ内のフィールドの翻訳

Liferay DXP 2025.Q1+/ポータル GA132+

ページ エディターでフォーム コンテナー内のテキスト入力を直接ローカライズして、 バージョン別の機能の可用性にリストされているフィールドに多言語サポートを提供します。 これにより、コンテンツがユーザーの優先言語に一致するようになり、フォームの使いやすさとアクセシビリティが向上します。

フォームコンテナ内のフィールドを翻訳するには、

1. ローカライズ可能なカスタム オブジェクトを作成します。

2. フォーム コンテナー フラグメントをページ に追加し、カスタム オブジェクトにマップします。

3. フラグメントに追加するフィールドを選択します。

   選択する際には、「ローカライズ可能」列を参照して、ローカライズ可能なフィールドを特定します。

4. ローカリゼーション選択フラグメント （1）を追加するように求めるプロンプトが表示されます。 この手順をスキップした場合は、後でフラグメントとウィジェットのサイドバー (2) から追加できます。

   ヒント

   ローカリゼーション選択フラグメントをフォーム コンテナーの外側に配置できます。

   

ローカリゼーション選択フラグメントを使用して、翻訳されたフィールドをページ内に表示します。

ローカリゼーション選択フラグメントは、言語を切り替え、フィールドの翻訳ステータスを追跡します。 翻訳済みのフィールドには、 翻訳済み (すべてのフィールドがローカライズ済み)、 未翻訳 (ローカライズなし)、または 翻訳中 (フィールドの合計数に対する翻訳済みフィールドの数) のステータスが表示されます。

ローカリゼーション選択フラグメントの構成

フラグメントのサイズを調整し、言語ラベルを表示するかどうかを選択できます。 フラグメントを設定するには、

1. ローカリゼーション選択フラグメントを選択します。 設定は右側の「全般」タブの下に表示されます。

2. オプションの下にある サイズ をクリックして、フラグメントのサイズ (通常または小) を選択します。

3. 言語コードラベルを非表示にして言語フラグのみを表示するには、 言語ラベルを非表示 をチェックします。

ローカライズ不可能なフィールドの動作の設定

翻訳ワークフロー中にローカライズできないフィールドの動作を制御できます。

1. フォーム コンテナー フラグメントを選択します。 設定は右側の「全般」タブの下に表示されます。

2. ローカライズ不可能なフィールドの状態構成で、オプションを選択します。フィールドへの入力を禁止するには 無効 、編集を許可せずにフィールドを表示するには 読み取り専用 を選択します。

3. フィールド上に表示されるメッセージを追加するには、ローカライズ不可能なフィールドのメッセージ設定を使用します。

   メッセージの横にある旗アイコンをクリックし、別の言語を選択してローカライズします。

ローカライズ可能な入力フラグメントの適応

翻訳をサポートする入力フラグメントを開発する場合は、ローカライズされた入力フィールドを動的に管理する必要があります。

典型的な入力フラグメントでは、単一の <input> フィールドが使用されます。

<input name="description" type="text" value="defaultValue">

翻訳の場合は、言語ごとに追加の <input> 要素を作成します。

<input name="description" type="text" value="defaultValue">
<input name="description_en_US" type="text" value="englishValue">
<input name="description_es_ES" type="text" value="spanishValue">
<input name="description_fr_FR" type="text" value="frenchValue">

ローカライズされた入力を作成するタイミングの検出

フラグメントは、これらの追加入力をいつ作成し、その値を更新するかを認識する必要があります。 これは特定のイベントを通じて実現されます:

1. 言語の変化の検出

   ユーザーがローカリゼーション ドロップダウンで言語を切り替えると、 localizationSelect:localeChanged イベントがトリガーされます。 フラグメントはこのイベントをリッスンし、選択された言語の入力を保存するように動作を更新する必要があります。

   Liferay.on('localizationSelect:localeChanged', (event) => {
   });
   

   たとえば、選択した言語に入力フォーカスを設定します。

   Liferay.on('localizationSelect:localeChanged', (event) => {
      const selectedLanguageId = event.languageId;
      document.querySelector(`[name="description_${selectedLanguageId}"]`).focus();
   });
   

   この時点以降、ユーザー入力はすべて、適切な言語固有の入力フィールドに保存される必要があります。

2. 翻訳の更新の通知

   ユーザーが特定の言語の入力を変更すると、フラグメントはローカリゼーション ドロップダウンに翻訳が更新されたことを通知する必要があります。

   Liferay.fire('localizationSelect:updateTranslationStatus', { languageId: languageId });
   

   例えば、

   Liferay.fire('localizationSelect:updateTranslationStatus', { languageId: 'es_ES' });
   

   これにより、ドロップダウンに翻訳ステータスの変更が反映されます。

   localizationSelect:localeChangedをリッスンすることで、フラグメントは言語の変更を検出し、ユーザー入力が言語固有の入力フィールドに正しく保存されることを確認します。 入力が更新されると、 localizationSelect:updateTranslationStatus イベントが発生し、ローカリゼーション ドロップダウンの同期が維持されます。

3. コンテキスト変数

   フラグメントは、次の変数を使用して入力を管理できます。

   • ローカライズ: フィールドがローカライズをサポートしているかどうかを示します (true または false)。

   • valueI18n: 言語IDでインデックス付けされた翻訳を保存します。

   • 属性: ローカライズできないフィールドの場合、属性には次のものが含まれます。

     • unlocalizedFieldsMessage: ローカライズできないフィールドのメッセージを表示します (デフォルト: [フィールド名] はローカライズできません)。
     • unlocalizedFieldsState: 状態を無効または読み取り専用として設定します。

4. バックエンドの期待

   ローカライズされた入力が各言語の形式 inputName_languageCode (例: inputName_en_US および inputName_fr_FR) に従っていることを確認します。

詳細なガイダンスについては、 index.jsのデフォルトのテキスト入力フラグメントの実装を参照してください。

機能の可用性の概要

バージョン別の詳細な機能展開

関連トピック

• フォームフラグメントを使用したフォームの作成
• フラグメントを使用してマルチステップフォームを構築する