Webオーサリングソフト「Dreamweaver」の新バージョン「CS4」が登場した。バージョンアップを重ねて、完成の粋に近づきつつあるDreamweaver。CS4では、ユーザーの「こんな機能が欲しかった!」というニーズにこたえ、より快適な作業を行うための機能が搭載された。前編では、Dreamweaver CS4の新機能の「ライブビュー」、「CSS関連」を紹介。後編では、「インタフェース」、「外部ファイル」、「Spry・JavaScript」を紹介する予定だ。

イチオシ機能「ライブビュー」

「ライブビュー」は、DreamweaverにWebブラウザのレンダリングエンジンを搭載することで、Webブラウザと同様の表示をDreamweaverで再現する機能。たとえば従来のDreamweaverでJavaScriptの動作を確認するには、「ブラウザでプレビュー」を使ってブラウザを立ち上げ、制作中のページをブラウザに開かなければならなかったが、「ライブビュー」を使うと、ツールバーにあるボタンをクリックするだけで表示が確認できるようになった。今回搭載されたレンダリングエンジンは、Webブラウザ「Safari」や「Google Chrome」と同じ「Web Kit」。JavaScriptだけでなく、CSSのエフェクトやFlashムービー・Videoの再生確認なども行える。

「ライブコード」は、JavaScriptの動作にあわせてHTMLコードがどのように書き換えられるかをコードビューに表示する機能。「ライブビュー」と組み合わせることにより、JavaScriptを実行しながらコードの変化をリアルタイムで確認できる。

「ライブビュー」でブラウザと同じ表示が可能になった。画像はCSSの「a:hover」を表示しているところ

「ライブコード」でコードの変化をリアルタイムに表示する