Illustrator CS5/CS6/CC編 ページ内にある文字をHTMLファイルとして書き出す

今回のスクリプトは、ページ内にある文字をHTMLファイルとして書き出すものです。Illustratorでレイアウトした位置情報と幅も書き出されます。

以下のスクリプトを実行すると、保存するHTMLファイル名を聞いてきますので入力します。これで、すぐにHTMLファイルが生成されます。

タグはHTML5にしてありますが、テキストフレーム内の改行は処理していません。単純にテキストフレームをHTMLとして書き出しているだけです。


// ページ内のテキストフレームをHTML5として出力
(function(){
var savefile = File.saveDialog("保存先とHTMLファイル名を入れてください");
if (!savefile){ return; }
var flag = savefile.open("w");
if (!flag){
alert("ファイルを保存できません");
return;
}
savefile.encoding = "utf-8";
var htmlText = '<!DOCTYPE html"><html><meta charset="utf-8"><title>';
htmlText += app.activeDocument.name+"</title></head><body>";
var tfObj = app.activeDocument.textFrames;
for(var i=0; i<tfObj.length; i++){
var text = tfObj[i].contents; // 文字を読み出し
var rect = tfObj[i].geometricBounds;
var x1 = rect[0];
var y1 = -rect[1];
var x2 = rect[2];
var y2 = -rect[3];
var w = parseInt(x2- x1);
var h = parseInt(y2 - y1);
htmlText += '<div style="position:absolute;';
htmlText += 'top:'+y1+'px;left:'+x1+'px;width:'+w+'px;height:'+h+'px;">';
for(var j=0; j<text.length; j++){
var fsize = tfObj[i].characters[j].characterAttributes.size;
var fcol = tfObj[i].characters[j].characterAttributes.fillColor;
var R = fcol.red;
var G = fcol.green;
var B = fcol.blue;
//htmlText += '<span style="font-size:'+fsize+'pt;';
//htmlText += 'color:rgb('+R+","+G+","+B+');">'+text.charAt(j)+'</span>';
htmlText += text.charAt(j);
}
htmlText += "</div>";
}
savefile.write(htmlText);
savefile.close();
alert("書き出し完了");
})();

このスクリプトでは、テキストフレームの文字サイズと色は書き出されません。
サイズと色を書き出すと改行されなくなるのでコメントにしてあります。試し
にやってみたい人は、以下のコードの先頭//を削除してください。

//htmlText += '<span style="font-size:'+fsize+'pt;';
//htmlText += 'color:rgb('+R+","+G+","+B+');">'+text.charAt(j)+'</span>';

CS5用に作成したものですがCS6、そして最新版のCCでも動くと思います。


[サンプルをダウンロード]