CEPガイド1:紹介と技術の概要

本記事は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の使い方は自由だが私には主に3つのような事例で使われる、のではないかと想定する:

  • 自分の作業をスムーズにするために自分用のエクステンションを作る。例えば繰り返さないと行けない手作業の自動化など。エキステンションを会社内にシェアすると有利。
  • お好きな技術やサービスと、CCツールが連携出来るようにする。例えばPhotoshopのパネルからTwitter、または社内サーバなどに投稿するとか。
  • 世界の色んな人の役に立ちそうなエクステンションを作れたら、販売することもあり。(有料・無料でエクステンションを配布できるアドビサービスもある、本シリーズのPart 7までご参照を。)

技術の概要

以下はCEP 5に使われる技術の全体像。各トピックの詳細については本シリーズの後のパーツをご参照ください。 CEP 5のHTMLパネルに対応するCCツールは現時点で8つ: Photoshop、Illustrator、Flash Pro、Premiere Pro、After Effects、Prelude、Indesign、InCopy。 エクステンションの設計は割とシンプル。主なパーツは:

  • タイトルなどのメタデータを宣言する manifest.xml
  • エクステンションのUIとなるHTMLソース
  • Node.jsのモジュール(npm式)
  • CCツールに実行されるスクリプト
  • その他アセット(パネルのアイコン、UIで使われる画像など)

ぐらいです。最低ではmanifest.xmlindex.html のみで行ける。

エクステンションのUI(カスタムパネル)を表示するに、CEP 5が組み込み用Chromium(CEF)を利用する。なので基本的にChromeと変わらない環境である。 Node.jsの対応には、CEP 5に対応する各ツールがNode.jsを組み込む。そのため、Node.jsがマシンにインストールされてなくてもエクステンションの開発ができる。(npmモジュールの取得のためにはお勧めするが)

CCツールとの連携は、やり方が共通だがツール側のAPIは原則、ツール毎に変わる。例えば、PhotoshopもFlashにも対応するエクステンションを作ろうとすれば、ツール側のスクリプトを実行させるAPIは一つだが、ツール側に実行されるスクリプトはExtendScriptJSFLの二種類となる。 デバッグはブラウザ向けの開発と同じく、「要素の検証」のようなコンソールで出来る。その詳細については本シリーズ Part 3まで。

まとめ

Web技術だけでアドビのツールを自分用にカスタマイズするのがありえない話に聞こえるが、触ってみると意外に楽しいし、技術的には難しくない。自分の作業や会社の作業を改善出来るので、ちょっと把握しておくと有効なのではと私は思う。 では次が技術の詳細について、Part 2:開発の初め方をご参照ください。