Photoshopで画像をスライスするJS

Photoshopで画像をスライスするJS:

日頃、コーディングをしていると、ソースを書くこと以外にも時間がかかる作業があります。

それが画像の用意。いわばPSDから必要な部分のみをスライスをすることです。

（xdとかsketchならサクサクなのですが）

基本的には、スライスツールを使用したり、ガイドを引いてスライスしたりします。

あとは、必要な画像があるレイヤーを新規で複製し、トリミングするなどの方法をアクションに入れてスライスしていたりします。

もう少し楽にしたい。。。。

ここで思うのが、もう少し楽にしたい。。。。

ということで、スライスを自動でやってくれるJSってないの？と思い、探してみたところ、作成している方がいました！
http://kimizuka.hatenablog.com/entry/2016/08/02/104129

少しだけ改造

・リサイズのしかた

・jpgとpngの切り分け

を調整・追加しました。

var ORIGINAL = { // ドキュメントサイズのオリジナルを保存 
    WIDTH  : app.activeDocument.width, 
    HEIGHT : app.activeDocument.height 
  }, 
    folder          = Folder.selectDialog("書き出し先を選択"), // 書き出し先になるフォルダを選択 
    layerSetsLength = activeDocument.layerSets.length; // レイヤーセットの数を取得 
 
if (folder) { // 書き出し先になるフォルダがあるとき（キャンセルボタンを押すとfalseの方の処理になる） 
  preferences.rulerUnits = Units.PIXELS; // 単位をpxに設定 
 
  for (var i = 0; i < layerSetsLength; ++i) (function(i) { 
    hidden(activeDocument.layerSets[i]); 
  })(i); 
 
  for (var i = 0; i < layerSetsLength; ++i) (function(i) { 
    slice(activeDocument.layerSets[i]); 
  })(i); 
} else { 
  alert("ERROR: 書き出し先を選択してください"); 
} 
 
function hidden(layerSet) { 
  var layers = layerSet.artLayers; // レイヤーセット内のレイヤーの参照を変数に保存 
 
  for (var i = 0; i < layers.length; ++i) (function(i) { 
    layers[i].visible = false; // ループでレイヤーを非表示にする 
  })(i); 
} 
 
function slice(layerSet) { 
  var saveFolder = new Folder(folder.fsName + "/" + layerSet.name), // 書き出し先のフォルダを作成 
      pngOpt    = new ExportOptionsSaveForWeb(), // オプションを作成（png） 
      jpgOpt    = new ExportOptionsSaveForWeb(), // オプションを作成（jpg） 
      layers    = layerSet.artLayers; 
 
  saveFolder.create(); 
 
  pngOpt.format     = SaveDocumentType.PNG; // pngで書き出し 
  pngOpt.PNG8 = false; //png24 
  pngOpt.optimized  = true; // 最適化設定 
  pngOpt.interlaced = false; // インターレース設定 
 
  jpgOpt.format = SaveDocumentType.JPEG; // jpgで書き出し 
  jpgOpt.includeProfile = false; //カラープロファイルの読み込み 
  jpgOpt.interlaced = false; // インターレース設定 
  jpgOpt.optimized = true;  //最適化 
  jpgOpt.quality = 100; //品質　100の時最高画質 
  jpgOpt.blur = 0; //ぼかし 
  jpgOpt.matteColor = new RGBColor(); //マットカラーを白に 
  jpgOpt.matteColor.red = 255; 
  jpgOpt.matteColor.green = 255; 
  jpgOpt.matteColor.blue = 255; 
 
 
  for (var i = 0; i < layers.length; ++i) (function(i) { 
    var layername = layers[i].name // レイヤー名取得 
    if(layername.match(/.png/)){ 
      var saveFile = new File(saveFolder.fsName + "/" + i + ".png") // 通し番号でファイルを作成（png） 
    } else { 
      var saveFile = new File(saveFolder.fsName + "/" + i + ".jpg") // 通し番号でファイルを作成（jpg） 
    }; 
 
    var top      = layers[i].bounds[1], 
        left     = layers[i].bounds[0]; 
 
    layers[i].visible = true; // レイヤーを表示 
    activeDocument.activeLayer = layers[i]; // レイヤーをアクティブに 
    activeDocument.resizeCanvas((ORIGINAL.WIDTH - left), (ORIGINAL.HEIGHT - top), AnchorPosition.BOTTOMRIGHT); // 右下基準でドキュメントをリサイズ 
 
    var rewidth   = layers[i].bounds[2], // リサイズ後の幅を取得 
        rehight   = layers[i].bounds[3];  
 
    activeDocument.resizeCanvas(rewidth, rehight, AnchorPosition.TOPLEFT); // 左上基準でドキュメントをリサイズ 
 
    if(layername.match(/.png/)){ 
      activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, pngOpt); // png書き出し 
    } else { 
      activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, jpgOpt); // jpg書き出し 
    }; 
 
    layers[i].visible = false; // レイヤーを非表示にする 
    activeDocument.resizeCanvas(ORIGINAL.WIDTH, ORIGINAL.HEIGHT, AnchorPosition.BOTTOMLEFT); // ドキュメントサイズを元に戻す 
  })(i); 
} 

使い方

上記のソースを、jsxかjsの拡張子で保存してください。

jsxの使い方は下記サイトを参考してください。おおまかに説明すると、jsxデータを、PhotoshopのScriptsフォルダに格納します。
http://www.go-next.co.jp/blog/web/photoshop/13019/

jsで使う場合は、Photoshopの「ファイル」→「スクリプト」→「参照」でjsを使用してください。

手順

・書き出したい画像を統合してください。（該当しないレイヤー残ってたらエラーして止まります。2階層目もエラーします。）

・png画像にしたいものにはレイヤー名に「.png」を入れてください。

・その画像をグループにまとめます。

状態的には下記画像のような状態です。

・スクリプトを使用。

グループと同じフォルダができ、下記画像のような感じで書き出されます。

楽になっていない...w

結局のところ、このJSを使う前提で、PSDデータを作成しないといけないので、使うにしてもまずはPSDデータの整理が必要なので、楽にならず。。。。

しかも、ちょっとしたことでエラーになる。↓上にも書きました。こうゆうところ
該当しないレイヤー残ってたらエラーして止まります。2階層目もエラーします。

まとめ

結局のところは、ちゃんと使うことができていないので、使えるようにブラッシュアップしていきたいです。

ただ、自分自身PhotoshopのJSに慣れていないところもあるので、よろしければ何かご意見いただければ幸いです。

---

FORK Advent Calendar 2018
14日目 Vue.js のサイト上での使用は NG だけど、Vue.js での開発はあきらめなかった話 @megurock