フィードバックを送信
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. [保存]をクリックします。

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

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

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

ヒント

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

インスタンス全体でクライアント拡張機能を使用する

Liferay DXP 2025.Q4+およびPortal 2026.Q1+で一般利用可能

JavaScript クライアント拡張機能の スコープ プロパティを 会社 に設定して、管理ページを含むインスタンスのすべてのページに適用できます。 たとえば、 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