ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

フラグメントドロップゾーンの定義

ドロップゾーンは、コンテンツページを作成する上で不可欠な要素です。それらを使用して、ユーザーが他のフラグメントとウィジェットをドラッグアンドドロップできるフラグメント内の領域を定義することにより、独自のページレイアウトと動的表示を作成できます。

警告

ドロップゾーンを過剰に使用すると（例えば100個以上）、ページエディタのパフォーマンスに問題が発生する可能性があります。影響は、環境やページの複雑さによって異なる場合があります。パフォーマンスを向上させるために、ドロップゾーンの代わりにグリッドとコンテナフラグメントを使用することを検討してください。

ドロップゾーンを定義するには、

サイト管理 → デザイン → フラグメント へ移動します。
［フラグメントセット］で、カスタマイズしたいフラグメントのあるセットを選択します。
編集したいフラグメントの アクション () をクリックし、編集を選択して、フラグメントエディターを開きます。
HTMLコード領域に、 <lfr-drop-zone></lfr-drop-zone> ラベルを追加して、フラグメント内のドロップゾーンを定義します。

重要

フラグメント内の編集可能な要素にドロップゾーンを追加することはできません。

次のコードは、このラベルを使用して、タブフラグメント内にドロップゾーンを定義する方法を示しています。

<div class="tab-panel">
   [#list 0..configuration.numberOfTabs-1 as i]
   <div aria-labelledby="tab${i+1}-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel${i+1}-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
      <lfr-drop-zone data-lfr-drop-zone-id="${i+1}" data-lfr-priority="${i+1}"></lfr-drop-zone>
   </div>
   [/#list]
</div>

コンテンツページエディターのサイドバーに表示された結果は以下のとおりです。

タブフラグメントには、コンテンツページエディタ内の4つの異なるドロップゾーンが表示されます。

定義したら、フラグメントまたはウィジェットをドロップゾーンにドラッグアンドドロップできます。

フラグメントドロップゾーンID

フラグメントを指定されたドロップゾーンに保持するには、 data-lfr-drop-zone-id 属性を使用します。ドロップゾーンIDを使用することで、ゾーンの順序が変更されたり、新しいゾーンが挿入されたりした場合でも、フラグメントが元の位置に保持されます。

一意のIDを持つドロップゾーンを削除して伝播すると、そのゾーンとそのコンテンツは削除されます。同じIDを持つゾーンを追加すると、未公開の下書きの内容は復元されますが、公開済みの下書きでは新しいゾーンとして扱われます。

ドロップゾーンIDは任意です。 IDを持たないゾーンは、指定された順序で機能します。既存のフラグメントにIDを追加して伝播させると、最初の伝播からIDが適用されます。

重要

data-lfr-drop-zone-id は、ページを編集している間、コンテンツを正しいゾーンにマッピングしますが、Liferay のレンダリングエンジンは、ページがレンダリングされるとき (VIEW モード) に、保存されたコンテンツを ID ではなく DOM 内の順序でドロップゾーンにマッピングします。

FreeMarkerの条件付きロジック（例： [#if]）を使用してドロップゾーンを追加または削除すると、レンダリング中にゾーンの総数が変更されます。エンジンはコンテンツをIDではなく位置に基づいてゾーンに割り当てているため、保存されたコンテンツがずれて、間違ったドロップゾーンに表示されることがあります。

ドロップゾーンの条件付き可視性が必要な場合は、以下のいずれかのオプションを選択してください。

CSS でゾーンを非表示にする: FreeMarker を使用して DOM からドロップゾーンを省略する代わりに、条件付きで d-none のような非表示ユーティリティクラスを追加します。これによりDOM構造が静的に保たれるため、コンテンツの順序が変わることはありません。
条件付きラッパーを分離します: フラグメントにドロップゾーンが 1 つだけ含まれている場合にのみ、ドロップゾーンを条件付きロジックでラップします。ゾーンが1つしかない場合、コンテンツが移動する可能性のある兄弟ゾーンが存在しないため、ゾーンの追加や削除は安全です。
フラグメントをコンポーネント化します: 複雑なフラグメントを複数の小さなフラグメントに分割します。各フラグメントはドロップゾーンを無条件に含むため、単一のフラグメントのゾーンカウントは変化しません。