JavaScriptインポートマップエントリクライアント拡張機能でリソースをバンドルする

Liferay DXP 2023.Q1+/Portal GA92+

JavaScriptインポートマップエントリクライアント拡張機能を使用すると、Liferayインスタンスでレンダリングされる任意のページでJavaScriptコードまたはリソースを利用できるようになります。複数の場所からJavaScriptコードやリソースを含める必要がある場合は、それらをLiferayワークスペース内の1つのクライアント拡張機能にまとめることができます。

Liferay の インポート マップ がインポートするすべてのものに提供する指定子を使用して、クライアント拡張機能でコードを定義し、エクスポートします。例えば、 jQuery のようなライブラリをクライアント拡張機能にバンドルし、それをフラグメントのコードにインポートして使用することができます。

サンプルワークスペース から 1 つを使用して、JavaScript インポートマップエントリクライアント拡張機能の作成を開始します。

前提条件

クライアント拡張機能の開発を開始するには、

1. サポートされているバージョンの Java をインストールしてください。

   注記

   推奨される JVM 設定については、 JVM 構成 を参照してください。

2. サンプルワークスペースをダウンロードして解凍してください。

   curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip
   

   unzip com.liferay.sample.workspace-latest.zip
   

これで、複数のJavaScriptリソースをバンドルしたクライアント拡張機能をデプロイするためのツールが揃いました。

JavaScriptエクスポートを調べて追加する

JavaScript インポート マップ エントリ クライアント拡張機能は、サンプル ワークスペースの client-extensions/liferay-sample-js-import-maps-entry/ フォルダーにあります。これは client-extension.yaml ファイルで定義されています。

liferay-sample-js-import-maps-entry:
    bareSpecifier: jquery
    name: Liferay Sample JS Import Maps Entry
    type: jsImportMapsEntry
    url: jquery.*.js

また、 アセンブリ ブロックも含まれています。

assemble:
    - from: build/static
      into: static

これは、 build/static/ フォルダーで作成されたすべてのファイルが、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含まれる必要があることを指定します。 liferay-sample-js-import-maps-entry の例では、 webpack (付属の webpack.config.js ファイルで設定) を使用して、エクスポートされたエントリとその出力場所を定義します。これはjQueryをインポートします。jQueryはJavaScriptを介してHTMLを操作するための様々なユーティリティを提供します。

assets/ フォルダ内の index.js ファイルには、次の JavaScript コードが含まれています。

import jquery from 'jquery';

export default jquery;

このコードは jQuery ライブラリを使用し、 default を使用してエクスポートします。ここでエクスポートすると、定義された bareSpecifier を client-extension.yaml にインポートしたときに Liferay で使用できるようになります。

同じ指定子を使用してアクセスできる別のエクスポートを追加することもできます。値を2倍にする新しい関数をエクスポートするには、以下のJavaScriptコードを追加してください。

export function doubleValue(value) {
    return value * 2;
}

次に、クライアント拡張機能をデプロイします。

インポートマップエントリをデプロイする

Liferay の新しいインスタンスを起動するには、次のコマンドを実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080 で Liferay にサインインしてください。メールアドレス [e-mail] とパスワード test を使用してください。プロンプトが表示されたら、パスワードを learn に変更してください。

Liferayが起動したら、サンプルワークスペース内のクライアント拡張機能のフォルダから以下のコマンドを実行してください。

../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)

これによりクライアント拡張機能がビルドされ、zipファイルがLiferayの deploy/ フォルダにデプロイされます。

注記

クライアント拡張機能をデプロイするために使用するコマンドは、Docker、Liferay PaaS、またはLiferay SaaS以外の自己ホスト型インスタンスを使用する場合に変更されます。詳細については、 Liferayインスタンスへのデプロイ を参照してください。

ヒント

ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。

Liferayインスタンスのコンソールでデプロイメントを確認してください。

STARTED liferaysamplejsimportmapsentry_7.4.13 [1459]

JavaScriptインポートマップに新しいエントリをインポートしたので、それを使用する新しいフラグメントを作成します。

フラグメントを追加してコードをインポートする

1. 実行中の Liferay インスタンスの任意のサイトで、 デザイン → フラグメント をクリックします。

2. をクリックして () を追加し、新しいフラグメントセットを追加します。

   

3. 名前として FS と入力し、 保存 をクリックします。

4. 新しい をクリックして、新しいフラグメントを追加します。

5. 基本フラグメント を選択した状態で、 次へ をクリックします。

6. フラグメントの追加モーダルで、名前として アウトラインテキスト と入力し、 追加 をクリックします。

7. フラグメントデザイン画面で、 HTML エディタをクリックし、アウトライン化するテキストを含む既存の div に段落 (<p>) タグを追加します。

   <div class="fragment_1">
       <p>
           Outlined text!
       </p>
   </div>
   

   テキストは右下隅のプレビューパネルに表示されます。

   

8. JavaScript エディタをクリックして、クライアント拡張機能からインポートするためのこのコードを追加します。

   const jq = await import('jquery'); // dynamic import
   
   var outline = jq.doubleValue(2) + "px solid blue";
   
   jq.default("div.fragment_1").css("border", outline);
   

   このコードは、クライアント拡張機能からコードを jq 定数にインポートします。次に、エクスポートされた doubleValue 関数を使用してアウトライン文字列のピクセル数を 2 倍にし、最後に jQuery の css 関数 を使用して、その文字列を デフォルト エクスポートしてアウトラインを追加します。

   テキストがプレビューパネルに、幅4ピクセルの青い枠線付きで表示されるようになりました。

   ![フラグメントの JavaScript は、クライアント拡張機能を使用して 2 つの関数を使用し、tebundling-resources-in./using-a-javascript-map-entry-client-extension/images/03.png に青い枠線を定義して追加します。]

   ヒント

   アウトラインが正しく表示されない場合は、HTML エディタ内の div 要素のクラス名 (例: fragment_1) が JavaScript エディタにコピーしたコードと一致していることを確認してください。

これでフラグメントを公開して、任意のページで使用できるようになります。

LiferayでJavaScriptインポートマップエントリクライアント拡張機能を正常に使用できました。次に、 の他のタイプのフロントエンドクライアント拡張機能 について学びます。

関連トピック

• フロントエンドデータセットセルレンダラーYAMLリファレンス
• Liferayの外観と操作感をカスタマイズする
• クライアント拡張機能の操作