ページフラグメントの開発

ページ フラグメントは、 コンテンツ ページの構成要素です。 これらは、Web ページの 3 つのコンポーネント (CSS、HTML、JavaScript) で構成されています。 ページを作成するには、複数のフラグメントを組み合わせ、それらを組み合わせてページのデザインとその機能を作成します。 フラグメントは、より大きなページ要素 (カードや段落要素など) を構成することも、単独でスタンドアロン (バナーなど) にすることもできます。

フラグメントセット

セットはフラグメントを整理し、関連するフラグメントのグループを管理および共有できるようにします。 ユーザーは、ページに追加するフラグメントを選択するときにセットを移動します。 したがって、ページに簡単に組み合わせることができるように、フラグメントをセットで作成します。

管理ページに例が表示され、すぐに使用できるフラグメント (およびそのコード) がすべて表示されます。 ページ フラグメントのコードは、管理インターフェースを通じて更新できます。

ページ フラグメントのコードを静的 (ロックされていて、インターフェイスから編集できない) にしたい場合は、 寄与フラグメント セットを作成できます。

ツール

ブラウザベースのツールを使用すると、システム上で直接フラグメントを作成することができ、CLI ベースのツールは独自のセットと統合して生産性を維持します。

• 組み込みフラグメント エディタ: 組み込みエディタを使用して、Liferay Portal でページ フラグメントを開発します。

• フラグメント ツールキット: フラグメント CLI を使用して、デスクトップからページ フラグメントとフラグメント セットを生成、インポート、エクスポートします。

機能

フラグメントは、以下のリソースを使用して拡張でき、プレーンな HTML、CSS、JavaScript よりもはるかに強力なものになります。

• 編集可能な要素: テキスト、画像、リンク、および「リッチ」テキスト要素を編集可能にし、ユーザーがコンテンツをカスタムテキストや画像に置き換えることができるようにします。 これはフラグメントを再利用可能にする重要な機能です。 ウィジェットを埋め込むこともできます。

  注

  ウィジェットをフラグメントに埋め込むことは、Liferay DXP 2024.Q4/Portal GA129 の時点で 非推奨 となっており、将来のリリースで削除される予定です。 代わりに、ウィジェットをコンテンツ ページに直接追加します。

• ドロップゾーン: <lfr-drop-zone></lfr-drop-zone> ラベルを使用してフラグメントにドロップゾーンを追加します。 追加したら、フラグメントとウィジェットを定義された領域にドラッグ アンド ドロップできます。

• 構成オプション: フラグメントのフォント色の変更などの構成オプションをアプリケーションの構成メニューに追加します。

• FreeMarker: FreeMarker は、変数、条件文などを使用して HTML を強化するテンプレート言語です。 HTML から、FreeMarker の 代替 (角括弧) 構文 を使用できます。

ベストプラクティス

フラグメント コードを書き込む際は、次のベスト プラクティスをお勧めします。

• コードをセマンティックで再利用性の高いものにしてください。
• フラグメントがページ上のフラグメント外部の他の要素に干渉しないように、フラグメントの名前空間を適切に設定します。
• 他のフラグメントに影響を与えないように、追加するすべての CSS セレクターの基礎として自動生成されたフラグメント クラスを使用します。
• JavaScript は簡単に再利用できないため、慎重に使用してください。 代わりに、外部の JavaScript ライブラリを参照してください。
• フラグメント構成テキスト値をエスケープします。