Liferayのルックアンドフィールのカスタマイズ
Liferay プラットフォームで開発を始める最も簡単な方法の 1 つは、その外観と操作性を変更することです。 ブランドに合わせて、ファビコンからデザイン全体まですべてを変更できます。 ルックアンドフィールの要件を決定する際に、Liferay をカスタマイズするための最善のアプローチは、望ましい結果を達成するために必要な最小限の労力を決定することです。 最も互換性のある方法は、 クライアント拡張機能を使用することです。 これにより、Liferay のデプロイメント アプローチ (SaaS、PaaS、セルフホスト) のいずれかを使用できるため、最大限の自由が得られます。 極端な場合を除き、クライアント拡張機能を使用すれば、必要なことを実現できるはずです。
ここで紹介するカスタマイズは、最も単純なものから最も複雑なものまで多岐にわたります。
テーマのお気に入りアイコンクライアント拡張
Liferayのページのお気に入りアイコンをオーバーライドします。 デプロイすると、提供されたアイコンファイルはLiferayのどのページでも利用可能になります。 ページデザインオプションメニューからページのお気に入りアイコンを設定する際に、別の［Client Extension］タブでアクセスすることができます。
CSS クライアント拡張
CSSクライアント拡張は、ページに新しいCSSスタイリングを導入します。 ページ上にデプロイされたCSSクライアント拡張は、テーマやスタイルブックの設定を含む、ページの既存のスタイルに追加されます。
client-extension.yamlファイルにCSSクライアント拡張を指定します。
type: globalCSS
開始するには、 CSS クライアント拡張機能の使用 を参照してください。
テーマのCSSクライアント拡張
CSS クライアント拡張機能 はページにスタイルを追加しますが、テーマ CSS クライアント拡張機能は、サイトの テーマなどのページのスタイルを上書きします。 クライアント拡張機能は、 clay.css ファイルと main.css ファイルを使用して、サイトのテーマで通常使用される同じ名前のファイルを置き換えます。
このタイプのクライアント拡張機能は、Liferay アプリケーション メニューの クライアント拡張機能 からオプションとして追加できます。
このタイプのクライアント拡張機能を使用するには、 clay.css および main.css ファイルをリモートでホストする必要があります。
このクライアント拡張機能は、テーマに含まれるデフォルトの CSS を完全に置き換えるため、Liferay で使用されるすぐに使用できるウィジェットに Clay スタイル を必ず提供してください。 あるいは、特定の Liferay ウィジェットのスタイルを修正するには、コンテナ要素の [詳細設定] タブの下にある cadmin CSS クラスを含むコンテナでウィジェットをラップします。
client-extension.yamlファイルにテーマのCSSクライアント拡張を指定します。
type: themeCSS
JavaScript クライアント拡張
JavaScript クライアント拡張機能は、指定した JavaScript ファイルを任意のページに追加します。 スクリプトは DOM にアクセスでき、カスタマイズされたアクションを実行できます。
テーマのスプライトマップクライアント拡張機能
テーマのスプライトマップクライアント拡張は、サイトページのスプライトマップをオーバーライドします。 スプライトマップを.svgの画像として定義すると、サイトの現在のテーマで使用されているものを置き換えます。
client-extension.yamlファイルに、テーマのスプライトマップクライアント拡張を指定します。
type: themeSpritemap
エディター設定コントリビュータークライアント拡張機能
Liferay DXP 2024.Q1+/ポータル GA112+
Editor Config Contributor クライアント拡張機能は、 ConfigContributor.java ファイル内の既存の CKEditor 構成をオーバーライドします。
クライアント拡張機能の構成オプションは、上書きする ConfigContributor と一致する必要があります (つまり、ポートレット名、エディター名、エディター構成キー)。
client-extension.yaml ファイルで Editor Config Contributor クライアント拡張機能を指定します。
type: editorConfigContributor
フロントエンドデータセットセルレンダラークライアント拡張
Liferay DXP 2024.Q2+/ポータル GA120+
フロントエンド データ セット セル レンダラー クライアント拡張機能を使用して、 データ セット の情報の表示方法を決定できます。 レンダラー ロジックは、Liferay によって提供される単一の値を使用する関数として実装されます。
現在、フロントエンド データ セット セル レンダラー クライアント拡張機能は、 ベータ機能フラグの背後にあります。 使用を開始する前に機能フラグを有効にする必要があります。
client-extension.yaml ファイルでフロントエンド データ セット セル レンダラー クライアント拡張機能を指定します。
type: fdsCellRenderer
開始するには、 フロントエンド データ セット セル レンダラー クライアント拡張機能の使用 を参照してください。
フロントエンドデータセットフィルタークライアント拡張
Liferay DXP 2024.Q2+/ポータル GA120+
フロントエンド データ セット フィルター クライアント拡張機能 は、カスタマイズ可能なフィルター インターフェイスを作成および統合するための JavaScript 関数を定義します。 これらの拡張機能は、OData クエリに基づいてカスタマイズされたフィルタリング機能を提供することで、ユーザー エクスペリエンスを向上できます。
client-extension.yaml ファイルでフロントエンド データ セット セル レンダラー クライアント拡張機能を指定します。
type: fdsFilter
JavaScript インポートマップエントリクライアント拡張
Liferay DXP 2023.Q1+/ポータル GA92+
JavaScript インポート マップ エントリ クライアント拡張機能は、ベア指定子を使用して JavaScript コードまたはリソースをエクスポートします。これにより、Liferay のどのページでも インポート マップを介してそれらにアクセスできます。
client-extension.yaml ファイルで JavaScript インポート マップ エントリ クライアント拡張を指定します。
type: jsImportMapsEntry
JavaScript インポート マップ エントリ クライアント拡張機能は、UI 経由で追加することも、Liferay ワークスペースから デプロイして追加することもできます。
テーマ（PaaS またはセルフホストのみ）
最後に、テーマは従来 Liferay に導入された資産であるため、PaaS またはセルフホスト型プラットフォーム経由でのみ利用できます。 テーマを使用して、独自の外観と雰囲気を定義できます。
あなたのデザインに合わせて Liferay をカスタマイズする方法については、以下をお読みください。