チュートリアルの前提条件
このページでは、Adobe Commerce as a Cloud Service 評価の拡張チュートリアル および 発送方法の拡張チュートリアル など、 のチュートリアルの前提条件と設定手順を示します。
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 ランタイム 、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 -
Cursor (推奨)などの AI を利用した IDE のダウンロード、Claude Code、Gemini CLI、Copilot などの他の IDE もサポートされていますが、チュートリアルのプロンプトやその他の手順の変更が必要になる場合があります。
Adobe Developer Consoleの前提条件
- Adobe Developer Console に移動します。
- メールとパスワードを使用してログインします。
新規プロジェクトの作成
-
Adobe Developer Console に移動します。
-
テンプレートからプロジェクトを作成 をクリックします。
-
App Builder テンプレートを選択します。
-
プロジェクトタイトル および アプリ名 を入力します。
-
「Include Runtime」チェックボックスがオンになっていることを確認します。
{width="600" modal="regular"}
-
保存 をクリックします。
ワークスペースへの API の追加
-
ステージング ワークスペースをクリックし、各 API に対して次の手順を繰り返します。
{width="600" modal="regular"}
-
サービスを追加 をクリックし、「API」を選択します。
-
次のいずれかの API を選択します。 以下に示す各 API に対して、このプロセスを繰り返す必要があります。
-
Adobe サービス フィルター:
- I/O Management API
- I/O イベント API
-
Experience Cloud フィルター:
- Adobe Commerce用Adobe I/O Events API
-
-
次へ をクリックします。
-
「設定済み API を保存」をクリックします。
-
すべての API がワークスペースに追加されるまで、前の手順を繰り返します。
{width="600" modal="regular"}
Adobe I/O CLI の設定
-
既存の設定を消去します。
code language-bash aio config clearAdobe I/O CLI を使用してログイン:
code language-bash aio auth login -f -
次の各コマンドを使用して、組織、プロジェクト、ワークスペースを選択します。
code language-bash aio console org selectcode language-bash aio console project selectcode language-bash aio console workspace select {width="600" modal="regular"}
スターターキットのクローンを作成
構築している拡張機能に対して、次のCommerce スターターキットリポジトリーの 1 つを複製し、プロジェクトを準備します。
統合スターターキット:
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 |
|---|
|
.env ファイルをテキストエディターで開き、次の OAuth 資格情報を追加します。
| code language-shell-session |
|---|
|
これらの値は、ワークスペースの「Credential details」タブをクリックして、Developer Console の OAuth Server-to-Server ページからコピーできます。
Commerce設定を追加
.env ファイルに次のCommerce インスタンスの詳細を追加します。
| code language-shell-session |
|---|
|
これらの値を検索するには:
- Commerce Cloud サービスインスタンス に移動します。
- インスタンスの横にある「情報」アイコンをクリックします。
- REST エンドポイントを
COMMERCE_BASE_URLとしてコピーします。 - GraphQL エンドポイントを
COMMERCE_GRAPHQL_ENDPOINTとしてコピーします。
イベントのプレフィックスを設定
イベントプレフィックスに一時的な値を設定します。
| code language-shell-session |
|---|
|
ワークスペース設定のダウンロード
次のコマンドを実行して、ワークスペース設定ファイルをダウンロードします。
| code language-bash |
|---|
|
ワークスペース設定ファイルを scripts ディレクトリにコピーします。
| code language-bash |
|---|
|
ローカルワークスペースのリモートワークスペースへの接続
ローカルプロジェクトをリモートワークスペースにリンクします。
| code language-bash |
|---|
|
ローカルワークスペースのリモートワークスペースへの接続
ローカルプロジェクトをリモートワークスペースにリンクします。 プロジェクトルート(extension フォルダー)から、次を実行します。
| code language-bash |
|---|
|
プロンプトが表示されたら、Adobe I/O CLI の設定時に選択した組織、プロジェクト、ワークスペースを使用するオプションを選択します。 これにより、ワークスペース設定がアプリに書き込まれ、デプロイとローカル開発でそのワークスペースが使用されるようになります。
拡張 AI ツールのインストール
このプロセスにより、MCP 設定(.<agent>/mcp.json)、スキル ディレクトリ(.<agent>/skills/)が作成され、AGENTS.md がプロジェクト ルートに追加されます。 スターターキット、コーディングエージェント、パッケージマネージャーを選択するように求められます。
-
次のコマンドを使用して、
extensionフォルダー内に AI 支援開発ツールを設定します。code language-bash cd extensioncode language-bash aio commerce extensibility tools-setup {width="600" modal="regular"}
-
セットアップが完了したら、コーディング エージェントを再起動して、新しい MCP ツールとスキルをロードできるようにします。 これで、お使いの環境でCommerce App Builder ツールを使用できるようになりました。
note note NOTE スターターキットのスキルが見つからないという警告が表示された場合は、問題が発生しました。多くの場合、セットアップがスターターキットのクローンを作成したフォルダー以外で実行されていることが原因です。 aio commerce extensibility tools-setupフォルダー(スターターキットプロジェクトルート)からextensionを実行し、プロンプトが表示されたら適切なスターターキットを選択します。 {width="600" modal="regular"}