Photoshopを始めとしたAdobe製品群はJSX1(ExtendScript)というJavaScriptで操作することができる。これをTypeScriptで書いてみる。
ExtendScriptをTypeScriptで書くメリット
- 型定義ファイル＋IDEによってゴリゴリ補完が効く
- PDFのリファレンスを読むより、補完に頼った方がラク
- TypeScriptの便利な機能が使える
PhotoshopのJavaScript APIはいわゆる普通のJavaScriptとは異なり、情報も少ない。TypeScriptはこういった情報が少なく調べにくいAPIを持つものに対して、型定義ファイルさえあれば無類の力を発揮する。
また、Template Strings や Enum など、便利な機能も使う事ができる。素のJSで書くよりも格段に生産性が上がる。
導入方法
1. 型定義ファイルから補完が効くエディタを用意する
VisualStudio Code辺りが無難。
Adobe系で揃えるならBrackets/Adobe Edge Codeでも可。
もしTypeScriptのコンパイラをインストールしていないのであれば、一緒にインストールされるのでVSCはおすすめ。
型定義ファイルから補完を効かせられないエディタの場合、意味が無いので乗り換える。
2. 型定義ファイルphotoshop.d.tsを導入する
プログラマ向け：npmから
photoshop.d.tsはDifinitelyTypedに無い (2015-07-07現在)。代わりにnpmでインストールする。
npm i photoshop.d.ts -D
デザイナー・テクニカルアーティスト向け: DLしてくる
githubというソースコード共有サービスの以下にあるファイルを全部DLする。
なんとかかんとか.d.tsというファイルを全部DLし、これから書くスクリプトの近くのフォルダにまとめておくと良い。
3. 定義ファイルへのパスを通す
ソース中
dist/cc/ 以下にある ps.d.tsにリファレンスパスを通すだけで良い。
///<reference path="./node_modules/photoshop.d.ts/dist/cc/ps.d.ts"/>
tsconfig.json
"files":内でps.d.tsを指定しておく。
4. tsファイルをコンパイル
tsc target.ts -t "ES3" -noLib
コンパイルオプションとしては-target "ES3",-noLibにする必要がある。その他はお好みで。
既存のExtendScriptがある場合、拡張子をとりあえず.tsに変更し、リファレンスパスを書いておくだけでも補完が効くようになる。
コンパイル後、tsファイルと同じ名前の.jsファイルができる2。このjsファイルをExtendScript Toolkitで読み込むと実行可能になる。
ExtendScript Toolkitはjsの変更があると自動で再読み込みを行うので、tsファイルの変更をtsc -w辺りで監視＆自動コンパイルさせるとラク。
あとは普通にExtendScriptを実行するのと同じである。
デバッグ
ExtendScript Toolkitのデバッガ機能を使う。
コンソール出力はconsole.log()ではなく、$.write()または$.writeln()になる。
たまにphotoshop.d.tsが追いかけきれていないAPIがある3ので、その場合はデバッガでオブジェクトプロパティを追いかけると良い。
参考:Photoshop API
ps.*.d.ts : Photoshop固有のAPIが定義されている。逆に言えばIllustratorなど他のAdobe製品のExtendScriptを書く場合は、これにかわる定義ファイルを用意すればよい。
es.*.d.ts : ExtendScript共通のAPIが定義されている。$クラス4やFileクラスなど他のAdobe製品のExtendScriptを書く際にも利用できる。