神森勉がオススメするDreamweaver CS5の新機能

今月号の記事

Dreamweaver CS5では、CMSツールとの連携の強化、PHPやCSSの編集機能の強化、Adobe BrowserLabとの連携など、制作現場のニーズに応える様々な機能強化が施されています。本記事では、Dreamweaverコミュニティで活躍する神森勉さんに依頼し、Dreamweaver CS5のオススメ機能を紹介していただきました。

コンテンツ管理システム（CMS）の確認、編集、反映の強化

企業から発信される情報を少しでも早くユーザーへ届けたいということから、制作のスキルに依存することなくページ更新が行えるように、CMSを導入する場面が増えてきています。CMSといっても、オープンソースのものからハイエンドのメーカー製のものまで幅広いのですが、Dreamweaver CS5では、オープンソースで、制作者にもなじみの深いWordPressをはじめとするPHPベースのCMSをサポートしました。

このサポートは、CS4から導入されているライブビューと関連ファイルバーが機能強化されたことで実現されており、ライブコード機能と合わせて非常に強力な編集ツールとなりました。

以下、WordPressを例にその概要を紹介しようと思います。

WordPressのコンテンツは、サイトルートのindex.phpへアクセすることで、サーバー側でphpコードを処理し、ページを生成します。Dreamweaverでこのindex.phpを開くと、デザインビューでは真っ白に、コードビューではファイルを呼び出す記述が少々書かれているだけです。まずここで紹介するのは、関連ファイルバー。従来と比べて、サーバー側で処理されることでアクセス可能なファイルも読み出せるようになっています。また、関連ファイルバーで表示させるファイルをCSSファイルのみ、phpファイルのみといったように、特定のファイルのみを表示させることができるようになりました。ライブビューボタンをクリックし、ページが表示されます。この状態で、次に紹介するCSSインスペクト機能などを活用して、デザイン修正作業とプレビューがDreamweaverから離れることなく可能となります。これまで、このような一連の作業は、テストサーバーにアップして確認しつつ、コード修正を行い、そして再度テストサーバーにアップし確認といった流れの繰り返しだったと思います。

より実用的になった関連ファイルバー

これだけでなくさらに便利になったのが、ライブビューオプションで「リンク先を連続表示」を選択すると、ライブビューの状態でページが移動できるようになります。移動すると、それに合わせて関連ファイルバーに呼び出されているファイルが変わり、デザイン修正などがライブビューを通して行えるようになっています。それでは、先ほど少し紹介したCSSインスペクト機能について、次に詳しく見ていきましょう。

より便利になったCSS編集・確認作業

コーディング作業において、CSSの編集は欠かせない作業です。Dreamweaver CS4から搭載されたライブビューは、作業中にアプリケーションを切り替えずに簡単に表示確認を行える便利な機能で、制作時のワークスタイルの変化をもたらした機能とも言えます。しかし、CS4のライブビューは表示確認のための機能に特化していたこともあり、直接スタイルの編集を行うことができませんでした。

Dreamweaver CS5では、このライブビュー機能をより強化し、よりわかりやすくCSSプロパティへのアクセスが容易になりました。ドキュメントウィンドウに新しく追加された「インスペクト」ボタンをクリックすると、デザインビューがライブビューのインスペクトモードに切り替わります。このとき、マウスをライブビューの領域に移動すると、ボックスモデルがハイライト表示されます。ここで、マウスを動かして調整をしたい要素を選んでクリックすると、その要素が確定されるので、CSSパネルで関連するスタイルの編集を行い、変更をリアルタイムに確認することができます。

ライブビューの状態でインスペクトモードに
ライブビューの状態で、インスペクトモードにし、要素を選択すると、マージンやパディングなどが視覚的にわかるようになった。

さらに、インスペクト機能にプラスして便利なのが、CSSプロパティのON/OFFがパネルから容易にできるようになったことも挙げられます。CSSパネルのサマリーやプロパティペインのプロパティの左隣をクリックすると、そのプロパティがコメントアウト状態になります。

CSSプロパティをパネルでOFFにすることができる。

CSSコードに自動的にコメントアウト処理がされる。

また、スタイルレンダリングツールバーに新しい機能が追加されたのも見逃せません。これまで、:linkや:hoverといったa要素ではよく使われるCSSの疑似クラスの確認は、ライブビューかブラウザでしか行えませんでしたが、スタイルレンダリングツールバーにこれらの状態を切り替えるボタンが追加されたので、マウスのON/OFFの状態などがデザインビューからも簡単に確認することができるようになりました。

hoverなどの疑似クラスの様子を切り替えて確認できるようになった。

Adobe BrowserLabとの連携

日々の制作・開発作業の中で、もっとも時間を費やす作業の1つが、ブラウザでの表示確認です。単一のOSでのブラウザだけではなく、WindowsとMac両OSの主要ブラウザばかりか、同一のブラウザでも過去のバージョンまでの表示確認を行うのは、非常に大変な作業です。

Adobeの新しいオンラインサービスであるCS Liveに含まれるAdobe BrowserLabとの連携は、Dreamweaver CS5の新機能の1つとしてそんな作業を大幅に軽減してくれる機能です。Dreamweaverのドキュメントウィンドウにあるブラウザプレビューの中からBrowserLabを選択すると、Webブラウザ経由でBrowserLabサービスへ繋がります。

BrowserLabを呼び出してIE7の表示を確認しているところ。

ここで、表示確認をしたいブラウザを選択することが可能となり、また2ペイン表示によって、2つのブラウザの表示を並べて確認することが可能となります。Adobe BrowserLabで表示確認ができるブラウザは次のとおりです。

Windows	Mac OS
Internet Explorer 6.0	Safari 3.0
Internet Explorer 7.0	Safari 4.0
Internet Explorer 8.0	Firefox 2.0
Firefox 2.0	Firefox 3.0
Firefox 3.0	Firefox 3.5
Firefox 3.5
Chrome 3.0

BrowserLabでは、並べて表示させる以外に、オニオンスキンモードによりブラウザごとの表示の差異を重ねて確認することもできます。 Adobe BrowserLabとの連携は、大変便利で重宝する機能だと思います。

2ペインのオニオンスキンモード
2ペインでIE7とMac版Safari 4での表示をチェックしているところ。
オニオンスキンモードで重ねて表示させることもできる。

PHPコードヒントとカスタムコードヒント

ここで紹介しているWordPressでも採用している、Webサイトのサーバーサイド技術PHPは、オープンソースの開発言語と言うこともあり、多くのサイトでも採用されている技術です。

Dreamweaverは、WYSIWYGベースのオーサリングソフトというイメージがかつてありましたが、現在ではコード編集の機能も格段に向上しています。その一つが、コードヒント。HTMLやCSSだけではなく、JavaScriptやASP、ColdFusionのなどの開発において、コードビューのコードヒント機能により、コードを記述していく作業を効率的に行うことができるようになっています。 Dreamweaver CS5では、このコードヒントにPHPが正式に対応し、これまで以上にPHPでの開発の作業効率があがるようになります。

さらに、便利になったのが、ファイルやディレクトリに対してのコードヒントが利用できるカスタムコードヒント機能。

図のように、PHPサイトでは、サイト固有のコードヒントを設定するダイアログで詳細に設定を行うことができるようになります。標準では、WordPress、Joomla、Drupalがセットされており、サイトごとに構造をセットすることでカスタムのコードヒントが利用できるようになります。

サイト固有のコードヒントダイアログボックス

便利になった機能など

これら以外に、便利になった機能などがあるので、少し紹介しましょう。

サイト設定ダイアログの刷新

まずは、Version 1から馴染みの深いサイト設定のダイアログが、Dreamweaver CS5で一新された点です。

これまでわかれていたテストとリモートといったサーバー設定を1つの画面で簡単に管理できるようになりました。左側の「サイト」は、サイト名とローカルルートフォルダーを設定する部分です。サーバーは、必要に応じてサーバーを複数設定することができるところです。ローカルサーバーから、ステージング、そしてライブといった接続先の性質に応じて好きなだけサイトを設定することができるようになったのが、これまでとは大きく異なります。

そして、接続先の性質をリモート、テストのなかからチェックすることで、テストサーバーとして、サイトのデータをアップする先として、指定することができるようになります。

バージョンコントロールは、これまでどおりSubversionのリポジトリとの接続を設定することができるところです。

新しくなったサイト設定ダイアログボックス

Subversion機能強化

Dreamweaver CS5では、CS4からサポートされているSubversion機能もアップしました。
まずDreamweaver CS5のSubversionクライアントはVersion 1.6のクライアントとして利用できるようになりました。
また、ファイルの移動や削除に正式に対応するようになり、これまで以上に安全なファイルのバージョン管理が可能となりました。

CSS新規ドキュメントの改良

新規ドキュメントで、あらかじめレイアウトを指定して作成する際のCSSがより標準に準拠したコードになり、素早く制作作業にとりかかることができるようになりました。このとき、CSSコードのコメントがローカライズに対応し、初心者でもCSSを学びながらWebサイトの構築が行えるようになりました。

これら以外にも、様々な改良が行われているDreamweaver CS5。ぜひ、発売当日に入手し、Webサイト制作に役立ててください。