Friday, September 11, 2020

VSCode と ExtendScript Debugger の使い方覚書

VSCode での ExtendScript 実行は、 Adobe Script Runner を使えば簡単ですが、これで実行したときにエラーがあってもその内容が表示されません。これでは開発には困るので、代わりに使うのが ExtendScript Debugger です。

結構、使い方がわかりにくかったので（個人の感想です）ここに覚書としてメモを残します。ただし、使い方がわかれば便利。VSCodeを日常的に使っていてそのお作法を心得ている人にとってはわかりやすいのかもしれません。

ExtendScript Debugger

実際のところ、Visual Studio Code のマーケットプレースの ExtendScript Debugger ページの通りです。

はじめ、これを読んでもよくわからなかったのは、自分が勝手に持っている操作イメージと ExtendScript Debugger の実際の操作が異なっていたからです。こちらは単に自分が書いた ExtendScript を指して実行し、コンソールにエラーログ出てくれることだけを想定していたのですが、そういう単細胞的な仕組みには（たぶん）なっていない。

以下は、自分だったら、このように説明してくれたらわかりやすかったのに、というふうに説明します。上記オフィシャルページを読んでわからなかった人だけ以下を読むことをおすすめします。

基本認識

基本認識その1:
- プロジェクトフォルダという概念を前提とします。そして、そのフォルダには .vscode/launch.json という設定ファイルを設置します。
基本認識その2:
- VSCode からは ExtendScript の実行対象アプリがどれかわからないのでなんらかの方法で明示する必要がある。

これらの基本認識を元に、それらをどう設定すればいいかわかりさえすれば、あとはVSCode上からのデバッグ実行方法を把握すれば万事OKです。

プロジェクトフォルダと設定ファイル

たとえ、たった一つのスクリプト（ExtendScript）を実行したいだけだとしても、プロジェクトフォルダが必要です。まず、適当な名前で（ここでは test1 とする）フォルダを作成します。

macOS で terminal を使っていることを想定:

$ mkdir ~/Desktop/test1

そしてさらに、設定ファイルを作成

$ mkdir ~/Desktop/test1/.vscode
$ touch ~/Desktop/test1/.vscode/launch.json

作成した設定ファイル launch.json を以下の内容に編集: （ベースとなる雛形は ExtendScript Debuggerのページにあります。）

{
    "version": "1.0.0",
    "configurations": [
        {
            "type": "extendscript-debug",
            "request": "launch",
            "name": "main.jsx",
            "program": "${workspaceFolder}/main.jsx",
            "stopOnEntry": false
        }
    ]
}

2022-09-24 追記: launch.json 記述方法変わりました。こちらのエントリを参照のこと。

キー name と program に対する値がポイントです。
ここではそれぞれ main.jsx と ${workspaceFolder}/main.jsx を設定していますが、要はこれから ~/Desktop/test1/main.jsx というファイルにスクリプトを書こうとしているからです。

スクリプトを書く

肝心のスクリプトは ~/Desktop/test1/main.jsx に以下のように書きます。

//@target InDesign
$.writeln("Hello, World!");

コンソールに Hello, World! と出力するだけのコードです。
一行目は、どのアプリでこのスクリプト（ExtendScript）を実行するかの指定です。この記述をしないで実行時にVSCodeから指定する方法があるようですが、それは面倒なので、コードの先頭で宣言するのが一番よい方法です。もっとも、通常はないと思いますが、同じコードを InDesign でも Photoshop でも実行するような場合は、書くべきではないでしょう。

これで準備はできました。あとはデバッグとして実行する方法さえわかればOKです。

デバッグとして実行する

VSCodeの UI に戻り、

念のためウインドウをすべて閉じる。
Command + N して新規ウインドウを開く。
その新規ウインドウに ~/Desktop/test1 フォルダをドロップする、などして ~/Desktop/test1 フォルダを開く。
左側のアクションバー？的な部分のデバッグアイコンをクリックします。
開いたパネルの上部に、緑三角のアイコンとその横に main.jsx が表示されているのを確認して、緑三角アイコンをクリックします。

これで InDesignが起動していればそれでスクリプトが実行されます。起動していない場合は、起動するか聞かれるので、 yes で進めます。

もし、使っているマシンに複数のInDesign バージョンがインストールされている場合は、ターゲット指定部分（一行目）でたとえば InDesign-15 などと、明示的にバージョンを含めて指定する必要があるでしょう。

まとめ

ExtendScript を編集実行するための ESTK は、Adobe アプリに特化していたので、設定の手間も少なかったのですが、 VSCode はさまざまなプログラミング言語やアプリに対応したコードエディタです。 VSCode にしてみれば、テキストファイルで書かれたコード（ファイル拡張子にヒントがあるにしても）をどう実行するかは知るはずもない。だから、設定ファイルを通じて、実行の仕方をVSCodeに伝える必要があるということ。多少の面倒は我慢しなければなりません。それに、ここでは書きませんが、VSCode には ESTK とは違った便利さがあります。

追伸

ExtendScript のサンプルコードを集めたレポジトリ InDesign ExtendScript Examples: https://github.com/mindboard/indesign-extendscript も VSCode と ExtendScript Debugger に対応しました。

VSCode と ExtendScript Debugger の使い方 覚書