はじめに
前回は、ExtendScript を最速で習得するためのロードマップについて紹介しました。
今回は、そのロードマップのなかで述べていた、環境構築について具体的な解説を進めていきたいと思います。
環境構築とは
プログラミングの環境構築とは、初めてプログラミングをする人が、プログラムを書いたり動かしたりできるように必要な準備を整えることです。一般には、パソコンにプログラムを書くためのソフトやツールを入れたり、動かすための設定をしたりします。
今回の記事では、Visual Studio Code (以下 VSCode) を使用してスクリプトを作成し、Adobe アプリに対して実行できるようにすることを目標とします。
本記事では主に Windows ユーザーを対象としていますが、概ねmacでも同じような流れとなっているので、適宜参照してください。
全体の流れについて
本記事で進めていく全体の流れを確認します。
最初に、スクリプトを書くためのメイン環境となる VSCode をインストールし、日本語化の拡張機能を追加します。
次に、VSCode から Adobe アプリへスクリプトを送って実行できるようにするため、ExtendScript Debugger for Visual Studio Code (以後ESDebugger) を導入して動作環境を整えます。
ESDebuggerとはAdobe が開発しているVSCode用の拡張機能で、導入することで、VSCode 上から直接スクリプトを実行出来、結果やエラーの内容をそのままエディタ内で確認できるようになります。
これらの準備ができたところで、最後に本当に VSCode からスクリプトが実行できるか動作確認を行い、環境が正しく構築されているかを確かめます。
VSCodeのインストール
はじめに、Visual Studio Code 公式のダウンロードページ
(https://code.visualstudio.com/download)にアクセスし、インストーラーをダウンロードします。
ダウンロードボタンを押すと、なにやら英語が並んだページが開きますが、
無視して閉じてしまって大丈夫です。
ダウンロードしたインストーラーを起動し、セットアップを進めます。
特にこだわりがなければ、表示される画面はすべて「次へ」を選んで問題ありません。
インストールが完了すると、VSCodeが起動します。
日本語化
インストール直後はすべて英語で分かり辛いので、日本語化の拡張機能を導入します。
画面左端にある「拡張機能」アイコン
をクリックし、検索欄に「日本語」と入力します。
表示された候補の中から最上部にある「Japanese Language Pack for Visual Studio Code」を選び、「Install」ボタンを押してインストールします。
完了すると右下に「Change Language and Restart」という通知が表示されるので、そのボタンを押して VSCode に適用、再起動します。
再起動後、画面が日本語表示になっていれば日本語化は完了です。
ESDebuggerの導入
続いて、ESDebugger を先程と同様の手順でインストールします。
「インストール」ボタンを押すと、信頼するかどうか聞かれるので「発行元を信頼してインストールする」を選択してインストール完了です。
作業用フォルダを作成する
まず、PC の任意の場所に作業用フォルダを新規作成してください。
ここで注意したいのは、フォルダ名やファイル名には必ず半角英数字のみを使うことです。
日本語や全角文字が含まれていると、ESDebugger からスクリプトが正常に読み込まれません。
フォルダの作成が完了したら、VS Code の左側にある「エクスプローラー」アイコン
からタブを移動し
「フォルダを開く」ボタン、
または
「ファイル／フォルダを開く」メニュー
から、先ほど作成した作業フォルダを選択して開いてください。
ESDebuggerの設定を行う
最後に、ESDebugger を使用するための設定を行います。
VSCode のデバッグ機能は launch.json という設定ファイルを参照して動作するため、まずはこのファイルを用意します。
画面左側の「実行とデバッグ」アイコン
をクリックし、タブを切り替えます。
表示された青文字の「create a launch.json file」を選び、 続いて「ExtendScript」をクリックすると、自動的に基本構成を持った launch.json が生成されます。
その後、「エクスプローラー」アイコンで、 タブを切り替えると 作業用フォルダの中に .vscode フォルダが生成され、その中に launch.json が作成されていることが確認できます。
このlaunch.jsonの内容を必要な設定に書き換えていきます。
launch.jsonの編集
launch.jsonの中身を以下のものに書き換えます。 (以下をコピー/ペーストしてください)
{
"version": "0.2.0",
"configurations": [
{
"type": "extendscript-debug",
"request": "launch",
"name": "スクリプト名を求める", // ←好きに変更してOK
// ↓必要に応じてカスタマイズする
"script": "${workspaceFolder}/${fileBasenameNoExtension}.js",
"engineName": "main",
// ↓使用しているInDesignのバージョンに合わせて変更する。これは、indesign2025の場合
"hostAppSpecifier": "indesign-20.064"
}
]
}
複数ある設定項目のうち、意味を理解しておく必要があるのは 「script」 と 「hostAppSpecifier」 の2つです。
script
script は、実行するスクリプトファイルの場所の指定です。
ここは、特にこだわりがなければ、そのまま使って問題ありません。
"script": "${workspaceFolder}/${fileBasenameNoExtension}.js",
${workspaceFolder},${fileBasenameNoExtension} という2つの変数が使われていますが、 それぞれ以下の意味を持っています。
つまり、”${workspaceFolder}/${fileBasenameNoExtension}.js”とは、「作業用フォルダの中にあって、現在開いているjsファイルをそのまま実行する」指定になっています。
また、”${workspaceFolder}/script/${fileBasenameNoExtension}.js” のように書き換えることで、作業用フォルダ内にある script フォルダを参照先に変更する といったカスタマイズも可能です。
プロジェクト構成に合わせてスクリプトの保存場所を整理したい場合は、このように設定を調整すると、より使いやすい開発環境になります。
hostAppSpecifier
続いて hostAppSpecifier は、アプリケーション名 の入力項目です。
"hostAppSpecifier": "indesign-20.064"
以下は InDesign のバージョン番号を含めた書き方の参考例です。
これを参考に、使用している Adobe アプリケーション名とバージョンに合わせて書き換えてください。
InDesign以外でも、ExtendScriptに対応しているAdobe製品であれば、ここに該当するアプリ名を入れることで同様に使用できます。
以上で設定は完了です。これでひとまずスクリプトを実行できる環境が整いました。 さらに理解を深めたい場合は、各項目の詳細な仕様や応用的な設定方法について調べてみるのも良いかもしれません。
動作確認を行う
最後に、環境が正しく動作するか 動作確認を行います。 まず、作業用フォルダ直下に helloworld.js というファイルを作成し、 以下のコードを記述して保存します。
scriptの項 のように、scriptを置く階層を変更した場合は、その場所に helloworld.js を作成してください。
alert("hello world !");
続いて、 launch.jsonで指定したバージョンのInDesignを起動しておきます。 スクリプト実行前にアプリが起動していない場合、エラーとなり実行できないため注意してください。
InDesign を立ち上げた状態で、 VS Code側でhelloworld.js を開いたまま F5キーを押して実行します。
InDesign の画面に「hello world !」というアラートが表示されれば、環境構築は問題なく完了です。
うまく動作しない時は
もしうまく動かない場合は、次のポイントを確認してみてください。
helloworld.js を開いた状態で実行しているか？
launch.json の設定上、現在開いているファイル」実行する仕組みになっています。そのため、ファイルを開かずに F5 を押しても動きません。
作業フォルダ内に全角文字を含むファイル名・フォルダ名がないか？
ESDebugger は全角文字を含むパスを扱えません。半角文字を使いましょう。筆者自身も、この記事用に環境を構築した際にここでつまずきました。(1年振り2回目)
なお、InDesign のスクリプトフォルダに直接スクリプトを置いて実行する場合は、全角文字が含まれていても問題ありません。
Indesignが起動しているか？
ESDebugger は、VSCode からスクリプトを送る対象のアプリケーションが起動していないと動作しません。必ず事前に InDesign を起動してからスクリプトを実行してください。
パスのスペルミスや文字の間違いがないか？
InDesign のスクリプトに限らず、プログラミングにおけるトラブルの大半は文字の打ち間違いが原因です。出来るのであれば直接打ち替えをするより、コピー/ペーストするのが確実です。
フォルダ階層が正しいか？
指定したパスに必要なファイルが存在しているか、階層構造が崩れていないかをチェックしてみましょう。
まとめ
お疲れさまでした。
ここまで来れば、ExtendScript を書くための環境構築は完了です。 あとは実際にスクリプトを書きながら、少しずつ慣れていきましょう。
次回は、具体的にDOMを理解しながら動かす方法について解説していきますので、ぜひそちらもご覧ください。
以上伊藤がお送りしました。