今回は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]);v
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");
[
サンプルをダウンロード]