##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);
    };
  }
}

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