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

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+/ポータル GA132+

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