クリエイター手抜きプロジェクト[383]Adobe Illustrator CS3〜CC編 選択された図形の情報をCSSファイルに書き出す/古籏一浩

投稿:  著者:  読了時間:9分(本文:約4,100文字)


今回は、Illustratorで選択された図形の情報をCSSファイルに書き出すスクリプトです。Illustrator CCからは、メニューのファイル>書き出し で表示される保存ダイアログでファイル形式をCSSにすると、レイヤーのスタイルが書き出されます。


CCでは手軽にCSS書き出しができますが、CS6では残念ながらできません。ということで作成したのが以下のスクリプトです。選択した図形のCSSをファイルに保存できます。図形やテキストフレームを選択すると、枠のサイズと色、背景色を書き出します。

なお、CS3〜CS4では座標系が異なるため動きません。CS5でもカラーを取得できないため正しく動作しません。

テキストフレームに#menuなど文字を入れておくと、その文字をそのままCSSのID名やクラス名として利用されます。何も文字がない場合(通常のパス)には「#item番号」のID名を自動的に生成します。

もしクラス名にしたい場合は、name = "#item"+count;の行をname = ".item"+count;のように変更してください。


function writeCSS(selObj, saveObj, unit){
var cssText = "";
var count = 0;
for(var i=0; i<selObj.length; i++){
var rect = selObj[i].geometricBounds;
var x1 = Math.floor(rect[0]);
var y1 = Math.floor(-rect[1]);
var x2 = Math.floor(rect[2]);
var y2 = Math.floor(-rect[3]);
var lineWidth = selObj[i].strokeWidth;
if (!lineWidth){ // 線がない場合は0にする
lineWidth = 0;
}
var lineColor = selObj[i].strokeColor;
var R = G = B = 0;
if (lineColor){
R = Math.floor(lineColor.red);
G = Math.floor(lineColor.green);
B = Math.floor(lineColor.blue);
}
var fillText = "";
if (selObj[i].filled){ // 塗り潰されている場合
var fillColor = selObj[i].fillColor;
var fR = Math.floor(fillColor.red);
var fG = Math.floor(fillColor.green);
var fB = Math.floor(fillColor.blue);
fillText = "background-color: rgb("+fR+","+fG+","+fB+");";
}
var name = selObj[i].contents;
if (!name){
name = "#item"+count;
count++;
}
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; border: "+lineWidth+unit+" solid rgb("
+R+","+G+","+B+"); "+fillText+"}");
}
}
(function(){
if (app.selection.length == 0){
alert("何か選択してから実行してください");
return;
}
var saveObj = File.saveDialog("保存するファイル名を入力して下さい");
if (!saveObj){ return; } // キャンセルされたら何もしない
var flag = saveObj.open("w");
if (!flag){
alert("ファイルに書き込めません");
return;
}
writeCSS(app.selection, saveObj, "px");
saveObj.close();
})();


カラーや線の太さは不要で座標値だけ書き出したい場合は、
以下のスクリプトになります。


function writeCSS(selObj, saveObj, unit){
var cssText = "";
var count = 0;
for(var i=0; i<selObj.length; i++){
var rect = selObj[i].geometricBounds;
var x1 = Math.floor(rect[0]);
var y1 = Math.floor(-rect[1]);
var x2 = Math.floor(rect[2]);
var y2 = Math.floor(-rect[3]);
var name = selObj[i].contents;
if (!name){
name = "#item"+count;
count++;
}
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(){
if (app.selection.length == 0){
alert("何か選択してから実行してください");
return;
}
var saveObj = File.saveDialog("保存するファイル名を入力して下さい");
if (!saveObj){ return; } // キャンセルされたら何もしない
var flag = saveObj.open("w");
if (!flag){
alert("ファイルに書き込めません");
return;
}
writeCSS(app.selection, saveObj, "px");
saveObj.close();
})();


座標値いまいちおかしい場合は以下の行を変更してください。
変更するとCS3やCS4でも動作します。

var x1 = Math.floor(rect[0]);
var y1 = Math.floor(-rect[1]);
var x2 = Math.floor(rect[2]);
var y2 = Math.floor(-rect[3]);

 ↓

var x1 = Math.floor(rect[0]);
var y1 = Math.floor(activeDocument.height-rect[1]);
var x2 = Math.floor(rect[2]);
var y2 = Math.floor(activeDocument.height-rect[3]);

また、CSSの数値の単位を変更する場合は
以下の行の"px"を"pt"などに変えてください。

writeCSS(app.selection, saveObj, "px");


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

明日から消費税が8%。内税計算だったのを全部外税計算にしなおしました。それにしても、みなさん結構買いだめするんですねぇ。ネット通販で注文が多すぎてモノが届かないらしい。

近所のホームセンターも、山のように積んであったティッシュだったか、紙系のものが一週間とたたずなくなってました。仕方ないので消費税で売り上げが落ちて、さらに安くなるのを待ちます。

4K/5KカメラRED Scarlet-Xのファームウェアをバージョンアップしてもらいました。いつの間にか一年の間に2つもバージョンがあがって、できることが変わってました。

それで、5K映像の撮影も自由度が高くなっていたので一回挑戦してみたら、4Kとは違って簡単に撮影というわけにはいきませんでした。そのうち、奮闘記(?)でも書いてみようかと思います。

4Kから5Kにしただけで、ファイルサイズが2倍近くになるのは何とも。これだと計算上は4GBで50秒も撮影できない(中圧縮でも。低圧縮ならもっと秒数が短くなる)。計算すると64GB SSDでも13分ほどしか撮影できない……。6Kだと数分で4GBが終わるというところなんでしょうか。

・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 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。