DreamweaverCS5.5が生み出す新たな可能性

Dreamweaver CS5を出荷した後、「HTML5へ対応してほしい」というリクエストが急速に増えてきました。Dreamweaverチームの本来のスタンスとしては、まずW3Cで仕様が勧告されてから、そのスペックに対応する機能を製品に導入するという順序でした。しかし、HTML5とCSS3の場合は、各ブラウザーベンダーの対応状況は様々ですが、マーケットのニーズが高かったため、我々は24時間体制で拡張機能を開発し、Dreamweaver CS5用のHTML5 パックを作り上げました。今回のDreamweaver CS5.5では、標準でHTML5 パックの機能が搭載されているだけではなく、さらにHTML5とCSS3への対応を強化しています。

HTML5スターターテンプレートの追加

HTML5ベースのスターターテンプレートが追加されます。今までCSSでレイアウトする際はdiv要素とid／class属性を駆使して制御していましたが、HTML5では新たな要素を使うことで、よりシンプルなマークアップ構造でレイアウトを実現できます。その例とも言えるのが、このスターターテンプレートです。このテンプレートを使って、一般的なカラムレイアウトがHTML5を使ってどのように構築されているかを理解するのにも便利だし、これを元に作り込んでいくことでもできます。

メディアクエリー機能の強化

メディアクエリーを使えば、スクリーンサイズによってスマートフォン向け、タブレット向け、デスクトップ向けのCSSを振り分けることができ、マルチスクリーン対応のサイト作成が可能になります。

HTML5 パックでは、メディアクエリーのタグに対応するほか、マルチスクリーンでの表示を確認できる［マルチスクリーンプレビュー］パネルと、メディアクエリーの詳細を設定する［メディアクエリー］ダイアログが用意されていました。Dreamweaver CS5.5では、この［メディアクエリー］ダイアログが強化されています。例えば、デバイスの中には特定のタグを記述しないと、指定通りの画面サイズで表示を行わないものがあり、その問題を回避する機能が追加されています。

またHTML5 パックでは、デザインビューとコードビューを分割表示していた場合、デザインビューの横幅サイズを変更すると、それに応じてビュー内容が切り替わって表示されてしまいました。Dreamweaver CS5.5では、この問題を解消するために、デザインビューを指定したサイズで固定することができます。

デザインビューの右下にあるサイズのプルダウンメニューでプレビューサイズを変更することができます。例えば、スマートフォンに合わせた縦横方向のサイズ指定ができるので、デザインビューをライブビューモードで確認しながらページ作成できます。

CSS3のRGBaとHSLaに対応し、透過の塗りが可能

CSS3を使用する大きなアドバンテージは、透明度、グラデーション、角丸などの表現が画像なしで実現できるようになったことです。Dreamweaver CS5.5では、RGB+Alpha、HSL+Alphaに対応します。そして、HEX colorを3桁のショートハンドに切り替える作業も、同じメニューからできるようにしました。これにより、透過バックグラウンドの塗りが可能になります。

マルチデバイス向け開発をサポート

サイトをHTML5へ対応させる必要性というと、真っ先に思いつくのがスマートフォンやタブレットなどのモバイル製品でしょう。ここ1年の間に日本でも、iPhoneやAndroidなど、いろいろなスマートフォンやタブレットがマーケットに急速に登場してきてました。新しいデバイスのマーケットの充実は、制作会社にとって急速に成長できる新たなビジネスチャンスでもあるわけです。

しかし、そう簡単にはいきません。様々なAndroid携帯、iPhone、そしてiPadにGalaxy Tabなどのタブレット。それぞれ似ていますが、画面サイズ／解像度／OS／ブラウザー／サポートしている機能など微妙に違います。これらのデバイスすべてに対応できる魅力的なWebサイトを構築するのは至難の業です。各要素の違いを調べるだけでも大変な作業です。

今のところiPhoneが大きいマーケットシェアを取っているので、iPhoneだけに対応したサイトをとりあえず作るという方もいますが、今後のメンテナンス、他のデバイスの対応を考えると得策とはいえないでしょう。

デスクトップでは、今まで「Browser War（ブラウザー戦争）」と言われていた中で、クロスブラウザー対応したjQueryが、JavaScriptフレームワークとしてデファクト・スタンダードになっています。jQueryは、インタラクティブな表現を複数のブラウザーで対応しており、Web制作において非常に良い開発効率を実現するフレームワークとして浸透しました。

そして、今日の急速に機種が増え続けるモバイルデバイスにおいても、「Device War（デバイス戦争）」が起きていると言ってもいいでしょう。それに対してjQueryでは、「jQuery Mobile」というモバイルデバイスに特化したJavaScriptフレームワークの開発を行っています。jQuery Mobileの開発において、Adobeも積極的に貢献してきています。

jQuery Mobileをベースにしたモバイルスターターレイアウトテンプレート

jQuery Mobileは、ほぼ全てのスマートフォンに対応している、まさに"クロスデバイス"対応なフレームワークです。jQuery Mobileを導入すれば、インタラクティブなマルチスクリーン向けサイトの制作効率も確実に上がることでしょう。Dreamweaver CS5.5では、jQuery Mobileを使った、スマートフォンやタブレットなどのモバイル向けのモバイルスターターレイアウトテンプレートが追加されます。

このテンプレートでは、HTML5のpage機能を使い、1つのHTMLファイルの中に複数のページを作り、pageごとのインタラクティブなトランザクションを確認しながら勉強することができます。このテンプレートはjQuery Mobileを使用しており、HTMLファイルを保存するときに、必要なjQuery MobileのJavaScript／CSS／イメージファイルを指定したフォルダに保存できるほか、CDN（Contents Delivery Network）を使用してjQuery Mobileのサーバーに直接リンクすることもできます。CDNを使えば、jQuery Mobileの最新版に簡単にアップデートできるようになるでしょう。

［挿入］パネルからjQuery Mobileのユーザーインターフェイス・コンポーネントを挿入可能

そして、注目してほしい機能として、jQuery Mobileの代表的なユーザーインターフェイス・コンポーネントを［挿入］パネルからデザインビューやコードビューに挿入することが可能になります。［挿入］パネルからドラッグ＆ドロップで簡単に挿入することができます。

これにより、マルチスクリーン対応サイトの構築に際し、よりスピーディーな開発環境が整ったわけです。

挿入したjQuery MobileのUI（ユーザーインターフェイス）をライブビューで確認しながら作業することができます。デバイスサイズでプレビューすれば、縦方向や横方向にデバイスを向けたときのレンダリングの確認もできます。

PhoneGapのOpen Sourceのフレームワークを使って、ネイティブモバイルアプリの開発

もう一つ重要な点として、スマートフォンやタブレットに対して一番ホットな話題はモバイルアプリケーションです。とはいえ、日常の業務をこなしながら忙しいスケジュールの時間を割いて、新たな言語（iPhone用にObjective-C、Android用にJava）を勉強するのは、非常に敷居が高く、かなりのリスクを伴い、投資効果を期待するのは難しいでしょう。今後、Windows7Mobile、BlackBerry、WebOSなど、どんどん増えてくるプラットフォームにどのように対応していけばよいのでしょうか？

Dreamweaver CS5.5ではそのソリューションとして、PhoneGapのOpen Sourceのフレームワークを使用し、HTML／CSS／JavaScriptを使って、Webアプリケーションを開発する感覚でiOSやAndroid向けのネイティブアプリケーションを開発できる環境を用意します。

まず、Androidアプリの開発環境を準備するとき、Android SDKを設定するのは非常に大変な作業です。下手をすると丸1日費やしてしまうかもしれません（iOSの場合、Androidより開発環境を整えるのは、比較的容易に設定できるでしょう）。

Dreamweaver CS5.5では、ボタン一つでAndroid SDKをダウンロードし、設定も、エミュレーターの準備もしてくれます。

PhoneGapはjQuery Mobileとの相性が非常に良く、jQuery Mobileのインタラクティブな機能に、PhoneGapのモバイルデバイス向けのJavaScript APIを使うことができます。つまり、デベロッパーのみなさんが既に習得済みのHTML／CSS／JavaScriptのノウハウを生かし、モバイルアプリケーションを開発できるのです。PhoneGapのJavaScriptには、Accelerometer／Camera／GPS／Compass／Contactsなど、一般的に必要なネイティブデバイスのAPIが用意されています。詳しくは、PhoneGapのサイトをご参照ください。

また、HTML／CSS／JavaScriptを用いて開発したアプリケーションのdebugビルドをそのままAndroidエミュレーターを起動して確認することもできます。

Mac版ではiOS SDKを入れて、エミュレーターで確認することもできます。

このようにDreamweaver CS5.5は、マルチスクリーン対応のWebサイトの開発だけでなく、既存の知識やノウハウを生かしたモバイルアプリケーションも開発できるツールに進化しています。

そのほか、最新のSubversion 1.7のサポート、FTPs機能、W3C Validation（英語でのみ）のサポート、WidgetBroswerなどといった機能が追加されています。Dreamweaver CS5.5で、最新技術を利用したサイトの開発、モバイルアプリケーションの開発をお楽しみください。