Dreamweaver/Fireworks CS4 public beta 自主勉強会

合同会社レゾリューションズの主催Dreamweaver CS4/Fireworks CS4自主勉強会 - What's new with Dreamweaver & Fireworks? に行ってきました。
勉強会といっても、初回(?)ということで新機能・改善機能の紹介を各1時間ずつかけて実際に操作しながら説明するというセミナー形式です。勉強会に先駆けて新機能をかなりチェックして準備を進めていた講師の方々に変な質問をしていたような気もしますが…
本レポートの内容ですが、かなり私自身の私見が入っているのと、その場にいた人間の勘違いである点もあるかもしれません。
レポートだとしても、とにかくリリース候補に届いていないPublic Betaなので、まだ予定中でも搭載されていない機能・動作が洗練されてなかったりもたつく機能・まだ確定してない機能などがあるので、あくまで2008年6月時点での感想とさせてください。

Fireworks CS4から

勉強会の大まかな内容

  • プレゼン資料を作れる→プレゼンスタイルのSWF書き出し
  • UI良くなったね→Dreamweaverのほうに内容は譲る
  • ファイルのインポート・エクスポート。デザインの提出をPDF/AIR/Flashで!ということも可能です。
  • CSSの書き出し←Demo
  • AIR←Demo
  • プレゼンスタイルの書き出しt←Demo

PDFへの書き出し

かなり力を入れている新機能の様子。今までFireworksで作ったデザインをA4に納めようとすると、Illustratorで配置したり、InDesignに配置したりで結構面倒だったけれど、Export機能で一発ですむように。
テキスト部分は選択できるようになってます(デザイン提出の時はあまり意味ないかも?)
どういう向きでPDFにするかも設定できるので大変便利。

デモンストレーション1:描画系新機能とCSSの書き出し

デモ時間内でCSSレイアウトのサイトを作るのが目標。さすがに質問が出たのでできあがらなかったのですが…

Fireworksは今回CS製品のハブ的存在として強化

なので、Photoshopでテキストにいろいろ設定してから持ち込み事が可能になりました!

ちょっとだけ不思議なのは、IllustratorやPhotoshopで設定したテキストは全部値が埋まってるんだけど、Fireworksで最初から打ち込んだテキストは、文字間が空になること。

ATE(Adobe Type Engine)搭載

上のPhotoshop/Illustratorからテキストを持ち込んで文字の設定が飛ばない理由です。ATEはPhotoshopやIllustratorでも採用されている、Adobe Systems社のプロ向けのフォントレイアウトエンジン。搭載の結果、製品間でのファイルの移動に大変強くなったとのこと。

Photoshopへの書き出しでもそれは生かされています。日頃Fireworksで作っていて困ったときにPhotoshop形式で書き出して納品できるのは大変便利そう。ただし、現時点で日本語は未知数なのだそうです。

スマートガイド

 画像の配置に補助をするラインが自動で表示される(中心やテキストの位置揃えなど)

注意した方が良いのはIllustratorのスマートガイドを期待してると若干裏切られます。どちらかというとFlash CS3のスマートガイドに近いです。(Flashは中心線出ませんが)

また、「Shiftキー」を押すと、ガイドを設定していると、カンバスの端からガイドまでの幅、もしくは、ガイドとガイドの幅(高さ)が表示されるのが非常に良い感じです。

Tooltip機能

デフォルトでOFFだけれど、Tooltip機能ONにすると、マウスの座標が表示されて便利に。

設定場所は通常だとメニューの左から3番目、「view>tooltip」です。

ポインティングデバイスはタブレット!な私の場合手を離したときに若干ずれるので、目分量で置き、ピクセル単位で操作をする際は、プロパティパネルか矢印キーで最終調整するのであまり使わなそうです。マウス使いの方できっちり数字が出ていた方が好みの方にはおすすめ機能。むしろ、パネルで配置ができないPhotoshopにこそ欲しい機能だと思いました。

機能改善分をまとめて

  • 標準で搭載さえrているスタイルがかなり充実して使いやすくなりました。
  • 角丸はピクセル設定も可能になりました!行間もピクセル指定ができます。
  • 9-slice scaling tool(ラウンドを維持したまま拡大縮小)
    →シンボル化しなくても使えてかなり便利!しかも、拡大縮小アイコンの中に入っておいしい感じ!

CSS書き出しについて

スライスの種類foreImage/backgroundImage/htmlで指定できるように。

  • foreImage…今までのスライス
  • backgroundImage…画像の書き出しであることは今までのスライスと一緒。ただし、CSSのbackgroundの指定がFireworksのパネル上で可能に
  • html…書き出し時にHTMLと同時に書き出しにすれば画像でなくテキストと認識して配置してくれる。

未実装だけど、div#headerみたいな事もできるようになるはず。まだまだPublic betaでは実装してない部分も多いので今後に期待な様子。

使用感としては、製品版が出てみないと何とも。だいたいデザインしていると本文と背景画像というのは重なっていることが多く、これを自動的に差別化するのは難しいかも。foretextとデザインのレイヤを分けて置けば楽かもしれないけれど、同時に書き出しで一度でおいしいという機能ではなくなってしまいます。そこまで手間をかけるなら普通に書き出して今まで通りのワークフローに持ち込んだ方が楽な気がしました。

AIR書き出し

かなり開発中という感じ。Windows版ではうまくいかなかったが…というわけでデモはMacで!

最終段階でも用途はモックの書き出しに落ち着きそう。Thermo?もあるしね…(Adobe MAX 2008のときはCSシリーズとは別扱いという感じで説明されていたっけ?)

  • AIRアプリケーションは専用パネルで開始。ほとんどの情報は入っているので、アプリケーションIDなんかを加えていく。
  • この時にデジタルシグニチャを追加できる(ただし、OSX版のpbではブラウザが出ないので手打ち。Windowsは大丈夫)
  • 保存してから設定した方がいい。
  • シグニチャで失敗するかもしれないけれど、何回かトライすれば大丈夫な事が多い。
  • プレビューはどっちも動くのでAIRにあこがれてる!なデザイナーさんにはいいかも

デモンストレーション3:プレゼン資料もFireworksで

Fireworksは、PageとState(CS3のフレームに当たる)とLayerがあるけれど、page単位で利用する利用しないが設定できます。

command > presentationで、一発生成。うちのMacBook proの場合、11ページの縦にひょろ長い(2000ピクセル近い)テキストばかりのファイルを加工したせいか、public betaでは結構時間がかかりました。沈黙するから…フリーズしたのかと。

矢印でスライドを送る程度の単純なことしかできないのですが、私は扱いやすくて手軽な一押しの新機能です。PDFもいいけど、学校でまだ授業をしていたときに使いたかったです。

Dreamweaver CS4 public beta

勉強会の大まかな内容

  • Spry HTMLデータセット
  • Live View
  • Related Files
  • Code Viewの分割
  • CodeNavigator
  • Flashの埋め込み方法の改善(Objectタグで
  • Subversion
  • CSSプロパティ
  • ページプロパティ変化したよー

CS4の新UI

OWL

グレーを基本としたGUI。他の製品との統一感、作業に集中できるようにというのを目標にデザインされた。

Photoshopライクというか、FireworksとDreamweaverはCS3の時に仲間はずれ感があったけれど払拭されるように、、、なグレーのデザイン。白いさわやかなイメージがあったけれど落ち着いた感じでこれはこれでよい感じ。

Windows版と同じようにMac版も各種パネルがばらばらにならないので使いやすいのでは?

レイアウト

corder/designer/dualscreenなどが前より、それぞれとして使いやすい物に。

プロパティパネル

HTML部分(リンク・リストなど)とCSSに分かれていてボタンで切り替える。CSS部分には文字色や行そろえなどの基本的な装飾ボタンがありもっと複雑なのは、CSSスタイルパネルや今までのCSS編集パネルが使える。

CSSの追加は、限定レベルなどがボタン一発で選択できて手打ち派じゃない人にかなり便利そう。

新機能・新機能・新機能!

Spryサポートの強化

今まではXMLを書かなければ使えなかった。CS4ではHTMLのtableなら何でもDreamweaverが解析するので選べる!どのテーブルを読むかも選べる。しかも、Live Viewを使えばDreamweaver上で確認が可能に。

内容の確認はLive Viewで!

Safariとほぼ同等のレンダリングが嬉しい。Javascriptのフレームワークもほぼライブプレビューで見られるうえに、マウスオーバーなどここで止めたいと言う瞬間にストップをかけてコードナビゲーター(後述)でそこに関わるCSSを追跡することもできます。けれど、SafariそのものじゃないのでSafariでのチェックも必須です。

出た質問…Webkitのバージョンはあがるか?AdobeUpdateで上げて行けそう?もともとWebkit本体だけじゃないから頻繁なバージョンアップではないのでは。

Related Filesは便利!

開いているファイルにlink/script/importされているcss/php/jsなどが2段タブとして同時に表示される機能。

Dreamweaverのコードビューで開けるファイルがリンクされていればという感じ。2段タブのおかげでいつでもRelated Files間移動できるようになっています。

cssは2段階まで、それ以外は1段階までサポートするとのこと。あんまり深い階層でCSSをセットしている場合はRelated Filesでは表示しきれないので注意。related fileのファイル名の上で右クリックすれば改めて別のウインドウで開くこともできる。

Codenavigator

選択されている部分の描画に影響しているCSSをリストアップして、クリックするとそのソース上にジャンプできる。最近のCSSは複雑なので便利。

画面の分割方法がして可能に

縦分割/横分割、左右と上下を入れ替えられる。コードビューで分割すれば、コードコードという分割も可能に。

XHTML strictに準拠したFlash Embed

Swfの埋め込みはObjectだけになった。ソースの最後でSWFObjectにIDを登録するので後で利用するのにも便利。

Objectタグは外側から解釈されて解釈できなければ内側を読みに行くので、今までのJavascriptと違って代替コンテンツが書き換えやすくて便利です。ちなみに代替コンテンツの確認はローカルにおいてIEでみるのが一番楽。

以前のIE対策で埋め込んだJavascriptはどうなるのかというと、その形式も含め以前のDreamweaverで埋め込んだFlashのあるファイルを開くと警告が出て、そのことを知ることができる。

現状では、自動では置き換わらないし、サイト全体は自分で検索をかけないとどこに古いスタイルの埋め込みが残っているか把握できない。全部自動でやってくれると良いよねと参加者の意見。

置き換え作業はデザインビューでおこなうと簡単に選択できるタグ内部だけしか消せないケースがありソースが無駄に残って置き換えきれないので、コードビューで慎重にやった方がよさそう。

Subversion正式対応

リモートホストのようにサイト管理画面でバージョン管理サーバへの接続を設定できる。

機能はチェックアウト/コミット/resume(ただし過去1バージョンまで)が可能。それ以上複雑なものはSVNのクライアント、tortlSVNとか Subversions.appとか使わないと難しい。本当に末端の作業者向け的機能。

Contributeのバージョン管理と同じcheckin/checkoutと言う言葉なのでちょっと混乱するかも。しかし、DreamweaverネイティブのチェックインチェックアウトはSubversionを使っている場合は使えないので、作業的な混乱は無い様子。

もともとほかのバージョン管理システムと一緒に置くのはあまり使い勝手がよくないので、運用上は問題ないはず。

Javascriptの外部化がコマンドで可能に

Comanda>Externals Javascript→Javascriptのどの部分を外部化するかというのが選べるよ。(どんなJavascriptでも対応!)

特に、Adobe Systems社のSpryには独自に便利な機能が提供されています。一部のユーザから悪評高かった、独自の属性なども外部化できる。※Spryの独自属性はJavascriptで表示時に付加されるようになる。

制約があり、1ページずつしか行えない。ビヘイビアとTemplateの関係は以前のままだと思われるので、Templateに対して最後に一気に使うのが現実的かも。

インストールして不具合は?

私は英語でもいいやベータ版でもOKという気持ちでインストールしたわけですが、ほかの参加者の方からインストールしてほかに影響でないの?と言う質問が出ていました。
とりあえず、私はMacBook Pro OSX 10.4.11にインストールしましたが、CS3製品には影響は出ていません。
気をつけたいのは一度何らかのタイミングで消したときです。Public Betaのフォーラムに書いてありますが、Mac版のFireworks CS4 Public Betaはすべてのオプションにチェックを入れないとインストールできません(デフォルト状態)。ところが、Dreamweaverとかが残っているとチェックを入れられない場合があるので、一度入れたら入れっぱなしにするくらいの気持ちでいるのが良いと思います。
問題があるとすると、ATEの影響くらい。ベータ版だから?だと思いますが、古いフォントのツメの設定はATEが解さないので、テキストの更新(CS3以前のFireworks PNGだとIllustratorのように警告が出ます!)や、ダブルクリックなどでテキストを編集状態にすると、文字のツメなどが元に戻った状態になります。CS3とCS4パブリックベータのどちらで作ったかは覚えておくと良いかも。
Dreamwaever CS4 パブリックベータのほうは特に影響は無いと思います。ただMac版のライブビューは安定しないようなので利用前に保存しておいた方がよさそう。

戻る