marketplace-scaffold

新しい Sitecore Marketplace アプリをスキャフォールドする

公式の Sitecore Marketplace SDK（v0.4）を使用して、新しい Sitecore Marketplace アプリをスキャフォールドできるよう、ユーザーを支援します。

ステップ 1：要件を確認する

ユーザーに次の質問をします（すでに回答済みのものは省略してください）。

1. アプリ名 — アプリの名前は何にしますか？（デフォルト：指定されている場合は $ARGUMENTS の値）
2. アーキテクチャ — クライアントサイドのみですか、それともフルスタックですか？
   • クライアントサイド：UI はすべて iframe 内で動作し、SDK クライアントを介して通信します。よりシンプルで、サーバーは不要です。
   • フルスタック：サーバーサイドから SDK にアクセスするための Next.js API ルート／サーバーアクションが含まれます。Auth0、サーバーサイドのミューテーション、外部 API のプロキシが必要な場合に選択してください。
3. 認証 — 組み込み（デフォルト）または Auth0 のどちらですか？
   • 組み込み：設定不要で、SDK が認証を自動的に処理します。ほとんどのアプリではこれで十分です。
   • Auth0：サーバーサイドからの API アクセス、外部サービスとの連携、またはカスタム認証フローに必要です。Auth0 テナントのセットアップが必要です。
4. オプションのパッケージ — 追加する SDK パッケージはありますか？
   • XM Cloud (xmc)：Sites、Pages、Authoring、Content Transfer、Search、Agent API にアクセスします
   • AI Skills (ai)：AI を活用したコンテンツ分析のための Brand Review API にアクセスします

ステップ 2：スキャフォールドコマンドを実行する

回答に基づいて、適切なコマンドを組み立てて実行します。

# Client-side only (built-in auth)
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json

# Client-side + XMC
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json

# Client-side + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json https://marketplace-sdk.sitecorecloud.io/r/ai.json

# Client-side + XMC + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json https://marketplace-sdk.sitecorecloud.io/r/ai.json

# Full-stack (Auth0) — adds server-side SDK support
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json

# Full-stack + XMC
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json

# Full-stack + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json https://marketplace-sdk.sitecorecloud.io/r/ai.json

# Full-stack + XMC + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json https://marketplace-sdk.sitecorecloud.io/r/ai.json

重要：ユーザーがまだ Next.js プロジェクトを持っていない場合は、先にプロジェクトをスキャフォールドします。

npx create-next-app@latest <app-name> --typescript --tailwind --eslint --app --src-dir
cd <app-name>

ステップ 3：スキャフォールド後のセットアップ

スキャフォールドが完了したら、次の操作を行います。

1. .env.local を作成する — テンプレートは env-template.md を参照してください。選択したアーキテクチャに基づいて値を入力します。

2. CSP ヘッダーを設定する — iframe 埋め込み用のヘッダーを next.config.ts に追加します。

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "frame-ancestors 'self' https://*.sitecorecloud.io",
          },
        ],
      },
    ];
  },
};

3. Blok テーマをインストールする（まだ導入されていない場合）：

npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/blok-theme.json

4. セットアップを確認する — 開発サーバーを実行し、エラーがないことを確認します。

npm run dev

ステップ 4：次の手順を説明する

スキャフォールドが正常に完了したら、次の操作を提案します。

• /marketplace-add-extension を使って、拡張ポイントのルート（カスタムフィールド、ダッシュボードウィジェットなど）を追加します
• /marketplace-sdk-reference を使って、SDK API を参照します
• /marketplace-build-component を使って、Blok デザインシステムで UI を構築します
• デプロイの準備ができたら、/marketplace-deploy を使います

参考ファイル

• アーキテクチャガイド — クライアントサイドとフルスタックを選択するための判断基準
• 環境テンプレート — アーキテクチャ別の .env.local テンプレート