HTML5/CSS3やマルチスクリーンへの対応進む『Dreamweaver』最新動向を聞く

2011/04/01 18:00 shnsk デジタル・IT

米Adobe Systems社でウェブ用オーサリングツール『Dreamweaver』の製品担当であるCreative SuiteグループプロダクトマネージャーのDevin Fernandez氏とFireworksプロダクトマネージャーの森房卓史氏が来日。ガジェット通信の取材に答え、『Dreamwever』の最新動向について説明しました。

『Dreamweaver CS5』では次のエリアにフォーカスしています。

・CMS（Content Management System、コンテンツ管理システム）
・CSSインスペクション
・コードヒント
・HTML5パック

各項目について見ていきましょう。

・CMS環境で『ライブビュー』を活用
クライアント向けCMSを多くのユーザーが使っています。開発者にはこれの管理が難しい課題です。単純なテーマでも100以上のインクルードされたファイルが存在し、各ページはダイナミックに構成されているのでデザイン自体が複雑です。そこで『Dreamweaver CS5』ではCMSをサポートする機能を追加しています。

たとえばPHPファイルを読み込むと、インクルードされたファイルについて、リンクのリンクまでたどれるようになります。『ライブビュー』をクリックすると、サーバー上に公開されたときと同じようにページのレンダリングができる。『インスペクト』のボタンを押すと参照するコードを視覚的に確認でき、『ライブコード』のボタンを押すと、ページでマウスオーバーした部分のコードの中身を確認できます。

・CSSをビジュアルで確認
CSSでは、ビジュアルに『CSSインスペクト』の機能が利用できます。たとえばpaddingなどのON/OFFを切り替えてビジュアルで確認できるほか、『go to code』をクリックしてそのコードを表示したり、disableにしたコードをまとめて消すことができます。

これは『Firebug』で行う作業と似ていると思います。『Firebug』上で変更してもコードが変更されるわけではないですが、こちらはコードを直接変更して保存することができます。

・コードヒントの対応を拡充

コード画面でスクリプトを編集する際、クラスや関数の候補を提示したり、ヘルプを参照できるのが『コードヒント』機能です。『CS4』ではPHPカスタムクラスのコードヒントがありました。『CS5』ではこれをjQueryまで拡張。自身で定義したカスタムクラスにも利用できます。

コードヒントの機能でも、CMSをサポートします。『WordPress』『Drupal』『Joomla!』といったCMSのほか、カスタムクラスコードヒントとして、日本でよく使われる『XOOPS』についてもコードヒントが利用できる。これを使うのは簡単な設定で済みます。

・『HTML5パック』を新たに追加
『HTML5パック』は『Dreamweaver CS5』の追加モジュールで、『Adobe Labs』（ http://labs.adobe.com/ ）で配布しています。

コードヒントでCSS3をサポートします。CSS3ではブラウザ特定のタグが存在するので、複数のブラウザで表示できるようにするには、各ブラウザに対応するタグを書く必要があります。Mozilla、WebKitといった複数のブラウザの属性に合わせてコードヒントを利用できます。

HTML5を利用するのは先進ユーザーであろうということで、コードヒントから対応しています。

プレビュー機能では、『ライブビュー』をアップデートしました。CSS3やHTML5に対応するために、WebKitを更新しています。角丸、ドロップシャドーにも対応します。

CSS3、HTML5への対応が求められるのは、モバイルの分野です。スマートフォンのブラウザはWebKitを使用しています。

・マルチスクリーンに対応

『HTML5パック』には、マルチスクリーンプレビュー機能があります。同じデザインのページをマルチスクリーンプレビューして、『メディアクエリー』機能を使うと、「小（スマートフォン）」「中（タブレット）」「大（デスクトップ）」の3種類の画面幅のプロパティを設定でき、それぞれに異なるCSSファイルを適用することができます。

たとえばスマートフォン向けには0～320ピクセルの幅で「phone.css」のCSSファイル、タブレットは321～768の幅で「tablet.css」のCSSファイル、デスクトップは769以上の幅で「desktop.css」のCSSファイルを個別に指定可能。

これにより3種類のスクリーンサイズでそれぞれ異なるデザインを表示することができます。これは『ライブビュー』とも連動していて、ウィンドウサイズを変えるとそれに合わせたデザインが表示されます。

・3種類のプレビュー環境を用意
アドビは、『Dreamweaver』、『BrowserLab』、『Device Central』という3種類のプレビュー環境を用意しており、それぞれはプレビューの役割が異なります。

『Dreamweaver』のマルチスクリーンプレビューは“高速のプレビュー”機能。短い時間で変更とプレビューを繰り返す用途に向いています。複数のブラウザへの対応という意味では、WebKitを利用するため『Safari』でプレビューしているようなもので、信頼性は高くありません。

信頼性を高くしたい場合には、『BrowserLab』を利用します。こちらでは、複数種類のバージョンやOSのブラウザ挙動を再現してレイアウトのプレビューが可能です。

『Deveice Central』は、インタラクションを確認できる点が『BrowserLab』と異なります。モバイルデバイスでJavaスクリプトがどのように動作するかを見ることができる。ただし、『Device Central』もWebKitを使った1種類のブラウザしか利用できません。

デザインの初期にうまくいくかどうか確認するには『Dreamweaver』のプレビュー、インタラクションを確認するには『Device Central』を使い、最終デザインに近いところでは『BrowserLab』でチェックします。『BrowserLab』はβ版を含む将来のブラウザもサポートします。

・『Dreamweaver』の今後について
米国だけでなく、日本やヨーロッパでもjQueryの利用とモバイル向けのデザインがトレンドになっている。今後はjQueryモバイルを含めjQueryのサポートを強化していきます。日本でもスマートフォンの普及が進み、世界中でモバイル向けデザインのガイドラインが求められています。モバイル向けのデザインではHTML5とCSS3について、さらに新しい方法でユーザーを支援していくので、楽しみにしていてください。