Adobe製品をVSCodeで制御(Javascript)

<img width="993" alt="screen00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/a6d1ccce-3b45-d797-8355-f2963cad5d2e.png">

## 経緯

- Adobe製品は以前からAdobe Extend Script ToolkitというツールでJavascriptを使った制御が出来ていたが、MacOS 10.15では起動もインストールも出来なくなっていました。

<img width="577" alt="acreen01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/6d782a43-d9df-ce5d-0b81-0706efa6024d.png">

- そこで他に方法が無いか調べてみるとVSCodeの機能拡張がAdobeから提供されていたので試しに利用してみました。

## 環境

- MacOS Catalina 10.15.1
- Visual Studio Code 1.39.2(以下VSCode)
- Adobe製品（大抵は動作すると思います）

## 1.機能拡張をインストール

- VSCodeの機能拡張検索で「estk」と入力すると候補が２つ出てくるので「ExtendScript Debugger」をインストールします。

## 2.コマンドパレットからアプリケーションを選択

`View->Command Palette...`を選択してコマンドパレットを表示し、`target`と入力して`Select the target application`を選択してください。
すると、アプリケーション一覧が出るので、使用するアプリケーションを選択してください。
今回はPhotoshopで試してみます。
さらに、当該アプリケーションが起動していない場合は、起動するかどうかを聞いてくるので起動してください。

<img width="330" alt="screen02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/295f1476-d88a-22a5-3254-1022e474ec60.png">

<img width="315" alt="screen03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/d9910c57-ac0c-07ad-dab5-1a6737727948.png">

<img width="422" alt="screen04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/8140a691-77a7-42b7-4a76-e9edae49d038.png">

## 3.プロジェクト作成

空のフォルダを用意して、`File->Open`を選択してフォルダを開いてください。
開いたら、適当なjsファイルを作成してください。(今回の名前はindex.jsx)

## 4.スクリプト記述

index.jsxに以下の内容を記述します。

```js:index.jsx
"use strict"
// このファイルのフォルダパス
var fileDir =  (new File($.fileName)).parent;
// BridgeTalkクラスでアプリケーションを特定
// https://estk.aenhancers.com/5%20-%20Interapplication%20Communication%20with%20Scripts/bridgetalk-class.html
var thisApp = BridgeTalk.appName;
// photoshopだけで実行
if(thisApp === "photoshop"){
    alert(fileDir);
}
```

## 5. 設定ファイル

`Debug->Add Configuration`を選択し、一覧に`ExtendScript Debug`があると思いますので選択します。
エラーが表示されるようでしたら`Open Configuration`を選択します。

<img width="262" alt="screen06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/0afa8ced-fc7f-96b1-edc2-2c80eaa47bd8.png">

<img width="223" alt="screen07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/d88e6327-4c39-0d36-e48e-3a03f679fb0f.png">

すると、launch.jsonが生成されるので、そのままでOKです。

```jsx:launch.json(変更しない)
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "extendscript-debug",
            "request": "launch",
            "name": "Ask for script name",
            "program": "${workspaceFolder}/${command:AskForScriptName}",
            "stopOnEntry": false
        }
    ]
}
```

## 6. デバッグ

<img width="617" alt="screen5_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/6b16e650-37b4-4033-d643-3b851855e0bf.png">

`Debug->Start Debugging`を選択して、ファイル名を入力し（デフォルトはindex.jsx）実行すると、Photoshop上でindex.jsxのフォルダ名が表示されるはずです。

<img width="273" alt="screen08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/f6ecea08-52aa-d73c-654f-3bdf889f12c4.png">

<img width="467" alt="screen09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/b9f1a524-4fe7-6cdb-79c3-7975ffbe260b.png">

# 最後に

ESTKを使えばファイルを作成したり、描画したり、アプリケーション固有の操作をしたり、色々自動化出来るので色々試してみてください。

下記URLのガイドに色々書いてありました。

[Welcome to The Javascript Tools Guide — JavaScript Tools Guide CC 1.0 documentation](https://estk.aenhancers.com/)

# 参考

[ESTK and macOS 10.15 Catalina - Adobe Tech Blog - Medium](https://medium.com/adobetech/estk-and-macos-10-15-catalina-cbcc30300918)