LWCでExperience Cloud (LWR) 用のコンポーネントを開発する際、設定画面（プロパティエディタ）のカスタマイズはどのように行っていますか？
これまでは js-meta.xml の editor 属性にカスタムコンポーネントを直接指定する方法が主流でしたが、Spring ’26 (API 66.0) より、ExperiencePropertyTypeBundle が正式に一般提供（GA）されました。これにより、データの「型（Schema）」と「入力UI（Design）」を分離して管理する、より堅牢で再利用可能なアーキテクチャが標準となります。
今回は、架空の紅茶ECサイト「The Royal Brew」のキャンペーンバナー作成を通して、この新しい ExperiencePropertyTypeBundle を使用した実装フローを完全解説します。
今回の記事で作成したコンポーネントの全ソースコードをGitHubで公開しています。 ぜひ Clone して、あなたの組織で動かしてみてください。
シナリオ：直感的なバナー設定画面を作りたい
運用担当者からの要望は、以前の記事と同様です。
- 不透明度調整: 数値入力ではなく、スライダーで0〜100%を直感的に調整したい。
- カテゴリ選択: 商品カテゴリIDの手入力ではなく、Salesforce上のデータに基づいたリストから選択したい。
これらを、Spring ’26の最新手法で実現していきます。
ExperiencePropertyTypeBundle とは？
Experience Cloud (LWR) サイト専用のメタデータタイプです。以下の3つの要素で構成されるフォルダ（バンドル）として管理します。
- プロパティタイプフォルダ: 任意の名前（例:
opacityType）。 - schema.json: データの構造を定義するファイル。
lightning:typeの指定が必須です。 - design.json: 設定画面のUI（使用するLWCなど）を定義するファイル。ルート要素は
propertySheetです。
これにより、コンポーネントの js-meta.xml からは「型」を参照するだけで、リッチな入力フォームを呼び出せるようになります。
【基礎編】スライダー入力用のプロパティタイプを作成する
まずは「不透明度」を管理するためのカスタムタイプ opacityType を作成します。
1. バンドルフォルダの作成
Salesforce DXプロジェクトの以下のパスにフォルダを作成します。
force-app/main/default/experiencePropertyTypeBundles/opacityType
2. データ構造の定義 (schema.json)
ここが重要です。単なる type: integer ではなく、Salesforceが提供する基本型 lightning__numberType を lightning:type プロパティで指定します。
{
"title": "Opacity Level",
"description": "0% to 100% opacity level",
"lightning:type": "lightning__numberType",
"minimum": 0,
"maximum": 100
}3. UI設定の定義 (design.json)
この型を入力する際に使用するLWC (c-opacity-slider-editor) を指定します。 ルート要素は必ず propertySheet であり、その中の view プロパティでエディタ定義を行います。
{
"propertySheet": {
"view": {
"definition": "c/opacitySliderEditor"
}
}
}4. エディタ用LWCの作成 (c-opacity-slider-editor)
エディタとなるLWCの実装は、従来の方法とほぼ同じです。設定値を受け取り、変更があればイベントを通知します。
opacitySliderEditor.html
<template>
<div class="slds-p-around_x-small">
<lightning-slider
label={label}
value={value}
min="0"
max="100"
step="10"
onchange={handleChange}>
</lightning-slider>
<div class="slds-text-body_small slds-text-color_weak slds-m-top_xx-small">
現在の不透明度: {value}%
</div>
</div>
</template>opacitySliderEditor.js
import { LightningElement, api } from 'lwc';
export default class OpacitySliderEditor extends LightningElement {
// 値とラベルが自動的に渡されます
@api value;
@api label;
/**
* スライダーの値が変更された時の処理
* @param {Event} event
*/
handleChange(event) {
// 値の変更をExperience Builderに通知
this.dispatchEvent(new CustomEvent('valuechange', {
detail: {
value: event.detail.value
}
}));
}
}opacitySliderEditor.js-meta.xml
エディタ自体は画面に配置しないため、lightning__PropertyEditor ターゲットを指定し、isExposed は true にします（※一部の環境ではPropertyEditorターゲットのみで機能しますが、ここでは標準的な定義とします）。
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>66.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Opacity Slider Editor</masterLabel>
<targets>
<target>lightning__PropertyEditor</target>
</targets>
</LightningComponentBundle>【応用編】Apex連携カテゴリ選択用のプロパティタイプを作成する
次に、Apexクラスから動的に値を取得する「商品カテゴリ選択」タイプ productFamilyType を作成します。
1. バンドルと定義ファイルの作成
force-app/main/default/experiencePropertyTypeBundles/productFamilyType を作成します。
schema.json
ここではテキストデータを扱うため、lightning__textType を指定します 。
{
"title": "Product Family",
"description": "Select a product family from the list",
"lightning:type": "lightning__textType"
}design.json
{
"propertySheet": {
"view": {
"definition": "c/productFamilySelector"
}
}
}2. エディタ用LWCの作成 (c-product-family-selector)
CpeDynamicController
Apexコントローラー CpeDynamicController は以前の記事と同じものを使用します。
opacitySliderEditor.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>66.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Product Family Selector</masterLabel>
<targets>
<target>lightning__PropertyEditor</target>
</targets>
</LightningComponentBundle>【完成】メインコンポーネントでの利用
最後に、作成した2つのカスタムプロパティタイプを、バナーコンポーネント c-campaign-banner に適用します。
ここが最大の違いです。editor 属性で直接LWCを指定するのではなく、type 属性でカスタムタイプを参照します 。editor 属性は使用しません。
campaignBanner.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>66.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>The Royal Brew キャンペーンバナー (EPTB)</masterLabel>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
<targetConfig targets="lightningCommunity__Default">
<property
name="overlayOpacity"
type="c__opacityType"
label="オーバーレイ不透明度"
default="50"
/>
<property
name="targetCategory"
type="c__productFamilyType"
label="リンク先カテゴリ"
/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>※ c__ はデフォルトの名前空間です。組織に名前空間がある場合は、それに合わせて変更してください 。
これで、アドミンはコードを触ることなく、「スライダーでの明度調整」と「組織データに基づくカテゴリ選択」が可能になりました。
まとめ：正しいJSON構造が成功の鍵
ExperiencePropertyTypeBundleの実装において、最もつまづきやすいのがJSONファイルの構造です。
- schema.json: 必ず
lightning:typeを指定する。 - design.json: 必ず
propertySheet>view>definitionの階層を守る。
このルールさえ守れば、LWRサイトでの設定画面開発は、より整理され、再利用性の高いものへと進化します。ぜひSpring ’26の環境で試してみてください。
参考URL
Salesforce Spring ’26 Release Notes
Custom Property Types and Property Editors
Metadata API Developer Guide: ExperiencePropertyTypeBundle
読者の声