マークアップエンジニア だからうれしい fireworksの使い方あれこれ
TRANSCRIPT
マークアップエンジニアだからうれしいFireworksの使い方あれこれ
株式会社まぼろし 松田直樹
1
•まぼろしの松田と申します
•デザイン、マークアップ、JSer、 ライティングなど
•主な著書『効率的なサイト制作のためのDreamweaverの教科書
【CS5.5対応版】』（鷹野さんとの共著、マイナビ）
自己紹介
2
マークアップエンジニアとは？
HTML/XHTMLのマークアップ，CSSの設計・コーディング、情報および文書構造の設計を
行なうエンジニア。
HTML+CSSの専門家
≒
3
マークアップエンジニア（以下、ME）はFireworksがお好き？
まぼろしのマークアップエンジニア
小林
まぼろしのフロントエンドエンジニア
西畑
やっぱりスライス機能
がいい!!
全体的に使いやすい
から!!
4
というとこで、
Fireworksでのデザインカンプは
大変よろこばれます。
（たぶん）
5
Fireworks CS6 のコーディングに役立つ新機能
6
CSSプロパティパネル
* CS5.x の拡張機能は、現在使用出来なくなっています！ご注意を。
7
CSSプロパティパネル
• 塗りにアルファを使っていなくても、「background-color」がRGB値で指定される
• 「パターン塗り」や「テクスチャ」「ブラシ」は再現できない
• 「境界線のカラー」と「Photoshopライブエフェクト - ストローク」は共存できない
• 複雑な破線でも、「border-style: dashed;」になる
• などなど
過信は禁物
8
カラーコードのコピー
16進数
#FFCC00
RGBa値
rgba(255,191,0,0.5)
9
CSSスプライトを書き出し
10
スライス機能の改善シンボル内のスライスも正常に書き出せるようになった
CS5の場合
CS6の場合
11
よく使うショートカットキー
スライス挿入 Shift + Option ⌥ + U
キャンバスにフィット Option ⌥ + Command ⌘ + f
属性のペースト Shift + Option ⌥ + Command ⌘ + v
テキストの固定の幅を切り替え
カスタムでどうぞ
* Windowsの場合 ： 「Option ＝ Alt」「Command ＝ Ctrl」
12
よく使うショートカットキー
スライス作成のショートカットキー。複数オブジェクトの場合、ダイアログが出てめんどくさい！
スライス1つ挿入.jsf
スライス複数挿入.jsf } これらのオリジナルコマンドにショートカットキーを割り当てて使えばハッピーに！
後日、配布します！
13
コーディングをスピードアップできるFireworks の拡張機能
14
CSSプロパティが出力するコードを適化「CSS Profesionalzr」
冗長的なコードを 適化してくれる拡張機能
URL：http://mattstow.com/css-professionalzr.html
• 0px→0に
• width、heightを削除
• rgb(r,g,b)を16進数(#xxx)に変換
• background-image→backgroundに変更
• 無駄な改行を削除(コメントも削除)
• プロパティーをショートハンドに (border関連)
• などなど
15
スライス画像のスニペットを書き出すFireworks拡張機能
スライスの情報に応じて、定形コードを出力できる
URL：http://www.kuma-de.com/blog/2012-05-23/3508
• スライスの名前（画像のファイル名）
• 幅（px）
• 高さ（px）
• x座標（px）
• y座標（px）
16
スライスやオブジェクトをクリックするたびに連番をふるFireworks拡張
クリックした順で、連番で名前をつけることができる
URL：http://www.kuma-de.com/program/2009-06-14/799
• 定形の文字列 ＋ 任意の連番
• 連番の桁揃え
• 任意の数字からの連番
• CSSスプライトに合わせれば便利
17
スライスの作成・名前付け、コード出力など「PI_Slice」
スライス編集ツールの決定版
URL： http://www.pixelimage.jp/blog/2011/07/pi_slice.html
• 複数スライスの一括作成
• 複数スライスの一括画像フォーマットの設定
• 連番ベースでの名前づけ
• 独自の値配列による名前づけ
• 複数スライスの一括リサイズ
• 複数スライス名の一括設定
• 複数スライス名の一括変更
• 複数スライスコードの一括出力(クリップボードにコピー)
18
オブジェクトを種類で絞り込んで選択できる「SelectManager」
オブジェクトをフィルタリングして、特定の種類のものだけ選択
• テキスト
• 長方形ツールや楕円ツールなどの図形
• パスデータ
• ビットマップ
• グループ
URL：http://www.pixelimage.jp/blog/2008/05/_fireworksselectmanager.html
19
オブジェクトのサイズ、間隔、色などを
オブジェクトのサイズ、間隔、色などのプロパティを、指示書のように自動で書き出す「SPECCTR」
URL：http://specctr.com/
+ Expand Canvas+ Movable/editable labels+ Specs organized in layers+ Multispec - spec multiple objects
MEASUREMENTS+ Width & height+ Spacing between object and canvas+ Spacing between multiple objects+ Spacing between text objects
OBJECT+ Fill Color+ Stroke color, size, style+ Opacity, filter
TEXT+ Font family+ Size+ Color + Opacity, Filter+ Alignment, Leading, kerning
20
結論
• やはりFWのスライスはMEの味方！
• 特に、CSS3周りが十分に使えるスマホサイト制作では効果抜群
• マークアップエンジニアにこれらのことを 教えてあげると大変喜びます
• FWを広めるには、まず外堀から攻めましょう
21