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

テーマスプライトマップクライアント拡張機能の使用

Liferay DXP 2023.Q4+/ポータル GA100+

テーマスプライトマップクライアント拡張機能を使用すると、ページ上のアイコンに使用されるデフォルトの Clay スプライトマップをオーバーライドできます。クライアント拡張機能をビルドしてデプロイするには、サンプルワークスペースから開始します。

注

SVG スプライトマップは、それぞれ一意の ID を持つ複数のアイコンがグループ化された画像です。 SVG を読み込み、個々のアイコンを ID で参照できます。これにより、スプライトマップを 1 回ダウンロードしてキャッシュするだけですべてのサイトアイコンを表示できるため、パフォーマンスがわずかに向上します。

前提条件

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

サポートされているバージョンの 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

これで、最初のテーマスプライトマップクライアント拡張機能を展開するためのツールが手に入りました。

テーマスプライトマッププロジェクトを調べる

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

liferay-sample-theme-spritemap-1:
   name: Liferay Sample Theme Spritemap 1
   type: themeSpritemap
   url: spritemap.svg

クライアント拡張機能のIDは liferay-sample-theme-spritemap-1 で、追加するタイプやスプライトマップファイルなど、テーマスプライトマップクライアント拡張機能の主要な構成が含まれています。利用可能なプロパティの詳細については、テーマスプライトマップ YAML 構成リファレンスを参照してください。

また、以下のassemble YAMLブロックも含まれています。

assemble:
    - from: assets
      into: static

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

重要

サンプルプロジェクトの assets/spritemap.svg は、Liferay で使用される Clay icons スプライトマップのコピーです。 Liferay で使用されるすべてのアイコンがサンプルのスプライトマップに存在するため、UI の変更に気付くことはありません。

スプライトマップクライアント拡張機能は、選択したページのスプライトマップ全体を置き換えるため、アイコンが欠落しないように、必要なすべてのアイコンとそれに対応する ID があることを確認してください。

スプライトマップを変更する

特定のアイコンを変更するには、アイコンの ID を見つける必要があります。これを見つけるには、HTML 要素を調べることができます。

ナビゲーションバーには 9 個のアイコンが含まれています。

以下に、上部のナビゲーションバーで使用されるアイコンの ID を示します。

数字	アイコン	ID
1		鉛筆
2		歯車
3		シミュレーションメニューが閉じられました
4		Analytics
5		試験
6		情報サークル
7		グリッド
8		検索
9		ユーザー

鉛筆アイコンを魚に置き換えるには、

assets/spritemap.svg内の 鉛筆 の ID に対応する <symbol> タグを見つけます。これを表示するには、テキストエディターで SVG ファイルを開く必要があります。

<symbol id="pencil" viewBox="0 0 512 512">
   <path class="lexicon-icon-body" d="M490.9,363.4l-2.8-5.1C468.3,322.4,359.9,304,358.9,304l-2.4-0.1l-10.8,1.5c-16.9,3.9-31,15.7-50.5,33.8c-25.2-14.7-52.4-37.6-68.7-54.3c-16.7-17.1-39.9-47.7-52.4-71.6c22-21.6,37.4-38.7,38.4-61.7c0-1-13.8-110.1-48.9-131.7l0,0l-5.1-3.1c-9.6-5.7-27.5-16.4-49.3-16.4c-5.4,0-10.8,0.7-17,2.3c-6.9,2-13.3,4.8-20,9.1C55.9,23,26.2,46.7,11.7,78c-13.5,30.8-4.4,187.9,113.4,311c111.6,116.8,241.2,122.7,266.1,122.7c6.4,0,15.1-0.3,22.4-1.6l2.8-0.1l6.7-2.5c32.2-13.2,56.9-41.7,68.4-57.2C518.4,415.5,497.8,376.6,490.9,363.4L490.9,363.4z" fill="none"></path>
   <path class="lexicon-icon-outline" d="M490.9,363.4l-2.8-5.1C468.3,322.4,359.9,304,358.9,304l-2.4-0.1l-10.8,1.5c-16.9,3.9-31,15.7-50.5,33.8c-25.2-14.7-52.4-37.6-68.7-54.3c-16.7-17.1-39.9-47.7-52.4-71.6c22-21.6,37.4-38.7,38.4-61.7c0-1-13.8-110.1-48.9-131.7l0,0l-5.1-3.1c-9.6-5.7-27.5-16.4-49.3-16.4c-5.4,0-10.8,0.7-17,2.3c-6.9,2-13.3,4.8-20,9.1C55.9,23,26.2,46.7,11.7,78c-13.5,30.8-4.4,187.9,113.4,311c111.6,116.8,241.2,122.7,266.1,122.7c6.4,0,15.1-0.3,22.4-1.6l2.8-0.1l6.7-2.5c32.2-13.2,56.9-41.7,68.4-57.2C518.4,415.5,497.8,376.6,490.9,363.4L490.9,363.4z M445.4,415.1c-10.5,14-27.3,31.3-42.6,38c-1.5,0.2-5.4,0.6-11.6,0.6c-20.7,0-128.8-5.1-224.1-104.8C67,244.3,62.6,119,65.5,100c6.6-12.7,21.2-27.7,38.7-39.8c0.5-0.3,1.9-1.1,3.4-1.6c5.5-1.4,15.6,4.6,21,7.8l2.4,1.5c8.1,13.5,20.6,63.6,23.3,81.2c-3.8,6.4-19.2,21.4-27.7,29.8l-1,1.1c-11.9,12.8-15.5,31.2-8.9,47.3c14.2,32.9,45.9,75.3,68.4,98.3c22.1,22.8,59.4,53.4,93.2,70.6c16.3,8.1,36.3,4.8,49.1-7.5c10.1-9.4,25-23.4,30.6-26.3c17.6,3.4,67.7,18.2,80.8,26.7l1.1,2C446.9,404.3,448.5,411,445.4,415.1L445.4,415.1z"></path>
</symbol>

これをカスタムアイコンに置き換えて、同じ ID (鉛筆) を付けます。魚のアイコンには、以下の シンボル を使用します。

<symbol id="pencil" viewBox="0 26 100 48">
   <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
   c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
   c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
   C88,48.9,86.9,50,85.5,50z"/>
</symbol>

スプライトマップクライアント拡張機能をデプロイする

新しい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に変更します。

次に、サンプルワークスペース内のクライアント拡張プロジェクトのフォルダーから次のコマンドを実行します。

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

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

注

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

ヒント

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

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

STARTED liferay-sample-theme-spritemap-1_1.0.0

ページで新しいスプライトマップを使用する

デプロイされたクライアント拡張機能を使用するようにページを構成します。

ページに移動し、上部にある編集 () をクリックします。
サイドバーで、「ページデザインオプション」メニュー () に移動し、メニューの上部にある構成 () をクリックします。
テーマスプライトマップクライアント拡張セクションで、追加 () をクリックします。
新しくデプロイされたスプライトマップ Liferay Sample Theme Spritemap 1を選択します。
下にスクロールして、 「保存」をクリックします。
ページに戻ります。ナビゲーションバーでは、編集機能の鉛筆 () が魚のアイコンに置き換えられました。

スプライトマップからの新しいアイコンがナビゲーションバーに表示されます。

今後の流れ

テーマスプライトマップクライアント拡張機能を正常に使用しました。次は他のクライアント拡張タイプのデプロイメントを試してみましょう。

テーマスプライトマップYAML設定リファレンス

Theme Sprite Map YAML Configuration Reference