フロントエンドのクライアント拡張機能
利用可能 Liferay 7.4 U45+/GA45+
フロントエンドクライアントエクステンションは、ページを拡張し、新しい機能を統合します。 CSS、JavaScript、テーマCSS、テーマJS、テーマファビコン、カスタム要素、IFrameがあります。
これらのエクステンションは Liferay Workspaceから作成し、デプロイすることができます。
カスタム要素 および IFrame クライアント拡張の作成については、「 カスタム要素および IFrame クライアント拡張を理解する」 を参照してください。
レイアウトセット(＝ページセット）、マスターテンプレート、ページテンプレート、個別コンテンツページに、JavaScript、CSS、Theme CSSクライアント拡張を追加することができます。 拡張機能を追加するレベルによって、どのエンティティが拡張機能のコードを継承するかが決まります。 例えば、マスターテンプレートに拡張機能を追加した場合、マスターテンプレートを使用するすべてのページテンプレートとコンテンツページは、その拡張機能を継承する。
JavaScript クライアント拡張
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
JavaScriptクライアントエクステンションは、Liferayインスタンス全体にグローバルなJavaScriptライブラリとロジックを提供します。 JavaScriptクライアント拡張を導入し、それを使用するようにページを設定すると、そのページにアクセスするたびに(ページのヘッダーやフッターで）そのJavaScriptが自動的に実行されます。
client-extension.yaml ファイルに JavaScript クライアント拡張機能を指定します：
type: globalJS
JavaScriptクライアントエクステンションの使用 を参照してください。
CSS クライアント拡張
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
CSSクライアント拡張は、ページに新しいCSSスタイリングを導入します。 ページ上に配置されたCSSクライアント拡張は、テーマやスタイルブックの設定を含む、ページの既存のスタイルに追加されます。
client-extension.yaml ファイルに CSS クライアント拡張子を指定します：
type: globalCSS
Using CSS Client Extension を参照してください。
テーマJavaScriptクライアント拡張機能
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
JavaScript クライアント拡張 と同様に、サイトの テーマが提供するものに代わる JavaScript ライブラリやロジックを追加することができます。
client-extension.yaml ファイルに、Theme JavaScript クライアント拡張を指定します：
type: themeJS
テーマCSSクライアントエクステンション
{bdg-secondaryLiferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
CSSクライアント拡張 がページにスタイルを追加するのに対し、テーマCSSクライアント拡張はサイトのテーマ からも含めてページのスタイルをオーバーライドします. クライアント拡張機能は、 clay.css ファイルと main.css ファイルを使用して、サイトのテーマで通常使用される同じ名前のファイルを置き換えます。
このタイプのクライアントエクステンションは、Liferay Applicationsメニューの Client Extensions からオプションとして追加することができます。
このタイプのクライアント拡張機能を使用するには、clay.css と main.css ファイルがリモートでホストされている必要があります。
client-extension.yaml ファイルに Theme CSS クライアント拡張子を指定します：
type: themeCSS
テーマファビコンクライアント拡張機能
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
Liferayのページのファビコンをオーバーライドします。 デプロイすると、提供されたアイコンファイルはLiferayのどのページでも利用可能になります。 ページデザインオプションメニューからページのファビコンを設定する際に、別の Client Extensions タブでアクセスすることができます。
テーマ・スプライトマップ・クライアント拡張機能
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
テーマスプライトマップクライアント拡張は、サイトページのスプライトマップをオーバーライドします。 スプライトマップを .svg の画像として定義し、サイトの現在のテーマで使用されているものを置き換えます。
client-extension.yaml ファイルに、テーマ・スプライト・マップ・クライアント拡張を指定します：
type: themeSpritemap
カスタムエレメントクライアントエクステンション
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
旧名称：Custom Element Remote App
カスタム要素クライアント拡張は、Liferayのフロントエンドインフラストラクチャを使用して、外部アプリケーションをプラットフォームと統合し、ページウィジェットとしてレンダリングします。 Liferayの外からアクセスできるあらゆるドメインのアプリケーションを統合することができます。
カスタムエレメントクライアント拡張を使用するには、必要なURLと詳細を持つエントリーを会社レベルで作成し、Liferayに登録します。 そして、Liferayは各エントリーにユニークなウィジェットを生成し、アプリケーションを カスタムHTML要素 としてレンダリングします。
client-extension.yaml ファイルにカスタムエレメントのクライアント拡張子を指定します：
type: customElement
詳しくは、 カスタム要素とIFrameクライアント拡張機能を理解する をご参照ください。
IFrameクライアント拡張機能
Liferay Experience Cloud、Liferay DXP 7.4+ (オンプレミス）
旧名称：IFrame Remote Apps
IFrame クライアント拡張は、 カスタム要素クライアント拡張 のように動作します。 しかし、外部アプリケーションを <iframe> HTML要素としてレンダリングし、ホストページからの操作を制限することができます。 他のフロントエンドクライアント拡張機能とは異なり、これらの は静的なリソース を提供するものではありません。
client-extension.yaml ファイルに IFrame クライアント拡張を指定します：
type: iframe
詳しくは、 カスタム要素とIFrameクライアント拡張機能を理解する をご参照ください。
フロントエンドクライアントエクステンションプロパティ
これらのプロパティは、任意のフロントエンドクライアント拡張の client-extension.yaml ファイルに設定します：
| 名前 | データ型 | デフォルト値 | 説明 |
|---|---|---|---|
baseURL |
文字列 | サイトURLから派生したもの | クライアントエクステンションの定義されたすべてのリソースが提供されるベースパスです。 |
description |
文字列 | クライアントエクステンションの説明です。 | |
name |
文字列 | クライアントエクステンションの名前(UIに表示されるもの）です。 フロントエンドクライアントエクステンションには名前が必要です。 | |
sourceCodeURL |
URL | https://www.liferay.com | クライアントエクステンションのソースリポジトリへのアドレスです。 |
typeSettings |
文字列[]の場合 | [] | Liferay の UnicodeProperties の構文で処理される文字列のリストです。 タイプ固有のクライアントエクステンションのプロパティは、クライアントエクステンションのビルド時に自動的にこの中にコピーされます。 |
Client Extension の設定 client-extension.yaml を参照してください。