フラグメントエディターの使用
Liferay DXPには、コンテンツページフラグメントを開発するためのビルトイン エディタ 。 エディターにアクセスするには、 Site Menu( 
) を開き、 Design → Fragments に移動します。 ここから、フラグメントとフラグメントセットの表示、管理、作成ができます。
Liferay DXP 7.4+では、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれています。
フラグメントセットの作成
新しいフラグメントを作成する前に、それらを含む新しいフラグメントセットを作成する必要があります：
-
サイトメニュー(
)を開き、 デザイン → フラグメント に移動します。Liferay DXP 7.1と7.2では、 プロダクトメニュー を開き、 サイト → サイトビルダー → ページ フラグメント に進んでください。
-
フラグメントセットの横にある 追加(
)をクリックします。
-
新しいセットの 名前 と 説明 を入力します。
例えば、機能別やチームや部署別にフラグメントをグループ化したセットを作成することができます。
-
［Save］をクリックします。
一度保存すれば、フラグメントをセットに追加できる。
新しいフラグメントの作成
Reactフラグメントを作成するには、 Fragments Toolkit を使用します。
以下の手順でフラグメントを作成する：
-
目的のフラグメントセットに移動し、 Add（！ Addボタン ）をクリックして、新しいフラグメントを作成します。
noteLiferay DXP 7.3以前では、フラグメントはセクションかコンポーネントのどちらかでした。 Liferay DXP 7.3+では、すべてのページフラグメントはコンポーネントです。
-
フラグメントのタイプ、Basic または Form のいずれかを選択し、 Next をクリックします。
-
フラグメントの名前を入力し、 Add をクリックする。
-
Codeタブで、HTML、CSS、JavaScriptフィールドを使用して、フラグメントのリソースを追加します。 ここでは、異なるデバイスコンテキストでのフラグメントの外観のライブプレビューを見ることもできます。
ここでは、HTML編集のショートカットを紹介します。
-
開角括弧(
<)を入力すると、標準的なHTMLタグとLiferayのフラグメント固有のタグにアクセスできます。 -
要素属性を
dataで始めると、Liferay の 編集可能なフラグメント属性 にアクセスできます。
以下の例では、編集可能なテキストを持つカード・コンポーネントを追加しています：
<div class="marketing-card-fragment-01"> <div class="card"> <data-lfr-editable id="01-card-image" type="image"> <img src="https://cdn.dribbble.com/users/1408464/screenshots/9323535/media/a5b9a76256562e878ecc6dc5cd0fadf0.png" class="card-img-top" alt="2020 - Try New Things"> </data-lfr-editable> <div class="card-body"> <data-lfr-editable id="02-card-title" type="rich-text"> <h5 class="card-title">Editable Card title</h5> </data-lfr-editable> <data-lfr-editable id="03-card-text" type="rich-text"> <p class="card-text">Here is some editable text.</p> </data-lfr-editable> <data-lfr-editable id="04-card-link" type="link"> [Editable link](#" class="btn btn-primary) </data-lfr-editable> </div> </div> </div>.marketing-card-fragment-01 .card img { max-width: 100%; }
-
-
設定タブで、
JSONフィールドを使い、 設定オプション をページフラグメントに追加する。
tip（JSONの
fieldsオブジェクトと一緒に）どのフィールドセットにもconfigurationRole値を追加して、関連するフィールドがどのタブに表示されるかを指定することができます。 値をstylesに設定すると［スタイル］タブにフィールドが表示され、advancedに設定すると［詳細設定］タブに表示されます（Liferay DXP バージョン U23+ または GA23+ でのみ使用可能）。configurationRoleが設定されていない場合、デフォルトで［一般］タブに表示されます。 -
Publish をクリックすると、フラグメントが保存され、 コンテンツページ で使用できるようになります。
フラグメントの開発中、フラグメントが公開されるまで、変更は自動的に下書きとして保存されます。 一度セットに追加されたフラグメントは、フラグメントエディターでいつでもコピー、エクスポート、編集、削除ができます。 ページフラグメントで利用可能なアクションの詳細については、 フラグメントの管理 を参照してください。
Liferay DXP 7.2 SP1+とLiferay Portal 7.2 GA2+以降では、Globalサイトにページフラグメントを作成して、すべてのサイトで利用できるようにすることができます。 これらのバージョンの初期リリースでこの機能を公開するには、 com.liferay.fragment.web.internal.configuration.FragmentGlobalPanelAppConfiguration.config という名前の .config ファイルを作成し、 enabled=B "true" というプロパティを追加する必要があります。 そして、Liferay DXPインスタンスの osgi/configs フォルダにコピーしてください。 グローバル・ページ・フラグメントは子サイトに継承され、グローバル・サイトからしか編集できません。 グローバルページフラグメントがグローバルサイトから参照するリソースはすべて、ページフラグメントを利用するサイトにコピーされます。