Fireworks Advent Calendar 2013年用 Fireworks拡張機能「画像サイズ表示」の使い方

1. Fireworks 拡張機能
「画像サイズ表示」
2013年 Fireworks Advent Calendar
Kazuma Sekiguchi

2. なにもの？
• @KAZUMA87
• Fireworks User Group(FwUG）の会長（？）
• デザイナーではなく、コーディングとかプログラムとか
書いたり教えたりしてます（最近は教えてばっかり）
• FireworksはVer.2から愛用

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

4. ラピッドプロトタイプ
• 共有ライブラリに多量のUIが存在
• そのまま利用可能
• スマホのアプリなどのモックアップ
は高速に作成できる
• 使わないのはもったいない

5. ラピッドプロトタイプ
• スライスにリンクを張ることが可能
• リンク先は「ページ」に対して張ることが可能
1. 「ページ」で操作したときのインタラクション結果を作成
しておく
2. リンクを設定しておき、HTMLとして書き出す
3. そのままブラウザで試すことが可能
• コードを書かずにプロトタイプを作成できる！

6. デザイナーとコーダー
• デザイナーがデザインカンプを作成
• コーダーがデザインカンプを見てコーディング
• 画像の大きさなどは記入されていない・・・
（素敵なデザイナーは除く）
• 一つ一つクリックして大きさを確認し、それをHTMLに
して・・・・
• 面倒なことこの上ない

7. デザイナーさんがんばれ
• デザイナーさんがカンプに画像のサイズとか余白サイズを
入れてくれればOK
• コーダーも仕事がスムーズに済む
• 仕事も捗る！
• 終電の時間も気にしなくて済む！

8. 某社の現実
デザインできたのじゃ
明日納品なのじゃ
デザイナー様
（めちゃくちゃ偉い）
この画像とか
この画像のサイズ
はいくつよ・・・。
コーダー
（めちゃくちゃ偉くない）

9. サイズを測ろう
• Fwの便利ツール「ものさしツール」で
ちまちま測る
• 「ものさしツール」便利だけど1pxズレ
ることがある
• 別レイヤーに描画してくれないので、万
が一適当なレイヤーを選択している状態
で描いたら、後が大変

10. 画像サイズ
• 画像サイズやオブジェクトのサイズが見て分かれば、
コーディングしやすくなる
• 「ものさしツール」ではイチイチ操作する必要があり、
面倒
• 選択したオブジェクトのサイズを表示するような機能が
あれば良い
作りました

11. 画像サイズ表示拡張機能
• 「画像サイズ表示拡張機能」
• 名前のまんま、選択した画像やオブジェクトのサイズを
表示します
• 同時に複数のオブジェクトを選択していてもOK
• サイズは別レイヤーに書かれるので、スライスなどで書き
出す際にも非表示化すればOK

12. 使い方
1. サイズを表示したいオブジェ
クトを選択
2. 「コマンド」→「画像サイズ
表示」を選択
3. オブジェクトの真ん中に画像
のサイズと場所が描画されま
す

13. 残念な点
• 文字の色とサイズを変更できるようにパネルを作成したの
ですが、上手く動作しなくなってしまったため、あえなく
パネルを付けてません
• 新規のレイヤーの挿入がエラーになる、という現象に遭遇中
• デフォルトでは、文字色が#FFFFFF、
文字サイズが18ptです

14. 色を変える
• Macなら
/ユーザー名/ライブラリ/Application
Support/Adobe/Fireworks CS6/Commands/
• Winなら
C:¥Users¥ユーザー名
¥AppData¥Roaming¥Adobe¥Fireworks
CS6¥Commands
を開きます

15. 色を変える
1. 「画像サイズ表示.jsf」をエディタで開きます
2. 1行目と2行目を任意の値に変更します
3. 上書き保存します
4. 次回のコマンド実行から変更された値で機能します

16. 余白なども知りたい
• もっと高機能な拡張機能が
あるので、そちらをお薦めし
ます
• SPECCTR拡張機能
• http://www.specctr.com/

17. でも
• 無料だし、手軽ですよ（汗
• 試しに使ってみてください
• ダウンロードは
http://fwug.net/showSize.zip(ZXPバージョン）
http://fwug.net/showSizeMXP.zip（MXPバージョン）
からできます

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