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に完了をリクエスト

事前準備

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

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

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

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

(1)リクエストの作成

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

Method:POST

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

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

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

(2)認証情報の入力

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

Type:Basic Auth

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

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

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

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

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

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

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

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

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

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

(4)リクエストの送信

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

応答画面(サンプル)

(5)Cookieの確認

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

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

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

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

(1)リクエストの作成

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

Method:PUT

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)リクエストの作成

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

Method:POST

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

(2)認証情報の入力

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

Type:Basic 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の値を考慮する必要があります。

https://main--bacom-blog--adobecom.hlx.page/jp/blog/fragments/we-can-help

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