Fireworksのガイドラインをスクリプトで作る < Mac

2009年06月28日

Fireworksのガイドラインをスクリプトで作る @ Mac

Blueprint CSSを使った場合、デザインは指定したグリッドに合わせる必要があります。全体的なデザインをいきなりHTMLで作る時は関係ないのですが、Fireworks CS3で作る場合、Blueprint CSSで使用する数値に会わせた形のガイドラインを作っておくと便利なので、ガイドライン作成のスクリプトを書いてみました。Freehandだとこの手の事は凄く簡単なんだけどなぁ。まぁJavascriptで出来るので、こちらの方が、応用は出来るとも言えます。

Blueprint CSSのデフォルトでは、幅が950pxで、コラム数24、コラム幅30px、余白が10pxになっているのですが、今回は、760pxの幅で使用したいので、コラム幅24px、余白が8pxにします。(Boksを使うと760pxに指定しただけで、コラム幅や余白はこの数字になります。)

スクリプトはこんな感じです。

var num = 24;//コラム数
var col = 24;//コラム幅
var gutter = 8;//余白
var w = col + gutter;

fw.getDocumentDOM().setGridSize({x:gutter, y:gutter});
for (i=1; i< num; i++){
fw.getDocumentDOM().addGuide(w*i, "vertical");
fw.getDocumentDOM().addGuide(w*i-gutter, "vertical");
}

このスクリプトをgrid.jsfとか適当な名前で保存して、コマンドメニューからスクリプトの実行をしてください。

グリッドの設定を余白の幅に合わせていますが、この辺は使いやすい様に変更して下さい。