Adobe Creative Cloud Libraries APIの中身（ログインとライラブラリー一覧取得）
何度か記事を載せてきたCreative Cloud Librariesですが今回具体的にどのように動いているか触れたいと思います。
そもそも何ができるのか
サーバーサイドのコードからCreative Cloud Librariesのクラウドのドキュメントにアクセスできます。具体的にはクラウド上のドキュメンをダウンロードしたり逆に画像データのアップデート、ドキュメントの検索等。従来のExtendScript、もしくはUXP、CEPではCreative Cloud Librariesのクラウドにアクセスする方法自体ありませんでしたがこのAPIでAdobeのサーバーにアクセスすればクラウド上に保存されているドキュメントにアクセスできるというわけです。但しOAuth認証を通じて各ユーザーにアクセスさせるのでセキュリティは厳しめです。前回の記事でも触れた通りdeveloperとして登録してAPIキーを取得が最初に必要です。
APIアクセスの仕組み
APIのアクセスはサーバーサイドからAdobeのサーバーにリクエストを投げてそれに応じてレスポンスが返ってくる、という風になっています。前回紹介したサンプルではローカルにサーバーを立ててクライアントサイドからユーザーの投げたリクエストに沿ってAdobeのサーバーにリクエストを投げつつレスポンスが返ってきたらそれをクライアントサイドに反映させる、という形になっています。基本のアクセスのやり方は前回の記事を参考にしてもらって今回は具体的にどんな風にコードが動いているか大まかに解説します。今回はAmanda Huang氏のサンプルコードを参照しながら解説します。また、それとは別にNext.jsで実装したサンプルをGitHubにも上げています。
OAuth認証
まずはユーザーがCreative Cloud Librariesにアクセスするためにログイン前ならログインの実行を求めてログイン後ならクラウド上のライブラリーを表示するようなよくあるページをindexページに実装します。Amanda Huang氏のサンプルコードですと以下のようになっています。
OAuth認証成功後はaccessToken変数にAdobeのサーバーから発行されるAPI Tokenを代入するのですが取得前の場合はエラーを投げてユーザーにログインを求めて既にログインしている場合はライブラリーのデータ一覧を取得してクライアントサイドに投げるようになっています。
ログインの実行ですがこれはAdobeの特定のサイトに直接ユーザーをアクセスさせるようredirectで指定のURLに飛ばします。この時のURLですが開発者のAPIキーをクエリパラメータに渡します。その他ベースのurl等はAmanda Huang氏のサンプルコードを参照してください。ログインが成功するとAdobeの認証ページからproject画面から登録したcallbackURLに自動的に飛ばされます。こ以下cacllback先の関数です。
API Token発行後（login後）はアクセスしたユーザーのアカウントに応じたライブラリーの情報がAdobeから返されるようになります。この辺のサーバーサイドに関してはAmanda Huang氏のサンプルコードですとserverディレクトリーのroute.jsのコードがそれにあたります。API Token取得後はIndexページにアクセスするとAdobeのサーバーから返ってきたレスポンス(response)のdata.librariesプロパティからライブラリーの情報を取得できます。具体的なオブジェクトの内容は公式のドキュメントのRetrieve libraries for a userの項目に載っています。ライブラリーの名前、idといった主な情報は取得できますここでライブラリー内の画像やファイルといった情報が無いのに気づくと思います。
Libraries Elements
クラウド上にある画像、ファイルを包括するライブラリー(library)に対してその中のファイルの事をエレメント(element)と公式では定義しています。このエレメントを取得するためには各ライブラリーのidからライブラリー内の画像を取得、つまりライブラリー単位のみでエレメントを取得できるようになっています。さらにこのエレメントですが取得できるタイプがdefault,details,representationsと分かれています。公式ドキュメントを見るとわかりますがselectorのクエリパラメーターに上記のパラメーターを渡せます。勿論何も渡さなかった場合はdefaultがデフォルトになっていますAmanda Huang氏のコードですと以下の部分になります。
ベースのurlとライブラリーのidからエレメントの情報を取得できます。しかしエレメントの情報を見ると画像ファイルの幅、高さ、画像の種類といった情報がわかりません。なぜかというとこれらの情報はrepresentationsプロパティ内に入っておりこの項目自体クエリパラメーターにrepresentationsを渡さないと返してくれないからです。またrepresentations内のstorage_hrefのurlがファイルをダウンロードする時に必要になったりします。というわけで基本的なライブラリーとエレメントの扱いに触れました。次回気が向いたらもう少し細かいとこまで触れます。