Dreamweaver CS5.5上でのモバイルサイト構築方法
Dreamweaver CS5.5では、モバイルサイト開発に関連した機能も強化されている。Rewis氏は、デスクトップ上のWebページをそのままモバイルデバイス上でも表示することについて次のように語る。
「まずは、iPadで先ほど作ったページを表示してみましょう。そこそこ読めるのがわかります。続いてiPhoneではどうでしょうか？ さすがに文字が小さすぎて読めませんね。各ボックス上でダブルタップをすると拡大できますが、それでも読みやすいとは言えないでしょう。これでは最高のユーザー体験を提供しているとは言えません」
Rewis氏によれば、Dreamweaver CS5.5に搭載している「マルチスクリーン」機能を使って、様々なデバイス上の表示形式を確認できるという。
Dreamweaver内にあるマルチスクリーンボタンを押すことで、モバイル／タブレット／デスクトップでの見え方を一覧できる様子がスクリーンに表示された。また、マルチスクリーンでの表示の際に、CSS3のメディアクエリーを使って挙動が変えられるため、CSSでそれぞれのデバイス用のスタイルを組みつつ、その場で各解像度のバージョンを確認することが可能なのだ。
デモでは、表示横幅が901px以上の場合はデスクトップ用のCSS、900px以下の場合はタブレット用のCSS、480px以下の場合はモバイル用のCSSが適用されるようにメディアクエリーを組み立て、各デバイスごとのスタイルを定義した。メディアクエリーの定義の結果、ライブビューでもモバイルの解像度で確認が可能になり、実機でどう表示されるかをエミュレートしながらコーディングができるように設定された。
jQuery Mobileのサポート
最後にRewis氏は、ネイティブのモバイルアプリケーションとモバイル上でのWebサイトとのユーザー体験の違いについて語った。
「より、モバイルデバイス上のユーザー体験を高めるために『jQuery Mobile』という選択肢があります。jQuery Mobileを使うことで、ネイティブアプリケーションに近いルック＆フィールを実現することができます。何よりDreamweaver CS5.5では、jQuery Mobileに対応しているのです」
Dreamweaver CS5.5には、jQuery Mobileベースのテンプレートや、コードヒント機能が用意されている。加えて「PhoneGap」もDreamweaverに搭載したとのこと。PhoneGapを使うと、Dreamweaverでモバイルアプリケーションを開発できるようになる。
「Dreamweaverで作ったコンテンツをネイティブアプリケーションにすることで、ブラウザーの機能を超えることができます。例えば、コンテンツから直接電話をかけたり、カメラで撮影したり、位置情報を取得したりといったことが可能になるのです。DreamweaverはPhoneGapの機能をサポートしているため、ネイティブなAPIへのアクセスが簡単に行えます。つまり、これらの機能をDreamweaver上で編集し、パッケージングして配布することができるのです」
そして、Dreamweaver CS5.5で作ったPhoneGapのアプリケーションを、iPhoneのエミュレーターの中で実行してみせた。
デモアプリケーションは東京の「寿司ヘブン」という店のアプリケーションで、店に電話をかける、地図で位置を確認する、カメラで写真を撮るなどのデモが行なわれた。また、カメラで会場の様子をとり、オンラインに保存するデモンストレーションが行なわれた。このアプリケーションは、全てDreamweaver CS5.5の中で作られたという。
製品の試用版ダウンロード
「Dreamweaver CS5.5」には、製品版と同じ機能を30日間無償で試用できる体験版が用意されている。新しいDreamweaver CS5.5で、本稿で紹介されているHTML5とjQuery Mobileの新機能を試してみて欲しい。
