【Illustrator javascript】VScodeでAdobeExtendScriptを開発する

Photoshop JavaScript、IllustratorJavaScript等を動かせるJavaScriptベースの言語は「AdobeExtendScript」と呼べば良いそうです。最近知りました。

さて、大昔に作ったphotoshopScriptの修正が必要になって、その間にPCの環境変わっちゃって、今まで開発に使っていたAdobe ExtendScript toolkit CCをダウンロードしなおそうとしたら、CCから消えていました。あらたいへん。

で、調べたところ、今後はVisual Studio Codeのエクステンションである「ExtendScript Debugger」を使ってくださいねーって事らしいので、そっちに乗り換えました。

この記事を書いた頃はExtendScript toolkitが有り難かったのですが、今ではもうVSCodeなしじゃ居られないので、個人的にはむしろ有り難い変更です。

VScodeの導入は世間に山のような記事があるので調べて頂くとして……

1・VScodeにExtendScript Debuggerを導入する

VScodeのエクステンション（四角が四つのアイコンのところ）クリックして、ExtendScript Debuggerを検索してインストールを押すだけ。一瞬～

2・Adobeアプリケーションと接続

画面右下に「ターゲットアプリケーションを選択」と表示されるので、ココをクリックして、画面上部に表示されるドロップダウンから接続したいアプリケーションを選択。

3・デバッグ環境（というかlunch.json）を作る

ここがちょっと面倒だった

デバッグ画面を開いて、create a launch.json　のところをクリック。（趣味でVScodeを日本語化していないので、日本語化してあると別の表記かも。とにかく「lunch.jsonを作るぜ！」って書いてあるところをクリック）

とりあえず何でも良いのでChromeとか選んでおく

できました。

けどこれはchromeでデバッグする用の設定なので、ExtendScript用を作る。

デバッグ画面（再生ボタンに虫が付いたようなアイコンのところ）の、緑の再生ボタンみたいなところのドロップダウンを開いて、一番下の「環境を追加(Add Configuration)」的なところを押す。

表示されたリストからExtendScript Debug Launch Configurationを選ぶ

    "configurations": [
       {
           "type": "extendscript-debug",
           "request": "launch",
           "name": "現在のファイルを実行",
           "program": "${File}",
           "stopOnEntry": false
       }

configurationsの部分に、"type": "extendscript-debug"から始まるブロックが追加されるので、nameとprogramのところを上記のように書き換えて置くと使いやすい

lunch.jsonを保存して閉じれば準備OK。

接続先に指定したアプリを立ち上げて、デバッグしたいファイルを開いてf5を押すか、デバッグ画面の緑の再生ボタンを押せば、デバッグが開始され、接続先のアプリが動きます。

これで、Adobe ExtendScript toolkitでできていたことは概ね再現できるようになりました。ひとまずこれでよしとします。

デバッグコンソール使いこなせるようになればESTより楽になりそう。