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

Liferay DXP 2023.Q1+/ポータル GA92+

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

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

サンプルワークスペースの拡張機能を使用して、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ブロックが含まれています。

assemble:
    - from: build/static
      into: static

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

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

import jquery from 'jquery';

export default jquery;

このコードは jQuery ライブラリを使用し、 デフォルトを使用してエクスポートします。 ここでエクスポートすると、定義された 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)

これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。

注

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 エディターをクリックし、アウトライン化するテキストを含む段落 (<p>) タグを既存の div に追加します。

   <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のルックアンドフィールのカスタマイズ
• クライアント拡張との連携