CodeZine(コードジン)

特集ページ一覧

ADC MEETUP ROUND02 レポート
SESSION2:Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/09/22 14:00

目次

Dreamweaver CS5.5上でのモバイルサイト構築方法

 Dreamweaver CS5.5では、モバイルサイト開発に関連した機能も強化されている。Rewis氏は、デスクトップ上のWebページをそのままモバイルデバイス上でも表示することについて次のように語る。

 「まずは、iPadで先ほど作ったページを表示してみましょう。そこそこ読めるのがわかります。続いてiPhoneではどうでしょうか? さすがに文字が小さすぎて読めませんね。各ボックス上でダブルタップをすると拡大できますが、それでも読みやすいとは言えないでしょう。これでは最高のユーザー体験を提供しているとは言えません」

iPadでの表示
iPadでの表示

 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のエミュレーターの中で実行してみせた。

PhoneGapへの対応
PhoneGapへの対応
iPhone実機でのデモ
iPhone実機でのデモ

 デモアプリケーションは東京の「寿司ヘブン」という店のアプリケーションで、店に電話をかける、地図で位置を確認する、カメラで写真を撮るなどのデモが行なわれた。また、カメラで会場の様子をとり、オンラインに保存するデモンストレーションが行なわれた。このアプリケーションは、全てDreamweaver CS5.5の中で作られたという。

製品の試用版ダウンロード

 「Dreamweaver CS5.5」には、製品版と同じ機能を30日間無償で試用できる体験版が用意されている。新しいDreamweaver CS5.5で、本稿で紹介されているHTML5jQuery Mobileの新機能を試してみて欲しい。

Dreamweaver CS5.5 体験版をダウンロード

関連記事



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 原一浩(はらかずひろ)

    Greative(グレーティブ)代表/Design Wedge編集長/ワイヤーフレームコミュニケーション研究会主催。1998年にWebデザイナーとして独立。同年、ウェブデザイン専門のメールメディアDesignWedgeの発行を開始。Webデザインやシステム開発業務の傍ら、海外のWebデザインに関する...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5