[Fireworks] HTMLコーディングに便利な、スライス画像のスニペットを書き出すFireworks拡張機能を作りました

2012/05/23

こんにちは。きんくまです。

HTMLコーディングに便利な、スライス画像のスニペットを書き出すFireworks拡張機能を作りました。
タイトル長いです、、。

—
12/05/27更新
githubにソースコードをアップしました。
https://github.com/KinkumaDesign/ImageSnippet
—

スクリーンショット

image_snippet2

使い方

例1 )
こんな感じのスライスがあったとします。

image_snippet1

このスライスを選択します。（複数には対応していないので、1つだけ選択します）

それで、パネルの挿入ボタンを押すと下記のようにスニペットエリアに、スライスの情報を反映させたコードが吐き出されます。

image_snippet3

この吐き出されるコードは、上のフォーマット設定エリアに書いてある文字列の中で、
該当部分が置換されて出てきています。

今回のフォーマットのテキストはこんな感じです。

<img width="%w" height="%h" src="images/%p" alt="">

%w, %h, %p などの文字列が入っています。これがスライスの名前や幅、高さに変更されます。

取得できる値は次の5つです。

フォーマット	スライスの値
%p	名前
%w	幅
%h	高さ
%x	x
%y	y

フォーマットはタブを切り替えることで、６つまで設定することが可能です。

例2)
CSSを書いているときに、画像のwidth,heightを目視で調べて、
またエディタに戻って打ち込んで、、、という作業は続けているとすごく疲れます。
そんなときに、こんなフォーマットを書いておきます。

width:%wpx;
height:%hpx;
left:%xpx;
top:%ypx;

それで、またスライスを選択して、挿入ボタンを押すとこんなコードが吐き出されます。

width:99px;
height:95px;
left:47px;
top:60px;

あとは、挿入ボタンのとなりのクリップボードボタンを押して、クリップボードに転送して、
好きなエディタに戻ってコピペすれば楽ちんです。

フォーマットには好きな文字列をいれることが可能なので、案件や普段使っている書き方を
書いておくと良いと思います。

また、スニペットエリアは挿入ボタンを押すたびにテキストが追加されていくので、
ある程度画像情報をまとめて吐き出した後、コピペしてコーディング用のアプリにもっていくのが
効率がいいと思います。

利点

・アプリケーションを頻繁に行き来する必要がない。
・コーディングエディタ（DWとか）で、画像を開くダイアログを出して、目視でファイル名を確認して、、、という作業が不要になるので、目が疲れない
・幅、高さなどを目で追う必要がないので、目が疲れない

開発の経緯

これのもととなるもの自体は2〜3年前に作って当時かなり使用していました。
コーディングの速度が早くなって、便利だなーと思ってました。
ただ、それがあまりに個人使用だったので、もう少し汎用性のあるものを作りたいなと思ってました。
でも自分は最近はHTMLコーディングはメインでしていないので、使う機会が減っていた状態でした。
前に作ったFWの拡張機能たちが、なんやかんやと好評で細々と使われているようなので、これはぜひ作りたいと思い、作った次第です。

インストール方法

1) データをダウンロードします。
>> ImageSnippet

2) 該当パスにコピーします
Macだったらこんな感じ。

/Applications/Adobe Fireworks CS5.1/Configuration/Command Panels/KinkumaUtility/ImageSnippet.swf
/Applications/Adobe Fireworks CS5.1/Configuration/Command Panels/KinkumaUtility/jsf/ImageSnippet.jsf

Winな人は同じようなパスがあると思います。Program Files以下だったかも

3) Fireworksを立ち上げ直します

4) メニューのWindow > KinkumaUtility > ImageSnippet
を選択するとパネルが出てきます

5) あとは使い方の説明通りです