rarilog

主にゲーム制作に関することを書いていきます

2014/08/23 : Photoshop

開発入門者向け Photoshop 機能拡張方式まとめ

Photoshop における 4 つの機能拡張方式について、簡単にまとめてみました。

具体的な開発方法については触れていませんが、各方式の概要だけでも掴んでおくと、情報収集の際に混乱せずに済むかと思います。

1. スクリプト

処理を記述したスクリプトファイルを実行するという、最も単純かつ基本的な方式です。

記述言語 ExtendScript (= JavaScript), AppleScript, VBScript のいずれか
開発で使うツール Adobe ExtendScript Toolkit (ExtendScript で記述する場合)
ファイルの配置場所 《Photoshop のディレクトリ》/Presets/Scripts
実行方法 メニュー → ファイル → スクリプト → 《スクリプト名》

記述言語は 3 つの中から選べますが、ExtendScript 一択だと考えて差し支えないでしょう。ExtendScript には以下の利点があります。

  • Mac と Windows の両方で実行できる
  • 専用の開発ツール (Adobe ExtendScript Toolkit) がある
  • 他の機能拡張方式において、ホストツールの API を呼び出すときに使える唯一の言語である
  • ドキュメントや情報が多い

開発ツールである Adobe ExtendScript Toolkit は、Creative Cloud Desktop からインストールできます。

参考

2. エクステンション

パネル(ウィンドウ)を伴う機能拡張です。カスタムパネルと言った方がわかりやすいかもしれません。

記述言語 HTML5, (CSS3,) JavaScript (Node.js)
開発で使うツール Adobe Extension Builder
ファイルの配置場所 ~/Library/Application Support/Adobe/CEPServiceManager4/extensions
実行方法 メニュー → ウィンドウ → エクステンション → 《エクステンション名》

エクステンションは、多くの Adobe 製品で採用されている CEP (Common Extensibility Platform) と呼ばれるソフトウェアコンポーネント上で動作します。CEP には、UI の描画を行うための CEF (Chromium Embedded Framework) や、Node.js が組み込まれています。

要するに、パネル内部はモダンブラウザと同等であり、UI は HTML5 + CSS3、ロジックは JavaScript (Node.js) で記述できる1ため、Web 開発者であれば容易にエクステンションを作成できるというわけです。おまけに、多くの Adobe 製品がこの仕組みを採用しているので、複数の製品に対応したエクステンションを作ることも容易にできます。

CEP においてホストツール (Photoshop) の API (ExtendScript) を呼び出すためには、CSInterface.js という JavaScript ライブラリを利用する必要があります。CEP の JavaScript VM とホストツールの JavaScript VM は別物であるため、このような仲介役が必要となります。

開発ツールとして、Eclipse 用プラグインである Adobe Extension Builder が用意されていますが、これを使わなくても開発は可能です。

参考

3. Generator プラグイン

Generator(Photoshop に組み込まれた Node.js サーバー)に接続する Node.js アプリケーションのことを、Generator プラグインと呼びます。

記述言語 JavaScript (Node.js)
開発で使うツール node, npm
ファイルの配置場所 《Photoshop のディレクトリ》/Plug-ins/Generator
実行方法 メニュー → ファイル → 生成 → 《Generator プラグイン名》

開発は Generator Core ライブラリを利用して行います。立ち位置的にはエクステンションにおける CSInterface.js と似ていて、異なる JavaScript VM を有する Generator - Photoshop 間の仲介を行うのが主な役割ですが、同時に多くの高機能なメソッドも提供しています。

代表的な Generator プラグインとしては、Photoshop に予め入っている Image Asset Generation Plug-in for Generator 2が挙げられます。レイヤー名に特定のサフィックスを付けると自動的に画像として書き出してくれるというもので、カンプから画像アセットを個別取得する目的で利用されます。

参考

4. プラグイン

拡張子 .plugin のファイルとして提供されるものです。

記述言語 C
開発で使うツール Adobe Photoshop SDK
ファイルの配置場所 《Photoshop のディレクトリ》/Plug-ins
実行方法 -

Adobe Photoshop SDK を利用して C 言語で開発します。正直あんまり調べていないので、それ以上のことはよくわかっていません…。

参考
  1. 従来は Flash / ActionScript による開発も行えましたが、これは廃止予定で、Photoshop CC 2014 では既に廃止されています (CEP-Resources/README.md at master · Adobe-CEP/CEP-Resources)。

  2. 恐らく Adobe が こんな記事 を書いてしまったのが原因で、『Generator』=『画像書き出し機能』だと思っている人が多いですが、本当はそうではありません。