Dreamweaver CS4 パブリックベータ
第2回 ライブでJavaScriptの動作と動的HTMLソースを確認可能
今月号の記事
第1回目は、関連するファイルに1クリックでアクセスできるRelated Files、配置方法が増えたビュー分割などの機能を取り上げました。 今回は、JavaScriptの動作をDreamweaver上で確認できるようにするLive View、JavaScriptで動的に変化したHTMLソースを確認できるLive Code、適用されているCSSルールを把握できるCode Navigatorを紹介します。
Live Viewとは
Live Viewとはどのような機能かというと、簡単に言ってしまえば、Dreamweaverがブラウザを内蔵した、と思ってください。
従来のデザインビューではHTMLとCSSのレンダリング結果の確認は行えますが、JavaScriptなどインタラクティブなものの動作確認を行うことはできませんでした。しかし、昨今のWebサイト開発では、jQueryなどのJavaScriptライブラリを使って、画面にエフェクトを付けたり、表示内容を動的に書き換えたりすることが一般的になってきました。そのようなサイト開発をしている際に、JavaScriptが期待通りに動作しているかを確認するためには、Dreamweaver CS3までは「ブラウザでプレビュー」機能を使い、編集中のページをブラウザで表示して確認する必要がありました。つまり、JavaScriptが絡んだWebサイト開発をする場合、Dreamweaverとブラウザの間を何度も行ったり来たりする必要があったわけです。
その行ったり来たりする手間を省くため、Dreamweaver CS4ではLive Viewというモードが搭載されました。Dreamweaver CS4のドキュメントツールバー上には「Live View」というボタンが追加されています。このボタンを押すと、デザインビューの部分がDreamweaver内蔵のブラウザ（WebKit）でのレンダリング結果に切り替わります。つまり、Live Viewモードにすると、Dreamweaverの中でJavaScriptでのエフェクトなどの動作をデザインビュー部分で確認することができるのです。
図1)Live ViewとLive Codeボタンが新たに搭載されている
Live Viewを使う
試しに、以下のような簡単なJavaScriptをLive Viewで確認してみましょう。このコードはaタグにマウスオーバーすると、aタグの中身を「マウスオーバーしました」と書き換えるものです。
<a onmouseover="this.innerHTML='マウスが乗りました'"
onmouseout="this.innerHTML='マウスは乗っていません'">マウスは乗っていません</a>
従来からあるデザインビューでは、もちろんこのようなJavaScriptの動作を確認することはできませんが、Live Viewボタンを押して、該当のaタグにマウスオーバーすると、表示内容が書き換わっていることが確認できます。
図2)Live Viewにしてマウスオーバーすると、JavaScriptが動作していることが分かる
今回の例のように極めて単純なJavaScriptコードならばあまり確認する必要性を感じないでしょう。しかし、例えばJavaScriptで動的にCSSスタイルを適用するようなコードだったり、Ajaxで外部データを読み込み、そのデータを元にJavaScriptで動的にHTMLを組み立てる、と言った複雑なコードを組んでいた場合、従来であれば「ブラウザでプレビュー」機能を使ったブラウザでの動作検証は必須でした。しかし、Dreamweaver CS4ではブラウザに相当する機能が内蔵されたため、もはやブラウザとDreamweaverを行ったり来たりする必要はありません。「コードビューにJavaScriptを書く→Live Viewに切り替えて確認する→ダメだったら再度コードビューでJavaScriptを編集する」と言った、Dreamweaverの中だけで完結するワークフローが提供されています。このように、Dreamweaver CS4では、JavaScriptを使ったサイト開発を従来よりも効率的に行うことができるのです。
さらにJavaScriptでの動的なサイト開発に便利な機能として、Live Codeが搭載されています。
Live Codeとは
Live Viewと並んでJavaScriptを使ったWebサイト開発に便利な機能として、Live Codeが搭載されました。この機能はJavaScriptによってHTMLが書き換えられた場合、元のHTMLがどのように書き換えられたのかをリアルタイムでコードビュー上に表示してくれる機能です。
例えば、Ajaxでデータを取得してきて、JavaScriptで動的にHTMLを構築する場合、JavaScriptで構築されたHTMLが期待したとおりの物であるかどうかを確認するためには、従来であればFirebugやDragonflyなど、ブラウザにアドオンを入れる必要がありました。
Dreamweaver CS4ではブラウザを内蔵したことにより、JavaScriptでHTMLがどのように書き換えられたのかをLive Code機能で確認することができます。
例えば先ほどのaタグの中身を書き換えるコードをLive Codeで確認してみましょう。
Live Codeにするためには、いったんLive Viewにした上で、Live Viewボタンの隣にあるLive Codeボタンを押します。
すると、コードビューの背景が黄色くなります。この黄色の状態のコードビューには、Live ViewでレンダリングしているHTMLが表示されています。つまり、Live Viewで表示しているHTMLがJavaScriptで書き換えられると、その書き換えられた内容が表示されるというわけです。
図3)Live Codeにしてマウスオーバーすると内容が書き換えられているのがリアルタイムで確認できる
試しに「マウスは乗っていません」という文字の上にマウスカーソルを乗せてみましょう。すると、黄色のコードビュー上の「マウスは乗っていません」という文字が「マウスが乗りました」に変わっているのが分かると思います。このようにLive ViewでレンダリングしているHTMLを表示してくれるのがLive Codeです。
上記の例のような単純なコードでは有り難みがあまり分からないとは思いますが、動的に書き換える部分が多い場合などに効果を発揮してくれるでしょう。
例として、Spryデータセットを使って、マスター・ディテールを表示するページを作成してみました。従来のデザインビュー・コードビューでは、Spryの実行結果がどのようになるかを確認できませんが、今回搭載されたLive Viewで視覚面を、Live CodeでHTMLコードが正しく書き換えられていることを確認できます。
図4)Spryデータセットを使ってLive View/Live Codeをする前（上）とした後（下）
Code Navigator
さて、今回最後に紹介する機能はCode Navigatorです。これは、現在の選択部分に適用されているCSSセレクタに1クリックでアクセスできる機能だと思ってください。
CSSで作成しているサイトを開き、デザインビュー上でAlt+左クリック (Windows) または Cmd+Option+左クリック（Mac）してください。すると、クリックした部分に適用されているCSSルール一覧がポップアップしてきます。ポップアップしたセレクタにマウスオーバーすると、セレクタでの定義内容が表示されます。さらにセレクタをクリックすると、Related Filesで該当するCSSファイルが開き、該当するCSSセレクタ部分にコードビューが移動します。
図5)Code Navigatorで選択部分に適用されているCSSセレクタを表示しているところ
従来のDreamweaverでもCSSパネルで同様の機能が提供されていましたが、コードビューでクリックするという、より直感的な方法でCSSが編集できるようになっており、CSSでレイアウトされたサイトの編集を非常に便利に行うことができるようになりました。
また、Code Navigatorはデザインビューだけでなく、今回紹介したLive Viewでも使うことができます。つまり、JavaScriptで動的にHTMLを書き換えて、さらにそのHTMLにCSSが適用される、と言ったような複雑なサイトを作っている場合、従来であればJavaScriptで書き換えられたHTMLに適用されるCSSルールを把握するのは非常に困難でした。Live ViewとCode Navigatorを組み合わせると、そのような複雑なサイトの構築もDreamweaverだけで行うことができるのです。
試しに先ほどのSpryデータセットのマスター・ディテールをCode Navigatorで解析してみましょう。Live Viewに切り替えて、マスター・ディテールのプレビューをLive Viewで行います。その上で、適当な場所でCode Navigatorを呼び出してみましょう。すると、Spryで書き換えられたHTMLに適用されているCSSルールが表示されるのが分かると思います。
図6)Live View上でもCode Navigatorを使うことができる
まとめ
今回はJavaScript開発時に便利なLive ViewとLive Code、および現在の選択部分に適用されているCSSルールを把握するのに役立つCode Navigatorを紹介しました。
従来であれば、JavaScriptで動的に書き換えられたHTML構造や、それらのHTMLに適用されるCSSルールは、Firefox+Firebugなどの方法でしか把握できませんでした。しかし、Dreamweaver CS4で搭載されたLive ViewとLive CodeおよびCode Navigatorを組み合わせることで、そのような作業をDreamweaverだけで完結できるようになりました。JavaScriptを使ったサイト構築が一般的になってきた中で、今回ご紹介した機能が果たす役割の大きさや、それによる作業効率の向上は計り知れないでしょう。
次回は、切望されていたSubversion機能をご紹介します。
酒井 克幸（Katsuyuki Sakai）
合同会社レゾリューションズ 代表社員
2002年から2004年にかけマクロメディアにインターンで在籍。Dreamweaver や Fireworks、Contribute など Web 関連製品に関わる仕事をする。
2005年から2006年にかけて、女性系サイトでは絶大な人気を誇るクックパッドに在籍。ColdFusion と MySQL を使ってリニューアルを行い、2008年3月現在では月間2.2億ページビューを集めるサイトにまで成長した。
2008年2月合同会社レゾリューションズを設立。クライアントとその顧客が Web を通じて円滑にコミュニケーションができるようにする”コミュニケーションデザイン”を生業とする企業。「技術はコミュニケーションデザインを支えるための基盤」がモットーであり、日々の技術鍛錬は欠かさない。
