Photoshopを始めとしたAdobe製品群はJSX^1というJavaScriptで操作することができる。これをTypeScriptで書いてみる。

ExtendScriptをTypeScriptで書くメリット

PhotoshopのJavaScript APIはいわゆる普通のJavaScriptとは異なり、情報も少ない。TypeScriptはこういった情報が少なく調べにくいAPIを持つものに対して、型定義ファイルさえあれば無類の力を発揮する。

また、Template Strings や Enum など、便利な機能も使う事ができる。素のJSで書くよりも格段に生産性が上がる。

導入方法

VisualStudio Code辺りが無難。
Adobe系で揃えるならBrackets/Adobe Edge Codeでも可。

もしTypeScriptのコンパイラをインストールしていないのであれば、一緒にインストールされるのでVSCはおすすめ。

型定義ファイルから補完を効かせられないエディタの場合、意味が無いので乗り換える。

photoshop.d.tsはDifinitelyTypedに無い (2015-07-07現在)。代わりにnpmでインストールする。

npm i photoshop.d.ts -D

githubというソースコード共有サービスの以下にあるファイルを全部DLする。

なんとかかんとか.d.tsというファイルを全部DLし、これから書くスクリプトの近くのフォルダにまとめておくと良い。

dist/cc/ 以下にある ps.d.tsにリファレンスパスを通すだけで良い。

///<reference path="./node_modules/photoshop.d.ts/dist/cc/ps.d.ts"/>

"files":内でps.d.tsを指定しておく。

tsc target.ts -t "ES3" -noLib

コンパイルオプションとしては-target "ES3",-noLibにする必要がある。その他はお好みで。

既存のExtendScriptがある場合、拡張子をとりあえず.tsに変更し、リファレンスパスを書いておくだけでも補完が効くようになる。

コンパイル後、tsファイルと同じ名前の.jsファイルができる¹。このjsファイルをExtendScript Toolkitで読み込むと実行可能になる。

ExtendScript Toolkitはjsの変更があると自動で再読み込みを行うので、tsファイルの変更をtsc -w辺りで監視＆自動コンパイルさせるとラク。

あとは普通にExtendScriptを実行するのと同じである。

ExtendScript Toolkitのデバッガ機能を使う。

コンソール出力はconsole.log()ではなく、$.write()または$.writeln()になる。

たまにphotoshop.d.tsが追いかけきれていないAPIがある²ので、その場合はデバッガでオブジェクトプロパティを追いかけると良い。

ps.*.d.ts : Photoshop固有のAPIが定義されている。逆に言えばIllustratorなど他のAdobe製品のExtendScriptを書く場合は、これにかわる定義ファイルを用意すればよい。

es.*.d.ts : ExtendScript共通のAPIが定義されている。$クラス³やFileクラスなど他のAdobe製品のExtendScriptを書く際にも利用できる。