![見出し画像](https://assets.st-note.com/production/uploads/images/65921856/rectangle_large_type_2_cd1ada9c0080ee62372ec7952e3ea187.png?width=1200)
【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より楽になりそう。
この記事が気に入ったらサポートをしてみませんか?