12/2にFireworks Users Group 第二回勉強会に行って来ました。申込時はキャンセル待ちだったのですが、運良く繰り上がりまして、行ってこれました。
今回はFireworks CSS3 Mobile Packということで、私としては普段Flashの素材加工でよく使っているFireworksの現状を知りたいことと、最近のFireworksとDreamweaverの連携が密になってきて、jQueryとも親和性が高いというのはどういうことなんだろうという興味をがあり参加しました。
以下は、現場でリアルタイムにメモしたものです。
詳しい内容は講師関口さんのスライドが近々公開されるそうなので、それを見るがベストだと思いますが、当日の雰囲気を見る一助となればと思います。
日時・場所
日時:2011/12/02
講師:関口和真さん(cieds,FwUG暫定会長)
場所:Adobeシステムズ株式会社会議室
URL:第二回勉強会開催のお知らせ | Fireworks Users Group
Fireworks CSS3 Mobile Pack によるCSS3利用
Fireworks CSS3 Mobile Packとは
- AdobeLabsで公開されてFireworksCS5 , CS5.1向けの拡張機能
- FireworksのみでCSS3のスタイル記述を生成可能
- 自分が参考にした記事
なにができるか
- Fireworksのオブジェクト情報がベンダープレフィックスまで書き出してくれる
- jQuery Mobileへの書き出し
CSS3スタイルの生成
CSSによりグラデーションやシャドウの表現が可能
CSS3のブラウザのサポートの現状
- ブラウザごとのサポートも異なる
- CSS3 スタイル記述を複雑にしてる
- IEではグラデーションが非サポートなのでfilterで解決してる
オンラインでのCSS3スタイル生成もある
現状、以下の2つがメジャー。
- Grad2
- Ultimate CSS Gradient Generator
とはいえオンラインとはいえ大変。
これがFireworks CSS3 Mobile Packだと細かく確認できてやれるので便利。
Fireworks CSS3 Mobile Pack での注意点
- 形は反映されない。星型とか無理。
- 形を反映させるならSVG書き出し(別の拡張機能)を利用すると良い。
- エフェクトの一部反映されない。PhotoShopのライブエフェクト。ベベルとエンボスなど。
- テクスチャ反映されない。
Export拡張機能
FwからSVG書き出しが可能。ただし、エクステンションの追加インストールで。
Aaron Beall – Fireworks Guru – Export
実際やってみよう
Fireworks CSS3 Mobile Packインストール済みの前提で。
Adobe Fireworks CSS3 Mobile Pack | CSS3 mobile and web design – Adobe Labs
その場でのメモなので手順には抜け漏れあるかも。参考程度に。
Fireworks起動
↓
矩形を書いて、適当なグラデを書いた。
↓
ウィンドウを見て。Copy Allを押す 。
DreamWeaver起動
↓
新規HTMLを起動
↓
スタイルタグを入れる。divタグも入れる。
↓
スタイルにコピーアンドペースト
↓
ライブビューで同じように出ますね!!
ブラウザで確認してみよう
- IE9
- OK(これはfilter利用してるから再現できる。)
- 超絶グラデだとどうなるか
- IEでは2色グラデまでなので3色以上無理。注意。
- 複雑な形(たとえば星型は)
- 上記の「Export拡張機能」でSVG書き出しを活用したほうがいい
- Mobile Packが得意なのは矩形めのオブジェクト
Fireworks CSS3 Mobile Pack おわりに
- Fireworks CSS3 Mobile Pack便利
- CSS3は今後確実に使われる。スマホではすでに使用可能。
- Fireworks1本でCSS3と画像の生成ができるのは利点。
- 拡張機能を入れればSVGもOK。今後はCanvasも期待したいとのこと。
Fireworks CSS3 MobilePackのjQuery Mobileスキン機能を利用したjQuery Mobileによるスマホサイト開発
Fireworks CSS3 Mobile Packを使ってみよう | デベロッパーセンター
の[JQUERY MOBILE THEME SKINNING]ツールの使い方が参考になりました。
いままでのjQuery Mobileへの対応
- jQuery Mobileのテーマがデザインが難しかった。
- 開発が落ち着いていないときはデザイン変更が大変だった。
いままでTheme Rollerでテーマ変更が出来た
- jQuery謹製 jQuery Mobileテーマ作成用Webツール
- SwatchやカラーパレットからなりUIの色を変更したり。
今回はFireworksでテーマを変える!
- Theme Rollerもいいけど今回はFireworksで変えるよ。
FireworsのjQuery Mobile対応。
- Fireworksの機能を使って作成可能。
- jQuery Mobileで使用されているアイコンも変更可能。
- 最終的に書き出された画像とCSSをDwで使う。
使用上の注意
- CSS3を使用しているためCSS3と同じくテクスチャや一部のエフェクトは使用できない。
- 拡大して使う場合があるため、枠線は付けないほうが無難。
テーマの作成
大きく分けて
- 既存のテーマを複製して改造
- 既存のテーマを改造して作成
の2通りがある。
ファイルサイズについて
1つしか使わない場合テーマを1つだけ残して、ほかを削除したほうが書き出されるCSSファイルのサイズが小さい!
→ 全部書き出し:約70KB
→ 1つだけ書き出し:約45KB
アイコンの変更
アイコンを変更する場合は「Global Assets and Styles」のページをそれぞれレイヤーを書き換える必要がある。
名称が重要らしく、新しく変更点があるので新しくレイヤーを作っても反映されないので注意とのこと。
DreamWeaverでの利用
DreamWeaverCS5.5で新しいjQuery Mobileを
- 要するにバージョンが古いものが読みこまれるとのこと。α版なので不具合多い。
- 特に古いのは脆弱性があってよくないので注意。
- これを新しいものに置き換えるデモを見せてくれた
- 自己責任で頑張りましょう。うまくいかないとDreamweaverが起動しなくなるとのこと!
- デモを見たが色々大変・・・。手順は複雑だった・・・。
- 近々、スライドが公開されるので、そこで手順参照ください。
- jQueryの埋め込み用のダイアログ内にアップデートのボタンがあるがなぜか繋がらないそう。
- というか、Adobe側でエクステンションなどで、更新できるようにして欲しいなー。とのこと。
実際やってみよう
その場でのメモなので手順には抜け漏れあるかも。参考程度に。
FW起動
↓
コマンド>jQuery>Create New Theme
↓
ガイドがあるのでそれをはみ出ないようにする。
↓
矢印を色に変えてみた。
↓
テーマは必要なものだけ残しておきましょう。Global Asset以外。
↓
ファイル>別名で保存(任意)
↓
ウィンドウ>jQuery Mobile Preview
↓
コマンド>jQuery→jQuery Theme Previewプレビューのほうが正確。
↓
OKなら落としこむ。
↓
コマンド>jQuery Mobile>Export Theme
↓
フォルダーを選択します。
↓
Enter the CSS File name「CSSファイル名を入力してください」>このままでOK
↓
完成
DW起動
↓
(サイト定義は一応終わっている)
↓
bodyタグ>挿入>jQuery Mobile
↓
ダイアログ(jQueryが古い)>ローカル(ネット環境が微妙だから)
↓
雛形が出来上がる。
↓
headerに書きこむ。
↓
contentに書きこむ。jQueryMobileリストを入れてみる。
↓
<a href="#">ページ</a>
の部分を書き換える。
↓
footerは適当に。
↓
ライブビューで見てみる。反映されてないCSSがまだだから。
↓
ここで初めてデフォルトのCSSを先ほど書きだされたCSSに差し替える!
↓
data-themeをaとする。今回はaしかいれてないから。
↓
できたー。
ブラウザなどで確認
- Mobilizer(モビライザー?)でテスト
- Safariで確認
- うまくいった。画面遷移もいい感じ!
jQuery Mobileスキン機能 まとめ
- FireworksのjQuery mobileテーマの書き出しは強力!
- アイコンの変更、書き出しはFwならでは。作成時のプレビューも良い。
- DWを使用することで高速に利用できる。
- jQueryバージョン違いはホント注意ね!
おわりに
メモは以上です。
今回は関口さんの軽妙な説明もあってFireworks CSS3 Mobile Packのやりやすさに驚きました。ビジュアルを確認しながらやれるというのは、いらぬストレスが軽減されそう。
また、最近話題のjQuery Mobileの機能を手軽に触れるというのは、利用の敷居が下がって良い感じです。
私としては、とても勉強になりました。
それでは、良きFireworks Lifeを。