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

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

Liferay DXP 2023.Q4+/Portal GA100+

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

注

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

前提条件

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

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

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

<symbol> タグが pencil の ID に対応しているか、 assets/spritemap.svg 内を探してください。これを表示するには、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