2013年 Fireworks Advent Calendar

Kazuma Sekiguchi

Fireworks 拡張機能「画像サイズ表示」

なにもの？

• @KAZUMA87

• Fireworks User Group(FwUG）の会長（？）

•デザイナーではなく、コーディングとかプログラムとか書いたり教えたりしてます（最近は教えてばっかり）

• FireworksはVer.2から愛用

Fireworksの利点

•拡張機能で機能を拡張できる•使い方で凄く楽に作業を進めることが可能

ラピッドプロトタイプ

•共有ライブラリに多量のUIが存在

• そのまま利用可能• スマホのアプリなどのモックアップは高速に作成できる

•使わないのはもったいない

ラピッドプロトタイプ

•スライスにリンクを張ることが可能• リンク先は「ページ」に対して張ることが可能

1.「ページ」で操作したときのインタラクション結果を作成

しておく

2.リンクを設定しておき、HTMLとして書き出す

3.そのままブラウザで試すことが可能

• コードを書かずにプロトタイプを作成できる！

デザイナーとコーダー

•デザイナーがデザインカンプを作成•コーダーがデザインカンプを見てコーディング

•画像の大きさなどは記入されていない・・・（素敵なデザイナーは除く）

•一つ一つクリックして大きさを確認し、それをHTMLにして・・・・

• 面倒なことこの上ない

デザイナーさんがんばれ

•デザイナーさんがカンプに画像のサイズとか余白サイズを入れてくれればOK

•コーダーも仕事がスムーズに済む•仕事も捗る！•終電の時間も気にしなくて済む！

某社の現実

デザインできたのじゃ明日納品なのじゃ

この画像とか

この画像のサイズはいくつよ・・・。

コーダー（めちゃくちゃ偉くない）

デザイナー様（めちゃくちゃ偉い）

サイズを測ろう

• Fwの便利ツール「ものさしツール」でちまちま測る

•「ものさしツール」便利だけど1pxズレ

ることがある

•別レイヤーに描画してくれないので、万が一適当なレイヤーを選択している状態

で描いたら、後が大変

画像サイズ

•画像サイズやオブジェクトのサイズが見て分かれば、コーディングしやすくなる

•「ものさしツール」ではイチイチ操作する必要があり、面倒

•選択したオブジェクトのサイズを表示するような機能があれば良い

作りました

画像サイズ表示拡張機能

•「画像サイズ表示拡張機能」•名前のまんま、選択した画像やオブジェクトのサイズを表示します

•同時に複数のオブジェクトを選択していてもOK

•サイズは別レイヤーに書かれるので、スライスなどで書き出す際にも非表示化すればOK

使い方

1.サイズを表示したいオブジェ

クトを選択

2.「コマンド」→「画像サイズ

表示」を選択

3.オブジェクトの真ん中に画像

のサイズと場所が描画されま

す

残念な点

•文字の色とサイズを変更できるようにパネルを作成したのですが、上手く動作しなくなってしまったため、あえなく

パネルを付けてません

• 新規のレイヤーの挿入がエラーになる、という現象に遭遇中

•デフォルトでは、文字色が#FFFFFF、

文字サイズが18ptです

色を変える

• Macなら

/ユーザー名/ライブラリ/Application Support/Adobe/Fireworks CS6/Commands/

• Winなら

C:¥Users¥ユーザー名¥AppData¥Roaming¥Adobe¥FireworksCS6¥Commands

を開きます

色を変える

1.「画像サイズ表示.jsf」をエディタで開きます

2. 1行目と2行目を任意の値に変更します

3.上書き保存します

4.次回のコマンド実行から変更された値で機能します

余白なども知りたい

•もっと高機能な拡張機能があるので、そちらをお薦めし

ます

• SPECCTR拡張機能

• http://www.specctr.com/

でも

•無料だし、手軽ですよ（汗•試しに使ってみてください

•ダウンロードはhttp://fwug.net/showSize.zip(ZXPバージョン）

http://fwug.net/showSizeMXP.zip（MXPバージョン）

からできます

素敵なFireworks生活とクリスマスを

素材：『画像素材を無料ダウンロード - www.beiz.jp』『商用フリーで使える影絵素材サイトシルエットデザイン』