Experience Cloud 開発者ガイド
jエクスペリエンスビルダーの Aura コンポーネントの設定に関するヒントおよび考慮事項
Aura サイトの Aura コンポーネントおよびコンポーネントのバンドルを作成する場合、次のガイドラインを参考にしてください。
コンポーネント
- <design:component label="foo"> などのデザインファイル要素の label 属性を使用して、コンポーネントにわかりやすい名前を付けます。
- 表示領域の 100% の幅 (余白を含む) を占めるようにコンポーネントを設計します。
- ユーザー操作を必要とする場合、宣言型ツールでコンポーネントの適切なプレースホルダー動作を指定します。
- コンポーネントに空白のボックスが表示されないようにしてください。他のサイトがどのように動作するかを考えます。たとえば、Facebook では、フィード項目がサーバーから返されるまでフィードの概要が表示されます。これにより、UI 応答のユーザーの認識が向上します。
- 起動されたイベントにコンポーネントが連動する場合は、イベントが起動される前に表示するデフォルトの状態を指定します。
- 標準設計トークンを使用してコンポーネントのスタイルを設定し、Salesforce Design System との一貫性を保ちます。
- 組織とサイトで Lightning Locker が有効になっている場合、Lightning Locker が、Summer '17 (API バージョン 40.0) 以降で作成されたすべての Aura コンポーネントに適用されます。組織レベルでは、Lightning Web Security が有効化されていない場合、Lightning Locker が使用されます。「セキュアサイトの開発: CSP、LWS、および Lightning Locker」を参照してください。
- カスタムコンポーネントの新しいプロパティをエクスペリエンスビルダーで編集できるようにする場合は、サイトの翻訳に関する次の考慮事項に留意してください。エクスペリエンスビルダーのページでコンポーネントが使用されている場合、そのコンポーネントをページから削除して、更新済みバージョンに置き換えます。置き換えない場合、サイトのコンテンツを翻訳用にエクスポートすると、エクスポートしたファイル内の該当のコンポーネントインスタンスに追加されたプロパティは省略されます。すでに翻訳されたコンテンツがコンポーネントに含まれている場合は、まずサイトのコンテンツをエクスポートして既存の翻訳を保持します。次に、コンポーネントを更新済みバージョンに置き換えます。
属性
- デザインファイルを使用して、エクスペリエンスビルダーに公開する属性を制御します。
- システム管理者にとって使いやすくわかりやすい属性にします。SOQL クエリ、JSON オブジェクト、Apex クラス名は公開しません。
- ユーザーの操作性が低下しないように、必須属性にはデフォルト値を指定します。デフォルト値のない必須属性を持つコンポーネントをエクスペリエンスビルダーに追加すると、無効と表示されます。
- 公開される属性には、サポートされる基本のデータ型 (string、integer、boolean) を使用します。
- <design:attribute> 要素の整数属性に最小値と最大値を指定して、有効な値範囲を制御します。
- 文字列属性では、事前定義された一連の値を持つデータ取得元を指定して、属性の設定を選択リストとして公開できます。
- 属性に、わかりやすい表示名を使用した表示ラベルを指定します。
- 説明を含めて、データ形式や予期される値範囲など、予期されるデータおよびガイドラインを説明します。説明テキストは、プロパティパネルにツールチップとして表示されます。
- forceCommunity:availableForAllPageTypes インターフェースを実装するコンポーネントの設計属性を削除するには、まずコンポーネントからインターフェースを削除した後、設計属性を削除します。その後でインターフェースを再実装します。コンポーネントがサイトページで参照されている場合は、変更する前にページからコンポーネントを削除する必要があります。