Sketchで作ったデータをPhotoshopに移動させる

Sketchを使っているのが自分だけで、他の人が開けないのでPhotoshopに移動させたい。編集できる必要はなくて、各オブジェクトのサイズや位置などが分かるリッチなビューアとして使ってもらう。

Sketch側のレイヤー構成はこんな感じで、パーツ単位でスライスを指定しておく。

SketchToolをインストール(install.shを実行するかパスを通せば良い)し、

sketchtool export slices design.sketch

とするとスライスが書き出される。「-o パス」で書き出し先を指定できるはずだがエラーでうまく動かず「1」というフォルダが作られてしまう。同じ名前のスライスがあると上書きされてしまうので注意する。

sketchtool list slices design.sketch > export.json

などとするとスライスの情報がJSON形式で出力される。

スライスされた各パーツのサイズや位置が記録されているので、あとはこのJSONを元にPhotoshopで再現してあげればよい。PSD.rbも使ってみたかったが、PhotoshopのJavaScriptでやってみた。JSONのパースは信頼のCrockford先生によるJSON2を使用。書き出したスライスデータは「export」というフォルダ名にして、同じ階層に置いてある。Photoshopを起動して「File>Scripts>Browse...(英語環境にしてるので)」を選択して、sketch2psd.jsxと名付けた下のファイルを選択する。

sketch2psd.jsx

#include "json2.js";

var currentDir = new File($.fileName).parent;
var file = new File(currentDir + "/export.json");
file.open();
var jsonString = file.read();
var layoutJson = JSON.parse(jsonString);
var slices = layoutJson.pages[0].slices;
var bounds = layoutJson.pages[0].bounds.split(",");
var offsetX = -parseInt(bounds[0], 10);
var offsetY = -parseInt(bounds[1], 10);
var width = parseInt(bounds[2], 10);
var height = parseInt(bounds[3], 10);
var doc = documents.add(width, height, 72, "psd", NewDocumentMode.RGB);

for(var i=0; i<slices.length; i++) {
  var imgFile = new File(currentDir + "/export/" + slices[i].name + ".png");
  var openedDoc = open(imgFile);
  var partsName = slices[i].name;
  openedDoc.name = partsName;
  openedDoc.selection.selectAll();
  openedDoc.selection.copy();
  openedDoc.close();
  activeDocument = doc;
  doc.paste();
  
  var currentLayer = activeDocument.activeLayer;
  currentLayer.name = partsName;
  currentLayer.translate(-currentLayer.bounds[0], -currentLayer.bounds[1]);
  currentLayer.translate(slices[i].rect.x + offsetX, slices[i].rect.y + offsetY);
}

処理内容としては、先ほどexportしたpngを開いて全選択し、ひたすらコピペしている。PhotoshopのJavaScriptでのファイルの扱い方はJAVASCRIPT TOOLS GUIDEというドキュメントに書かれているのだけど、2014版がないし、公式でも探せなくて泣ける。それ以外はここにある。

Alignなどの問題か、文字のレイヤーなどパーツによってずれが出たり、Sketch上で位置を修正してもJSONで書き出した際にboundsが更新されてなかったり(offsetX, offsetYで対応してある箇所)、おかしなところが結構あって、仕事で使うには厳しいといった印象。それでも手でひとつひとつ並べるよりかは楽。