Adobeが火曜日にリリースしたDreamweaverのパブリックベータ版は、10年の歴史を持つこのWebデザイン・開発ツールに大きな変化をもたらします。Dreamweaver CS4は、ユーザーインターフェイスを全面的に刷新しただけでなく、「プロフェッショナル」なWeb開発者向けの多くの新機能も追加しています。さらに、このベータ版では、昨年のDreamweaver CS3リリース（ ）で導入された強力かつ使いやすいSpryツールセットがさらに拡張されています。
Creative Suiteとの統合
このプログラムで最も顕著な変更点は、Dreamweaver CS4の新しいユーザーインターフェースです。従来のMacromediaのルックアンドフィールは、ついにAdobe Creative Suiteの他のアプリケーションと調和するインターフェースに置き換えられました。（Dreamweaverは、3年前にかつてのライバル企業をAdobeが買収した際に吸収されたMacromedia製品の一つでした。）
Dreamweaverを長年お使いの方には、この変更に慣れるのに多少時間がかかるかもしれませんが、新しいインターフェースはプログラムの使いやすさを大幅に向上させます。パネルとウィンドウはスムーズに連携し、整理、移動、非表示もより簡単に行えます。また、新しいインターフェースは、17インチモニターでも30インチCinema Displayでも、快適な作業環境を柔軟に構築できる柔軟性を提供します。
さらに、このプログラムは、他のCreative Suiteプログラムに長年搭載されている機能、スマートオブジェクトへの対応に向けて第一歩を踏み出しました。Dreamweaver CS4は、PhotoShopのスマートオブジェクトをサポートするようになりました。これにより、PSDファイルをDreamweaver内のWebページにドラッグし、Web用に画像を最適化したり、サイズを変更したりすることができます。後でオリジナルのPSDファイルを更新すると、Dreamweaver内の画像上に赤い矢印が表示され、ソースファイルが変更されたことが示されます。その後、プロパティインスペクタの「オリジナルから更新」ボタンをクリックすると、新しいバージョンの画像が作成されます。
プロフェッショナルなWeb開発ツール
Dreamweaverは、Web初心者からベテランまで、常に強力なツールとして高い評価を得てきました。この最新バージョンでは、Dreamweaverのビジュアルなダイアログ駆動型ツールだけでなく、生のHTML、CSS、JavaScriptでの作業にも慣れ親しんでいるユーザーをターゲットにした新機能が多数搭載されています。実際、多くの新機能は、ビジュアルデザインビューと並行してコードビューで作業するワークフローを促進します。
ドキュメントツールバーとドキュメント本体の間に表示される新しい関連ファイルバーには、ページにリンクされているすべてのCSSファイルとJavaScriptファイルが一覧表示されます。（PHPなどのサーバーサイドプログラミング言語を使用している場合は、含まれているサーバーサイドファイルも一覧表示されます。）このバーで関連ファイルのいずれかをクリックすると、そのファイルのコードにすぐにジャンプします。これにより、単一のWebページを開きながら、そのページが参照している他のファイルにすぐにアクセスできます。ページのCSSファイルに素早くジャンプし、変更を加えた後、Webページのファイルに戻って変更内容を確認することができます。
関連ファイルバーは、もう一つの新機能である垂直分割ビューと組み合わせることで真価を発揮します。ページの生のHTMLコードとビジュアルデザインを並べて表示できるようになりました。ビジュアルビューで変更を加えると、コードが即座に更新され、その逆も同様です。関連ファイル（例えば、外部スタイルシートが添付されているファイル）を含むページを表示する場合、片側にページのビジュアルデザインを表示し、もう片側に関連ファイルを表示できます。これにより、CSSコードを編集しながら、Webページ上で変更が視覚的に反映されるのを確認できます。
新しい「コードナビゲーター」（実際には「CSSナビゲーター」に近い）を使用すると、現在の選択範囲に影響するCSSスタイルのリストを表示できます。そのスタイルに設定されているすべてのプロパティを表示できるほか、そのスタイルのCSSコードに直接ジャンプすることもできます。Dreamweaverの以前のバージョンでもCSSスタイルパネルで同様のツールが提供されていましたが、この合理化された方法により、より効率的なワークフローが実現します。
Dreamweaver が Web ページの真の WYSIWYG ビューを提供しないことに不満を感じていたなら、新しいライブビューオプションはきっとご満足いただけるでしょう。Dreamweaver CS4 ベータ版には WebKit レンダリング画像（Safari で使用されているものと同じ）が埋め込まれているため、ライブビュー ボタンをクリックすると、Web ブラウザでレンダリングされたページを実際に確認できます。Dreamweaver から Web ブラウザに切り替えることなく、ページを操作したり、ロールオーバー、ドロップダウン メニュー、ツールチップ ポップアップなどの JavaScript エフェクトを確認したりすることも可能です。
補完的なライブ コードビューには HTML が表示されます。これは、JavaScript を使用してページの外観やコンテンツを操作するページや、正しく表示するためにデータベースからの追加情報を必要とする動的なサーバー側ページに役立つ追加機能です。
ライブ ビュー内では、JavaScript 効果を「一時停止」して（たとえば、ドロップダウン ナビゲーション メニューを固定して）、コード ナビゲータを使用してメニューに影響する CSS スタイルをすばやく識別できます。
コードだけではない
しかし、ベータ版の新機能のすべてが、片手縛りでコーディングに取り組んでいるWebプロフェッショナル向けというわけではありません。経験の浅いWebデザイナーにとっても役立つ機能がいくつかあります。
刷新されたプロパティインスペクターにより、テキストにHTMLとCSSを追加する際のミスのリスクが軽減されます。以前のバージョンのDreamweaverでは、プロパティインスペクターでクリックしたボタンに応じて、ページにHTMLを追加したりCSSスタイルを作成したりすることがありました。そのため、Style1、Style2など、奇妙な名前のスタイルが混在する、複雑な状況になることがよくありました。現在では、HTMLの追加とスタイルの作成という2つの機能が、プロパティインスペクターの2つの異なるビューに分離されています。
Dreamweaver CS4ベータ版では、Dreamweaver CS3で導入されたJavaScriptベースのSpryツールも拡張されています。DreamweaverのSpry機能により、プログラマー以外の方でも、ドロップダウンナビゲーションバー、タブ付きインターフェース、ユーザーフレンドリーなフォーム検証といった、洗練されたJavaScriptベースのユーザーインターフェース要素を簡単に追加できます。新しいSpryツールチップコマンドを使用すると、リンクにポップアップ情報バブルを追加できます。
Dreamweaver CS4には、3つの新しいフォーム検証ウィジェットも含まれています。パスワード検証ウィジェットを使用すると、パスワードのルール（「このパスワードは10文字で、少なくとも2つの数字を含める必要があります」など）を適用できます。パスワード確認ウィジェットを使用すると、ユーザーが既に入力したパスワードの確認を強制できます。ラジオボタングループ検証ウィジェットを使用すると、フォームを送信する前にラジオボタンがチェックされているかどうかを確認できます。
最後に、新しいHTMLデータセットツールを使用すると、通常のHTMLファイルを小規模なデータベースシステムのように扱うことができます。例えば、データの行と列が詰まったHTMLテーブルを作成し、Dreamweaverを使ってそのテーブルを別のWebページ（JavaScriptとSpryを使用）にインポートできます。そこでは、テーブルの行のマスターサマリーを表示したり、リスト内の項目をクリックするだけでそのテーブル行の詳細を瞬時に確認できる「マスター/詳細」ページなど、様々な方法でデータを提示できます。
自分で見てみよう
Dreamweaver CS4ベータ版はAdobe Labsよりご提供いたします。PowerPC G5またはIntelベースのMacとOS X 10.4.11または10.5が必要です。Adobe CS3のシリアル番号をお持ちでない場合、ベータ版は2日後に期限切れとなります。シリアル番号をお持ちの場合は、次のベータ版がリリースされるまでベータ版はロック解除されたままとなります。
[ David Sawyer McFarland は、『Dreamweaver CS3: The Missing Manual』(O'Reilly、2007 年)の著者です。 ]
