Adobe Dreamweaverは、ウェブサイトのデザイン、構築、管理のための堅牢なツールを常に提供してきました。最新バージョンでは、PHPプログラマー向けの強力なツール、CSSを検査するための新しいツール、一般的なPHPベースのコンテンツ管理システムのサポート、そしてサイトのセットアップとCSSベースのレイアウト構築を容易にするいくつかの簡素化機能が搭載されています。
サーバーサイドへようこそ
Dreamweaver CS5の最も重要な追加機能は、PHPベースのサイトを構築するWeb開発者を対象としています。PHPは、FaceBook、Flickr、Diggなど数百万ものサイトで使用されている無料のオープンソースWebプログラミング言語であり、Drupal、Joomla、WordPressといった人気のコンテンツ管理システムの多くで使用されています。
Dreamweaver CS5では、PHP向けのコードヒント機能が拡張されました。WebドキュメントにPHPコードを入力すると、Dreamweaverが対応する関数とキーワードを一覧表示します。Dreamweaverの候補から1つを選択すると、残りのコードが自動的に入力されるため、入力の手間が省け、プログラミングのスピードアップにつながります。また、コードヒント機能はPHP Webサイトから直接ドキュメントを表示するので、PHP関数の使い方がわからない場合でも、関数名を入力し、コードヒントのリストから関数を選択すると、Dreamweaver内でその関数の動作説明を直接確認できます。
Dreamweaver のコードヒントは、独自の関数やキーワードにも対応しています。コード内で変数（例えば $theValue）を定義すると、Dreamweaver はそれを認識し、最初の数文字（例えば $th）を入力し始めると、Dreamweaver はコードヒントウィンドウにその変数の候補を表示します。さらに、WordPress、Joomla、Drupal、その他のビルド済み PHP アプリケーションをサイトで使用している場合は、Dreamweaver にそのアプリケーションの PHP ファイルを指定して、カスタムのコードヒントセットを作成させることができます。つまり、WordPress を使用している場合、Dreamweaver は WordPress のコア関数のコードヒントも提供できるのです。これらのコードヒントの追加により、プログラミングの高速化とキー入力回数の削減が実現します。
残念ながら、コードヒントは自動的にポップアップ表示されません。Dreamweaver にコードヒントリストを表示させるには、Ctrl キーとスペース キーを頻繁に入力する必要があり、「入力を減らしてプログラムを増やす」機能の利点が一部損なわれます。
Dreamweaver CS5は、ネストされた（または「インクルードされた」）PHPファイルを使用するWebサイトの操作性も大幅に向上しました。例えば、WordPressブログシステムでは、1ページを表示するために数十個のPHPファイルが使用されています。Dreamweaverの「関連ファイル」ツールバーを使用すると、Webドキュメントを開いて、そのドキュメントで使用されているPHPファイルを検索できるようになりました。これにより、必要なPHPファイルの編集がはるかに簡単になります。
サーバーサイドプログラミングに携わる方にとって、もう一つの便利な機能が強化されたライブビューです。Dreamweaver CS4から搭載されているライブビューは、AppleのWebKit（SafariとChromeのレンダリングエンジン）を使用して、ブラウザ（少なくともSafariでは）で表示されるのと同じようにページを表示します。ライブビューでは、PHPなどのサーバーサイドプログラミング言語で作成されたページを簡単にプレビューできます。
Dreamweaver CS5では、ライブビューにナビゲーション機能が追加されました。リンクをクリックすると、Dreamweaverはその新しいWebページをライブビューに読み込みます。この機能は、ページを正しく表示するためにリンクが必要となることが多い動的なサイトでは特に重要です。例えば、WordPressブログシステムでは、メインファイルであるindex.phpが、サイト上のほとんどのページ（ホームページ、カテゴリーページ、個々のブログ投稿）を表示します。つまり、ブログ投稿は単一のファイルとして存在するのではなく、メインのindex.phpファイルによって作成されるのです。そのため、多くの動的なサイトを正しくプレビューするには、クリックしてサイト内を移動できる必要があります。
残念ながら、プログラミングが苦手で、DreamweaverにPHPを頼りにしている方は、プログラムの「サーバービヘイビア」にアップデートはありません。データベースへの接続、データの取得・挿入・更新、Webページのパスワード保護といった一般的なタスクの裏側で動作する、便利なコードスニペットは、（過去数バージョンと同様に）変更されていません。CS5のPHP機能強化は、PHPコードを手作業でプログラミングするユーザーをターゲットにしています。
CSSを検査する
CSS（カスケーディングスタイルシート）は、Webデザイナーが美しいサイトを制作するための最も重要なツールであり、Dreamweaverには既にCSSの作成、編集、管理のための優れたツールが搭載されています。CS5には、ライブビューでCSSを検査するための優れたツールが追加されました。新しいインスペクトモードでは、ページ上でマウスを動かすと、通常は表示されないパディングとマージンによって追加されたスペースを視覚化できます。要素にマウスを合わせると、Dreamweaverはマージンによって追加されたスペースを黄色で、パディングによって追加されたスペースを紫色で強調表示します。さらに、ページ上でマウスを動かすとCSSスタイルパネルが変化し、マウスを合わせた要素に適用されているスタイルが表示されます。これは、「カスケード」と呼ばれるスタイルの複雑な相互作用を視覚化するのに最適なツールです。
インスペクトモードで要素をクリックすると、Dreamweaver はスタイルパネルを固定し、その要素に適用されているスタイルのリストを表示します。これにより、要素に適用されているプロパティを素早く確認し、スタイルを素早く編集できます。
インスペクト モードは、JavaScript または PHP などのサーバー側プログラミング言語でコンテンツが生成されるページで特に便利です。コード ビューやデザイン ビューでは表示されないコンテンツ (JavaScript で生成されたポップアップ メニューや WordPress ブログ投稿の署名など) の CSS をすばやく表示および編集できるためです。
追加の改善
Dreamweaver CS5には、数多くの細かな改良も含まれています。改訂された「サイト設定」手順により、Dreamweaverをウェブサイトで使用できるようにするプロセスが大幅に簡素化されました。サイト設定は1つの方法のみ（以前のバージョンでは、時間のかかる「サイト定義ウィザード」か、分かりにくい「詳細」設定プロセスのいずれかを選択できました）、サイトのファイルの場所とサイト名をDreamweaverに伝えるだけで済みます。開始時に他の情報を入力する必要はなく、内蔵FTPツールなど、プログラムの他の機能を使用する必要がある場合は、そのツールを使用する際にのみDreamweaverからその情報の入力を求められます。
このプログラムには、作業スペースの拡大とボタンのより論理的な配置を実現する、ユーザーインターフェースの細かな変更が数多く含まれています。さらに、CS3以降Dreamweaverに同梱されている「スターター」CSSレイアウトは、CSSベースのページレイアウトを学習するユーザーにとってより分かりやすく、使いやすいよう、書き直され簡素化されました。
Dreamweaver CS5 には、Adobe の BrowserLab サービスのサポートが組み込まれています。この Web ベースのサービスは、すべての主要ブラウザーでデザインが確実に表示されるようにしたいと努力している Web デザイナーにとって天の恵みです。BrowserLab は基本的に、Windows と Mac の両方でさまざまなブラウザーを使用して Web ページのスクリーンショットを撮影する巨大なマシンです。これは、Windows マシンや複数のバージョンの Internet Explorer にアクセスできない Mac ユーザーにとって特に便利です。Dreamweaver CS5 では、作業中のページを Adobe Browserlab でプレビューすることを選択できます。これにより、Web ブラウザーが起動し、ページが BrowserLab に送信されます。BrowserLab はスクリーンショットを撮影して表示するため、複数のブラウザーでデザインを比較できます。ただし、BrowserLab は Dreamweaver CS5 専用のサービスではありません。Dreamweaver CS4 ユーザーは、BrowserLab を操作するための拡張機能をダウンロードできます。また、Dreamweaver がなくてもこのサービスを利用できます。
改善の余地
Dreamweaver CS5はPHPプログラマー向けに多くの新機能を追加しましたが、他のツールは時代遅れになり始めています。このプログラムの視覚的な「見た目とほぼ同じ」編集モードでは、複雑なCSSレイアウトの一部を正しく表示できないだけでなく、Webフォント（CSS @font-faceメソッドを使用）、生成されたコンテンツ、単語間隔、不透明度、RGBaカラー、多くのCSS3セレクターなど、よく使用されるCSSプロパティやテクニックの効果も表示されません。つまり、デザイナーはデザインを正確に確認するために、Dreamweaverのライブビューにますます依存するようになっています。しかし残念ながら、ライブビューは編集できないため、ページの作業中にライブビューのオン/オフを切り替える必要があり、ワークフローが中断されます。
Dreamweaver CS5では、CSS3やHTML 5といった新しいWebテクノロジーのサポートがほとんど追加されていません。ページにHTML 5のDoctypeを選択できるようになりましたが、HTML 5タグを追加するためのツール（コードヒントさえも）はありません。さらに、新しい（そしてそれほど新しくない）CSSプロパティのサポートは、一部しか、あるいは全くありません。例えば、ルール定義ウィンドウ（スタイルを作成するためのデザイナー向けダイアログ）は前バージョンから変更されておらず、min-width、max-width、border-space、border-collapse、RGBカラーといった、広くサポートされているCSS 2.1プロパティにアクセスできません。また、不透明度、RGBaカラー、@font-faceディレクティブといった、ますます一般的になりつつあるCSS3プロパティを操作するツールもありません。
HTML 5もCSS3もまだ最終規格化されていませんが、多くのWebブラウザで一部のCSS3プロパティが強力にサポートされており、HTML 5の一部の要素もWebサイトに引き続き導入されています。Dreamweaverはこれまで時代を先取りした機能を提供し、すべてのブラウザをサポートするための回避策まで提供してきたことを考えると、CS5における新しいWeb技術へのこのような消極的なアプローチは残念です。
Macworldの購入アドバイス
Dreamweaver CS5 は、HTML、CSS、JavaScript の作成から、ファイルやリンクの管理、完成したページの Web へのアップロードまで、すべての主要なサイト構築タスクを処理する優れた Web ページ構築および Web サイト管理ツールです。
Dreamweaver CS4をお使いの場合、アップグレードするかどうかは、構築するサイトの種類によって異なります。PHPプログラマーの方は、新しいコードヒント機能とライブビューの強化により生産性が向上します。さらに、JavaScriptを多用するサイトやPHPで動作するサイトのCSSデザインを担当するデザイナーにとって、新しいインスペクトモードは貴重な追加機能です。これは、動的に生成されるページコンテンツをフォーマットするCSSを特定し、編集するための、これまでで最高のツールです。
しかし、PHPを活用していない、あるいはJavaScriptをあまり使用していないWebページを作成する場合、CS5の追加機能はそれほど魅力的ではないかもしれません。HTMLを操作するための新しいツールは用意されておらず、CSSを検証するためのインスペクトモードの利点のほとんどは、CSSスタイルパネルの現在のビューを使用する基本的なWebページで既に利用可能です。
[ David Sawyer McFarland は Dreameaver CS4: The Missing Manual (O'Reilly, 2008) の著者です]
