integrating-b2b-commerce-open-code-components について
Salesforce のオープンソース B2B Commerce コンポーネントとラベルをストアのサイトメタデータにコピーし、Experience Builder のパレットで利用可能にするスキルです。新規・既存ストアに対応し、リポジトリやメタデータの確認からコピーまでを案内します。
主な機能
- 01オープンソース B2B Commerce コンポーネントをコピー
- 02必要なコンポーネントラベルをコピー
- 03ストアのサイトメタデータを確認・選択
- 04既存ファイルの上書きまたは新規分のみコピー
- 05デプロイと検証の手順を提示
活用シーン
- 01既存の B2B Commerce ストアにコンポーネントを追加
- 02新しいストアにオープンソースコンポーネントを統合
- 03Experience Builder でコンポーネントを利用可能にする
- 04統合済みコンポーネントとラベルを更新
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ forcedotcom/ sf-skills --skill integrating-b2b-commerce-open-code-componentsインストール後、Claude Code で/integrating-b2b-commerce-open-code-componentsを入力して読み込まれたか確認します。
詳細
このスキルを使用するタイミング
次のことが必要な場合に、このスキルを使用します。
- すべてのオープンソース B2B Commerce コンポーネントをストアに統合する
- 新規または既存の B2B Commerce ストアにオープンソースコンポーネントを追加する
- Experience Builder でオープンコードコンポーネントを使用できるようにする
ルール
- 実行前に必ず説明してください。 コマンドを実行する前に、そのコマンドで何を行うのか、なぜ実行するのかを必ずユーザーに伝えてください。コマンドだけを提示して許可を求めることはしないでください。ユーザーが承認する前に説明を読んで目的を理解できるようにしてください。
概要
このスキルは、Salesforce の公式リポジトリ(https://github.com/forcedotcom/b2b-commerce-open-source-components)にあるすべてのオープンソース B2B Commerce コンポーネントを、B2B Commerce ストアのサイトメタデータにコピーします。統合すると、Experience Builder のコンポーネントパレットにコンポーネントが表示されます。
起動フロー
このスキルが起動されたら、コピーする前に次のチェックを自動的に実行します。
Check 0: パッケージディレクトリの解決
sfdx-project.json を読み込み、アクティブなパッケージディレクトリを選択します。packageDirectories[] を抽出し、"default": true のエントリを使用します。デフォルトとして指定されたエントリがない場合は、最初のエントリを使用します。以下では、この値を <package-dir> として使用します。sfdx-project.json が存在しない場合、または packageDirectories がない場合は、ユーザーに伝えて中止します。
Check 1: オープンソースリポジトリ
リポジトリが .tmp/b2b-commerce-open-source-components にクローンされていることを確認します。
- ディレクトリが存在しない場合: ユーザーに次のように伝えます。「公式の B2B Commerce オープンソースコンポーネントリポジトリを、ローカルの
.tmp/フォルダーにクローンしています。これにより、すべてのオープンコードコンポーネントを利用できるようになります。」 次に、以下を実行します。git clone https://github.com/forcedotcom/b2b-commerce-open-source-components .tmp/b2b-commerce-open-source-components - ディレクトリが存在し、
force-app/main/default/sfdc_cms__lwcとsfdc_cms__labelが含まれている場合は、次の選択肢を提示します。「オープンソースリポジトリはすでにクローンされています。どのように進めますか?」
- 既存のものを再利用 — すでにクローンされたリポジトリを使用する
- 再クローン — 削除して GitHub から新たにクローンする
- ディレクトリは存在するが、構造が無効な場合: ユーザーに次のように伝えます。「クローンされたリポジトリの構造が想定と異なります。削除して新しいコピーをクローンします。」 次に、削除して再クローンします。
- クローンに失敗した場合: ユーザーに知らせて中止します。
Check 2: ストアとサイトメタデータ
ストアが選択されており、サイトメタデータをローカルで使用できることを確認します。
- ユーザーに次のように伝えます。「プロジェクトに B2B ストアのメタデータがすでにローカルにあるか確認しています。」
<package-dir>/main/default/digitalExperiences/site/にストアディレクトリが含まれているか確認します。 - ストアメタデータが存在する場合: それを使用します。複数のストアが見つかった場合は、ユーザーに選択してもらいます。
- ストアメタデータが見つからない場合: 委任する前に、接続済みの組織からの取得を試みます。
sf org listを実行する(またはsf config get target-orgを確認する)ことで、接続済みの組織を探します。複数ある場合は、ユーザーに確認するか選択してもらいます。- その組織内の
DigitalExperienceBundleサイトバンドルをsf org list metadata --metadata-type DigitalExperienceBundle --target-org <alias>で一覧表示します。site/*のエントリに絞り込みます。 - サイトバンドルが1つ以上ある場合は、どれを使用するかユーザーに尋ねてから、次を実行します。
sf project retrieve start --metadata "DigitalExperienceBundle:site/<storeName>" --target-org <alias>バンドルは<package-dir>/main/default/digitalExperiences/site/<storeName>/に配置されます。 - 接続済みの組織がない場合、サイトバンドルが見つからない場合、または取得に失敗した場合に限り: creating-b2b-commerce-store スキルに委任します。
すべてのチェック完了後に必要な状態:
- パッケージディレクトリ — Check 0 で解決した値(例:
force-app) - ストア名 — 選択した
fullNameの値(例:My_B2B_Store1) - サイトメタデータパス —
<package-dir>/main/default/digitalExperiences/site/<store-name>/ - リポジトリパス —
.tmp/b2b-commerce-open-source-components/
統合作業
クローンしたリポジトリからすべてのコンポーネントとラベルをサイトディレクトリにコピーします。
- コピー元:
.tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/*およびsfdc_cms__label/*(オープンソースリポジトリ独自の構成。常にforce-appを使用します) - コピー先:
<package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__lwc/およびsfdc_cms__label/(<package-dir>はチェック 0 で解決します)
手順:
- ユーザーに次のように伝えます:「ストアのサイトメタデータにオープンコードコンポーネントがすでに存在するか確認しています。」 コピー先のディレクトリにファイルがすでにあるか確認します。
- ファイルが存在する場合は、次の選択肢を提示します。
「{store-name} にはコンポーネントがすでに存在します。どのように進めますか?」
- すべて上書き — 既存のコンポーネントをすべてリポジトリの最新のものに置き換えます
- 新規のみコピー — 既存のコンポーネントはスキップし、まだ存在しないものだけをコピーします
- ユーザーに次のように伝えます:「クローンしたリポジトリから、すべてのオープンコード LWC コンポーネントをストアのサイトメタデータディレクトリにコピーしています。」 コピー元からコピー先に、すべてのコンポーネントディレクトリをコピーします。
- ユーザーに次のように伝えます:「これらのコンポーネントに必要な関連ラベルファイルをコピーしています。」 コピー元からコピー先に、すべてのラベルディレクトリをコピーします。
- 次のように報告します:「X 個のコンポーネントと Y 個のラベルセットをコピーしました」
出力:
✅ Integration Complete!
Copied: X components and Y label sets to <store-name>
Next Steps:
1. Deploy: sf project deploy start -d <package-dir>/main/default/digitalExperiences/site/<store-name>
2. Open Experience Builder and use new components from the palette
3. Publish your site when ready
対話の例
ユーザー:「オープンコードコンポーネントをストアに統合して」
エージェント:「オープンソースコンポーネントのリポジトリがすでにローカルにクローンされているか確認しています……」
エージェント: (リポジトリが存在する)
「オープンソースリポジトリはすでにクローンされています。どのように進めますか?」
- 既存のものを再利用 — すでにクローンされたリポジトリを使用します
- 再クローン — 削除して GitHub から新たにクローンします
ユーザー:「1」
エージェント:「プロジェクトに B2B ストアのメタデータがローカルにすでに存在するか確認しています……」
- ✓ My_B2B_Store1 のストアメタデータが見つかりました
エージェント:「ストアのサイトメタデータにオープンコードコンポーネントがすでに存在するか確認しています……」
エージェント: (ファイルが存在する)
「My_B2B_Store1 にはコンポーネントがすでに存在します。どのように進めますか?」
- すべて上書き — 既存のコンポーネントをすべてリポジトリの最新のものに置き換えます
- 新規のみコピー — 既存のコンポーネントはスキップし、まだ存在しないものだけをコピーします
ユーザー:「1」
エージェント:「クローンしたリポジトリから、すべてのオープンコード LWC コンポーネントをストアのサイトメタデータディレクトリにコピーしています……」 エージェント:「これらのコンポーネントに必要な関連ラベルファイルをコピーしています……」
- ✓ 45 個のコンポーネントと 38 個のラベルセットをコピーしました
✅ Integration Complete!
Copied: 45 components and 38 label sets to My_B2B_Store1
Next Steps:
1. Deploy: sf project deploy start -d force-app/main/default/digitalExperiences/site/My_B2B_Store1
2. Open Experience Builder and use new components from the palette
3. Publish your site when ready
エラー処理
| エラー | メッセージ | 対応 |
|---|---|---|
| ストアが見つからない | "Store '{name}' not found in org." | ストアを再度一覧表示する |
| Git クローンに失敗 | "Failed to clone repository. Check internet connection." | 再試行するか、中止する |
| リポジトリの構成が無効 | "Repository structure has changed. Expected sfdc_cms__lwc and sfdc_cms__label." | ユーザーに警告して中止する |
| ファイルのコピーに失敗 | "Failed to copy files. Check file permissions." | エラーの詳細を表示する |
検証チェックリスト
- 起動フローが完了している:リポジトリがクローンされ、ストアメタデータが利用可能
- コンポーネントが正しいコピー先パス(
sfdc_cms__lwc/)にコピーされている - ラベルが正しいコピー先パス(
sfdc_cms__label/)にコピーされている - コピー中にファイル権限エラーが発生していない
- デプロイコマンドが提示され、テストについてユーザーに案内されている