• ホーム
• 購読申込
• ヘルプ
• アーカイブ

Fireworks CS4 パブリックベータ

第3回　CSSとAIR、業界の主流と先端をサポート

前回は、高速化したファイルの保存／読み込み、Photoshopファイルとの互換性の向上などを紹介しました。最終回となる今回は、レイアウトデザインをHTML+CSSでエクスポートする機能、そしてAIRパッケージを作成する機能を紹介します。業界で主流となったCSSデザイン、無限の可能性を持つAdobe AIR、その両方をFireworks CS4では強力にサポートしています。

FireworksでのHTML＋CSSエクスポート

これまでのFireworksでは、古くから用いられていたテーブル組みによるHTML＋画像でのエクスポートにだけ対応していました。Fireworksでプロトタイプを作り、スライスを切ってテーブル組みのHTML＋画像として書き出す、というのがこれまでのワークフローでした。しかし、昨今のWeb業界では、テーブル組みによるレイアウトから、CSSでレイアウトを組むことが主流になっています。

今回新しく搭載されたCSSエクスポート機能により、FireworksだけでHTMLとCSSをエクスポートすることができるため、素早くCSSレイアウトのサイトを作成することが可能になっています。

書き出されたCSSはそのままでも使用できますが、Dreamweaverに読み込ませることで詳細な変更が可能になります。Fireworksである程度CSSを作成して細かい修正をDreamweaverで行うことで、これまで以上にCSSを作成しやすくなるのではないでしょうか？

FireworksでのCSSエクスポート方法

FireworksでのCSSエクスポートは、テーブルによるレイアウトをエクスポートするのと同じ方法で作成することが可能です。まず、Fireworksで従来のようにドキュメントを作成していきます。これまでの連載で紹介した機能を使うことで、迅速に思い通りのものが作成できるかと思います。 作成したドキュメントに対し、スライスを切っていきます。この際に、後でCSSレイアウトになることを意識し、ブロックごとにスライスを切っていくことが重要になります。

スライスには新しいオプションとして「Type」というのが加わっています。指定したスライスが前面画像なのか、背面画像なのか、HTMLなのかを選択することができます。

前面画像はこれまでと同様に通常の画像として用いる際に選択します。背面画像を選択すると、追加のオプションが表示され、「Repeat」や「Attachment」を指定することができます。この追加のオプションからわかるように、背面画像として選択した画像は、バックグランドイメージとして展開されるようになっています。例えば、「Repeat」として「repeat-y」を選択すれば、Y軸方向に繰り返されて表示されるようにCSSが書き出されます。

HTMLを選択すると、指定したスライスが画像ではなく、HTMLとして書き出されます。これにより、Fireworksで書き出した際に、そのスライスは画像ではなくテキストとして書き出されることになります。そのため、Fireworksで本番用のテキストを入れておき、HTMLを選択すれば、そのまま完成させることが可能になるわけです。

現在のパブリックベータ版では、未実装となっていますが、「COMMON LIBRARY」には、「Heading1」などHTMLのタグとして用いられる部品が収まっています。これらを用いることで、製品版では、より適切なマークアップを施したCSSが出力可能になることでしょう。

CSSや画像の書き出し方法も選択可能

CSSの書き出し方法も選択可能です。デフォルトでは、外部ファイルに書き出すようになっていますが、「HTMLSetup」より外部ファイルではなく、HTMLの中にCSSを記述するように変更することもできます。

画像はこれまでの書き出しと同様に、指定したディレクトリに書き出すか、HTMLと同じディレクトリに書き出すか選択が可能です。

FireworksでのAIRパッケージ作成

Fireworks CS4では、新たにAIRパッケージの作成機能がサポートされました。これまでAIRパッケージの作成は、FlexやFlashを用いる必要がありましたが、この機能により、AIRパッケージを作成できるアプリケーションが1つ増えたことになります。より手軽にAIRパッケージを作成していただけるのではないでしょうか？

パブリックベータ版でAIRパッケージを作成する際には、AIR Beta3が必要になります。AIR Beta3は こちら からダウンロードできます 。パブリックベータ版では、正式公開されているAIRのバージョン1.0及び1.1をサポートしていません。

FireworksによるAIRパッケージ作成では、最初にAIRアプリケーションのプロトタイプデザインを作成することになります。

実際に作成されるパッケージによっても異なると思いますが、複数ページを作成し、クリックすると相互のページを行き来出来るパッケージなどは簡単に作れることでしょう。

FireworksでAIRパッケージを作成する場合は、動きなどもFireworks上で予め仕込んでおきます。動作を付け加えるには、Fireworksの「Behaviors」やリンク機能などが有効的に活用できます。Fireworks上で動作を作成したら、AIRパッケージにします。

表示方法も2通りから選択可能、イベントも指定可能

AIRパッケージでは、通常のアプリケーションのようにウィンドウの枠が表示される形式（System Chrome）と、ウィンドウ枠を表示させず透明化してアプリケーションだけにする形式（Transparent）のいずれかを選択することができます。Transparentを選択した場合は、閉じるメニューなどが表示されませんので、作成しておく必要があります。Fireworks の「Commands」メニューに追加された「AIR Mouse Events」に、そのためのコマンドがあります。ドキュメント上に描いた矩形や円形などを選択し、「AIR Mouse Event」のうち、指定したいイベントを選択すると、矩形や円形がイベントで指定された動作を行うようになります。この機能を使うことで、メニュー枠のないTransparentでも、「Close」など必須の動作を行うことが可能になります。

AIRパッケージのプレビュー

Fireworksでは、作成するAIRパッケージのプレビューが可能になっています。「Commands」メニューの「Create AIR Package」ダイアログ内に「Preview」ボタンが表示されます。実際にパッケージを作成する前に、動作を確認し、自分の想定通りに動作するか、イベントは実行されるかなどを確認することができます。ここで確認を行ったら、実際にパッケージを作成します。

アスタリスクのついている項目は必須項目なので、適切な内容を入力していきます。Windows版とMac版で表示される項目内容に多少差があります。AIRパッケージには、デジタル署名が必須になっています。既にデジタル署名をお持ちの方は、それを読み込ませることができますし、持っていない方は、Fireworks上で作成したデジタル署名を付与することが可能です。

必須項目を入力したら「Create Package」ボタンをクリックして、Airパッケージを作成します。残念ながら、現状のパブリックベータ版では上手くいかないこともあります。製品版では、きちんと作成出来るはずですので、パブリックベータ版では、プレビュー段階にとどめ、実際のパッケージ作成は製品版で試すのが良いと思います。

まとめ

3回にわたりFireworks CS4の魅力を紹介してきました。Fireworks CS4では、改善点、改良点が多岐にわたり、全てを紹介しきれていません。是非パブリックベータ版をインストールして頂き、ご自分で確認してくだされば、と思います。

Fireworks CS4においては、アドビ製品間を繋ぐハブとしての役割が非常に強化されました。迅速にプロトタイプを作成するためのユーザビリティの向上、快適に動作するためのパフォーマンスの改善などは、日常的にFireworksをお使い頂いているユーザの方にもきっと満足してもらえる点でしょう。

様々なファイル形式へのエクスポートは、クライアントに対して資料を提供する際に力強い味方となってくれるはずです。そして、CSSエクスポートやAIRパッケージの作成は、新しい表現の幅を広げてくれます。

パブリックベータ版を使いこなしていただければ、これまでよりも楽しく迅速にプロトタイプが作成できることでしょう。この記事によりパブリックベータ版への興味を持ってくださる方が多くなることを願っています。

‹ 戻る