Fireworks CS5 個人的に気になった新機能

Introducing Adobe Fireworks CS5 から

Adobe CS5が発表されたのに合わせてアメリカのAdobeサイトで「Introducing Adobe Fireworks CS5」が公開されました。この記事は製品ページよりもしっかりFireworks CS5の機能が紹介されているのでぜひ目を通しておくことをおすすめします！

なお、各スクリーンショット画像は「Introducing Adobe Fireworks CS5」でチェックしてください。

Text layout improvements

さて、紹介されている中で一番気になる機能は、「Text layout improvements」。テキストレイアウトの改善です。

複数選択できる

改善の中の「テキストブロック内の隣接しない文字列選択が可能に！」というのがあって、改善の中でもこれは新機能と言えると思います。選択した文字列にそれぞれ色やテキスト飾り（下線）がつけられるようになるとのこと！実務では、お客さんに見せるデザインで、リンク部分の色を変えたりする場合に使えそうです。類似文字列の選択もきっちり日本語対応があることを祈りたいところ。

CS3以前のカーニング・トラッキングも自動で調節してくれる

バグフィックスっぽいものの中では、カーニングのショートカットキーがきちんと動くようになったというのが大きいですが、それ以上に「Legacy text object support」、「CS3以前のテキストオブジェクトのサポート」が目を引きます。CS4でPhotoshopやIllustrator系の新しいAdobe Text Engineに変わってしまったカーニングやトラッキングの数値を自動的に調整してくれるようです。Fireworks CS4で「うっ」となった方はぜひCS5をってことでしょうか。

また、どんな機能かは説明しておらず列挙だけですが、「Extensibility improvements」も目を引きます。(※各機能はExtending Fireworks CS5参照のこと)機能拡張APIは結構増えているようです。日本語のFireworks CS5のページに次のようにありますし、今回こそ機能拡張にも日本語マニュアルをつけていただきたいですがどうでしょうか？

拡張性の改善新規

強化された拡張APIにより、エクスポート、バッチ操作、FXGフォーマットなどのカスタムスクリプトを作成できます。

めぼしいのはこんな感じなのですが、特にCSS Sprite Extensionを配布しているのとHTMLの生成も自分の制作ワークフローにあったものが作りたいなということでCSS書き出し機能の部分だけもうちょっと見てみたいと思います。

【4/19追記】コラム：「HTML5とCSS3をがっちりサポートするためのグラフィックソフトを考える」をアップしました。こんな感じのグラフィックソフトがほしいなという話です。

気になるCSS書き出し機能の充実部分

意訳が激しいですが部分的に訳してみました。

改良点一覧

複数ページのHTMLとCSS出力
テキストオブジェクトに内容にふさわしいタグを付けて出力
共有ライブラリシンボルのすべての属性を標準化（color,font-family,size,style,weight,line-height)
フォームプロトタイピングを改善するたに、テキストエリアの追加
順番なしリストとリンク付き順番なしリストをつくるために、リストアイテムシンボルを追加
Hexカラーコード出力の改善で、適切にショートハンド（#fff)表記ができ、小文字で出力できる
単一テキストオブジェクトから、改行ではなく複数の文からなるエレメントを生成
可能な限りCSSルールをアルファベット順に列記
すべてのデバイスでテキストがリサイズできるよう、すべてのフォントサイズをパーセントを使って再計算(して設定)
高さを設定しているdiv要素にはmin-heightを設定して、フォントサイズの変更やコンテンツが増えた場合に備えた
ボーダーを設定しているdiv要素を出力時に、正しい(ボーダーの太さなどを考慮した)サイズやより正確な配置にする
visited,hover,focusリンクスタイルは標準のリンクスタイル(擬似属性:linkのスタイル？)をすべて継承する
フォームエレメント上の高さを削ってブラウザが定義した高さにできる
改善した背景画像スライスは背景色を設定できるのでテキストのサイズが変わった時や大きなコンテンツに有利
シンボルプロパティで指定したオプションで選択を出力(Outputting selects with the options specified in the symbol's properties)
ラジオボタンを正確にグループ化
IE6のダブルマージンバグ対策で、すべてのfloatエレメントにたいしてdisplay: inline追加
不必要なbrをfloatをクリアするためのbrタグをdivタグに置き換え
すべての行を正しい位置に出力

原文のfont familyはfont-familyだろうと変更しています。standardingというのはCSSのプロパティにあわせてますよって意味のはずなので。

CS4より本気なのが伺えます。ところどころすばらしい機能がついてます。オススメはすべてのフォントサイズを相対サイズ(％)でうまく表示出来るように再計算してくれるところとかdivでボーダーを配慮した幅で出力してくれるとか。ただ、改善ポイントからも推測するにHTMLはそれなりにクセがあるものが出力されると思います。例えば、floatをbrでクリアしてるのをdivにするあたりですね。何もないところにdivが発生するわけですから、空のdivを入れることになるでしょう。

HTMLとCSSへのこだわりは捨てきれない！とか、ソースをついつい見てしまう！という人にはそもそも向きませんし、フォーム周りやリストは共有ライブラリシンボルを使っていなかければいけないなどワークフロー自体に気を使わなければいけませんが、CS4で見送った人も今回は新しい気持ちで試してみてもと良いと思いました。というか自分が試したいです。

※FireworksのHTML/CSS生成は、smartCSSの流れから位置基準でボックスを推測するので割とdivタグのネストの少ないHTMLを生成する傾向があります。

参考URL

Fireworksのご紹介
Fireworksの機能　(ご紹介と書き方と機能での書き方がちょっと違うので対照してみるには難しいかも)
Introducing Adobe Fireworks CS5