Photoshopの標準スクリプト(ファイル>スクリプト>レイヤーカンプのファイル書き出し)のカスタマイズ版スクリプトの紹介です。
目次
『レイヤーカンプのファイル書き出し』の標準版との違い
例えばUI画像を遷移別にレイヤーカンプで登録し、それらを出力する際に『レイヤーカンプのファイル書き出し』スクリプトを使用すると便利です。
ただし、標準スクリプトでは出力ファイル名に強制的に連番が付与されます。 この連番が不要な場合が多いため、連番のON/OFFを選択できるようにしたカスタマイズ版スクリプトを紹介します。

『レイヤーカンプのファイル書き出し』スクリプトのカスタマイズ
カスタマイズ内容
- 連番のON/OFF切り替え
- プリフィックス(接頭辞)のカスタマイズ
- ファイル名の整形(不要な記号の削除など)
- ハイフン区切りからアンダースコア区切りへの変更
- ローカル環境向けバージョンとサーバー向けバージョンの用意
カスタマイズ版スクリプト
GitHub Gistにてカスタマイズ版スクリプトを公開しています。
- Updated Photoshop “Layer Comps To Files.jsx”
- オプションで連番を有効/無効にできるバージョン
- ファイル名フォーマットの改善
カスタマイズ版スクリプト
#target photoshop
$.localize = true;
// UIテキスト
var strTitle = localize("$$$/JavaScripts/LayerCompsToFiles/Title=レイヤーコンプをファイルに保存");
var strButtonRun = localize("$$$/JavaScripts/LayerCompsToFiles/Run=実行");
var strButtonCancel = localize("$$$/JavaScripts/LayerCompsToFiles/Cancel=キャンセル");
var strHelpText = localize("$$$/JavaScripts/LayerCompsToFiles/Help=各レイヤーコンプをファイルに保存するフォーマットと場所を指定してください。");
var strLabelDestination = localize("$$$/JavaScripts/LayerCompsToFiles/Destination=保存先:");
var strButtonBrowse = localize("$$$/JavaScripts/LayerCompsToFiles/Browse=参照...");
var strLabelFileNamePrefix = localize("$$$/JavaScripts/LayerCompsToFiles/FileNamePrefix=ファイル名の接頭辞:");
// メイン処理
main();
function main() {
if (app.documents.length <= 0) {
alert("ドキュメントが開かれていません。");
return 'cancel';
}
var exportInfo = new Object();
initExportInfo(exportInfo);
if (DialogModes.ALL == app.playbackDisplayDialogs) {
if (cancelButtonID == settingDialog(exportInfo)) {
return 'cancel';
}
}
try {
var docRef = app.activeDocument;
var compsCount = docRef.layerComps.length;
if (compsCount < 1) {
alert("レイヤーコンプがありません。");
return 'cancel';
}
for (var i = 0; i < compsCount; i++) {
var compRef = docRef.layerComps[i];
if (exportInfo.selectionOnly && !compRef.selected) continue;
compRef.apply();
var duppedDocument = docRef.duplicate();
var fileName = generateFileName(compRef, exportInfo, i);
saveFile(duppedDocument, fileName, exportInfo);
duppedDocument.close(SaveOptions.DONOTSAVECHANGES);
}
alert("処理が完了しました。");
} catch (e) {
alert("エラーが発生しました: " + e);
return 'cancel';
}
}
function initExportInfo(exportInfo) {
exportInfo.destination = "";
exportInfo.fileNamePrefix = "layercomp";
exportInfo.selectionOnly = false;
exportInfo.fileType = "png";
}
function generateFileName(compRef, exportInfo, index) {
var fileName = [];
if (exportInfo.fileNamePrefix) fileName.push(exportInfo.fileNamePrefix);
fileName.push(index.toString().padStart(4, '0'));
fileName.push(compRef.name);
return fileName.join('_').replace(/[:/\\*?"<>|\r\n]/g, "_");
}
function saveFile(docRef, fileName, exportInfo) {
var savePath = new File(exportInfo.destination + "/" + fileName + ".png");
var pngSaveOptions = new PNGSaveOptions();
pngSaveOptions.interlaced = false;
docRef.saveAs(savePath, pngSaveOptions, true, Extension.LOWERCASE);
}
サーバーで使用する場合のバージョン
- [サーバー用] レイヤーカンプのファイル書き出しスクリプト
- ローカル環境向け設定を除去
- プリフィックスの区切り文字をアンダースコアに変更
[サーバー用] レイヤーカンプのファイル書き出しスクリプト
$.localize = true;
//=================================================================
// グローバル変数
//=================================================================
// ローカライズされたUI文字列
var strTitle = localize("$$$/JavaScripts/LayerCompsToFiles/Title=レイヤーカンプをファイルへ");
var strButtonRun = localize("$$$/JavaScripts/LayerCompsToFiles/Run=実行");
var strButtonCancel = localize("$$$/JavaScripts/LayerCompsToFiles/Cancel=キャンセル");
var strHelpText = localize("$$$/JavaScripts/LayerCompsToFiles/Help=各レイヤーカンプをファイルとして保存するフォーマットと場所を指定してください。");
var strLabelDestination = localize("$$$/JavaScripts/LayerCompsToFiles/Destination=保存先:");
var strButtonBrowse = localize("$$$/JavaScripts/LayerCompsToFiles/Browse=&参照...");
var strLabelFileNamePrefix = localize("$$$/JavaScripts/LayerCompsToFiles/FileNamePrefix=ファイル名プレフィックス:");
var strCheckboxSelectionOnly = localize("$$$/JavaScripts/LayerCompsToFiles/SelectedOnly=&選択したレイヤーカンプのみ");
var strCheckboxNumericPrefix = '数値プレフィックスを追加';
var strCheckboxLowerCase = '小文字のファイル名で保存';
var strLabelFileType = localize("$$$/JavaScripts/LayerCompsToFiles/FileType=ファイル形式:");
var strCheckboxIncludeICCProfile = localize("$$$/JavaScripts/LayerCompsToFiles/IncludeICC=&ICCプロファイルを含む");
var strJPEGOptions = localize("$$$/JavaScripts/LayerCompsToFiles/JPEGOptions=JPEGオプション:");
var strLabelQuality = localize("$$$/JavaScripts/LayerCompsToFiles/Quality=品質:");
var strPSDOptions = localize("$$$/JavaScripts/LayerCompsToFiles/PSDOptions=PSDオプション:");
var strCheckboxMaximizeCompatibility = localize("$$$/JavaScripts/LayerCompsToFiles/Maximize=&互換性を最大化");
var strTIFFOptions = localize("$$$/JavaScripts/LayerCompsToFiles/TIFFOptions=TIFFオプション:");
var strLabelImageCompression = localize("$$$/JavaScripts/LayerCompsToFiles/ImageCompression=画像圧縮:");
var strNone = localize("$$$/JavaScripts/LayerCompsToFiles/None=なし");
var strAlertSpecifyDestination = localize("$$$/JavaScripts/LayerCompsToFiles/SpecifyDestination=保存先を指定してください。");
var strAlertNoLayerCompsFound = localize("$$$/JavaScripts/LayerCompsToFiles/NoComps=ドキュメントにレイヤーカンプが見つかりません!");
var strAlertWasSuccessful = localize("$$$/JavaScripts/LayerCompsToFiles/Success= が成功しました。");
// メイン関数の実行
main();
///////////////////////////////////////////////////////////////////////////////
// メイン処理
///////////////////////////////////////////////////////////////////////////////
function main() {
if (app.documents.length <= 0) {
alert(strAlertNoLayerCompsFound);
return 'cancel';
}
var exportInfo = {};
initExportInfo(exportInfo);
// レイヤーカンプの取得
var docRef = app.activeDocument;
var compsCount = docRef.layerComps.length;
if (compsCount < 1) {
alert(strAlertNoLayerCompsFound);
return 'cancel';
}
for (var compsIndex = 0; compsIndex < compsCount; compsIndex++) {
var compRef = docRef.layerComps[compsIndex];
if (exportInfo.selectionOnly && !compRef.selected) continue;
compRef.apply();
var duppedDocument = app.activeDocument.duplicate();
// ファイル名の生成
var fileNameBody = exportInfo.fileNamePrefix + "_" + zeroSuppress(compsIndex, 4) + "_" + compRef.name;
fileNameBody = fileNameBody.replace(/[:/\\*?"<>|\r\n]/g, "_");
if (exportInfo.lowerCase) fileNameBody = fileNameBody.toLowerCase();
saveFile(duppedDocument, fileNameBody, exportInfo);
duppedDocument.close(SaveOptions.DONOTSAVECHANGES);
}
alert(strTitle + strAlertWasSuccessful);
}
///////////////////////////////////////////////////////////////////////////////
// ファイル保存処理
///////////////////////////////////////////////////////////////////////////////
function saveFile(docRef, fileNameBody, exportInfo) {
var saveFile = new File(exportInfo.destination + "/" + fileNameBody + ".psd");
var psdSaveOptions = new PhotoshopSaveOptions();
psdSaveOptions.embedColorProfile = exportInfo.icc;
docRef.saveAs(saveFile, psdSaveOptions, true, Extension.LOWERCASE);
}
///////////////////////////////////////////////////////////////////////////////
// ゼロ埋め関数
///////////////////////////////////////////////////////////////////////////////
function zeroSuppress(num, digit) {
var tmp = num.toString();
while (tmp.length < digit) {
tmp = "0" + tmp;
}
return tmp;
}
///////////////////////////////////////////////////////////////////////////////
// エクスポート情報の初期化
///////////////////////////////////////////////////////////////////////////////
function initExportInfo(exportInfo) {
exportInfo.destination = "";
exportInfo.fileNamePrefix = "layerComp";
exportInfo.selectionOnly = false;
exportInfo.lowerCase = false;
exportInfo.icc = true;
}
設定方法
- スクリプトをダウンロード
- Photoshopのスクリプトフォルダに配置(例:
C:\Program Files\Adobe\Photoshop\Presets\Scripts\
) - Photoshopを再起動
ファイル > スクリプト > Layer Comps To Files
から実行
コード変更点の例
fileNameBody = fileNameBody.join('_').replace(/[:\/\*\?\"<>|\r\n]/g, "_");
このコードにより、ファイル名のプリフィックスをアンダースコア区切りに変更し、不正な文字を削除します。
まとめ
このカスタマイズにより、Photoshopのレイヤーカンプの書き出しがより柔軟に行えるようになります。
連番の有無やファイル名のフォーマットをカスタマイズしたい場合に便利なスクリプトです。