generating-ui-bundle-site について
React UI bundle をホストする Salesforce Digital Experience Site の作成・設定を支援するスキルです。必要なサイトメタデータを生成し、参照先アプリを確認します。
主な機能
- 01必須のサイト属性を5項目解決
- 02サイトメタデータ構造の生成
- 03ドキュメントのテンプレートに基づく入力
- 04UI bundle の参照先とデプロイの確認
活用シーン
- 01React UI bundle 用の Salesforce サイト作成
- 02プロジェクトと組織の値を使ったサイト設定
- 03メタデータ間でのサイト URL 更新
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ forcedotcom/ sf-skills --skill generating-ui-bundle-siteインストール後、Claude Code で/generating-ui-bundle-siteを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
docs/configure-metadata-custom-site.mdconfigure-metadata-digital-experience-bundle.mdconfigure-metadata-digital-experience-config.mdconfigure-metadata-digital-experience.mdconfigure-metadata-network.mdupdate-site-urls.md詳細
React UI バンドル向けのデジタルエクスペリエンスサイト
Salesforce で React UI バンドルをホストするデジタルエクスペリエンスサイトを作成、設定します。このスキルは、React アプリを Salesforce から配信できるように、必要最小限のサイトインフラストラクチャ(Network、CustomSite、DigitalExperienceConfig、DigitalExperienceBundle、sfdc_cms__site コンテンツタイプ)を生成します。
React サイトは標準の LWR サイトとは異なり、ルート、ビュー、テーマレイアウト、ブランディングセットは必要ありません。サイトは薄いコンテナー(appContainer: true)として機能し、appSpace が参照する React UI バンドルにレンダリングを委ねます。
必須プロパティ
メタデータを生成する前に、5 つすべてのプロパティを解決してください。それぞれにフォールバックの連鎖があるため、値が見つかるまで順番に各選択肢を確認してください。
| プロパティ | 形式 | 解決方法 |
|---|---|---|
| siteName | UpperCamelCase(例:MyCommunity) | ユーザーに尋ねるか、コンテキストから導き出します |
| siteUrlPathPrefix | すべて小文字(例:mycommunity) | ユーザーが指定した値を使用するか、siteName を英数字のみのすべて小文字に変換します |
| appNamespace | 文字列 | sfdx-project.json の namespace → sf data query -q "SELECT NamespacePrefix FROM Organization" --target-org ${usernameOrAlias} → デフォルトは c |
| appDevName | 文字列 | プロジェクト内の UIBundle メタデータ → sf data query -q "SELECT DeveloperName FROM UIBundle" --target-org ${usernameOrAlias} → デフォルトは siteName |
| enableGuestAccess | ブール値 | 認証されていないゲストユーザーがサイトの API にアクセスできるか、ユーザーに尋ねます → デフォルトは false |
appNamespace と appDevName のプロパティによって、サイトを正しい React アプリケーションに接続します。これらを誤ると、サイトのデプロイは成功してもページが空白になるため、実際のプロジェクトデータから慎重に解決してください。
生成ワークフロー
ステップ 1:必須プロパティをすべて解決する
何かを構築する前に、5 つすべてのプロパティの値を決定します。上の表に記載された解決方法を使い、値が見つかるまで各選択肢を順番に確認します。
ステップ 2:プロジェクト構造を作成する
Network、CustomSite、DigitalExperienceConfig、DigitalExperienceBundle の Salesforce メタデータスキーマとフィールドのコンテキストを利用し、各ファイルで有効な構造が使われるようにします。
まだ存在しないファイルとディレクトリを、次のパスに作成します。
| メタデータ型 | パス |
|---|---|
| Network | networks/{siteName}.network-meta.xml |
| CustomSite | sites/{siteName}.site-meta.xml |
| DigitalExperienceConfig | digitalExperienceConfigs/{siteName}1.digitalExperienceConfig-meta.xml |
| DigitalExperienceBundle | digitalExperiences/site/{siteName}1/{siteName}1.digitalExperience-meta.xml |
| DigitalExperience(sfdc_cms__site) | digitalExperiences/site/{siteName}1/sfdc_cms__site/{siteName}1/* |
DigitalExperience ディレクトリに含めるのは _meta.json と content.json のみです。バンドル内に sfdc_cms__site 以外のディレクトリを作成しないでください。
ステップ 3:すべてのメタデータフィールドを設定する
以下のドキュメントにあるデフォルトのテンプレートを使用します。{braces} 内の値は解決済みのプロパティ参照です。ステップ 1 で取得した実際の値に置き換えてください。
| メタデータ型 | テンプレートの参照先 |
|---|---|
| Network | configure-metadata-network.md |
| CustomSite | configure-metadata-custom-site.md |
| DigitalExperienceConfig | configure-metadata-digital-experience-config.md |
| DigitalExperienceBundle | configure-metadata-digital-experience-bundle.md |
| DigitalExperience(sfdc_cms__site) | configure-metadata-digital-experience.md |
URL の更新については、update-site-urls.md を参照してください。
ステップ 3 の実行上の注意: ドキュメントを読み込んで使用する
- エージェントは、メタデータフィールドを設定しようとする前に、ステップ 3 で参照されている各 docs/*.md ファイルの完全な内容を必ず読まなければなりません。
- プラットフォームのファイル読み取りツール(たとえば
read_file)を使用してこれらのファイルを完全に読み込み、ステップ 1 で解決されたプロパティを使って{braces}内の値をプレースホルダー置換します。 - 読み込むファイル:
docs/configure-metadata-network.mddocs/configure-metadata-custom-site.mddocs/configure-metadata-digital-experience-config.mddocs/configure-metadata-digital-experience-bundle.mddocs/configure-metadata-digital-experience.md
- ファイルの内容全体を読み、プレースホルダー(例:
{siteName})を解決された値に置き換えてから、展開されたテンプレートを使用してメタデータの XML/JSON コンテンツを設定します。
ステップ 4: テンプレート化されていないプロパティを変更しない
Network、CustomSite、DigitalExperience、DigitalExperienceConfig、または DigitalExperienceBundle のメタデータについて、{braces} で囲まれた変数として表現されていないデフォルトのプロパティ値は変更しないでください。
検証チェックリスト
デプロイする前に、以下を確認してください:
- 必須の 5 つのプロパティがすべて解決されている
- プロジェクト構造に従って、すべてのメタデータディレクトリとファイルが存在する
- すべてのメタデータフィールドが、
{braces}の置換のみを行ったステップ 3 のテンプレートと一致しており、他のデフォルトのプロパティ値が追加または変更されていない -
content.jsonのappSpaceが、既存のUIBundleメタデータレコードと一致している - デプロイが正常に検証される:
sf project deploy validate --metadata Network CustomSite DigitalExperienceConfig DigitalExperienceBundle DigitalExperience --target-org ${usernameOrAlias}
一般的なワークフロー
Experience サイトの URL を更新する
使用する場面 ユーザーがサイトの URL(urlPathPrefix)を更新または変更したい場合。
手順:
- update-site-urls.md を読んで、3 つのコンポーネントからなるアーキテクチャと URL 更新ワークフローを理解する
- ドキュメントのステップバイステップのワークフローに従い、3 つのコンポーネント(DigitalExperienceConfig、Network、CustomSite)すべてにわたって URL を一貫して更新する