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

Liferay DXP 2025.Q1+/Portal GA132+

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

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

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

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

3. フラグメントに追加するフィールドを選択してください。

   選択する際は、「ローカライズ可能」列を参照して、どのフィールドがローカライズ可能かを確認してください。

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

   ヒント

   ローカライズ選択フラグメントは、フォームコンテナの外に配置できます。

   

注

ローカライズ可能なフィールドが欠落しているか非表示になっている状態でローカライズ選択フラグメントを追加すると、ページを公開しようとしたときにエラーメッセージが表示されます。

ローカライゼーション選択フラグメントを使用すると、翻訳されたフィールドをページに表示できます。

ローカライゼーション選択フラグメントは、言語を切り替え、フィールドの翻訳状況を追跡します。 翻訳されたフィールドの状態は、 翻訳済み (すべてのフィールドがローカライズ済み)、 未翻訳 (ローカライズなし)、または 翻訳中 (翻訳されたフィールドの数とフィールドの総数との比較) のいずれかで表示されます。

注

ローカライゼーション選択フラグメントは、ページ上のすべてのフォームのすべてのフィールドを評価します。 例えば、それぞれ4つの入力項目を持つフォームが2つある場合、合計で8つの入力項目になります。

注

スコープの異なるオブジェクトに基づいたフォームを扱う場合、各オブジェクトには独自のデフォルト言語が設定されている場合があります。 この場合、フラグメントはより制限的なスコープを適用します。 例えば、一方のオブジェクトがインスタンスにスコープされ、もう一方のオブジェクトがサイトにスコープされている場合、サイトスコープが使用されます。

ローカライズ選択フラグメントの設定

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

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 のデフォルトのテキスト入力フラグメントの実装を参照してください。

機能の提供状況概要

Liferayのバージョン	機能ステータス	機能フラグラベル
Liferay DXP 2025.Q1/Portal GA132	リリース	LPD-37927
Liferay DXP 2025.Q3	Googleアナリティクス	-

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

機能	Liferay DXPバージョン	ポータルバージョン	メモ
利用可能なローカライズ可能なフィールド	2025年第1四半期以降	GA132+	テキスト、 長文テキスト、および リッチテキスト フィールドが利用可能です。
利用可能なローカライズ可能なフィールド	2025年第2四半期以降	NA	チェックボックス、 日付、 日時、 ファイルアップロード、 選択、 複数選択、 数値フィールド が利用可能です。
言語互換性：右から左へのテキスト	2025年第2四半期以降	NA	この機能により、アラビア語などの言語で右から左へのテキスト入力が可能になり、 テキスト、 長文テキスト、 リッチテキスト、 選択、 日付、 日付と時刻、および 数値 フィールド。

関連トピック

• フォームフラグメントを使用したフォームの作成
• フラグメントを使用して複数ステップのフォームを作成する