【Adobe JavaScript】Visual Studio Code で開発環境を構築する

PhotoShop や Illustrator などの Adobe 製品は JavaScript で操作することができます。

Adobe 製品向けの JavaScript 開発環境として ExtendScript Toolkit がありますが、既に開発が終了しています。
そのためかインストールの仕方がちょっと分かりづらくなっていますし、そもそも使い勝手があまり良くありません。（個人の感想です）

この記事では Visual Studio Code にExtension を入れることで Adobe 製品向けの JavaScript 開発環境を構築していきます。

OS は Windows 10 Pro を使用しています。

1. Visual Studio Code のインストール

本体の Visual Studio Code が無いと始まらないので、公式サイトからインストーラーをダウンロードしインストールします。

Visual Studio Code - Code Editing. Redefined

2. Adobe Script Runner のインストール

Visual Studio Code を起動したら、左のアイコンから Extensions をクリックして下さい。

EXTENSIONS パネルが開いたら、検索窓に「Adobe Script Runner」と入力して下さい。

Adobe Script Runner が見つかるのでクリックして選択して下さい。

選択した Extension の詳細画面が表示されるので、Install ボタンを押して下さい。

インストールが完了すると、ボタンの表示が Uninstall に変わります。
Uninstall ボタンの右側にある歯車マークをクリックし、Extension Settings を選択して下さい。

Settings 画面が開くので下の方にスクロールし、Adobe 製品（After Effects、Illustrator、PhotoShop）の実行ファイル（～.exe）があるフォルダのパスを入力して下さい。
特に Adobe 製品をデフォルトのフォルダ（C:\Program Files (x86)\Adobe）以外にインストールしている場合は、この設定をしておかないと Extension から各ソフトを呼び出すことができなくなります。

3. 動作確認

Visual Studio Code で新規ファイルを作成し、中身に

alert("Hello, world");

と入力して下さい。

hello.jsx という名前で適当なフォルダに保存します。

jsx ファイルを開いている状態で、Ctrl + Shift + p を押すと入力窓が表示されるので実行したい対象の Adobe 製品名を入力します。

例えば、Illustrator で実行したい場合は「Adobe illustrator」と入力し、Enter を押します。

すると Illustrator が起動します。

下図のようなメッセージが出る場合は「続行」をクリックして下さい。

JavaScript が正しく書けていれば、下図のようなアラート画面に「Hello, world」と表示されます。

まとめ

Visual Studio Code に Adobe Script Runner Extension をインストールして Adobe 製品向け JavaScript 開発環境の構築と動作確認を行いました。

スクリプトで制御することで作業の自動化ができ、効率化ができそうですね。