Photoshop のスクリプト (.jsx) で、フォルダー内の PSD をまとめて書き出す

Photoshop には、JavaScript で操作を自動化する仕組みがあります。たくさんの PSD ファイルを開いて、Web 用の画像に書き出して、閉じる。この繰り返しを手で行うのは時間がかかり、書き出しの設定を取り違える心配もあります。ここでは、フォルダーの中の PSD をまとめて書き出すスクリプトを例に、基本の書き方を紹介します。

ExtendScript と .jsx

Photoshop のスクリプトは、ExtendScript という Adobe の JavaScript で書き、拡張子 .jsx のファイルに保存します (React で使う JSX とは関係ありません)。ExtendScript は古い JavaScript (ECMAScript 3) をもとにしているので、let・const やアロー関数、配列の forEach などは使えません。var と for 文で書きます。

Photoshop の操作には、主に次のオブジェクトを使います。

app: Photoshop そのもの。app.open() でファイルを開く
Folder と File: フォルダーとファイル。Folder.selectDialog() でフォルダーを選んでもらい、getFiles() で中のファイルの一覧を得る
Document: 開いた文書。exportDocument() や saveAs() で書き出し、close() で閉じる

スクリプトの例

選んだフォルダーの中の PSD を、同じフォルダーの中に作った png フォルダーへ、PNG で書き出します。

#target photoshop

// 書き出し元のフォルダーを選んでもらう (キャンセルされたら null)
var srcFolder = Folder.selectDialog("PSD ファイルのあるフォルダーを選んでください");
if (srcFolder) {
  exportFolder(srcFolder);
}

function exportFolder(srcFolder) {
  // 拡張子が .psd のファイルだけを集める (大文字・小文字は区別しない)
  var files = srcFolder.getFiles(function (f) {
    return f instanceof File && /\.psd$/i.test(f.name);
  });
  if (files.length === 0) {
    alert("PSD ファイルが見つかりませんでした");
    return;
  }

  // 書き出し先のフォルダーが無ければ作る
  var outFolder = new Folder(srcFolder.fullName + "/png");
  if (!outFolder.exists) {
    outFolder.create();
  }

  // 確認のダイアログで止まらないようにする (終わったら元に戻す)
  var savedDialogs = app.displayDialogs;
  app.displayDialogs = DialogModes.NO;

  var count = 0;
  try {
    for (var i = 0; i < files.length; i++) {
      var doc = app.open(files[i]);
      try {
        var baseName = doc.name.replace(/\.[^.]+$/, "");
        var outFile = new File(outFolder.fullName + "/" + baseName + ".png");
        doc.exportDocument(outFile, ExportType.SAVEFORWEB, pngOptions());
        count++;
      } finally {
        // 元の PSD は変更せずに閉じる
        doc.close(SaveOptions.DONOTSAVECHANGES);
      }
    }
  } finally {
    app.displayDialogs = savedDialogs;
  }
  alert(count + " 個のファイルを書き出しました");
}

// 「Web 用に保存」の PNG の設定
function pngOptions() {
  var options = new ExportOptionsSaveForWeb();
  options.format = SaveDocumentType.PNG;
  options.PNG8 = false;        // true にすると PNG-8 (256 色まで)
  options.transparency = true; // 透明な部分を残す
  options.interlaced = false;
  return options;
}

ポイントは次のとおりです。

getFiles() には、"*.psd" のような文字列のほかに、関数を渡して絞り込める。ここでは、大文字・小文字を区別せずに .psd で終わるファイルだけを選んでいる
app.displayDialogs = DialogModes.NO で、開くときの確認 (カラープロファイルの違いなど) で処理が止まらないようにする
exportDocument() に ExportType.SAVEFORWEB を指定すると、「Web 用に保存 (従来)」と同じ書き出しになり、表示されているレイヤーを重ねた見た目で書き出される。設定は ExportOptionsSaveForWeb で指定する
close(SaveOptions.DONOTSAVECHANGES) で、元の PSD を変えずに閉じる。try・finally で囲んで、途中でエラーが起きても閉じるようにしている

どうしても GIF が必要なときは、設定だけを次のように変えます (出力するファイルの拡張子も .gif にします)。

var options = new ExportOptionsSaveForWeb();
options.format = SaveDocumentType.COMPUSERVEGIF;
options.colors = 256; // 色数
options.colorReduction = ColorReductionType.SELECTIVE; // 減色の方法
options.dither = Dither.NONE; // ディザ (点で色を混ぜる処理) を使わない
options.transparency = true;

「Web 用に保存」ではなく、「別名で保存」の形式で書き出す方法もあります。

// PNG の複製として保存する (開いている文書はそのまま)
var options = new PNGSaveOptions();
options.compression = 6; // 0〜9。大きいほどファイルは小さく、処理は遅くなる
doc.saveAs(outFile, options, true, Extension.LOWERCASE);

置き場所と実行方法

1 回だけ実行するなら、「ファイル」メニューの「スクリプト」>「参照…」で .jsx ファイルを選ぶ
Photoshop のインストール先にある Presets/Scripts フォルダーに置いて Photoshop を起動し直すと、「ファイル」>「スクリプト」のメニューに名前が出る (フォルダーの表記は版や言語によって違うことがある)

スクリプトを書くときの道具としては、かつての ExtendScript Toolkit に代わり、Adobe が VS Code 向けに出している拡張機能 (ExtendScript Debugger) で、実行やデバッグができます。

今の選択肢

スクリプトを書かなくても済む場面もあります。

アクションとバッチ: 書き出しの操作をアクションとして記録し、「ファイル」>「自動処理」>「バッチ」で、フォルダー内のファイルにまとめて適用する
イメージプロセッサー: 「ファイル」>「スクリプト」>「イメージプロセッサー」で、JPEG・PSD・TIFF へのまとめた変換ができる
UXP: Photoshop の新しい版には、UXP という新しい拡張の仕組みがあり、パネルを持つプラグインや、.psjs 形式のスクリプトを今の JavaScript で書ける。ExtendScript も引き続き使えるが、新しく本格的な道具を作るなら UXP も検討する

書き出す形式は PNG が無難

ボタンやロゴ、図のような色数の少ない画像は、かつて GIF で書き出すのが定番でした。今は、次の理由から PNG のほうが無難です。

GIF は 256 色までで、透過も透明か不透明かの 2 段階だけ
PNG-8 も 256 色までだが、同じ画像なら GIF より小さくなることが多い
色数の多い画像や、なめらかな半透明が必要な画像は PNG-24 (PNG8 = false) で書き出せる

動きのある画像も、今は GIF より動画やアニメーションの WebP のほうが小さく済むことが多いです。写真を含めた画像の形式の選び方は、IE6 の透過 PNG 対策と、DD_belatedPNG で画像がずれる理由の後半でも紹介しています。

まとめ

Photoshop は ExtendScript (.jsx) で操作でき、Folder.selectDialog()・getFiles()・app.open()・exportDocument()・close() で、まとめて書き出せる
ExtendScript は ECMAScript 3 がもとなので、var と for 文で書く
「ファイル」>「スクリプト」>「参照…」で実行する。Presets/Scripts に置くとメニューに出る
書かずに済むならアクションとバッチ、新しく作るなら UXP も選択肢になる
色数の少ない画像も、GIF より PNG で書き出すのが無難

ExtendScript と .jsx

スクリプトの例

置き場所と実行方法

今の選択肢

書き出す形式は PNG が無難

まとめ

「JavaScript」のほかの記事