今回はPhotoshopで選択された図形の情報をCSSファイルに書き出すスクリプトです。Photoshop CS6/CCではレイヤー情報をCSSとして取得できます。
・レイヤーから CSS をコピー
http://helpx.adobe.com/jp/photoshop/using/copy-css-shape-or-text.html
しかし、いちいち手作業でレイヤー情報を書き出すのは面倒です。また、CS3など古いバージョンのPhotoshopではCSSへの書き出し機能がありません。ということで、以下がレイヤーの座標値を書き出すスクリプトです。このスクリプトはフラットなレイヤーのみ対象でレイヤーセット内にあるレイヤーは処理しません。
function writeCSS(saveObj, unit){
var count = 0;
var selObj = activeDocument.artLayers;
for(var i=0; i<selObj.length; i++){
// 背景なら処理しない
if(selObj[i].isBackgroundLayer){ continue; }
var rect = selObj[i].bounds;
var x1 = Math.floor(rect[0]);
var y1 = Math.floor(rect[1]);
var x2 = Math.floor(rect[2]);
var y2 = Math.floor(rect[3]);
// レイヤー名をCSSのID名などにする
var name = selObj[i].name;
var w = x2 - x1;
var h = y2 - y1;
saveObj.writeln(name+" { top : "+y1+unit+"; left : "
+x1+unit+"; width : "+w+unit+"; height : "+h+unit
+"; position: absolute; }");
}
}
(function(){
var saveObj = File.saveDialog("保存するファイル名を入力して下さい");
if (!saveObj){ return; } // キャンセルされたら何もしない
var flag = saveObj.open("w");
if (!flag){
alert("ファイルに書き込めません");
return;
}
saveObj.encoding = "utf-8";
saveObj.lineFeed = "windows";
writeCSS(saveObj, "px");
saveObj.close();
})();
レイヤーセットを使用しており、深い階層にあるレイヤーの情報も一括して書き出す場合は以下のスクリプトになります。
function writeCSS(saveObj, unit){
var count = 0;
(function(defObj){
var selObj = defObj.artLayers;
for(var i=0; i<selObj.length; i++){
// 背景なら処理しない
if(selObj[i].isBackgroundLayer){ continue; }
var rect = selObj[i].bounds;
var x1 = Math.floor(rect[0]);
var y1 = Math.floor(rect[1]);
var x2 = Math.floor(rect[2]);
var y2 = Math.floor(rect[3]);
// レイヤー名をCSSのID名などにする
var name = selObj[i].name;
var w = x2 - x1;
var h = y2 - y1;
saveObj.writeln(name+" { top : "+y1+unit+"; left : "
+x1+unit+"; width : "+w+unit+"; height : "+h+unit
+"; position: absolute; }");
// レイヤーセットは再帰を使って処理
}
for(var i=0; i<defObj.layerSets.length; i++){
arguments.callee(defObj.layerSets[i]);
}
})(activeDocument);
}
(function(){
var saveObj = File.saveDialog("保存するファイル名を入力して下さい");
if (!saveObj){ return; } // キャンセルされたら何もしない
var flag = saveObj.open("w");
if (!flag){
alert("ファイルに書き込めません");
return;
}
saveObj.encoding = "utf-8";
saveObj.lineFeed = "windows";
writeCSS(saveObj, "px");
saveObj.close();
})();
CSSの数値の単位を変更する場合は以下の行の"px"を"pt"などに変えてください。
writeCSS(saveObj, "px");
[
サンプルをダウンロード]