Adobe Developer Connection(ADC)と連動する開発者向けイベント「ADC MEETUP ROUND2」のセッション3では、株式会社ピクセルグリッドの小山田 晃浩氏により、「Dreamweaverと3つのビュー」と題し、各ビューの活用方法が紹介された。

なお、Dreamweaver CS4以降、ツールバー上から選択できるビューとしては「コードビュー」「デザインビュー」「ライブビュー」の3つがある。

CS5.5でパワーアップしたコードビュー

まず小山田氏が取り上げたのは、コードビューだ。テキストエディタ風のコードビューは一見地味な画面だが、CS5.5ではHTML5/CSS3/HTML5 API/jQueryの扱いが格段に向上しているという。まずは、HTML5の扱いについて。
「新規ドキュメントのダイアログで『HTML5』という形式が選べるのがわかると思います。CS5.1からHTML5をサポートするようになったことで、HTML5ドキュメントの新規作成が可能になりました。Rewis氏のセッションでも紹介された通り、HTML5のDoctypeがついたテンプレートをベースにコーディングを行えます」

HTML5ドキュメントのコードビューではHTML5のコーディングに対応しているため、スクリーンではsection要素をコードヒントによって入力する模様が映し出された。他にも「vi」まで入力すると、video要素が補完された。属性に関しても同様で、video要素の属性入力時に「sr」まで入力するとsrc属性が補完され、ビデオのリソースを挿入する[ファイルの選択]ダイアログが表示された。

ここで、mp4の動画を[ファイルの選択]ダイアログより選択し、ビデオの横幅と高さを挿入、加えて再生ボタンなどが表示されるコントロールも挿入することができる。コードビューで入力したソースを保存し、Chromeで動画が再生された。

続いてCSS3のDreamweaver上での扱いについての解説が行われた。スクリーン上に表示されたのは、ブラウザーのアイコンが並んでいるサンプルページだ。こちらは角が四角く表示されている。小山田氏は、これらを角丸に変更し、ロールオーバーでアニメーションさせるというデモを行った。

まず、CSS3による角丸の作成だ。Dreamweaverのコードビューで、サンプルページを開き、CSSファイルにborder-radiusプロパティを記述した。border-radiusと最後まで打つ必要はなく、途中まで入力し終えたところで補完され、スムーズに入力できていた。

「他にもDreamweaverのコードビューの機能は豊富です。各ブラウザーのベンダースペシフィックプレフィックスの補完、単位の補完などができます」と小山田氏は解説し、プレフィックス付きのtransitionプロパティを使って、Webkitに対応したCSS3のアニメーション設定を行った。

transitionプロパティを使うと対象要素のプロパティの変化をアニメーションとして表示させることができる。今回のデモでは小山田氏は、「#demo」というid属性がつけられた要素のプロパティに3秒間のアニメーションを指定した。

続いて、要素にロールオーバーした際に変化させるための指定を行った。#demoの要素のhoverにtransformプロパティを指定した。tranformプロパティを指定すると、要素を回転したり、大きくしたり、菱形にしたりといった変形ができるとのこと。結果、サンプルページのブラウザーボタンが並んでいる領域は、角丸になり、hoverすると1.5倍くらいの大きさになるアニメーションが完成した。

通常のJavaScriptについてもDreamweaverの機能が向上していると、jQueryも含めたJavaScript周りの機能向上について小山田氏は語った。簡単なオブジェクト(様々な値が格納できる変数)を作成して、プロパティとして値を2つ追加した。そして、このオブジェクトのプロパティを参照するべく、次の行でオブジェクト名のコードを途中まで入力したところ、無事補完の候補として表示された。

HTML5の新しい機能面でも補完機能は向上しており、Canvasについて図形を描画しながらデモが行われた。まず小山田氏は、HTML内に横600px、高さ600pxのCanvas要素を作成し、「can」というid属性をつけた。続いて、Canvas要素をJavaScript内に取得するために「クエリーセレクタ」と呼ばれるAPIを使ってCanvasの要素を取得した。

クエリーセレクタとは、JavaScript上でquerySelectorというメソッドを使うことでCSSと同じ形式で要素を参照することができる仕様だ。小山田氏は、クエリーセレクタを使ってCanvas要素を取得したあと、getcontextメソッドを使ってCanvas APIへのアクセスを定義し、2Dコンテキストを取得した。2Dコンテキストを通してCanvas APIにアクセスをして、描画を行っていくとのこと。

会場では、getcontextメソッドによって得られた2Dコンテキストに「ctx」という変数名をつけ、それに「ctx.」とドットを続けることでDreamweaver上でCanvasのメソッドが表示される様子が映し出された。そして、beginPath/moveTo/lineTo/closePathなどといったCanvas APIを使いながら斜めの線をブラウザーに描画した。

ここで、Canvasに関する一歩踏み込んだ説明が行われ、大量にブラウザーアイコンが表示されるデモを実演した。
「Canvasでは、図形の描画だけではなく、画像の解析もできます。例えばここに並んでいる5つのブラウザーのアイコンを抽出して、ランダムで回転させたり、大量に描画することもできます」

小山田氏は、jQueryへの対応についても触れた。例えば、jQueryで指定のid属性を持つ要素にアクセスするために、idを表す「#」まで入力すると、該当要素も参照できるという機能が紹介された。また、jQueryの命令であるbindメソッドを入力する際も、「bi」まで入力するるとbindが補完される様子が紹介され、bindメソッド内で使われる多くのハンドラにも対応しているとのこと。

bindを使うと様々なイベントを特定の要素に結びつけることができるが、会場ではマウスオーバー後の処理を記述していた。加えてシンタックスエラーもきちんと出る点も紹介された。これらの補完機能により、コードビューでは次世代技術のコーディングに関する様々なサポートができるようになったといえるだろう。

デザインビューの効果的な使い方

小山田氏は、デザインビューについて、このビューならではの使い方があるという。
「デザインビューはコードビューと分割で表示することができ、実際に表示結果を見ながらコーディングできるという点で重宝されてきました。しかし、CSSを使ったページなどでは表示が崩れることがあります。そうした部分もありますが、デザインビューは表示が軽く、デザインを見ながら編集したい場合に向いています。例えば、原稿を入れたりする場合には便利です」

改行などが含まれたテキストをデザインビュー上で挿入すると、p要素やbr要素が付加されて反映されるとのこと。また、挿入したテキストをデザインビュー上でカーソルを合わせて、ショートカット「コマンド+1」でh1要素に変換できるほか、ファイルパネルから画像などをドラッグすると画像を簡単に挿入できる。このようにコードビューで行うよりも、デザインビューで行った方が効率がよい作業内容があり、こういった使い方が今後のデザインビューの方向性だろうと小山田氏は語る。

CS5.5で活かすライブビュー

ライブビューは、従来のデザインビューの問題点の1つである「デザインの再現性」を見事にクリアしている。小山田氏もライブビューはデザインの確認に向いていると述べた上で、さらに高度な利用方法について解説を行った。
「スマートフォン向けのサイトを確認する際、通常のライブビューだとうまくいかない場合があります。ライブビューには解像度を設定する機能があり、これを使うと表示エリアを実機に近い形で紹介することができます」

また、「ライブビューとコードビューの分割方法には、左右分割と上下分割がありますが、左右分割の方がスマートフォン向けには使いやすいでしょう」と語る。小山田氏によれば、この状態のライブビューでは、スワイプといったスマートフォンらしいアクションも行えるとのことだ。

さらにコードビューで編集すると、ライブビューでもその内容が反映されるため、ライブビューの状態でも要素の中身や位置の確認が簡単に行えるという。会場では、特定の要素を選択した後、該当のスタイルを編集する画面にジャンプしてスタイルシートとHTMLを行き来しながら編集ができる様子もデモされた。ライブビュー自体はCS5.5になってさらに速くなっているとのことで、今後もコーディングの主力ビューとなりそうだ。

CS5.5における強力なSVGサポート

小山田氏は、One more thingというおまけコーナーを用意してあり、SVGとDreamweaverの関係について語った。CS5.5では、新規ドキュメント作成のダイアログに「その他」という項目があり、選択肢の1つに「SVG」がある。
「SVG自体は昔からある仕様で、XMLで記述しますが、素晴らしいことにDreamweaver CS5.5はSVGのコードヒントにも対応しています」

コードビューではSVGのシンタックスハイライトが行なわれ、ライブビューでは表示の確認ができる様子がスクリーンに映し出され、文章構造もXML宣言があり、その下にSVG要素が続く形で新規ドキュメントの作成が行われることが理解できた。デモでは、ライブビューをオンにした上で、コードビュー上でcircle要素によって円を、rect要素によって長方形を記述していった。

「SVGでは、図形のようなプリミティブな描画要素だけでなく、パス要素を入れることもできます」と小山田氏は述べ、Illustratorで作成したベジェ曲線のイラストをSVG形式で保存し、Dreamweaver CS5.5上でソースの確認およびライブビューでの表示が可能である点を紹介した。Illustratorでは、「別名で保存」メニューよりSVG形式を選択することでSVG書き出しができる。ちなみにこのデモで表示されたイラストは「おぺらたん」で、これを採用した理由は、モダンブラウザーの中でOperaが一番早くきちんとSVGに対応したからだという。

このSVGはDreamweaver上でもちろん編集することもでき、結果も閲覧することができる。会場では、HTMLでいうところのhead要素に相当するdefs要素内にスタイルシートでパスの塗り色を指定し、塗りつぶしが黒に変化するデモが行われた。小山田氏は「SVGのスタイルシートは凄いです。例えば、filterという機能があり、ブラーフィルターを用意し、適用するとぼやけて表示されます」と語り、実際にブラーフィルターを適用してみせた。

小山田氏は最後に、「Dreamweaverで快適なHTML5ライフを」を「Dreamweaverで快適なHTML5やSVGライフを」と改題をし、セッションを締めくくった。

関連記事