クライアント拡張機能UIリファレンス

Liferay の ウィジェット クライアント拡張機能 (カスタム要素と iframe) は、アプリケーションを Liferay に登録し、ウィジェットとしてサイト ページに追加します。さらに、 スタイリングクライアント拡張機能を作成することで、新しいテーマをデプロイせずにページをスタイリングできます。

これらの拡張機能を追加および管理するには、

1. グローバルメニュー () を開き、 アプリケーション → クライアント拡張機能 に移動します。

2. 右側の をクリックして () を追加します。

3. クライアント拡張機能の種類を選択してください。

フロントエンドクライアント拡張機能のプロパティ

任意のフロントエンドクライアント拡張機能の client-extension.yaml ファイルで、以下のプロパティを設定してください。

名前	データ型	デフォルト値	説明
baseURL	文字列	サイトURLから取得	クライアント拡張機能で定義されているすべてのリソースが提供されるベースパス。
description	弦		クライアント拡張機能の説明。
name	弦		クライアント拡張機能の名前（UIに表示される名前）。フロントエンドクライアント拡張機能には名前が必要です。
sourceCodeURL	URL	https://www.liferay.com	クライアント拡張機能のソースリポジトリのアドレス。
typeSettings	弦[]	[]	Liferay の UnicodeProperties 構文で処理される文字列のリスト。クライアント拡張機能が構築される際に、型固有のクライアント拡張機能プロパティが自動的にここにコピーされます。

詳細については、 client-extension.yamlの「クライアント拡張機能の設定」を参照してください。

UIから設定したフロントエンドクライアント拡張機能のエクスポート/インポート

Liferay DXP 2024.Q1+/Portal GA112+

UI から設定したフロントエンド クライアント拡張機能をエクスポート/インポートする際に、クライアント拡張機能がページで使用されたときに作成された外部参照コードと参照を保持することができます。

注記

このエクスポートおよびインポート方法は、UIから設定されたクライアント拡張機能でのみ利用可能です。

フロントエンドクライアント拡張機能をエクスポートするには、

1. グローバルメニュー () を開き、 アプリケーション → クライアント拡張機能 に移動します。

2. エクスポートしたいクライアント拡張機能の横にある アクション () をクリックし、 JSON としてエクスポート を選択します。

クライアント拡張機能はJSON形式でエクスポートされ、自動的にお使いのコンピューターにダウンロードされます。

フロントエンドクライアント拡張機能をインポートするには、

1. クライアント拡張機能アプリケーションで、グローバルメニューの横にある オプション () をクリックし、 インポート を選択します。

2. クライアント拡張機能を含む JSON ファイルを選択し、 インポート をクリックします。

クライアント拡張機能がインポートされ、クライアント拡張機能リストに表示されます。

ウィジェットクライアント拡張機能

カスタム要素 と iframe クライアント拡張機能は、Liferayのフロントエンドインフラストラクチャを使用してJavaScriptアプリケーションを登録し、ページウィジェットとしてレンダリングします。

ウィジェット拡張機能を作成または編集する際、選択したクライアント拡張機能の種類に応じて、以下のフィールドが利用可能になります。

項目	説明
名前	クライアント拡張機能のエントリとそのウィジェットに使用される表示名。必須。
説明	クライアント拡張機能のエントリの説明。
ソースコードのURL	便宜上、外部拡張機能のソースコードへのURLを記載します。
URL (IFrame)	iframe内に表示するURLを指定してください。エントリのウィジェットは、クライアント拡張機能の URL を指す <iframe> 要素内にアプリケーションをレンダリングします。

HTML要素名（カスタム要素）| .js ファイルで宣言されているカスタム要素の名前。カスタム要素を作成する .js ファイルは、それを名前に関連付ける必要があります。この名前は、HTML要素名の値と一致している必要があります。必須。 ES モジュールを使用する (カスタム要素) | ブラウザがアプリケーションの JavaScript 挿入を ES モジュール として認識するかどうかを判断します。有効にすると、Liferay はクライアント拡張機能を構築する際に <script src="js url" type="module"> を使用するため、拡張機能は ES6 ブラウザ モジュールとして扱われます。 | JavaScript URL (カスタム要素) | 拡張機能の .js ファイルそれぞれに個別の URL を入力します。をクリックして （）を追加し、URLフィールドをさらに追加します。必須。 | CSS URL (カスタム要素) | 拡張機能の .css ファイルそれぞれに個別の URL を入力します。をクリックして （）を追加し、さらにCSS URLフィールドを追加します。 | インスタンス化可能 | クライアント拡張機能のウィジェットがインスタンス化可能かどうかを判定します。有効にすると、同じページに複数のウィジェットを追加できます。 | ポートレットまたはウィジェットのカテゴリ名 | ウィジェットメニューにウィジェットのカテゴリを入力します。デフォルト値は クライアント拡張機能 です。 | フレンドリー URL マッピング | ウィジェットのフレンドリー URL マッピングを定義すると、よりユーザーが読みやすい URL を使用してウィジェットを参照できます。 | プロパティ | クライアント拡張機能のすべてのインスタンスに含まれるデフォルトのプロパティを定義します。これらのプロパティは、追加のURL属性としてアプリケーションに渡されるため、プログラムからアクセスできます。必要に応じて、個々のウィジェットインスタンスを設定して、これらのエントリプロパティを上書きすることができます。 |

クライアントエクステンションのスタイリング

CSS、 JavaScript、 テーマ CSS、および テーマ ファビコン クライアント拡張機能により、Liferay でのデザイン実装エクスペリエンスがスムーズでスケーラブルかつ効率的になります。

これらのクライアント拡張機能を使用すると、テーマの編集や再デプロイを行うことなく、サイトのデフォルトの外観、操作性、動作を拡張できます。代わりに、ページ構築に外部のデザインソースを使用することで、基となるテーマを変更することなく、スタイル設定やJavaScriptクライアント拡張機能をページに直接、拡張性の高い方法で追加できます。

スタイル拡張機能を作成または編集する際、選択したクライアント拡張機能の種類に応じて、以下のフィールドが利用可能になります。

項目	説明
名前	クライアント拡張機能のエントリに使用される表示名。必須。
説明	クライアント拡張機能のエントリの説明。
ソースコードのURL	便宜上、外部拡張機能のソースコードへのURLを記載します。
CSS URL (CSS)	CSSアプリケーションがホストされている場所のURL。このCSSはtheme.cssに追加されます。必須。
JavaScript URL (JS)	JavaScriptアプリケーションがホストされている場所のURL。このJavaScriptはmain.jsに追加されます。必須。
メインCSS URL (テーマCSS)	メインのCSSファイルがホストされている場所のURL。このCSSはmain.cssを置き換えます。
クレイCSS URL (テーマCSS)	クレイCSSファイルがホストされている場所のURL。このCSSはclay.cssを置き換えます。
URL (テーマファビコン)	ファビコンがホストされている場所のURL。このファビコンは、テーマに付属しているファビコンを置き換えます。必須。

ヒント

クライアント拡張機能で使用するデザインリソースを「ドキュメントとメディア」に保存することは推奨されません。権限設定は複雑になりがちで、ユーザーがこれらのリソースを操作したり削除したりする可能性もあります。また、ドキュメントとメディアでは、CSSリソースの正しいMIMEタイプを提供できません。

クライアント拡張機能が作成されたら、それらを適用することで、ページが拡張機能に含まれるスタイルを読み取れるようになります。ページでクライアント拡張機能を使用する方法の詳細については、 Liferay の外観と操作性のカスタマイズを参照し、必要なクライアント拡張機能の種類を選択して、ページに適用または上書きする手順に従ってください。

関連トピック

• Liferayの外観と操作感をカスタマイズする
• 外部アプリケーションの統合