要素バリエーションの作成と管理
ベータ版機能 Liferay DXP 2026.Q3+
要素のバリエーションは、ページ全体を別のエクスペリエンスに複製するのではなく、特定の オーディエンス向けにコンテンツページの 1 つの要素を変更します。バリエーションによって、要素の内部HTMLを置き換えたり、要素に対してJavaScriptを実行したり、要素を非表示にしたりすることができます。バリエーションはブラウザ上で適用され、Liferay DXPが訪問者向けにレンダリングするエクスペリエンスの上に重ねて表示されます。
要素の内部HTMLを置き換えたり、JavaScriptを実行したりするには、カスタムマークアップまたはコードが必要です。要素を非表示にしても、そうはなりません。
前提条件
要素のバリエーションを使用するには、以下の要件があります。
バリエーションは、コンテンツページ上の編集可能なフラグメント要素のみを対象とすることができます。ウィジェットやコンテナなど、編集可能な ID を持たない要素は、 ページ要素 ピッカーには表示されません。
要素バリエーションの作成
-
サイトメニュー (
) を開き、 サイトビルダー → ページ に移動します。 -
コンテンツページの場合は、 アクション をクリックし、 編集を選択します。
-
ページエディターのツールバーで、エクスペリエンスセレクターの横にある バリエーションの作成 をクリックします。
要素バリエーションエディタが開きます。左側にサイドバー、右側にページのプレビューが表示されます。
-
サイドバー上部の エクスペリエンス セレクターを使用して、バリエーションが属するエクスペリエンスを選択します。
-
新規 をクリックしてください。
-
バリエーションの名前を入力してください。
-
ページ要素 ピッカーで要素を選択します。
各オプションには、フラグメント名と、その中に含まれる編集可能な要素の ID がラベル付けされています。例:
バナー (タイトル)。オプションにカーソルを合わせると、プレビュー画面でその要素がハイライト表示されます。
目的の要素がリストにない場合、おそらく
data-lfr-editable-id属性がありません。フラグメント要素を編集可能にする方法の詳細については、 フラグメント固有のタグと属性のリファレンス を参照してください。 -
オーディエンス フィールドで、1 つ以上のオーディエンスを選択してください。
同じページ要素の別のバリエーションですでに使用されているオーディエンスは表示されません。
-
（オプション） ページ要素を非表示にする を切り替えると、設定した対象者から非表示になります。
ヒント編集を行うとプレビューが自動的に更新されるため、変更結果を確認できます。
-
（オプション） HTML フィールドにカスタムマークアップを入力します。
このマークアップは、要素の内部HTMLを置き換えます。
-
（オプション）要素に対して実行するカスタムコードを JavaScript フィールドに入力します。
このコードは HTML 置換の後に実行され、ターゲット要素を保持する
要素という名前の変数を使用できます。重要コードが実行されると、編集を続けていてもその効果はプレビューに適用されたままになります。をクリックして をリロードすると、プレビューが再度読み込まれ、クリーンなページから現在のコードが実行されます。
-
をクリックして保存します。
保存すると、ページのドラフトのバリエーションが保存されます。
-
ページを公開します。
訪問者は、ページが公開された後にのみ要素のバリエーションを確認できます。パブリッシングでは、各バリエーションをそれが属する体験と関連付けます。検出処理はページ読み込み後にブラウザで実行されるため、訪問者はバリエーションが適用される前に、一時的にデフォルトのコンテンツを目にする場合があります。
既存のバリエーションの管理
サイドバーには、選択したエクスペリエンスのバリエーションが一覧表示され、それぞれが対象とするページ要素ごとにグループ化されています。各項目には、その名前、対象ユーザー、および定義する各部分（HTML、JavaScript、または要素の非表示）を示すラベルが表示されます。無効になっているバリエーションには「無効」というラベルが表示されます。
各エントリには、 編集 クイックアクションと、 アクション メニューがあり、以下のオプションがあります。
-
編集 でフォームのバリエーションが開きます。
-
無効 または 有効 はバリエーションをオンまたはオフにします。
-
削除 はバリエーションを削除します。
視聴者の優先順位を設定する
訪問者は複数のオーディエンスに同時にマッチする可能性があるため、ブラウザはどのバリエーションを適用するかを決定するための順序を必要とします。サイドバーの オーディエンスの優先順位 でその順序を設定できます。
-
「オーディエンスの優先順位」の横にある「編集」をクリックします。
-
観客を好きな順番にドラッグしてください。最初の聴衆が優先されます。
-
をクリックして保存します。
このリストには、インスタンス内のすべてのオーディエンスが表示され、その順序は選択されたエクスペリエンスのすべての要素に適用されます。視聴者が存在しない場合、サイドバーにはリストの代わりに「視聴者がいません」と表示されます。
バリエーションの適用方法
訪問者が受ける体験に関するバリエーションのみが考慮されます。
訪問者は、要素の複数のオーディエンスに同時にマッチングさせることができます。その場合、視聴者優先順位で1位にランク付けされた視聴者が優先され、それに付随するバリエーションのみが適用されます。残りはスキップされるため、訪問者は特定の要素のバリエーションを1つだけ目にすることになる。
訪問者が目にするものに影響を与える要因は他にも2つあります。
-
HTMLは、対象要素の周囲や横に追加されるのではなく、対象要素の内部HTMLを置き換えます。
-
レンダリングされたページにターゲット要素が存在しないバリエーションは、JavaScriptを含め、何も実行しません。
バリエーションの翻訳
バリエーションのHTMLおよびJavaScriptの値はローカライズ可能です。フォームヘッダーの言語選択ツールを使用して別の言語に切り替え、その言語に対応するフィールドを編集してください。訪問者はページの言語に応じた値を取得し、その言語のフィールドが空の場合はデフォルトの言語値にフォールバックします。
翻訳中は、「名前」、「ページ要素」、「対象読者」、「ページ要素を非表示」、「バリエーションを無効にする」の各フィールドはローカライズできません。これらの設定は言語間で共有されます。デフォルトの言語値は、参考として各コードフィールドの下に表示されます。