本記事はCEPスーパーメガガイドのPart 1です。
CEP 5の概要
2014年6月のCreative Cloudアップデートで、アドビツールを拡張するフレームワークが大きくアップデートされた。「CEP 5」（Common Extensibility Platform・共通拡張プラットフォーム）と言い、多くのアドビツールが共通に対応する拡張機能を作れるようになった。 そしてCEP 5の特徴は、拡張機能の開発がWeb技術を使うところ。UIは標準HTML5となり、バックエンドではNode.jsを使える。NodeのコアAPI以外にも幅広いモジュールのエコシステムがあるので、人気なWebサービスの対応から外部デバイスとの連携まで、CCツールのエクステンションから楽に出来ることになる。
使用事例
プロとして使うツールを自分用にカスタマイズ出来ることは大事。CEP 5の使い方は自由だが私には主に３つのような事例で使われる、のではないかと想定する：
- 自分の作業をスムーズにするために自分用のエクステンションを作る。例えば繰り返さないと行けない手作業の自動化など。エキステンションを会社内にシェアすると有利。
- お好きな技術やサービスと、CCツールが連携出来るようにする。例えばPhotoshopのパネルからTwitter、または社内サーバなどに投稿するとか。
- 世界の色んな人の役に立ちそうなエクステンションを作れたら、販売することもあり。（有料・無料でエクステンションを配布できるアドビサービスもある、本シリーズのPart 7までご参照を。）
技術の概要
以下はCEP 5に使われる技術の全体像。各トピックの詳細については本シリーズの後のパーツをご参照ください。 CEP 5のHTMLパネルに対応するCCツールは現時点で８つ： Photoshop、Illustrator、Flash Pro、Premiere Pro、After Effects、Prelude、Indesign、InCopy。 エクステンションの設計は割とシンプル。主なパーツは：
- タイトルなどのメタデータを宣言する manifest.xml
- エクステンションのUIとなるHTMLソース
- Node.jsのモジュール（npm式）
- CCツールに実行されるスクリプト
- その他アセット（パネルのアイコン、UIで使われる画像など）
ぐらいです。最低ではmanifest.xml とindex.html のみで行ける。
エクステンションのUI（カスタムパネル）を表示するに、CEP 5が組み込み用Chromium（CEF）を利用する。なので基本的にChromeと変わらない環境である。 Node.jsの対応には、CEP 5に対応する各ツールがNode.jsを組み込む。そのため、Node.jsがマシンにインストールされてなくてもエクステンションの開発ができる。（npmモジュールの取得のためにはお勧めするが）
CCツールとの連携は、やり方が共通だがツール側のAPIは原則、ツール毎に変わる。例えば、PhotoshopもFlashにも対応するエクステンションを作ろうとすれば、ツール側のスクリプトを実行させるAPIは一つだが、ツール側に実行されるスクリプトはExtendScriptとJSFLの二種類となる。 デバッグはブラウザ向けの開発と同じく、「要素の検証」のようなコンソールで出来る。その詳細については本シリーズ Part 3まで。
まとめ
Web技術だけでアドビのツールを自分用にカスタマイズするのがありえない話に聞こえるが、触ってみると意外に楽しいし、技術的には難しくない。自分の作業や会社の作業を改善出来るので、ちょっと把握しておくと有効なのではと私は思う。 では次が技術の詳細について、Part 2：開発の初め方をご参照ください。