Just Diary

Adobe CCLibraries API クラウドにアクセスする

AdobeAPI

*2022年 1月 11日developer consoleのredirect URIフォームでエラーが出た場合の対処方法を追記

Adobeのソフトウェアにクラウドの環境が用意されてから既に結構時間も経ちました。ドキュメントを保存する時もローカルかクラウドか求められて段々Adobeも押してる感があります。実はExtendScriptでもいつの間にかクラウド関係のプロパティーがドキュメントオブジェクトに追加されていたりします。以下Illustratorの例です。

一応クラウド上のパスも取得できるのですがサーバーに実際にアクセスできる訳ではないようです。Creative Cloud Librariesにアクセスするためには直接AdobeのサーバーとやりとりするためのAPIが公開されているので今回Adobe Tech BlogのNode.js + OAuth 2.0 Integration with Creative Cloud Libraries APIに沿ってAPIとやりとりしてみます。但し私の記事ではざっくりAPIが動くところを見てどのようにlibrariesにアクセスするか掴むことだけを目的とするのでコードは書かずに全てサンプルのGitHubからコピーして動かしたいと思います。それでも前提として以下の基本的な知識が必要になります。

• Node.js

• Git Hub

• terminal

環境はMacOSとなります。

APIの概要

詳しい事はAmanda Huang氏が詳しくblogで書いていますがAPIへのアクセスはAuth認証を通じてユーザーにログインしてもらい認証に成功したらアクセスしたユーザーのライブラリーにwebアプリを通じてアクセスできるというものです。なおやり取りはローカルでサーバーを立て、サーバーサイドで行いますがhttpsによる暗号化された通信でしかやり取りできないので事前にAdobeが開発者個々に発行するAPI keyが必要となります。

API keyを取得する

専用のAPI keyを取得するために開発者としてAdobeにDeveloper accountを登録します。確かAdobeのソフトウェアのアカウントとまた別に登録する必要があったと思いますが（うろ覚え）登録自体すぐに終わると思います。こちらで登録してください。詳しくはこちらも参照しつつとりあえず以下のような画面が出るまで頑張ってください。

この画面までいったらcreate new projectで新しくprojectを作ってください。add apiを選択してCreative Cloud Librariesを選択。その後default redirect URIとredirect URI patternのテキストフォームがあるのでhttps://localhost:3000/callbackと記入します。
*注意　default redirect URIにhttps://localhost:3000/callbackと打ち込んでinvalid URIと表示されたらredirect URIフォームにはhttps://localhost.comと打ち込んでみてください。（redirect URI patternはhttps://localhost:3000/callback）
成功したら以下のような画面が表示されます。ぼかし部分にAPI keyが表示されます。

GitHubコードのコピー

Amanda Huang氏のサンプルコードがGitHubにあります。こちらのプロジェクトからGit cloneしてコピーしましょう。コピー後にoauth-node-cclibsのディレクトリーにターミナル上でcdで移動。その後npm i でmodulesをインストールします。

証明書の発行,API keyの用意

まず.env.exampleというファイルがあります中身はAPI_KEYの変数か何かに代入する前のファイルに見えると思います。これはOAuth認証に必要な環境変数としてAPI keyを環境変数としてこのように用意するというサンプルです。ここにAdobe developer consoleから登録したAPI keyを書き込むわけですがまずこのファイル自身の名前を.env.exampleから.envにリネームします。ちなみにサンプルではこの.envファイル自身が.gitignoreの対象になっているはずです。これはAPI key自体外部に漏れてはいけないファイルであるためにGitHubに上げないようになっているのでしょう。必ず第三者に漏れないようにしてください。以下のようにdeveloper console画面のぼかしで隠した部分のフォームからコピーして以下のように貼り付けてください。

次にhttpsをローカルサーバーで立ち上げるためにmkcertをインストールします。XcodeやらHomebrewのバージョンが古いとエラーが起きたりします。インストールが終わったら以下のコマンドを実行します。

実行すると証明書のデータがlocalhost-key.pemとlocalhost.pemと二つほど生成されます。.envファイルも証明書のファイルも中のコードで読み込まれるようになっています。ファイル名を誤って変えたりすると読み込まれないので注意してください。ここまでの作業が終わると以下のようなファイル構成になります。

この後ターミナルでnpm startと実行するとサーバーが立ち上がります。立ち上がったらhttps://localhost:3000/（httpではなくhttpsなので注意）にアクセスします。成功すれば以下のような画面がブラウザーで表示されます。

loginを押すとAdobeのlogin画面に飛びます。自身のemailとパスワードを打ち込んでログインするとアカウントのライブラリーのリストが表示されます。OAuth認証でアクセスtokenを発行してもらいそのtokenを用いてAPIにアクセスするとアカウントのライブラリー情報をAdobeのサーバーから取得できるというものです。詳しいアクセスの方法は公式のドキュメントで確認できます。今回コードの内容はすっ飛ばしましたが中身としてはExpressでサーバーを立ち上げてテンプレートエンジンのejsを使ってhtmlを生成(viewフォルダーの中のejsファイルがそれに当たる)。APIの通信はaxiosを使用しています。この辺のことにもっと詳しく知りたい、もしくは触ってみたいと思ったらExpress,Node,テンプレートエンジン,OAuth認証等で調べてみてください。私よりはるかに詳しい方が解説してくれているサイトが他にいくらでもあるでしょう。