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

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

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

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

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

3. クライアント拡張タイプを選択します。

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

フロントエンドクライアント拡張機能の client-extension.yaml ファイルで、次のプロパティを設定します。

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

UI から構成されたフロントエンド クライアント拡張機能のエクスポート/インポート

Liferay DXP 2024.Q1+/ポータル 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 を置き換えます。
Clay CSS URL (テーマCSS)	clay CSS ファイルがホストされている URL。 この CSS は clay.css を置き換えます。
URL (テーマのファビコン)	ファビコンがホストされている URL。 この favicon はテーマの favicon を置き換えます。 必須.

ヒント

ドキュメントとメディアは、クライアント拡張機能に使用されるデザイン リソースをホストするのに推奨されません。 権限はわかりにくくなる可能性があり、最終的にはユーザーがこれらのリソースを操作したり削除したりする可能性があります。 また、Documents and Media は CSS リソースに正しい MIME タイプを提供できません。

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

関連トピック

• Liferayのルックアンドフィールのカスタマイズ
• 外部アプリケーションの統合