photshop で position を 出してくれるスクリプト

photoshop と front の仕事

frontend の仕事をしていると photoshop から画像を切り出してポジションを出すという作業が 少なくない機会訪れるでしょう。

position の割り出し方

この作業は非常に面倒。
楽したいなら、プラグイン とか、 sketch を使うとか

いろいろ手はあります

昔ながらの絶対座標なケース

時には絶対座標でレイアウトするとかってケースは多々あります。
こういうときに欲しいツールがない。。。
ならば自作だ！！！

photoshop plugin

つくりましょうよ jsx
photoshop の preset/scripts のフォルダにファイルを打ち込めばok

ソースコード

これは自分用なので結構汚いし、用途があれですが、、、
全てのレイヤーのポジションを網羅していくスクリプトです。
でそれをテキストファイルに書き出します。

$.appEncoding = "UTF-8";
var CR = String.fromCharCode(13);
var fileName = File.saveDialog("保存ファイル名を入力");

var fileObj = new File(fileName);
var nest = 0;


if ( fileObj.open('w') ) {

  for (var i = 0; i < activeDocument.layers.length; i++) {
    var layer = activeDocument.layers[i];
    get_layer_pos(layer, fileObj, nest);
  }
  fileObj.close();

}
function get_layer_pos(target, fileObj, nest) {
  var bounds = target.bounds;

  for (var i = 0; i < bounds.length; i++) {
    bounds[i] = parseInt(bounds[i]);
  };

  // 高さと幅も取れるよ。
  var w = bounds[2] - bounds[0] ;
  var h = bounds[3] - bounds[1] ;

  var x = bounds[0];
  var y = bounds[1];

  // インデント用のコードだよ。要らないなら消そう。
  var length = 15;
  var name = "";
  for (var i = 0; i < nest; i++) {
    length -= 2;
    name += "  ";
  };
  name += target.name;
  length -= target.name.length;

  for (var i = 0; i < length; i++) {
    name += " ";
  };

  // ファイル書き出し
  fileObj.write ( name + ':\t{"x": ' + x + ', "y": ' + y + '}' + CR );

  if(target.layers){
    for (var i = 0; i < target.layers.length; i++) {
      get_layer_pos(target.layers[i], fileObj, nest+1);
    };
  }
}

ちょっとしたケースなら自分でかいて自動化していきましょう！