ドキュメント Experience Platform 1 つのAdobe技術チュートリアル

1.6.3 外部 DAM アプリケーションの作成とデプロイ

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

初心者
開発者

1.6.3.1 サンプルアプリファイルのダウンロード

https://github.com/woutervangeluwe/genstudio-external-dam-app に移動します。「コード」をクリックし、「ZIP をダウンロード」を選択します。

内線 DAM

zip ファイルをデスクトップに解凍します。

内線 DAM

1.6.3.2 Adobe Developer コマンドラインインターフェイスの設定

genstudio-external-dam-app-main フォルダーを右クリックし、「フォルダーに新しいターミナル」を選択します。

内線 DAM

この画像が表示されます。コマンド aio login を入力します。このコマンドは、ブラウザにリダイレクトし、ログインすることを期待します。

内線 DAM

ログインに成功すると、ブラウザーにこれが表示されます。

内線 DAM

その後、ブラウザーはターミナルウィンドウにリダイレクトします。 ログインに成功しました というメッセージと、ブラウザーから返される長いトークンが表示されます。

内線 DAM

次の手順では、外部 DAM アプリに使用するインスタンスとAdobe IO プロジェクトを設定します。

これを行うには、以前に設定したAdobe IO プロジェクトからファイルをダウンロードする必要があります。

https://developer.adobe.com/console/home に移動し、以前に作成した --aepUserLdap-- GSPeM EXT という名前のプロジェクトを開きます。 実稼動 ワークスペースを開きます。

内線 DAM

すべてダウンロード をクリックします。これにより、JSON ファイルがダウンロードされます。

内線 DAM

ダウンロード ディレクトリから外部 DAM アプリのルートディレクトリに JSON ファイルをコピーします。

内線 DAM

ターミナルウィンドウに戻ります。コマンド aio app use XXX-YYY-Production.json を入力します。

NOTE

上記のコマンドでファイルの名前をファイル名と一致するように変更する必要があります。

コマンドが実行されると、外部 DAM アプリが、以前に作成したApp Builderを使用してAdobe I/O プロジェクトに接続されるようになります。

内線 DAM

GenStudio拡張機能SDKのインストール 1.6.3.3

次に、GenStudio拡張機能SDK をインストールする必要があります。 SDKについて詳しくは、https://github.com/adobe/genstudio-extensibility-sdk を参照してください。

SDKをインストールするには、ターミナルウィンドウで次のコマンドを実行します。

npm install @adobe/genstudio-extensibility-sdk

内線 DAM

数分後、SDKがインストールされます。

内線 DAM

1.6.3.4 Visual Studio Code で外部 DAM アプリを確認する

Visual Studio Code を開きます。 開く… をクリックしてフォルダーを開きます。

内線 DAM

前にダウンロードしたアプリを含んだフォルダー genstudio-external-dam-app-main を選択します。「開く」をクリックします。

内線 DAM

.env ファイルをクリックして開きます。

内線 DAM

.env ファイルは、前の手順で実行したコマンド aio app use ードによって作成され、App Builderを使用してAdobe I/O プロジェクトに接続するために必要な情報が含まれています。

内線 DAM

外部 DAM アプリが、以前作成したAWS S3 バケットに接続できるように、次の詳細を .env ファイルに追加する必要があります。

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=
AWS_BUCKET_NAME=

フィールド AWS_ACCESS_KEY_ID と AWS_SECRET_ACCESS_KEY は、前の演習で IAM ユーザーを作成した後で使用できます。あなたはそれらを書き留めるように頼まれました、あなたは今、値をコピーすることができます。

ETL

このフィールド AWS_REGION は、AWS S3 ホームビューの、バケット名の横から取得できます。この例では、領域は us-west-2 です。

ETL

フィールド AWS_BUCKET_NAME は --aepUserLdap---gspem-dam にする必要があります。

この情報を使用すると、これらの各変数の値を更新できます。

AWS_ACCESS_KEY_ID=XXX
AWS_SECRET_ACCESS_KEY=YYY
AWS_REGION=us-west-2
AWS_BUCKET_NAME=--aepUserLdap---gspem-dam

このテキストを .env ファイルに貼り付ける必要があります。忘れずに変更を保存してください。

内線 DAM

次に、ターミナルウィンドウに戻ります。次のコマンドを実行します。

export $(grep -v '^#' .env | xargs)

内線 DAM

最後に、外部 DAM アプリと他の統合機能を区別できるように、GenStudio for Performance Marketing内に表示されるラベルを変更する必要があります。これを行うには、エクスプローラーで src/genstudiopem/web-src/src にドリルダウンして、ファイル Constants.ts を開きます。

行 14 をに変更する必要があります。

export const extensionLabel: string = "--aepUserLdap-- - External S3 DAM";

忘れずに変更を保存してください。

内線 DAM