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

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

Liferay DXP 7.4+

CSSクライアント拡張は、ページに新しいCSSスタイリングを導入します。ページ上にデプロイされたCSSクライアント拡張は、テーマやスタイルブックの設定を含む、ページの既存のスタイルに追加されます。クライアント拡張機能から始めます（サンプルワークスペースから）。

前提条件

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

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

注

サポートされているJDK、データベース、環境については、互換性マトリックスを確認してください。推奨される JVM 設定については、 JVM 構成を参照してください。

サンプルワークスペースをダウンロードし、解凍します。

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

これで、最初のCSSクライアント拡張をデプロイするためのツールがそろいました。

クライアント拡張の検討と修正

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

liferay-sample-global-css:
    name: Liferay Sample Global CSS
    type: globalCSS
    url: global.css

クライアント拡張機能の ID は liferay-sample-global-css で、CSS クライアント拡張機能のキー構成が含まれています。これには、 タイプ と追加する CSS ファイルが含まれます。利用可能なプロパティの詳細については、 CSS YAML 設定リファレンスを参照してください。

また、assembleブロックが含まれています。

assemble:
    - from: assets
      into: static

これは、 assets/ フォルダ内のすべてを、ビルドされたクライアント拡張.zip ファイルに静的リソースとして含めることを指定します。 CSSクライアント拡張子のCSSファイルは、Liferayの静的リソースとして使用されます。

assets/global.css ファイルにこのCSSが含まれています。

.logo::after {
   color: #0054f0;
   content: 'Liferay Sample Global CSS';
   margin-left: 2rem;
}

これは、クライアント拡張機能が有効になっている場合に、ホームページに表示されるLiferayロゴの色を変更します。

ボタンの背景色を変更するCSSを追加します。 global.cssファイルを開き、.btn-primaryクラスの宣言を追加し、 background-colorを指定します。

.btn-primary {
    background-color: purple;
}

ここで、クライアント拡張をデプロイします。

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-css_1.0.0

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

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

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

ボタンが少なくとも 1 つあるページで、上部にある編集 ( ) をクリックします。
サイドバーで、[ページデザインオプション] メニュー ( ) に移動し、メニュー上部の設定アイコン () をクリックします。
ページ下部の CSS クライアント拡張機能セクションで、 CSS クライアント拡張機能を追加 をクリックします。
ポップアップモーダルからCSSクライアント拡張を選択し、 ［追加］をクリックします。
をクリックして保存します。

これで、クライアント拡張の設定は完了です。ページエディタで、ボタンの背景色が、CSSで指定した色になりました。編集モード以外でページにCSSが適用されるのを確認するには、ページを公開する必要があります。

クライアント拡張のglobal.cssファイルで背景色を変更すると、ページ上のすべてのボタンが変更されました。

ヒント

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

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

Liferay DXP 2025.Q1+/Portal GA132+

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

assemble:
   - include: static/*.css
liferay-sample-global-css-1:
   name: Liferay Sample Global CSS 1
   scope: company
   type: globalCSS
   url: global.*.css

企業スコープのCSSクライアント拡張機能は、インスタンスがデプロイされるとすぐに、そのインスタンスのすべてのページに適用されます。 Liferay UIで企業スコープのCSSクライアント拡張機能を有効にする必要はありません。

このCSSは、インスタンス内のすべてのページに適用されます。

注

CSSクライアント拡張機能のスコープを設定できるのは、ワークスペースベースのクライアント拡張機能のみです。 UI を介してクライアント拡張機能を作成する場合、スコープを設定することはできません。クライアント拡張機能は常にページスコープであり、サイトページでのみ使用できます。

今後の流れ

LiferayでCSSクライアント拡張を使用することに成功しました。次は他のクライアント拡張タイプのデプロイメントを試してみましょう。

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

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

CSS YAML Configuration Reference