PhotoshopやIllustratorなどでスクリプト（ExtendScript）を使って作業を効率化

2024年 7月 8日　Posted　野々瀨(フロントエンドエンジニア)

Adobe製品の一部のアプリケーションでは、操作を自動化できる幾つかのツールが備わっています。そのうちの一つに「スクリプト」という機能があります。この「スクリプト」は、スクリプト言語を使ってさまざまな機能の一部を利用することができ、作業を効率的に行うことできます。

対応しているスクリプト言語はJavaScriptやVBScriptなどがありますが、ここではJavaScriptについてご紹介をしようと思います。

Adobe製品のアプリケーションでのJavaScript

スクリプト言語として、JavaScriptを使って機能を利用することができます。Adobe製品のアプリケーションのJavaScriptは、JavaScriptの標準仕様であるECMAScript 3を基準にしています（注）。Adobe製品のアプリケーションでは、JavaScriptを拡張して実装されたExtendScriptとして提供しています。

（注）一部のアプリケーションではECMAScript 6（ES6）以降をサポートしています。

アクション、プラグイン、スクリプトの違い

アクションはいわゆる記録マクロのようなもので、マウスやキーボードでの操作を記録して、それをいつでも実行できるようにする機能です。

プラグインは対象となるアプリケーションの多くの機能を使用でき、アプリケーションの一部の機能として組み込んで効率的に処理することができます。

スクリプトはプラグインには劣るもののアプリケーションの一部の機能を使用でき、効率的な自動化処理を行うことができます。また、簡単なGUIも作ることができます。

開発環境

スクリプトの開発は次のように幾つかの方法があります。

テキストエディター
Adobe ExtendScript Toolkit CC（ESTK）
ExtendScript Debugger Extension for VS Code

テキストエディターは手入力し、アプリケーションからスクリプトを直接実行しながら行っていく方法です。

Adobe ExtendScript Toolkit CC（ESTK）は、Adobe Creative Cloudにて提供しているスクリプト開発が行えるアプリケーションです。この記事を書いている時点で既にサポートを終了していますが、一応今のところインストールと動作は可能です。なおプラグインであれば、UXP（Unified Extensibility Platform）というプラグインを開発するためのCEP（Common Extensibility Platform）に代わるプラットフォームがあります。Adobe Creative CloudにてUXP Developer Toolsとして提供されています。

ExtendScript Debuggerは、テキストエディターであるVisual Studio Codeの拡張機能です。入力補完機能はありませんが、アプリケーションと連動してデバッグが行えます。2022年で更新が止まっているようですが、記事を書いている最新版のアプリケーションでも動作はするようです。

https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug

Adobe ExtendScript Toolkit CCのインストールと起動方法

Creative Cloud Desktopを起動し、メニューから「ファイル」->「環境設定」を開きます。

「アプリ」タブを押し、「設定」項目にある「古いアプリを表示」を押して有効にし、「完了」ボタンを押します。

Creative Cloud Desktop本体の「アプリ」タブを押し、一覧の中から「Extendscript Toollit CC」を探し、「インストール」ボタンを押します。

「インストール」ボタンが「開く」ボタンに変わっていればインストール完了です。なお、サポートが終了していることもあり、一覧からは起動することができません。そこでWindowsであれば「スタート」ボタンを押し、検索欄に「extendscript」と入力し、見つかった「Adobe ExtendScript Toolkit CC」を押すと起動することができます。

ExtendScript Debuggerのインストールと起動方法

Visual Studio Codeを起動し、「拡張機能」画面を表示します。検索欄に「ExtendScript Debugger」を入力し、結果に表示された該当項目の「インストール」ボタンを押します。

なお、ExtendScript Debuggerを使用する際は、あらかじめスクリプトを実行するアプリケーションを起動しておく必要があります。

軽くスクリプトを書いて実行してみる

まずは軽くスクリプトを書いて実行してみようと思います。ここではAdobe ExtendScript Toolkitを使用して、Photoshopのスクリプトを例に説明します。

Adobe ExtendScript Toolkitを起動し、エディター部分にある接続するアプリケーションの中からPhotoshopを選択します（インストールされているアプリケーションやバージョンにより表示内容が異なります）。

エディター部分に$.writeIn(app.version);と入力します。$.writeInメソッドはAdobe ExtendScript Toolkitの「JavaScript コンソール」パネルに値を出力します。app.versionメソッドは接続先のアプリケーションのバージョン番号を取得します。

エディターの上部中央やや右にある「スクリプトの実行を開始」ボタンを押します。

Photoshopが起動していない場合、Photoshopを起動するかどうかのメッセージダイアログが表示されます。「はい」ボタンを押してPhotoshopを起動します。

「JavaScript コンソール」パネルにPhotoshopのバージョンが出力されます。

このようにPhotoshopでスクリプトを動かすことができます。書いたコードは拡張子を「.jsx」で保存し、Photoshopのメニューから「ファイル」->「スクリプト」->「参照」を押して、作成したファイルを選択、「読み込み」ボタンを押すことで、実行することができます。

もう少し具体的なコードを書いてみる

もう少し具体的なスクリプトを書いてみようと思います。レイヤー名を一括置換するスクリプトを例に説明します。

これを次のような感じのコードで書くことができます。

// ウィンドウを作成
const win = new Window('dialog', 'レイヤー名の置換', [0, 0, 360, 140]);

// 上下左右中央に表示
win.center();

// "検索する文字列"のラベル
win.add('statictext', [20, 20, 110, 47], '検索する文字列');

// "検索する文字列"の入力欄
const findInput = win.add('edittext', [115, 20, 325, 0], '');

// "置換後の文字列"のラベル
win.add('statictext', [20, 57, 110, 84], '置換後の文字列');

// "置換後の文字列"の入力欄
const repInput = win.add('edittext', [115, 57, 325, 0], '');

// 実行ボタン
const execBtn = win.add('button', [20, 98, 80, 102], '置換を実行');

// 実行ボタンの初期状態を無効化
execBtn.enabled = false;

// キャンセルボタン
win.add('button', [105, 98, 80, 102], 'キャンセル', { name : 'cancel' });

// 検索入力欄に入力時
findInput.addEventListener('keyup', function() {
	// 実行ボタンの有効化状態を切り替え
	execBtn.enabled = findInput.text ? true : false;
});

// 実行ボタン押下時
execBtn.onClick = function() {
	if (confirm('レイヤー名の置換を実行しますか？')) {
		// 1階層目のレイヤーを全て取得
		const layers = app.activeDocument.layers;

		// レイヤーを繰り返し処理
		for (var i = 0, len = layers.length; i < len; i++) {
			// レイヤー名を置換
			layers[i].name = layers[i].name.replace(findInput.text, repInput.text);
		}

		alert('置換が完了しました');
	}
};

// ウィンドウの表示
win.show();

細かいコードの説明はしませんが、WindowオブジェクトでGUIのウィンドウを作り、Window.addメソッドでコンポーネントを設置します。ボタンを押した時に、app.activeDocument.layersプロパティで現在のドキュメントにある1階層目のレイヤーを取得し、繰り返してレイヤー名を置換します。

これを実行すると次のような画像の動きになります。

ドキュメント

次のような幾つかのWebサイトでドキュメントが掲載されています。

Photoshop：https://github.com/Adobe-CEP/CEP-Resources/tree/master/Documentation/Product specific Documentation/Photoshop Scripting
Illustrator：https://ai-scripting.docsforadobe.dev/index.html
InDesign：https://www.indesignjs.de/extendscriptAPI/indesign-latest/

また、Adobe ExtendScript Toolkitではメニューの「ヘルプ」->「オブジェクトモデルビューア」を押すことで、スクリプトのリファレンスを参照することができます。