Web制作に欠かせない「Adobe Dreamweaver CS5」新機能を数回に渡り徹底紹介。今回は「デザインビュー」などWeb制作現場向けに強化された機能を中心に解説していく。

「Adobe CS5」体験版はこちらから

「Dreamweaver CS5」の制作現場向け機能をチェック

「Dreamweaver」は随分早い段階から現在のバージョンに近いスタイルに至っていた完成度の高いツールだ。制作時にメインに使われている「ライブラリとテンプレート」、「コードビューとデザインビュー」、「サイトの定義」機能は既に「Dreamweaver4」までに実装されていた。Dreamweaverの歴史は新しい機能の追加というよりは、ソフトの完成度を高めるためのバージョンアップと呼んでもいいだろう。中でも常に性能を向上させてきたのがデザインビューだ。

Dreamweaverのデザインビューは、まだテーブルレイアウトが主流だったこともあって、テーブルを使ったレイアウトの確認には優れていたが、CSSを使ってレイアウトされたサイトの表示はお世辞にも再現性が高いとはいえなかった。その後、バージョンを重ねるうちに、再現性が増し、遂にDreamweaver CS4に至ってはWebKitを搭載した「ライブビュー」によりほぼDreamweaver上での表示確認がブラウザと同等になっている。

CMS導入が前提の制作ワークフローに対応した「Dreamweaver CS5」

「Dreamweaver CS5」の画面は、「CS4」と比較しても大きな変化はない。ただし、細かな使い勝手が大きく進歩している

近年Webサイトの制作におけるコーディングのプロセスは、Dreamweaverが開発された頃に比べて大きく変化している。代表的な例が、CMSの導入を前提としたサイト構築だろう。Webサイトは紙媒体と違い、公開後も更新していくことが出来る点が魅力のひとつだ。ただし、更新にはHTMLの知識が不可欠であったが、CMSの普及によってWebサイトの更新に必要なスキルは下がったといえる。

ただし、CMSを導入したサイトの場合、HTMLをそのまま表示させるわけではなく、システムによって置き換わるエリアや、表のようにデータの数だけ繰り返しの表示を行なうエリア、ヘッダーやフッターなど共通する部分をパーツごとに切り分けてモジュールされたエリアなど、従来のDreamweaverではカバーできない範囲が制作プロセスとして存在する。

結果的に従来のDreamweaverでは、最終的な表示結果は実際のCMSを用いて確認し、暫定的な表示のみをDreamweaver上で確認するというワークフローがとられていた。

CMSのテンプレートを実際にブラウザで表示されるかたちでプレビューすることが出来るようになった。

Dreamweaver CS5では、CMSの動的なファイル読み込みもライブビューを通じて随時確認できるようになった。例えばWordPressは、トップページ1枚に、header.php(ヘッダー表示用)、footer.php(フッター表示用)、sidebar.php(サイドバー表示用)といった複数のテンプレートで構成されている。

これまでのDreamweaverではひとつずつファイルを読んで編集しブラウザで確認して、初めて全体像がわかるといった作業工程だったのだが、Dreamweaver CS5からは既にテンプレートを取り込んだかたちでプレビューをすることが出来る。

CMSのプレビューには、サイト定義を行なった後、サーバーサイドの定義も行なう。つまり、何らかのかたちで既にサーバーにWordPressが導入されてあることが前提となる。

トップページを表示すると、関連するテンプレートやPHPファイルなども読み込まれていることがわかる。ここから選択することで、各部分のテンプレートを呼び出し、編集することが可能だ

ライブビューを表示しながら、ヘッダ部分のソースを編集したところ。テンプレートファイルを保存し、リロードすると変更が反映されている。ここでは「挿入します：」という文字をh1内に入れてみた

加えて、もうひとつCMSのテンプレートコーディングで便利な機能がDreamweaver CS5には備わっている。テンプレートには、テンプレート変数というものが含まれており、これらはCMS側でユーザーが入力した値に置き換わってブラウザで表示されるために使われているが、本来ブラウザで表示しない限りわからなかった部分もDreamweaver内で確認できるようになったのだ。

例えば、h1タグの中にはWordPressのテンプレートだと「<h1><?php bloginfo('name'); ?></h1>」というテンプレートタグが入っている。これは、サーバー側で、ブログ名と置き換えられ「< h1> ブログ名< /h1> 」として出力される。各テンプレート内に埋め込まれているPHPのコードも実行されるため、プラグインなどの表示もそのままDreamweaver上で確認することが出来るのだ。

これにより、ページの雰囲気に合うようにプラグインの外見をカスタマイズしたいと思った場合も、Dreamweaver上でトライアンドエラーを繰り返してデザインしていくことが出来る。

CMS独自のコードヒントにも対応

Dreamweaver CS5では、コードヒント関係も大幅に強化されている。CMSのテンプレートコーディングは、HTMLタグだけを知っていればいいわけではなく、CMS固有のテンプレートタグも熟知してある必要があり、うっかり目的のテンプレートタグを忘れてしまうといったことも少なくない。

今回のバージョンでは、Drupal、Joomla、WordPressといった世界的な主要CMSフレームワークのコードヒントを表示させることが出来る。これは「サイト固有のコードヒント」という設定項目で行う。もちろん、上記CMSフレームワークでなくとも、設定を行なうことでライブラリなどのコードヒントを表示させることも可能だ。

「サイト固有のコードヒント」を設定すると、コードヒントの表示が可能になる。元々、プログラマー向けの統合開発環境で実現されていた機能だ

コードヒントを表示させたところ。WordPress特有のテンプレートタグが一覧に表示されている

次回は強化されたCSS関連の機能を紹介していく。