【Adobe CS5.5】HTML/CSS3対応に加えモバイルアプリの書き出しが可能になった『Dreamweaver CS5.5』

写真拡大




アドビ システムズが本日発表したデザイン・開発向けソフトウェア製品群『Creative Suite 5.5』(以下『CS5.5』)。この記事では、ウェブ用オーサリングツール『Dreamweaver CS5.5』に関するトピックをお伝えします。

先日の記事「HTML5/CSS3やマルチスクリーンへの対応進む『Dreamweaver』最新動向を聞く」(関連記事リンクを参照)でご紹介したように、HTML5やCSS3といった新しいウェブ標準への対応が最近の『Dreamweaver』の技術的トピック。『CS5.5』では追加モジュールとして配布されていた『HTML5パック』の機能を標準で搭載したほか、同記事で予告されていたjQueryモバイルのサポート、さらに、『Dreamweaver』からHTML5ベースのアプリケーションを書き出す機能が追加されるという大きな機能追加が盛り込まれています。

変更前のデザイン
背景色を半透明に
角丸を設定
半透明と角丸の適用後
アドビが開催した製品内覧会のデモでは、まずHTML5/CSS3対応の例として、既存のサイトデザインについて半透明の背景色をrgba、角丸の効果をborder radiusと、CSS3によるデザインを適用する操作を実演。

メディアクエリー
マルチスクリーンプレビュー
続いて『メディアクエリー』機能によりスマートフォン、タブレット、パソコンと異なるスクリーンサイズのデバイス向けにそれぞれ異なるCSSを設定し、Webkitで表示を再現する『ライブビュー』機能で異なるデザインをプレビューする『マルチスクリーンプレビュー』を紹介しました。これらの詳細については、関連記事「HTML5/CSS3やマルチスクリーンへの対応進む『Dreamweaver』最新動向を聞く」を参照してください。

新規ドキュメントにjQueryモバイルが追加
ページ要素をリストから挿入可能
デモで作成したデザイン
新規ドキュメントで利用できるサンプルファイルにはjQueryモバイルが追加されました。サンプルの改変やリスト、テキスト入力フォームといったページ要素の挿入により、jQueryモバイルをベースにしたモバイルページ向けデザインを進められます。

アプリケーションフレームワークの設定
モバイルアプリの書き出し機能は、オープンソースのHTML5アプリケーションプラットフォームであるPhoneGapとの連携により実現しています。AndroidとiOSのいずれにも対応し、「アプリケーションフレームワークの設定」操作によりアプリの書き出しに必要な設定作業が可能。ここからAndroidやiOSのSDKをインストールすることもできます。

エミュレータによる確認
デバイス上で確認
アプリケーションのビルドからエミュレータを使った動作確認、アプリケーションのパッケージファイル書き出しまでが『Dreamweaver』上で一貫して作業できます。

ウェブ標準へのアドビの対応をアピール
ウェブ上でリッチなアプリケーションを実現する技術として、一般にはFlash対抗の技術とみられているHTML5/CSS3。製品内覧会でアドビは『Dreamweaver』『Illustrator』でHTML5をサポートするほか、jQueryやWebkitのプロジェクトに同社が寄与していることをアピールしていました。同社はウェブの標準技術に対応し、FlashやAIRとは動作環境や表現力の面ですみ分けができるというスタンスをとっています。開発者やデザイナーにとっては、使い慣れたツールが幅広いデバイスに対応し、ウェブ制作からアプリ開発までカバーできるのが望ましいこと。動きが早い技術トレンドやデバイス環境の変化に対応する『CS5.5』のような中間リリースは、メジャーバージョンアップではないとはいえ今後も注目していく必要がありそうです。

ほかの『CS5.5』製品については、『CS5.5』まとめ記事に随時リンクを追加していきます(関連記事をあわせて読む)


■関連記事
HTML5/CSS3やマルチスクリーンへの対応進む『Dreamweaver』最新動向を聞く
アドビ システムズがデザイン・開発向けソフト製品群『CS5.5』を発表
“Mobile is Here.” 米アドビ社のプロダクトマネージャーがFlashプラットフォームのスマートフォン展開を語る
FlashのAndroid対応に注目集まる アドビが最新技術とトピックを紹介するイベント『Adobe MAX 2010 RETWEET』開催
アドビのエバンジェリストがFlash PlayerやAIRのスマートフォン対応などFlashプラットフォームの現状をアップデート