エクスペリエンスビルダーのコンポーネントの設定

カスタム Lightning Web コンポーネントをエクスペリエンスビルダーで使用できるようにし、ユーザがコンポーネントをページに追加できるようにします。コンポーネントを設定すると、そのコンポーネントは、組織のすべてエクスペリエンスビルダーサイトで使用できるようになります。

1.設定ファイルでコンポーネントのメタデータを定義する

コンポーネントのプロジェクトフォルダには、コンポーネントのメタデータ値を定義する設定ファイル (componentName.js-meta.xml ファイル) を含める必要があります。コンポーネントをエクスペリエンスビルダーで使用するには、ファイルを編集してコンポーネントのデザイン設定値を定義します。

コンポーネントをエクスペリエンスビルダーで使用できるようにするには、isExposed を true に設定します。続いて、targets で次のいずれかの値を target として追加します。
- [コンポーネント] パネルに表示されるドラッグアンドドロップコンポーネントを作成するには lightningCommunity__Page を追加します。
- コンテンツレイアウトウィンドウに表示される LWR サイトのページレイアウトコンポーネントを作成するには lightningCommunity__Page_Layout を追加します。
- [テーマ] 領域の [設定] に表示される LWR サイトのテーマレイアウトコンポーネントを作成するには lightningCommunity__Theme_Layout を追加します。
エクスペリエンスビルダーでコンポーネントが選択されたときに編集可能なプロパティを含めるには、targets で lightningCommunity__Default を定義し、targetConfigs でプロパティを定義します。エクスペリエンスビルダーで編集できるのは lightningCommunity__Page または lightningCommunity__Page_Layout の対象に定義されたプロパティのみです。
拡張 LWR Experience Cloud サイトの場合、コンポーネントの整数または文字列プロパティをスクリーンサイズに対応させます。screenResponsive 属性の値を true に、exposedTo 属性の値を css にして両方を宣言します。次に、画面サイズごとに CSS 変数でメディアクエリを定義し、エクスペリエンスビルダーを使用してビューモードごとにプロパティ値を指定する必要があります。詳細は、「Make a Custom LWR Component Screen-Size Responsive (カスタム LWR コンポーネントを画面サイズに対応させる)」を参照してください。

「XML 設定ファイルの要素」の完全なリストを参照してください。

編集可能なプロパティを含むシンプルなドラッグアンドドロップ Hello World コンポーネントのサンプルコードを次に示します。

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
3    <apiVersion>45.0</apiVersion>
4    <isExposed>true</isExposed>
5    <masterLabel>Hello World</masterLabel>
6    <targets>
7        <target>lightningCommunity__Page</target>
8        <target>lightningCommunity__Default</target>
9    </targets>
10    <targetConfigs>
11        <targetConfig targets="lightningCommunity__Default">
12            <property name="string" type="String" default="jsMetaValue"></property>
13            <property name="boolean" type="Boolean" default="true"></property>
14            <property name="integer" type="Integer" default="5"></property>
15            <property name="picklist" type="String" default="value3" datasource="value1,value2,value3"></property>
16            <property name="backgroundColor" type="Color" default="#ff00ff"></property>
17        </targetConfig>
18    </targetConfigs>
19</LightningComponentBundle>

2.省略可能: SVG リソースをコンポーネントバンドルに追加する

ドラッグアンドドロップコンポーネントのカスタムアイコンを定義するには、コンポーネントのフォルダに SVG リソースを追加します。SVG リソースを含めないと、[コンポーネント] パネルでデフォルトのアイコン ( Lightning ) が使用されます。

エクスペリエンスビルダーのコンポーネントパネル

SVG リソースの名前は componentName.svg にする必要があります。フォルダあたりの SVG の数は 1 つのみです。

「Hello World」コンポーネントと一緒に表示するシンプルな赤い円の SVG リソースの例を次に示します。

1<?xml version="1.0"?>
2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
5<svg xmlns="http://www.w3.org/2000/svg"
6     width="400" height="400">
7  <circle cx="100" cy="100" r="50" stroke="black"
8    stroke-width="5" fill="red" />
9</svg>

考慮事項

新しいサイトの場合、エクスペリエンスビルダーでは [厳格な CSP] がデフォルトのセキュリティレベルとして設定されます。Lightning Web コンポーネントがサードパーティのリソースを参照する場合は、エクスペリエンスビルダーでセキュリティレベルを設定し、適切なホストを許可リストに登録する必要があります。

lightningCommunity__RelaxedCSP タグで設定されていない管理パッケージ内の Lightning Web コンポーネントは、Lightning Locker が無効なサイトにおいてエクスペリエンスビルダーの [コンポーネント] パネルで無効になります。詳細は、「XML 設定ファイルの要素」を参照してください。

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。