Adobe Experience Manager as a Cloud ServiceでAPIを使ってアセットをアップロードする(Tech Blog)

ヒーロー画像/宇宙飛行士ごっこをしている少年達

AEM Assets as a Cloud Serviceは画像処理がアセットマイクロサービスに移行されました。今回の投稿ではHTTP APIを使ったアセットのアップロードについて説明したいと思います。

AEM as a Cloud Serviceでは、画像処理がAssetマイクロサービスに移行されました。バイナリファイルはAEMのJVMを介したストリーミングでアップロードされるのではなく、Blobストレージに直接アップロードされます。

この投稿では、HTTP APIを使ったアセットのアップロードについて説明したいと思います。クライアントアプリケーションとしてPostman使用して、以下の手順(1~3)を確認していきます。

図:アップロード処理のフロー/①AEMにアップロードを要求、②署名されたURLへアップロード、③AEMに完了をリクエスト

  • アセットアップロードHTTP APIはクラウドサービスでのみ動作し、ローカルSDKでは動作しないのでご注意ください。
  • APIによるアップロード作業が簡単に始められる様に、Adobeではaem-uploadツールを提供しています。ツールはコマンドラインの実行ファイルとして使用したり、Node.jsモジュールとして使用することが可能です。

事前準備

作業を始める前に、アセットをアップロードするのに十分な権限を持つユーザーとアップロード用のフォルダーを作成します。今回のデモでは、説明を簡略化するためにBasic認証を使用しますが、実際の利用においてはサービストークンベースの認証望ましいです。今回のデモでは「アセット」の直下に「sample」というフォルダーを作成しました。

AEM Assetsフォルダー配下に作成された、「sample」フォルダー

手順1.AEMへのアップロード要求の作成

この一連のフローの最初のステップは、バイナリのアップロード開始をAEMに伝えることです。これを行うためには認証情報と、アップロードするアセットの詳細を提供する必要があります。

(1)リクエストの作成

以下の内容で新しいリクエストを作成します。

MethodPOST

URI:https://[ホスト名]/content/dam/[フォルダー名].initiateUpload.json

今回はアセットフォルダーの直下に「sample」というフォルダーを作成したので、/content/dam/sample.initiateUpload.jsonとなります。

※ APIの詳細についてはAdobe Experience Leagueの「Adobe Experience Manager Assets デベロッパー向けの使用例、API、参考資料」ご覧ください。

(2)認証情報の入力

「Authorization」タブを選択して認証情報を入力します。

TypeBasic Auth

Username事前準備で登録したユーザー名を入力

Password準備準備で登録したパスワードを入力

URIと認証情報の設定画面(サンプル)

(3)ファイル情報の入力

次にアップロードするファイルの詳細を設定します。今回はこちらのファイルをアップロードします。

対象ファイルのプロパティ画面(サンプル)

「Body」タブから「x-www-form-urlencoded」を選択して、以下の内容を入力します。

fileName画像ファイル名(sample.jpeg)

fileSize画像のサイズをバイト単位で入力します(571842)

Request Bodyの設定画面(サンプル)

(4)リクエストの送信

リクエストを保存して送信します。処理が成功すると応答が返って来るので、以下の項目を記録しておきます(手順2、3で使用します。)。

  • file
  • uploadURIs
  • mimeType
  • uploadToken
  • completeURI

応答画面(サンプル)

(5)Cookieの確認

AEMからの応答にはCookieが含まれています。AEMへのすべての該当する呼び出しについては、リクエストにアフィニティCookieを設定する必要があります。これによりクラスター内の同じノードがリクエストを処理するように、AEMに伝えることができます。

アフィニティCookieの応答画面(サンプル)

手順2.Blob ストアへのバイナリのアップロード

前章でAEMから応答された情報には、署名されたアップロード用URLのリストが含まれており、これを使ってBlobストアへ直接ファイルをアップロードします。

(1)リクエストの作成

以下の内容で新しいリクエストを作成します。

MethodPUT

URI手順1で返されたuploadURIsの値を入力

URIの設定画面(サンプル)

(2)ファイルの選択

「Body」タブから「binary」を選択して、画像ファイルを登録します。

Request Bodyの設定画面(サンプル)

(3)リクエストの送信

リクエストを保存して送信します。処理が成功するとStatus欄に結果(201 Created)が表示されます。 応答ステータスの表示(サンプル)

手順3.AEMへ 完了リクエストを送信する

アップロードは完了しましたが、まだAEM内にアセットは表示されていません。アップロードを完了するためには、バイナリがBlobストアにアップロードされた後に、AEMに対して処理を完了するためのリクエストを行う必要があります。この最終的なAPIコールが完了するまで、AEM内にアセットは表示されません。

この呼び出しには、手順1の応答で得られた情報がいくつか必要になります(completeURI、uploadToken、fileName)。

(1)リクエストの作成

以下の内容で新しいリクエストを作成します。

MethodPOST

URIホスト名に加えて、手順1で返されたcompleteURIの値(このサンプル画像では、https://[ホスト名]/content/dam/sample.completeUpload.json)を入力します。

(2)認証情報の入力

「Authorization」タブを選択して、手順1と同じ認証情報を入力します。

TypeBasic Auth

Username事前準備で登録したユーザー名を入力

Password事前準備で登録したパスワードを入力

URIと認証情報の設定画面(サンプル)

(3)ファイル情報の入力

「Body」タブから「x-www-form-urlencoded」を選択して、以下の内容を入力します。

uploadToken手順1で返されたuploadTokenの

fileName手順1で返されたfileNameの値(sample.jpeg)

mimeType手順1で返されたmimeTypeの値(image/jpeg)

Request Bodyの設定画面(サンプル)

(4)Cookieの確認

画面右上の「Cookies」をクリックして、手順1で返されたアフィニティCookieが登録されていることを確認します。

Cookieの設定画面(サンプル)

(5)リクエストの送信

リクエストを保存して送信します。処理が成功するとStatus欄に結果(200 OK)が表示されます。

応答ステータスの表示(サンプル)

アップロードされたアセットをAEMで表示

Web画面からAEM Assetsのフォルダーを開いて、対象の画像ファイルがアップロードされていることを確認します。AEMはリクエストシーケンスの最終ステップが完了すると、後続処理ワークフロー(オプション)を実行します。

AEM Assetsにアップロードされた画像ファイル(サンプル)

パーツ分割のユースケース

今回のデモでは一般的な単一の画像ファイルをアップロードしました。サイズの大きいファイルや複数のファイルをアップロードする場合は、バイナリのアップロードを複数のリクエストに分割する必要があります。各パートでは、最初のアップロード要求時にAEMから返されるminPartSizeと、maxPartSizeの値を考慮する必要があります。

Adobeがお手伝いします。

Adobe Experience MangerはクラウドネイティブのハイブリッドCMSで、再利用可能なコンポーネント、レイアウト、テンプレートを使用し、コンテンツを素早く作成する機能を、IT担当者やマーケティング担当者に提供します。私たちがお客様のビジネス変革をどの様にお手伝いしているのかご紹介します。

お問合せ

この記事は2021年6月に公開されたIntroduction to AEM as a Cloud Service Asset Upload HTTP API抄訳したものです。

アドビがお客様のビジネスにどのように役立つのかをご案内します。

導入のご相談