フィードバックを送信
Customizing Liferay's Look and Feel
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

JavaScriptクライアント拡張の使用

Liferay DXP 7.4+

JavaScript（JS）クライアント拡張を使い、Liferayのコードへの依存やテーマの開発を気にすることなく、Liferayの任意のページ上で独自のJavaScriptを実行できます。 ここでは、JavaScript クライアント拡張機能 ( サンプルワークスペース から) から始めます。

前提条件

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

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

    注

    サポートされているJDK、データベース、環境については、互換性マトリックスを確認してください。 推奨される 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

必要なツールやJSクライアント拡張は、サンプルワークスペースに含まれています。

クライアント拡張の検討

JSクライアント拡張機能は、ワークスペースの client-extensions/liferay-sample-global-js-2/ フォルダにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-global-js-2:
   name: Liferay Sample Global JS 2
   scriptElementAttributes:
      async: true
      data-attribute: "value"
      data-senna-track: "permanent"
      fetchpriority: "low"
   type: globalJS
   url: global.*.js

クライアント拡張機能の ID は liferay-sample-global-js-2 で、スクリプト要素の属性、 タイプ、追加する JavaScript ファイルなど、JS クライアント拡張機能のキー構成が含まれています。 プロパティの詳細については、 JavaScript YAML 設定リファレンス を参照してください。

オプションの scriptElementAttributes 設定は、Liferay DXP 2024.Q2/Portal GA120 で追加されました。 これを使用すると、生成された スクリプト HTML 要素にブール属性と文字列属性を追加できます。 trueに設定されたブール値は、HTMLでは値なしで表示され、falseに設定された場合は表示されません。 例えば、YAML で foo-boolean: true を設定すると、次の HTML が生成されます: <script foo-boolean foo-string="bar" ...>...</script>。

YAML ファイルには、 assemble ブロックも含まれています。

assemble:
   - from: build/static
   into: static

これは、 build/static フォルダー内のすべてのものが、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含まれる必要があることを指定します。 JSクライアント拡張のJavaScriptコードは、Liferayの静的リソースとして使用されます。

assets/global.jsファイルには、下記のコードが含まれています：

window.alert('Sample Global JS 2 deployed.');

ページを開くと、メッセージとともにアラートボックスが表示されます。 このファイルに追加して、追加のJavaScriptを実行します。

Liferayにクライアント拡張をデプロイする

新しいLiferay インスタンスを起動し、以下を実行します。

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

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

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

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

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

注

クライアント拡張機能を Liferay SaaS にデプロイするには、Liferay Cloud コマンドラインツール を使用して lcp deploy を実行します。

ヒント

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

Liferayインスタンスのコンソールでデプロイメントを確認します。

STARTED sample-global-js-2_1.0.0

クライアント拡張が正常にデプロイされたら、それを使用するようにLiferayを設定します。

ページでクライアント拡張を使用する

デプロイされたクライアント拡張を使用するために、Liferayのページを設定します。

  1. インスタンス内のページで、上部にある 編集 アイコン Edit icon をクリックします。

  2. サイドバーで、ページデザイン オプション メニュー (Page Design Options icon) に移動し、メニュー上部の 設定 アイコン (Configuration icon) をクリックします。

    ［Page Design Options］メニューの歯車アイコンをクリックすると、このクライアント拡張の設定にアクセスできます。

  3. ［詳細設定］タブをクリックし、ページ下部の JavaScript セクションを展開すると、 ［JavaScript Client Extensions］ 設定セクションがあります。

  4. ［Add JavaScript Client Extensions］をクリックして、新しいクライアント拡張をページの先頭またはページ下に追加します。

    JavaScriptクライアント拡張を追加します。 ページ先頭への追加もしくはページ下部への追加に応じて、リストに表示されます。

    注

    クライアント拡張機能でブール値の async または defer 属性を設定した場合、クライアント拡張機能をページに追加する際にこの動作を構成することはできません (上記のスクリーンショットを参照)。 クライアント拡張機能で async と defer の両方を設定した場合、 async 属性が適用され、 defer 属性は無視されます。

  5. ［Save（保存）］をクリックします。

  6. オプションで、編集モード以外のページでJavaScriptが実行されるように、ページを公開することもできます。

これで、クライアント拡張が設定され、有効になりました。 設定したページでは、クライアント拡張のメッセージを含むアラートウィンドウがポップアップ表示されます。

この例のクライアント拡張は、ページが読み込まれたときに警告メッセージのポップアップを作成します。

ヒント

警告ウィンドウが最初に表示されない場合は、ページを強制的に更新してブラウザのキャッシュをクリアしてください（ほとんどのブラウザではCTRL + SHIFT + R）。 クライアント拡張を変更して再デプロイした場合、変更を確認するには、ページから削除し、再追加する必要があるかもしれません。

インスタンス全体でクライアント拡張機能を使用してください

Liferay DXP 2025.Q4以降およびPortal 2026.Q1以降で一般提供開始

JavaScript クライアント拡張機能の スコープ プロパティを company に設定すると、管理ページを含むインスタンスのすべてのページに適用されます。 例えば、 Liferay Sample Global JS 3 プロジェクトについては、 client-extension.yaml ファイルを参照してください。

assemble:
   - from: build/static
   into: static
liferay-sample-global-js-3:
   name: Liferay Sample Global JS 3
   scope: company
   scriptLocation: head
   type: globalJS
   url: global.*.js

デプロイが完了すると、インスタンス内の任意のページにアクセスし、ブラウザのコンソールでページヘッダーで実行されたJavaScriptを確認できます。

console.log('Sample Global JS 3 deployed.');
注
  • JavaScriptのスコープを設定できるのは、ワークスペースベースのクライアント拡張機能のみです。 UI を介して JavaScript クライアント拡張機能を作成する場合、スコープやスクリプトの場所を設定することはできません。クライアント拡張機能は常にページスコープであり、 サイトページ でのみ使用できます。
  • 企業スコープの JavaScript クライアント拡張機能は、当初 リリース機能フラグ の背後でリリースされました。 DXP 2025.Q4 または Portal 2026.Q1 より前の Liferay バージョンでこの機能が利用可能かどうかを確認するには、 インスタンス設定 → 機能フラグ に移動し、フラグ インスタンス グローバル JavaScript クライアント拡張機能 (LPD-30371) を検索します。

さいごに

LiferayでJSクライアント拡張を使用できるようになりました。 次は他のクライアント拡張タイプのデプロイメントを試してみましょう。

JavaScriptクライアント拡張機能のYAML設定リファレンス

JavaScript YAML Configuration Reference