ドキュメント Commerce Adobe Commerce as a Cloud Service

チュートリアルの前提条件

Last update: Mon Mar 23 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
App Builder
クラウド

作成対象：

中級
開発者

このページでは、Adobe Commerce as a Cloud Service評価の拡張機能チュートリアルや配送方法の拡張機能チュートリアルなど、チュートリアルの前提条件と設定手順について説明します。

一般的な前提条件

このチュートリアルでは、拡張機能とストアフロントの両方の開発に次のツールが必要です。

Node.js （バージョン 22.x.x）およびnpm （9.0.0以降）：次のコマンドを使用してインストールを確認します。

code language-bash
`node --version npm --version`

Gitをインストールします – インストールを確認します：

code language-bash
`git --version`

バッシュシェル
- macOS/Linux：インストールは不要
- Windows: Git BashまたはWindows Subsystem for Linux （WSL）を使用
カーソルなどのAI支援IDEのダウンロード（推奨）。 Claude Code、Gemini CLI、Copilotなどの他のIDEもサポートされていますが、チュートリアルのプロンプトやその他の手順の変更が必要になる場合があります。

Adobe Commerce as a Cloud Serviceの前提条件

Adobe I/O CLIをインストール

code language-bash
`npm install -g @adobe/aio-cli`

Adobe I/O CLI Commerce、Adobe I/O CLI RuntimeおよびApp Builder CLI プラグインをインストールします。

code language-bash
`aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime`

Adobe I/O CLIと必要なプラグインをインストールしたら、拡張性ワークスペースを設定します。 Adobeでは、最速のエクスペリエンスを得るために自動セットアップを使用することをお勧めします。

自動セットアップ（推奨） – 単一のコマンドを実行して、ワークスペースを自動的に設定します。
手動設定 – 各コンポーネントを個別に設定するには、手順に従います。

自動設定（推奨） automated-setup

TIP

自動設定で問題が発生した場合は、以下の手動設定手順に従ってください。

app-setup コマンドは、Adobe Developer Console プロジェクトの作成、必要なAPIの追加、Adobe I/O CLIの設定、スターターキットの複製、ローカルワークスペースの接続、拡張性AI ツールのインストールなど、ワークスペースの設定プロセスを自動化します。

app-setup コマンドを使用すると、次の手順を実行できます。

必要なAPIを使用したAdobe Developer Console プロジェクトの選択または作成
組織、プロジェクト、ワークスペースを使用したAdobe I/O CLIの設定
適切なスターターキットを複製し、プロジェクトを設定する
環境を設定し、ローカルワークスペースをリモートワークスペースに接続する
Commerce拡張ツールとコーディングエージェントのスキルのインストール

次のコマンドを実行し、インタラクティブなプロンプトに従います。

aio commerce extensibility app-setup

コマンドが完了したら、プロジェクトディレクトリに移動し、コーディングエージェントを再起動して、新しいMCP ツールとスキルを読み込みます。チュートリアルでストアフロントが必要な場合は、コマンドを再実行し、AEM Boilerplate Commerce スターターキットを選択します。

次のインストール例は、チェックアウトスターターキットのインタラクティブなプロンプトと出力を示しています。

インストール例（チェックアウトスターターキット）

code language-shell-session

code language-shell-session
aio commerce extensibility app-setup 🚀 Adobe Commerce Extensibility App Setup ✔ Logged in 📁 Working directory: /Users/username/projects/my-commerce-project ✔ Which starter kit would you like to use? Checkout Starter Kit ✔ Enter a name for your project directory: my-extension ✔ Which coding agent would you like to install the skills for? Cursor 📦 Cloning Checkout Starter Kit... ✔ Repository cloned Using npm (package-lock.json found) ✔ Dependencies installed 📋 Current Adobe I/O Console configuration: Org: My Organization (1234567) Project: My Commerce Project (1234567890123456789) Workspace: Stage (9876543210987654321) ✔ Do you want to continue with this configuration? (Answer "No" to select a different org/project/workspace) No 🔧 Selecting Adobe I/O Console org, project, and workspace... ? Select Org: My Organization Org selected My Organization You are currently in: 1. Org: My Organization 2. Project: <no project selected> 3. Workspace: <no workspace selected> ? Select Project: My Commerce Project Project selected : My Commerce Project You are currently in: 1. Org: My Organization 2. Project: My Commerce Project 3. Workspace: <no workspace selected> ? Select Workspace: Stage Workspace selected Stage You are currently in: 1. Org: My Organization 2. Project: My Commerce Project 3. Workspace: Stage ✅ Console configured: Org: My Organization Project: My Commerce Project Workspace: Stage 🔐 Configuring workspace credentials and services... ✔ Workspace configuration loaded ✔ OAuth server-to-server credentials already configured ✔ All required services available in organization ✔ Subscribed to: Adobe Commerce as a Cloud Service 📋 Configuring Checkout Starter Kit... Creating .env from env.dist... ✔ Select tenant (type to search) My Commerce Instance: https://<region>.api.commerce.adobe.com/<tenant-id>/graphql ✔ Commerce instance configured ✔ Enter the event prefix for your workspace: my-prefix ✔ Workspace IDs configured ✔ OAuth credentials configured ✔ Checkout Starter Kit configured 🔧 Installing Commerce Extensibility tools and agent skills... ✔ Commerce Extensibility tools installed 🎉 App setup complete! 📁 Project directory: /Users/username/projects/my-commerce-project/my-extension Next steps: 1. cd into your project directory 2. Restart your coding agent to load the Commerce Extensibility tools and skills

aio commerce extensibility app-setup

🚀 Adobe Commerce Extensibility App Setup

✔ Logged in
📁 Working directory: /Users/username/projects/my-commerce-project

✔ Which starter kit would you like to use? Checkout Starter Kit
✔ Enter a name for your project directory: my-extension
✔ Which coding agent would you like to install the skills for? Cursor

📦 Cloning Checkout Starter Kit...
   ✔ Repository cloned
   Using npm (package-lock.json found)
   ✔ Dependencies installed

📋 Current Adobe I/O Console configuration:
   Org: My Organization (1234567)
   Project: My Commerce Project (1234567890123456789)
   Workspace: Stage (9876543210987654321)
✔ Do you want to continue with this configuration? (Answer "No" to select a different org/project/workspace)
No

🔧 Selecting Adobe I/O Console org, project, and workspace...

? Select Org: My Organization
Org selected My Organization
You are currently in:
1. Org: My Organization
2. Project: <no project selected>
3. Workspace: <no workspace selected>

? Select Project: My Commerce Project
Project selected : My Commerce Project
You are currently in:
1. Org: My Organization
2. Project: My Commerce Project
3. Workspace: <no workspace selected>

? Select Workspace: Stage
Workspace selected Stage
You are currently in:
1. Org: My Organization
2. Project: My Commerce Project
3. Workspace: Stage

✅ Console configured:
   Org: My Organization
   Project: My Commerce Project
   Workspace: Stage

🔐 Configuring workspace credentials and services...
   ✔ Workspace configuration loaded
   ✔ OAuth server-to-server credentials already configured
   ✔ All required services available in organization
   ✔ Subscribed to: Adobe Commerce as a Cloud Service

📋 Configuring Checkout Starter Kit...
   Creating .env from env.dist...
✔ Select tenant (type to search) My Commerce Instance:
https://<region>.api.commerce.adobe.com/<tenant-id>/graphql
   ✔ Commerce instance configured
✔ Enter the event prefix for your workspace: my-prefix
   ✔ Workspace IDs configured
   ✔ OAuth credentials configured
   ✔ Checkout Starter Kit configured

🔧 Installing Commerce Extensibility tools and agent skills...
   ✔ Commerce Extensibility tools installed

🎉 App setup complete!

📁 Project directory: /Users/username/projects/my-commerce-project/my-extension

Next steps:
   1. cd into your project directory
   2. Restart your coding agent to load the Commerce Extensibility tools and skills

手動設定 manual-setup

次の節では、拡張性ワークスペースの各コンポーネントを手動で設定する方法について説明します。手動設定を希望する場合、または自動設定で問題が発生した場合は、次の手順に従います。

Adobe Developer Consoleの前提条件

必要なAPIと資格情報を使用して、Adobe Developer Consoleでプロジェクトを設定します。

Adobe Developer Consoleに移動します。
メールアドレスとパスワードを使用してログインします。

新しいプロジェクトの作成

Adobe Developer ConsoleでApp Builder プロジェクトを作成し、拡張機能をホストします。

Adobe Developer Consoleに移動します。
Create project from a templateをクリックします。
App Builder テンプレートを選択します。
Project Titleと App Name を入力します。
「Include Runtime」チェックボックスがマークされていることを確認します。

{width="600" modal="regular"}
Saveをクリックします。

ワークスペースへのAPIの追加

イベント管理とCommerceの統合のために、必要なAPIをステージワークスペースに追加します。

Stage ワークスペースをクリックし、各APIについて次の手順を繰り返します。

{width="600" modal="regular"}
Add Serviceをクリックし、APIを選択します。
次のいずれかのAPIを選択します。以下に示す各APIについて、このプロセスを繰り返します。
- Adobe Services フィルター：
  - I/O Management API
  - I/O Events API
- Experience Cloud フィルター：
  - Adobe I/O Events for Adobe Commerce API
Nextをクリックします。
Save configured APIをクリックします。
すべてのAPIをワークスペースに追加するまで、前の手順を繰り返します。

{width="600" modal="regular"}

Adobe I/O CLIの設定

組織、プロジェクト、ワークスペースにAdobe I/O CLIを接続します。

既存の設定をすべて消去します。

code language-bash
`aio config clear`

Adobe I/O CLIを使用してログインします。

code language-bash
`aio auth login -f`

次の各コマンドを使用して、組織、プロジェクト、ワークスペースを選択します。

code language-bash
`aio console org select`

code language-bash
`aio console project select`

code language-bash
`aio console workspace select`

Adobe I/O CLI組織プロジェクトとワークスペースの選択を示すターミナル {width="600" modal="regular"}

スターターキットの複製

次のいずれかのCommerce スターターキットリポジトリを、構築およびプロジェクトの準備に使用する拡張機能に複製します。

統合スターターキット：

git clone https://github.com/adobe/commerce-integration-starter-kit.git extension
cd extension

チェックアウトスターターキット：

git clone https://github.com/adobe/commerce-checkout-starter-kit.git extension
cd extension

統合スターターキット

.env ファイルの作成

環境設定ファイルを作成します。

code language-bash
`cp env.dist .env`

テキストエディターで.env ファイルを開き、次のOAuth資格情報を追加します。

code language-bash
`OAUTH_CLIENT_ID= OAUTH_CLIENT_SECRET= OAUTH_TECHNICAL_ACCOUNT_ID= OAUTH_TECHNICAL_ACCOUNT_EMAIL= OAUTH_ORG_ID=`

ワークスペースの「Credential details」タブをクリックして、Developer ConsoleのOAuth Server-to-Server ページからこれらの値をコピーします。

Adobe Developer Console {width="600" modal="regular"}OAuth サーバー間の資格情報ページ

Commerce設定の追加

次のCommerce インスタンスの詳細を.env ファイルに追加します。

code language-bash
`COMMERCE_BASE_URL= COMMERCE_GRAPHQL_ENDPOINT=`

これらの値を検索するには：

Commerce Cloud サービスインスタンスに移動します。
インスタンスの横にある情報アイコンをクリックします。
REST エンドポイントをCOMMERCE_BASE_URLとしてコピーします。
GraphQL エンドポイントをCOMMERCE_GRAPHQL_ENDPOINTとしてコピーします。

イベント接頭辞の設定

イベント接頭辞に一時的な値を設定します。

code language-bash
`EVENT_PREFIX=test`

ワークスペース設定のダウンロード

次のコマンドを実行して、ワークスペース設定ファイルをダウンロードします。

code language-bash
`aio console workspace download workspace.json`

ワークスペース設定ファイルをscripts ディレクトリにコピーします。

code language-bash
`cp workspace.json scripts/`

ローカルワークスペースをリモートワークスペースに接続する

ローカルプロジェクトをリモートワークスペースにリンクします。

code language-bash
`aio app use workspace.json -m`

aio アプリ使用コマンドでワークスペース接続が成功したことを示すターミナル {width="600" modal="regular"}

チェックアウトスターターキット

ローカルワークスペースをリモートワークスペースに接続する

ローカルプロジェクトをリモートワークスペースにリンクします。プロジェクトのルート（extension フォルダー）から、次を実行します。

code language-bash
`aio app use --merge`

プロンプトが表示されたら、Adobe I/O CLIの設定時に選択した組織、プロジェクト、ワークスペースを使用するオプションを選択します。これにより、デプロイとローカル開発がそのワークスペースを使用するように、ワークスペース設定がアプリに書き込まれます。

aio アプリ使用コマンドでワークスペース接続が成功したことを示すターミナル {width="600" modal="regular"}

拡張可能なAI ツールの導入

このプロセスにより、MCP設定（.<agent>/mcp.json）、スキルディレクトリ（.<agent>/skills/）が作成され、プロジェクトのルートにAGENTS.mdが追加されます。スターターキット、コーディングエージェント、パッケージマネージャーを選択するよう求められます。

次のコマンドを使用して、extension フォルダーにAI支援の開発ツールを設定します。

code language-bash
`cd extension`

code language-bash
`aio commerce extensibility tools-setup`

AI拡張ツールのセットアップコマンド出力を表示している端末 {width="600" modal="regular"}

設定が完了したら、コーディングエージェントを再起動して、新しいMCP ツールとスキルを読み込めるようにします。 Commerce App Builder ツールが、お客様の環境で使用できるようになりました。

note note

note note
NOTE
スターターキットにスキルが見つからないという警告が表示された場合、何らかの問題が発生しました。多くの場合、セットアップはスターターキットがクローンされた場所以外のフォルダーで実行されたためです。 `aio commerce extensibility tools-setup` フォルダー（スターターキットプロジェクトのルート）から`extension`を実行し、プロンプトが表示されたら適切なスターターキットを選択します。

NOTE

スターターキットにスキルが見つからないという警告が表示された場合、何らかの問題が発生しました。多くの場合、セットアップはスターターキットがクローンされた場所以外のフォルダーで実行されたためです。 aio commerce extensibility tools-setup フォルダー（スターターキットプロジェクトのルート）からextensionを実行し、プロンプトが表示されたら適切なスターターキットを選択します。

チェックアウトスターターキットを選択した状態でAI拡張性ツールのセットアップを表示している端末 {width="600" modal="regular"}

Storefrontの手動設定

この節では、評価の拡張機能チュートリアルおよびその他のストアフロントチュートリアル用にストアフロントを手動で設定する方法について説明します。

ストアフロントを自動的に設定するには、app-setupAutomated setup セクションで説明されているコマンドを実行し、AEM Boilerplate Commerce スターターキットを選択します。

前提条件

評価の拡張機能チュートリアルのストアフロントセクションを完了し、ストアで製品の評価を表示するには、次の項目が必要です。

Google Chrome - ストアフロントのテストに必要
Commerce インスタンスに接続されたストアフロントプロジェクト。ストアフロントプロジェクトがない場合は、ストアフロントを作成の手順に従います。これには、コマースデータへのリポジトリのリンクの節が含まれます。

ストアフロントリポジトリの複製

ターミナルを開き、リポジトリを複製します。

git clone https://github.com/hlxsites/aem-boilerplate-commerce.git storefront
cd storefront

依存関係のインストール

プロジェクトの依存関係をインストールします。

npm install

ストアフロント AI ツールのインストール

storefront フォルダーでAI支援の開発ツールを設定します。

ボイラープレートプロジェクトのルートから次のコマンドを実行します。このコマンドは、@adobe-commerce/commerce-extensibility-tools パッケージを開発依存関係としてインストールし、スキルファイルを担当者のスキルディレクトリにコピーし、担当者がCommerce ドキュメント検索ツールにアクセスできるようにMCP （Model Context Protocol）を設定します。

aio commerce extensibility tools-setup

このコマンドは、次の2つのプロンプトを示します。

スターターキットを選択 — AEM定型Commerceを選択します。
コーディングエージェントを選択 – サポートされているエージェントのリストからエージェントを選択します。

recommendation-more-help

76c6d489-ee5b-4411-84d1-033660e03d8c