フラグメントエディターの使用

Liferay DXPには、コンテンツページフラグメントを開発するための組み込みの エディタ が含まれています。 エディターにアクセスするには、 サイト メニュー ( ) を開き、 デザイン → フラグメントに移動します。 ここから、フラグメントとフラグメント セットを表示、管理、作成できます。

注

Liferay DXP 7.4以降の場合、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれます。

フラグメントセットの作成

新しいフラグメントを作成する前に、それらを格納する新しいフラグメント セットを作成する必要があります。

1. サイト メニュー () を開き、 デザイン → フラグメントに移動します。

   Liferay DXP 7.1 および 7.2 では、 製品メニューを開き、 サイト → サイトビルダー → ページフラグメントに移動します。

2. フラグメント セットの横にある 追加 ( ) をクリックします。

   

3. 新しいセットの 名前 と 説明 を入力します。

   たとえば、機能別、チーム別、部門別にフラグメントをグループ化するセットを作成できます。

4. [保存]をクリックします。

保存したら、セットにフラグメントを追加できます。

新しいフラグメントの作成

重要

React フラグメントを作成するには、静的 JS インポートを使用してフラグメント内の React コンポーネントをインスタンス化します。 Fragments Toolkit の代替 セクションのサンプル コードとそのコメントを参照してください。

1. 目的のフラグメント セットに移動し、 追加 () をクリックして新しいフラグメントを作成します。

   注

   Liferay DXP 7.3 より前では、フラグメントはセクションまたはコンポーネントのいずれかでした。 Liferay DXP 7.3 以降では、すべてのページフラグメントはコンポーネントです。

2. フラグメント タイプとして「基本」または 「フォーム」のいずれかを選択し、「 「次へ」」をクリックします。

3. フラグメントの名前を入力し、 追加をクリックします。

4. 「コード」タブで、HTML、CSS、JavaScript フィールドを使用してフラグメントのリソースを追加します。 ここでは、さまざまなデバイス コンテキストでのフラグメントの外観をライブ プレビューで確認することもできます。

   ここでは、HTML編集のショートカットを紹介します。

   • 標準の HTML タグと Liferay のフラグメント固有のタグにアクセスするには、開き山括弧 (<) を入力します。

   • 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">
               <a href="#" class="btn btn-primary">Editable link</a>
            </data-lfr-editable>
         </div>
      </div>
   </div>
   

   .marketing-card-fragment-01 .card img {
      max-width: 100%;
   }
   

   

5. [構成] タブで、 JSON フィールドを使用して、ページ フラグメントに 構成オプション を追加します。

   

   ヒント

   任意のフィールド セットに configurationRole 値を追加して (JSON 内の fields オブジェクトと一緒に)、関連付けられているフィールドが表示されるタブを指定できます。 値を スタイル に設定すると、フィールドが [スタイル] タブに表示されます。値を 詳細 に設定すると、フィールドが [詳細] タブに表示されます (Liferay DXP バージョン U23+ または GA23+のみ)。 configurationRole が設定されていない場合は、デフォルトで [全般] タブに表示されます。

6. 公開 をクリックしてフラグメントを保存し、 コンテンツ ページで使用できるようにします。

   

フラグメントの開発中、フラグメントが公開されるまで、変更は下書きとして自動的に保存されます。 セットに追加したら、フラグメント エディターでいつでもフラグメントをコピー、エクスポート、編集、削除できます。 ページ フラグメントに使用可能なアクションの詳細については、 フラグメントの管理 を参照してください。

注

Liferay DXP 7.2 SP1+ および Liferay Portal 7.2 GA2+ 以降では、 グローバル サイトにページフラグメントを作成して、すべてのサイトで利用できるようにすることができます。 これらのバージョンの初期リリースでこの機能を公開するには、 com.liferay.fragment.web.internal.configuration.FragmentGlobalPanelAppConfiguration.configという名前の .config ファイルを作成し、 enabled=B "true" というプロパティを追加する必要があります。 次に、それをLiferay DXPインスタンスの osgi/configs フォルダにコピーします。 グローバル ページ フラグメントは子サイトに継承され、グローバル サイトからのみ編集できます。 グローバル ページ フラグメントがグローバル サイトから参照するリソースはすべて、ページ フラグメントを活用するサイトにコピーされます。

関連トピック

• フラグメントツールキットの使用
• フラグメントへの構成オプションの追加