Adobe Dreamweaver CS4

2008.12.18 THU

Web制作ツール

Web開発を手助けするライブコードとライブビュー

アドビシステムズ

現在のWeb開発においては、HTMLによるページ作成からCSSとJavaScript、Flashを駆使した動的なWebサイトが求められている。Webオーサリングツールとしてさらに進化を続けるDreamweaverはCS4でどのように変わったのか。

動的なコンテンツに対応する

ライブビューとライブコード

Web制作においてWeb準拠に合わせたページの作成と、より構造化されたサイトを作成するためには、従来の見た目を全てHTMLで記述する方法ではなく、CSSで記述する方法が主流となって久しい。Webオーサリングツールもその流れに合わせて進化が求められる。

バージョンがCS4に上がったDreamweaverでは、CSSとJavaScriptを駆使しながらサイトを構築するのに求められる機能を多く加えており、動的なWebを作るための検証方法を搭載しながら進化を果たした。

構造的なWebサイトを構築しようとすると、HTMLから読み込む外部ファイルは複数に分割されたCSSファイル、JSファイルなど多岐に亘る。今まではそれぞれのファイルを開いて修正しなければならず、全体像をユーザーが把握しておく必要があった。CS4では、これらのファイルにアクセスしやすいようにページ上部には「関連ファイルツールバー」と呼ぶHTMLからリンクされたCSSフィルやJSファイルのリストが表示され、クリックするだけでそのファイルの編集が可能になっている。これは確認やファイルを探す面倒さがなくなる嬉しい機能。

上部にリンクされた関連ファイルの一覧が表示され、クリックするだけで直接アクセスが可能になる。ライブビューは、今までWebブラウザを立ち上げて確認しなければならなかったプレビュー作業がDreamweaverだけで行えるようになる機能だ。「ライブビュー」ボタンをオンにするとデザインビューがそのままブラウザのようになり、コードで修正した内容が反映される。見た目だけでなく、ロールオーバーやSpryな動的な制御の確認も行えるのだ

ライブビューによってAjaxのような動的なコンテンツの動作確認もDreamweaver上で行えるようになっ

このライブビューを行うレンダリングエンジンにはSafariでも採用されているのWebKitが使われており信頼度も高い。ただしライブビュー状態ではデザインビューの編集ができないので、できればGoLiveで採用されていたプレビュー機能のようにデザインビューとライブビューが別ウインドウで確認できれば２画面で作業でき、さらに使い勝手が上がるのだが。

コードの動きをページ操作しながら確認できるライブコード

リアルタイムに修正したコードやCSSの反映が可能なのがライブビューであるが、実際にページの動きに合わせてコードの進行具合を見ながらデバッグに役立つのが「ライブコード」だ。

ライブビューの状態で、左右に置くことが可能になった分割機能でコードとライブビューを表示しておくと、ライブコードを使ってページ上で反映される動的なコード内容の確認も行える。またライブビューを行っているときには、JavaScriptの一時停止が行えるため、操作途中で止めてプロパティを確認するなどデバッグ用途にも利用できる。他にもブラウザ側でJavaScriptやプラグインを使用停止にしていた場合を検証することもできる。

コードを記述する際のヒントも、自分でカスタマイズして利用することができる。jQuery、PrototypeといったAjaxライブラリを読み込めんでおけば、コードヒントとして表示される

CSSの確認・編集作業に便利なコードナビゲータ

コード、またはデザインビュー上の該当箇所にカーソルを置くと、インジケータが表示される。インジケータをクリックするとポップアップでその場所に適用されているCSSのスタイル名一覧が表示される。ポップアップのスタイル名にカーソルを合わせると、設定されているプロパティの一覧も確認できる。さらにクリックすれば、そのスタイルの編集ウインドウが表示される仕組みだ。直接コードナビゲータを表示したい場合にはALT-Ctrl（Mac OSではOption-Command）を押しながらクリックすれば該当箇所に適用されているスタイルの一覧を表示する。

該当箇所に適用されているスタイルの一覧が表示されるコードナビゲータ。カーソルを合わせるとそのスタイルの内容を確認できる

CSSの編集では新しいCSSルールを作成する際に、現在選択されているカーソル部分に該当するスタイル名が表示され、省略化・詳細化ボタンを使って適用範囲を変更できるようになった。カーソル位置によってスタイル範囲が変わるためかえって初心者には少々分かりづらいかもしれない。

CSSルールの作成ウインドウ。ここで複合を選択するとセレクタの名前の付加と削除が行える

他に新機能としては、他のCS4アプリケーションと同様にパネルのアイコン化が使えるようになり、ウインドウスペースをさらに広く使えるようになった。Spry用のデータ作りをテーブルを使って入力しておき、一括して読み込むSpryデータセットなるコマンドも用意されている。

Spry用のデータを作成するコマンドでは表の上に作成しておいた内容からデータをどのように抽出するか指定することができる

（樋口泰行／樋口デザイン事務所）

■価格　
49,875円（税込）

■Windows版
CPU: 1GHz以上のプロセッサを搭載したパーソナルコンピュータ
OS: Windows XP(SP2以降)/Vista Home Premium(SP1)/Vista Ultimate(SP1)/Vista Business(SP1)/Vista Enterprise(SP1) ※64bit未対応
メモリ: 512MB以上
HDD: 3.5GB以上
メディア: DVD-ROM
モニタ:1024×768、16bitカラー以上他DVD-ROMドライブが必要

■Macintosh版
CPU: PowerPC G5、またはインテルプロセッサ
OS: MacOS X 10.4.11または10.5日本語版
メモリ: 1GB以上
HDD: 4GB以上
メディア: DVD-ROM
モニタ:1024×768、16bitカラー以上他DVD-ROMドライブが必要 ※マルチメディア機能を利用するには、QuickTime 7.1.2 日本語版が必要

■問い合わせ先　
アドビカスタマーサービス
0570-067337　http://www.adobe.com/jp