ScriptUIは、ExtendScriptのJSXに入力欄やボタンを追加する仕組みです。
本稿の例は、接頭辞と件数から予定ファイル名を表示するプレビュー専用です。
画像を開く、書き出す、既存ファイルを改名する処理は含みません。
入力と期待する表示
練習ZIPのarticle-1373.jsxを使います。
Prefixへcgm_、Countへ3を入力してPreviewを押すと、cgm_001.png、cgm_002.png、cgm_003.pngが表示される例です。
PNGファイルが作られるわけではないため、保存先を探して出力成功を判断しないでください。
件数は1〜100の整数、接頭辞は先頭が英字の1〜20文字に限定します。
接頭辞で使えるのは半角英数字、アンダースコア、ハイフンです。
この制限は練習サンプルの入力規則で、ScriptUI自体が日本語入力に対応しないという意味ではありません。
入力確認と進捗バーのJSXコード
#target photoshop
(function () {
var w = new Window("dialog", "Filename preview (no files are changed)");
if (!w) { alert("Could not create the dialog."); return; }
w.orientation = "column";
w.alignChildren = "fill";
var g = w.add("group");
g.add("statictext", undefined, "Prefix:");
var prefix = g.add("edittext", undefined, "cgm_");
prefix.characters = 20;
var g2 = w.add("group");
g2.add("statictext", undefined, "Count (1-100):");
var count = g2.add("edittext", undefined, "3");
count.characters = 5;
var bar = w.add("progressbar", undefined, 0, 100);
bar.preferredSize.width = 300;
var output = w.add("edittext", undefined, "", {multiline: true, readonly: true});
output.preferredSize = [300, 150];
var status = w.add("statictext", undefined, "Preview only. No files are created.");
var buttons = w.add("group");
var ok = buttons.add("button", undefined, "Preview", {name: "ok"});
var cancel = buttons.add("button", undefined, "Close / cancel", {name: "cancel"});
w.defaultElement = ok;
w.cancelElement = cancel;
var running = false, cancelled = false;
function stop() {
if (running) cancelled = true;
else w.close(2);
}
cancel.onClick = stop;
w.onClose = function () {
if (running) { cancelled = true; return false; }
return true;
};
ok.onClick = function () {
if (running) return;
if (!/^[A-Za-z][A-Za-z0-9_-]{0,19}$/.test(prefix.text)) {
alert("Prefix: use 1-20 ASCII letters, digits, underscores or hyphens; start with a letter.");
return;
}
if (!/^(?:[1-9][0-9]?|100)$/.test(count.text)) {
alert("Count: enter an integer from 1 to 100.");
return;
}
var n = Number(count.text), names = [];
running = true; cancelled = false;
ok.enabled = prefix.enabled = count.enabled = false;
bar.maxvalue = n; bar.value = 0; output.text = "";
try {
for (var i = 1; i <= n; i++) {
if (cancelled) break;
names.push(prefix.text + ("000" + i).slice(-3) + ".png");
bar.value = i;
status.text = "Preview " + i + " / " + n;
w.update();
}
if (!cancelled) {
output.text = names.join("\n");
status.text = "Previewed " + names.length + " names. No files were changed.";
}
} catch (e) {
output.text = "";
status.text = "Preview failed: " + e.message;
} finally {
running = false;
ok.enabled = prefix.enabled = count.enabled = true;
}
if (cancelled) w.close(2);
};
w.show();
}());
実行とキーボードでの確認
Photoshopの［ファイル］→［スクリプト］→［参照］からarticle-1373.jsxを選びます。
ダイアログが開いたら、初期値のcgm_と3で予定名を確認し、接頭辞をdemo-、件数を2に変えて再びPreviewを押します。
表示がdemo-001.png、demo-002.pngの2行へ変わることを確認してください。
2026年10月17日に、Adobe Photoshop 2026（27.11.0）とWindows 11 Pro（10.0.26200）で、練習ZIPのarticle-1373.jsxを書き換えずに［ファイル］→［スクリプト］→［参照］から実行して確かめました。
初期値のままPreviewを押すと、cgm_001.png、cgm_002.png、cgm_003.pngの3行と「Previewed 3 names. No files were changed.」が表示されました。
続けて接頭辞をdemo-、件数を2に書き換えてPreviewを押すと、表示はdemo-001.pngとdemo-002.pngの2行に置き換わり、下の文も「Previewed 2 names. No files were changed.」に変わりました。
文字の入力と、Tab・Enter・Ctrl+A（全選択）のキーは、Windowsのキー入力として入力欄に送って確かめました。
画面操作の自動化ツールの文字入力でも、Prefix欄とCount欄に文字が入りました。
Prefix欄を続けて3回クリックしても元のcgm_は選択されず、入力した文字はcgm_の後ろに足されました。
書き換えるときは、欄をクリックしてからCtrl+Aで全選択して入力するか、Tabで欄に移ります。
Tabで入力欄とボタンのフォーカスを移し、Enterでプレビュー、Escapeで閉じる操作を確認します。
defaultElementとcancelElementを明示して、その役割を指定しています。
入力中のキー動作はコントロールによるため、実際の画面でも確認してください。
実機では、Prefix欄からTabを押すと、フォーカスがCount欄、予定名の欄、Preview、Close / cancelの順に移り、その次はPrefix欄に戻りました。
Tabで移った入力欄は中の文字がすべて選択されるため、そのまま入力すれば置き換わります。
予定名の欄は読み取り専用で、フォーカスが来ると中の文字が選択されるだけでした。
Count欄に3を入れてカーソルを置いたままEnterを押すと、Previewを押したときと同じく3行が表示され、ダイアログは開いたままでした。
Escapeで閉じる操作は、今回の操作環境ではキーがダイアログに届いたかを確かめられず、確認に含めていません（Close / cancelを押すとダイアログが閉じることは確かめました）。
| 試す入力・操作 | 確認する結果 |
|---|---|
| Countが0・101・小数・空欄 | エラーを表示し、予定名を生成しない |
| 接頭辞が空・パス記号を含む | 入力規則のエラーを表示する |
| Close / cancel | プレビュー前なら閉じる。ループ中はキャンセルを要求 |
| 再びPreviewを押す | 前の予定名を置き換えて、入力から作り直す |
表の入力も、同じ日に実機で試しました。
Countを0・101・1.5・空欄にしてPreviewを押すと、どの場合も「スクリプト警告」の窓に「Count: enter an integer from 1 to 100.」と表示されました。
Countを2に戻し、接頭辞を空欄・a/b・1abcにしてPreviewを押すと、どの場合も「Prefix: use 1-20 ASCII letters, digits, underscores or hyphens; start with a letter.」と表示されました。
警告の［OK］を押した後も、予定名の欄には直前に成功したプレビュー（demo-001.pngとdemo-002.png）が残り、下の文も「Previewed 2 names. No files were changed.」のままでした。
警告が出たときは新しい予定名は作られていないので、欄に残った表示を今の入力の結果と取り違えないようにしてください。
進捗表示とキャンセルの仕組み
予定名を1個作るたびにbar.valueを更新し、見えているダイアログでw.updateを呼びます。
AdobeのTools Guideでは、updateは再描画と一部の入力イベントを処理するためのメソッドと説明されています。
キャンセル要求を変数に残し、次の反復へ進む前に確認します。
この例の名前生成は短時間で終わるため、進捗バーの途中状態が目に見えない場合があります。
Countを100にして実行したときは、下の文が「Preview 64 / 100」と表示され、入力欄とPreviewが灰色（押せない状態）になっている途中の画面を確認できました。
終わると100行（demo-100.pngまで）と「Previewed 100 names. No files were changed.」が表示され、入力欄は使える状態に戻りました。
実行中にClose / cancelを押して止める操作は確かめていません。
長い画像処理に組み込む場合は、実際に完了した画像数を進捗へ反映し、失敗件数と部分的な出力の扱いを別に実装してください。
バーが100になることだけで、画像処理の成功を示すことはできません。
非表示のウィンドウにupdateを呼ばないようにします。
キャンセル中は描画ループを先に止め、finallyで入力状態を戻してから閉じます。
PhotoshopのScriptUIではdialogを使い、paletteやwindowを使う他アプリの例をそのまま移さないようにします。
確認範囲と公式資料
2026年10月3日に、Adobe公開のJavaScript Tools Guide CCのWindow、入力イベント、progressbar、updateを確認しました。
入力検査・予定名・キャンセルの制御処理は、明示的モックでも確認しています。
2026年10月17日には、Adobe Photoshop 2026（27.11.0）とWindows 11 Pro（10.0.26200）で、ダイアログの表示、入力を変えた再プレビュー、不正な入力の警告、Tab・Enterの動き、Count 100での表示、Close / cancelで閉じる動きを確かめました。
文字とキーは、Windowsのキー入力として送りました。
Escapeで閉じる操作、実行中のキャンセル、日本語の入力、Macとほかの版は確かめていません。
よくある質問：PhotoshopのScriptUIで入力ダイアログを作る
ScriptUIとは、何ですか？
ExtendScriptのJSXに、入力欄やボタンを追加する仕組みです。記事の例は、接頭辞と件数から予定ファイル名を表示する、プレビュー専用のスクリプトです。画像を開く、書き出す、既存ファイルを改名する処理は含みません。
練習用の例は、どう動きますか？
練習ZIPのarticle-1373.jsxを使います。Prefixへcgm_、Countへ3を入力してPreviewを押すと、cgm_001.png、cgm_002.png、cgm_003.pngが表示されます。PNGファイルが作られるわけではないため、保存先を探して出力成功を判断しないでください。
入力できる値に、制限はありますか？
件数は1〜100の整数、接頭辞は先頭が英字の1〜20文字に限定します。接頭辞で使えるのは、半角英数字、アンダースコア、ハイフンです。この制限は練習サンプルの入力規則で、ScriptUI自体が日本語入力に対応しないという意味ではありません。
どうやって実行しますか？
Photoshopの［ファイル］→［スクリプト］→［参照］からarticle-1373.jsxを選びます。ダイアログが開いたら、初期値のcgm_と3で予定名を確認し、接頭辞をdemo-、件数を2に変えて再びPreviewを押します。表示がdemo-001.png、demo-002.pngの2行へ変わることを確認してください。
キーボード操作は、どう確認しますか？
Tabで入力欄とボタンのフォーカスを移し、Enterでプレビュー、Escapeで閉じる操作を確認します。defaultElementとcancelElementを明示して、その役割を指定しています。入力中のキー動作はコントロールによるため、実際の画面でも確認してください。
2026年10月17日に実機で確かめたところ、TabはPrefix欄、Count欄、予定名の欄、Preview、Close / cancelの順に移りました。
Count欄でEnterを押すとPreviewと同じ結果になり、Close / cancelを押すと閉じました（Escapeは確認に含めていません）。
不正な入力をしたら、どうなりますか？
記事の確認表では、Countが0・101・小数・空欄の場合はエラーを表示し、予定名を生成しない、接頭辞が空・パス記号を含む場合は入力規則のエラーを表示する、Close / cancelはプレビュー前なら閉じ、ループ中はキャンセルを要求する、再びPreviewを押すと前の予定名を置き換えて入力から作り直す、となっています。
実機では、Countの0・101・1.5・空欄と、接頭辞の空欄・a/b・1abcのどれでも警告が表示されました。
［OK］の後も、予定名の欄には直前に成功したプレビューが残ります。
進捗バーとキャンセルは、どう動いていますか？
予定名を1個作るたびにbar.valueを更新し、見えているダイアログでw.updateを呼びます。AdobeのTools Guideでは、updateは再描画と一部の入力イベントを処理するためのメソッドと説明されています。キャンセル要求を変数に残し、次の反復へ進む前に確認します。この例の名前生成は短時間で終わるため、進捗バーの途中状態が目に見えない場合があります。長い画像処理に組み込む場合は、実際に完了した画像数を進捗へ反映し、失敗件数と部分的な出力の扱いを別に実装してください。バーが100になることだけで、画像処理の成功を示すことはできません。非表示のウィンドウにはupdateを呼ばないようにし、キャンセル中は描画ループを先に止め、finallyで入力状態を戻してから閉じます。PhotoshopのScriptUIではdialogを使い、paletteやwindowを使う他アプリの例をそのまま移さないようにします。
記事の例は、実際のPhotoshopで確認されていますか？ 最新はどこで確認しますか？
2026年10月3日に、Adobe公開のJavaScript Tools Guide CCのWindow、入力イベント、progressbar、updateを確認しました。
2026年10月17日には、Adobe Photoshop 2026（27.11.0）とWindows 11 Pro（10.0.26200）で、ダイアログの表示、入力を変えた再プレビュー、不正な入力の警告、Tab・Enterの動きを確かめました。
Escapeで閉じる操作、実行中のキャンセル、日本語の入力は確かめていません。
最新はAdobe公式の資料で確認してください。
