5月28日に発売予定の「Adobe CS5」。そのなかでも、Web制作のための重要なツール「Dreamweaver CS5」の新機能紹介セミナーが、東京 表参道のギャラリー ststion 5にて開催された。セミナーには、米アドビ システムズ Webセグメント グループプロダクトマネージャーのデヴィン・フェルナンデス氏と、米アドビ システムズ クリエイティブソリューション部門 プロダクトマネージャー 森房卓史氏が登場した。

昨今のCMS事情にも完全対応

セミナーでは世界中に多くのユーザーがいる「WordPress」を使い、ダイナミックなCMSサイトを構築するデモンストレーションが行なわれた。フェルナンデス氏は、「昨今のCMSは構造が複雑になってきている。何層にもインクルードされて、ひとつのサイト内にいくつものファイルが使われている」と語る。このようなサイトを編集する場合、目的のファイルを探すだけ負担がかかる。ちなみに、デモで使用したCMSは、計67種類のファイルによって構成されていた。今回発表されたDreamweaver CS5では、このように複雑なサイトでも、関連するファイルをすべて表示してくれる。画面上の「ダイナミック関連ファイル」と書かれたボタンをクリックするだけで、画面上部の「関連ファイルバー」に大量のファイルが表示される。「Dreamweaver CS4」でも2階層までは参照できたが、最近のCMSに対しては不十分だったようだ。これがDreamweaver CS5では改善され、より使いやすいWeb作成ツールとなった。

ブログユーザーを中心に広く使われている「WordPress」を「Dreamweaver CS5」で編集するデモが行われた	このサイトを構成しているファイルは67種類も見つかった。もちろんフィルターをかけて検索することも可能

コードの「動き」をリアルタイムに確認できる

続いて「ライブビュー」という新機能が紹介された。これは編集中のCMSを、まるでインターネット上に設置したWebサイトのように確認できるという機能。デモンストレーションでは、WordPressで構築中のCMSの動きをMacBook内で確認していた。この機能は、ただ表示するというだけのものではない。画面を二分割させてライブビューとコードを表示させておけば、ブラウザーがどのような手順でダイナミックなページを構成しているのかが、リアルタイムで確認できるのだ。フェルナンデス氏がマウスを移動させると、カーソルがフォーカスしている場所によってコードが次々と変化していた。この機能はサイトを制作するだけでなく、デバッグするときにも便利だとフェルナンデス氏は説明した。

画面右側でフォーカスしている部分が、画面左側のコード上に表示される。classのアイテムがリアルタイムに変化していた

デザインを確認しながらCSSを編集できる「CSSパネル」

これまでフェルナンデス氏は、Web制作の現場で多くのデザイナーがCSSのトラブルに悩まされているのを見てきたと語る。Webサイトのデザインを完璧に仕上げるには、地味な作業が山ほどあり、それに多くの時間が消費されている。フェルナンデス氏は会場の受講者に「Firebugを使ってる人はいますか?」と質問すると、数名が手を挙げた。Firebugとは、CSSやJavaScriptをチェックするためのツールのこと。Dreamweaver CS5ではFirebug以上の機能を搭載しているので、もうFirebugを使わずにDreamweaver CS5だけでチェックが完結するとのこと。

Dreamweaver CS5で「CSS調査」機能を使うと、マウスオーバーした部分がハイライト表示される。さらにそのまま「CSSパネル」でマージンやピクセルサイズなどを編集可能だ。フェルナンデス氏は、「Firebugがあれば十分と思いましたか? でも、Dreamweaver CS5なら直接変更をしながら確認できます。Firebugはテストはできるが変更はできない。Dreamweaver CS5ならテストも、変更も、確認もできます」と、新機能の利便性を紹介した。Dreamweaver CS5では、既存のWebサイトのCSSも確認できる。画面上のURL入力バーにアドレスを入力すると、そのサイトがどのような仕組みでデザインされているかが一目で確認できる。森房氏は、「かっこいいサイトを作ろうと勉強しているユーザーにこの機能を役立てて欲しい」と説明した。

Webページのデザインを形成する「style.css」を確認。デザインの修整を視覚的に行える	ワンクリックでCSSを無効にできる。この場合、コードは一時的にコメントアウトされる

これからPHPのコードを学ぶ人に便利な機能

Dreamweaver CS4で新登場した「カスタムコードヒント」は、コード入力の手助けをしてくれる便利な機能だった。Dreamweaver CS5で強化されたカスタムコードヒントは、JavaScriptに加えてPHPもサポート。フェルナンデス氏がコード入力中に「Ctrl+スペース」を押すと、コードのヒントが表示された。ウインドーの下部にはパラメーターの使い方やサンプルコードなども現われ、コード入力中にも次にタイプすべきコードのヒントを次々と示していた。

画面左下に表示されているのが「カスタムコードヒント」。もちろん日本語版では、日本語化されている	文字列を入力すると、関連コードが表示される

最後にアドビのオンラインサービス「Adobe Browser Lab」が紹介された。これは、制作・閲覧中のWebサイトが別のブラウザやOSでどのように見えるかを確認できるWebサービスだ。フェルナンデス氏はMacBookでデモンストレーションを行なっていたが、「Windows版のFirefox 3.0」と「IE 7」での見た目がスクリーンに映し出された。これを使えば確認のためにわざわざ他のブラウザやPCを起動する必要がない。なお、このサービスはDreamweaver CS5と連携して使えば効果的だが、ツールを持っていない人でもアドレスさえ登録すれば使用可能とのこと。

サイトにログインすると、どのブラウザで確認するかを選択する	同時にふたつのブラウザで確認できる。重ねて表示もできるので、ズレている間隔も調べられる