HTML5/CSS/JavaScript/SVGなど、現在のWeb開発者が扱う技術は多岐にわたります。Dreamweaverには「コードビュー」「デザインビュー」「ライブビュー」の3つのビューがあり、各ビューの特徴に合わせて活用することで、こうした技術を用いた開発をよりスムーズに行うことができるでしょう。本記事では、Dreamweaver CS5.5における3つのビューの活用方法を紹介します。

※本記事は、2011年8月に開催されたイベント「ADC MEETUP ROUND 02 HTML5 Camp」にて筆者が行った講演をまとめたものです。

コードビュー

コードビューはソースコードの編集を行うためのビューです。HTML5が主流となりつつある現在、開発者はコードビューをメインに使うことで、様々なWebページやWebアプリケーションなどの開発が可能となります。特にDreamweaver CS5.5のコードビューでは、HTML5/CSS3/JavaScript(特にjQueryやHTML5API)の強力なコードヒント機能を実装しており、これらを活用することでよりスムーズに開発することができます。

HTML5については、新しいタグや属性の入力補完に対応しています。例えばsectionタグを入力する際、「<se」まで入力すると自動的に「section」と補完候補が表示されます。

また、属性も同様に補完候補が表示されます。

CSS3については、新しいプロパティやベンダー接頭辞の入力補完に対応しています。例えば「tra」まで入力すると、「transform」まで絞り込むことができます。また、プロパティの開始位置で「-」を入力すると、ベンダー接頭辞の補完候補が表示されます。

JavaScriptについては、例えば、自身で作成したオブジェクトに対するプロパティの入力補完に対応しています。

また、CanvasAPIやGeolocationなどHTML5APIの多くについても入力補完に対応しています。例えばcanvas.getContext("2d")に対しては、canvasのAPIのみが補完候補として表示されます。

さらに現在最もメジャーなライブラリーであるjQueryについても対応しています。

このようにDreamweaver CS5.5のコードビューでは、HTML5時代に利用するであろう様々な技術のコーディング作業をよりスムーズに行えるわけです。

デザインビュー

デザインビューはWYSIWYGで編集できるため、古くから活用されてきました。

しかし、現在のWebページやWebアプリケーションを開発する上でHTMLやCSS、JavaScriptなどは複雑さを増し、デザインビューでこれらの表示を全て再現することは難しいでしょう。おそらく、複雑なCSSを実装した際に、デザインビュー上で表示が崩れてしまう経験をした人も多いのではないでしょうか。

そこで、デザインビューはその軽快さと基本的なテキストの編集機能を活かし、テキストの編集を中心に行うビューとして活用するといいでしょう。例えば、改行区切りのテキストファイルをコピーした状態でデザインビューにペーストすると、改行は<br>となり、改行が2回続いている場合には<p>としてマークアップされます。例えば、次のような生のテキストデータを用意します。

なぞの野菜市場の農場でのすべての工程は農業を熟知した夢 つむぐ (ゆめ つむぐ) さん (71歳) が担当しています。

つむぐさんは18歳の誕生日から農業に従事し数々の伝説を残してきました。まさに農業の達人といっても過言ではないでしょう。つむぐさんの特技は空手で、最近は暴走したトラクターを素手でとめたとか...。
現在は空手栽培という新しい栽培手法を試験中とのことです。

上記のテキストコピーし、Dreamweaver CS5.5のデザインビュー上にペーストすると、自動的に次のようにマークアップされます。

<P>なぞの野菜市場の農場でのすべての工程は農業を熟知した夢 つむぐ (ゆめ つむぐ) さん (71歳) が担当しています。</P> <P>つむぐさんは18歳の誕生日から農業に従事し数々の伝説を残してきました。まさに農業の達人といっても過言ではないでしょう。つむぐさんの特技は空手で、最近は暴走 したトラクターを素手でとめたとか...。<BR> 現在は空手栽培という新しい栽培手法を試験中とのことです。</P>

デザインビュー上で表示がずれたり、重なったりしてしまいテキスト編集が困難な場合には、あえてCSSをオフにするといいでしょう。CSSを一時的にオフにするにはメニューから[表示]→[スタイルレンダリング]→[スタイルを表示]を選んで切り替えるか、あるいはスタイルレンダリングのバーにある[CSSスタイルの表示と非表示を切り替える]ボタンを使って切り替えることで可能です。

これにより、テキスト編集に特化した表示で作業することができます。

ライブビュー

ライブビューはDreamweaver CS4から搭載されたビューです。ライブビューではWebkitエンジン(ChromeやSafariで使われている描画エンジン)を利用しており、CSS3やJavaScriptなど様々な技術を駆使したWebページであっても高精度で表示することができます。これにより、これまでデザインビューで行っていた”簡易確認”は、その精度を増してライブビューで行うことができるのです。

また、ライブビューで要素を選択してコードビューの該当箇所に移動したり、該当箇所のCSSに移動するといった機能があり、これにより表示を確認しながらのコードの調整が可能です。

その他の使い方

画面の分割方法も工夫するのもいいでしょう。デスクトップ向けサイトを開発する場合には上下に分割、スマートフォン向けサイトを開発する場合には[左右に分割]を利用するといった使い分けもおすすめです。

さらに、プレビューの画面サイズを調整することもできます。対象の端末に合わせて利用するといいでしょう。

おわりに

この記事では、Dreamweaverの特徴であるコードビュー/デザインビュー/ライブビューの3つのビューを紹介しました。特にDreamweaver CS5.5のコードビューとライブビューにおけるHTML5/CSS3/JavaScriptへの対応度は、現在のHTML5やCSS3などを駆使した開発シーンにマッチしており、新しい時代の開発をよりスムーズに行うことができるでしょう。