Tweet
Tweet

Slide 1

Slide 1 text

jQuery Mobile 紹介 柳田 @tyanagida

Slide 2

Slide 2 text

ダムの地図公開してます http://maps.ontarget.cc/dams/sp_ja.php

Slide 3

Slide 3 text

実装の概要 • アプリじゃなくてWebページ • HTMLは1つだけ • jQuery Mobileを利用 • Google Maps API v3を利用 モバイル対応してます

Slide 4

Slide 4 text

モバイル版の作り方 1. PC版を見て、画面の分け方を考える

Slide 5

Slide 5 text

地図表示

2. 該当する部分にdivタグ追加

Slide 6

Slide 6 text

地図表示

2. 該当する部分にdivタグ追加

Slide 7

Slide 7 text

地図表示

2. 該当する部分にdivタグ追加

Slide 8

Slide 8 text

地図表示

2. 該当する部分にdivタグ追加

Slide 9

Slide 9 text

地図表示

2. 該当する部分にdivタグ追加

Slide 10

Slide 10 text

地図表示

2. 該当する部分にdivタグ追加
data-xxxx: jQuery Mobile用の属性

Slide 11

Slide 11 text

  • 地図
  • 一覧
    • 3. navbarも追加 画面切替はハッシュ切り替え

Slide 12

Slide 12 text

4. jQuery Mobileを読み込み 簡単!! Maps APIには苦労したけど…

Slide 13

Slide 13 text

補足: ドキュメント ここまで紹介したように、jQuery Mobileは、通常のjQueryや jQuery UIと違って、API呼出しではなく、HTMLマークアップが標 準的な使い方です。したがって、APIドキュメントよりも、公式サ イトのDEMOページを参考にすることをおすすめします。 http://view.jquerymobile.com/1.3.2/demos/