クリエイター手抜きプロジェクト[384]Adobe Photoshop CS3〜CC編 レイヤーの座標をCSSファイルに書き出す/古籏一浩

投稿:  著者:  読了時間:7分(本文:約3,300文字)


今回は、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");


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

プラモデルを組み立てるという行為は、小学生の頃も中学生の頃もありませんでした。貧乏だったからです。仕方ないので、厚紙とハサミとセロテープを使って図面から設計して「超時空要塞マクロス」のバトロイドバルキリーとか作ってました。

完成させたのはVF-JとVF-S。ちゃんと戦闘機からロボット形態に変形もできるように作ってました。厚紙とセロテープが使える時点で結構リッチなことで、その前は粘土。粘土なら使い回しができるというわけです。

・バトロイドバルキリー
< http://goo.gl/dAlf9E >
< http://ja.wikipedia.org/wiki/可変戦闘機_(マクロスシリーズ) >

JavaScriptも、元々はJavaが動くような高級なパソコンがなかったので、仕方なく遊べる言語ということで始めただけでした。増税で切羽詰まったり、どうしようもなくなると、いろいろ知恵が回ってよいかもしれません。悪知恵しか出てこないかもしれませんが。

・4K/ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・JavaScript逆引きハンドブック
< http://www.amazon.co.jp/dp/4863541082 >

・D3.js例文辞典
< http://www.openspc2.org/reibun/D3.js/ >

・Dart例文辞典
< http://www.openspc2.org/reibun/Dart/ver1.1/ >

・Adobe CS2〜CS6,CC JavaScriptリファレンス&ライブラリ
< http://www.openspc2.org/reibun/AdobeJS/index.html >

・Adobe JavaScriptリファレンス(検索できないのはKindleのバグらしい)
< http://www.amazon.co.jp/dp/4844395955 >

・Nexus 7(アンドロイドタブレット)使い方辞典
< http://www.openspc2.org/reibun/Android/Nexus7/ >

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< https://www.ddc.co.jp/estore/cgi/item/start.cgi?m=DetailViewer&record_id=243 >
吉田印刷所の「印刷の泉」でも購入できるようになりました。