Home About
indesign, extendscript, vscode

VSCode と ExtendScript Debugger の使い方 覚書

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

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

ExtendScript Debugger

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

はじめ、これを読んでもよくわからなかったのは、自分が勝手に持っている操作イメージと ExtendScript Debugger の実際の操作が異なっていたからです。 こちらは単に自分が書いた 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
        }
    ]
}

キー nameprogram に対する値がポイントです。
ここではそれぞれ 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 に戻り、

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

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

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

まとめ

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

追伸

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