Brief Introduction of jQuery Mobile

jQuery Mobileでモバイル対応してみた

jsCafe16で発表した資料です。お好みダムサーチのモバイル版を開発した際の経験を簡単にまとめました。

Transcript

1. jQuery Mobile 紹介 柳田 @tyanagida
2. ダムの地図公開してます http://maps.ontarget.cc/dams/sp_ja.php
3. 実装の概要 • アプリじゃなくてWebページ • HTMLは1つだけ • jQuery Mobileを利用 • Google Maps API v3を利用 モバイル対応してます
4. モバイル版の作り方 1. PC版を見て、画面の分け方を考える
5. <div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加 <div id="map_canvas" data-role="content"></div>
6. <div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加 <div id="map_canvas" data-role="content"></div>
7. <div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加 <div id="map_canvas" data-role="content"></div>
8. <div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加 <div id="map_canvas" data-role="content"></div>
9. <div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加 <div id="map_canvas" data-role="content"></div>
10. <div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加 <div id="map_canvas" data-role="content"></div> data-xxxx: jQuery Mobile用の属性
11. <div data-role="navbar"> <ul> <li><a href="#map_page" data-icon="home">地図</a></li> <li><a href="#side_area" data-icon="bars">一覧</a></li> 3. navbarも追加 画面切替はハッシュ切り替え
12. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.js"></script> 4. jQuery Mobileを読み込み 簡単!! Maps APIには苦労したけど…
13. 補足: ドキュメント ここまで紹介したように、jQuery Mobileは、通常のjQueryや jQuery UIと違って、API呼出しではなく、HTMLマークアップが標 準的な使い方です。したがって、APIドキュメントよりも、公式サ イトのDEMOページを参考にすることをおすすめします。 http://view.jquerymobile.com/1.3.2/demos/