Amazonで商品を見るセール会場へ

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自体が日本語入力に対応しないという意味ではありません。

入力確認と進捗バーの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行へ変わることを確認してください。

Tabで入力欄とボタンのフォーカスを移し、Enterでプレビュー、Escapeで閉じる操作を確認します。

defaultElementとcancelElementを明示して、その役割を指定しています。

入力中のキー動作はコントロールによるため、実際の画面でも確認してください。

試す入力・操作確認する結果
Countが0・101・小数・空欄エラーを表示し、予定名を生成しない
接頭辞が空・パス記号を含む入力規則のエラーを表示する
Close / cancelプレビュー前なら閉じる。ループ中はキャンセルを要求
再びPreviewを押す前の予定名を置き換えて、入力から作り直す

進捗表示とキャンセルの仕組み

予定名を1個作るたびにbar.valueを更新し、見えているダイアログでw.updateを呼びます。

AdobeのTools Guideでは、updateは再描画と一部の入力イベントを処理するためのメソッドと説明されています。

キャンセル要求を変数に残し、次の反復へ進む前に確認します。

この例の名前生成は短時間で終わるため、進捗バーの途中状態が目に見えない場合があります。

長い画像処理に組み込む場合は、実際に完了した画像数を進捗へ反映し、失敗件数と部分的な出力の扱いを別に実装してください。

バーが100になることだけで、画像処理の成功を示すことはできません。

非表示のウィンドウにupdateを呼ばないようにします。

キャンセル中は描画ループを先に止め、finallyで入力状態を戻してから閉じます。

PhotoshopのScriptUIではdialogを使い、paletteやwindowを使う他アプリの例をそのまま移さないようにします。

確認範囲と公式資料

2026年10月3日に、Adobe公開のJavaScript Tools Guide CCのWindow、入力イベント、progressbar、updateを確認しました。

入力検査・予定名・キャンセルの制御処理は明示的モックで確認していますが、Photoshop実機の描画、フォーカス、キー操作は未検証です。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Photoshopのおすすめ書籍

動作要件とPCの確認項目

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次