【Adobe CS6】HTML5/CSS3やモバイルへの対応を強化『Dreamweaver CS6』

アドビ システムズが5月11日に発売するデザイン・開発向けソフトウェア製品群『Creative Suite 6』（以下『CS6』）。ウェブ用オーサリングツール『Dreamweaver CS6』では、『CS5.5』から盛り込まれたHTML5/CSS3への対応を強化しているほか、モバイルアプリケーションプラットフォーム『PhoneGap』やjQuery Mobileなどモバイル向けの対応を強化しているのがポイントです。

スマートフォンやタブレット、パソコンなど複数の画面サイズに対して、画面レイアウトを切り替えて対応する『可変グリッドレイアウト』の機能が追加されました。これは、『CS5.5』で対応したCSS3のMedia Queryを利用して、スクリーンサイズごとにCSSファイルを切り替えて表示させるデザイン作業をより簡単に可能にしています。

具体的には、新規ドキュメントで「可変グリッドレイアウト」を選択できるようになり、スクリーンサイズごとに表示されるグリッドにボックスを吸着させて直感的にレイアウト作業を進められます。編集中は「スマートフォン」「タブレット」「パソコン」の3種類のボタンでスクリーンサイズを切り替えて作業が可能。

ユーザーインタフェースのアニメーション効果を持たせるCSS3のトランジションは、パネルから設定が可能になりました。ターゲットにするdivタグのIDを指定し、トランジションを有効にする操作、効果、タイミング、終了値などを指定すれば、CSS3のコードを書いたり、ブラウザごとの挙動を指定しなくてもアニメーション効果を付加できます。

jQuery Mobileへの対応では、カラーテーマやボタンなどをセットにしたスウォッチからテーマを選択可能になりました。テーマや位置のカスタマイズがパネル上で可能なほか、『Fireworks』で作成したテーマも利用できます。

HTML5ベースのモバイルアプリケーションプラットフォーム『PhoneGap』への対応では、クラウドサービス『PhoneGap:Build』への連携を可能に。『PhoneGap』に必要なソフトウェア開発キット（SDK）をローカルに持たなくても、js/css/htmlファイルをアップロードすれば、iOSやAndroid、BlackBerry向けのアプリをクラウド上でビルドしてダウンロードが可能になります。「PhoneGap:Build サービス」のパネルから利用でき、パネルからはエミュレータの起動や端末にダウンロードするためのQRコードを表示することも可能。

『CS6』関連記事は下記の記事にリンクをまとめていますのでご覧ください。

アドビ システムズがデザイン・開発向けソフト製品群『CS6』とサブスクリプション形式のクラウドサービス『Creative Cloud』を発表
https://getnews.jp/archives/196213