DW CS4採用のWebKitレンダリングエンジン

WebKitレンダリングエンジン搭載の意義

　Dreamweaver CS4では、制作時のストレスを軽減してくれるさまざまな機能強化が図られています。その中でも多くの制作者のメリットとなるポイントを紹介します。

　まず、「ライブビュー」が挙げられます。Dreamweaverの制作インターフェースは、コードを直接編集するためのコードビューと、グラフィカルなインターフェースであたかもワープロのようにWebページを編集できるデザインビューがあります。

　デザインビューではブラウザでの表示に近い状態で表示されますが、編集のための目印や枠線などによりレイアウトが崩れて表示されることも少なくありません。また、JavaScriptの動作などもデザインビューでは確認できません。

　これに対して、ライブビューでは編集が行えなくなる代わりにより正確な表示を行うことができるようになり、JavaScriptやFlashコンテンツなども実行・表示できます（図1-1）。ライブビューの位置づけは、コードビューやデザインビューと同列ではなく、デザインビューのオプションとなっています。デザインビューで編集している際に必要に応じて切り替えるというのが代表的な使い方になるでしょう。

　ライブビューの切り替えは、デザインビューを使用している状態でライブビューボタンをクリックするか（図1-2）、「表示 → ライブビュー」を選択します。

　ライブビューでは、MacOSの標準ブラウザであるSafariでも使われている「WebKit」というレンダリングエンジンが採用されています。WebKitはW3Cの標準に近い動作をするレンダリングエンジンで、ブラウザによるプレビューよりも手早く確認ができます。最終的には各種ブラウザでの動作確認は必要になりますが、スタンダードに近い動作をするレンダリングエンジンが搭載されたというのは大きな意義があります。

　近年、いわゆるCSSハックを使ったブラウザごとの表示対応は減少傾向にあり、Webスタンダードを順守した汎用的なスタイルが増えています。このようなスタンダード順守の制作スタイルにおいては、ライブビューでの動作確認で従来よりも高い精度で作りこむことができるようになり、実際のブラウザでの動作確認頻度を少なくできる可能性があります。

分割ビュー、関連ファイルの管理

　分割ビュー（コードビューとデザインビューを分割して両方表示するビュー）が、左右に表示できるようになりました。機能的には地味な印象があるかもしれませんが、筆者としては大きく評価したいポイントです。

　Dreamweaverでの制作では分割ビューをメインに使用するのが主流です。CS3までは分割ビューは上下にしか表示できず、モニターのスペースを有効に使えませんでした。このような状況を当たり前と思い込んでいる方は、せっかくの左右分割機能を見落としがちなので利用することをおすすめします。

　分割ビューで左右に表示するには分割ビューにした状態で「表示 → 左右に分割」を選択します。コードビューが左に、デザインビューが右に表示されますが、「表示 → デザインビューを左に表示」で左右を入れ替えることもできます。

　また、「表示 → 分割コード」を実行すると分割ビューの両方にコードを表示することもできます。使用頻度の高い分割ビューの、このような機能強化は実際の使い勝手を大きく向上させるもので、非常に実用性の高いものと言えます。

　さらに、関連ファイルの管理機能も向上しました。関連ファイルとは、HTMLに関連付けされたCSSファイルはJSファイルのことです。関連ファイルはドキュメントウィンドウの関連ファイルツールバーに表示され、ファイル名をクリックすることですぐに開くことができます。

　関連ファイルはコードビューで開かれます。デザインビューで編集中している場合は分割ビューに切り替わり、コードビュー側で開かれます。コードビューの表示をHTMLファイルに戻したい場合には「ソースコード」ボタンをクリックします。関連ファイルを確認してファイルパネルから開く従来のプロセスに比べると、格段に手間が省けることが実感できます。

　Dreamweaver CS4には作業効率を上げる新機能が追加されていますので、今まで「そういうもの」とあきらめ、あるいは疑問すら持たなかった方はこれらの機能を見落とさないようにしましょう。