jQuery Mobile

(1)

jQuery Mobile+

Kazuhiro Yoshida

(2)

Smartphone app

• Web app

• Native

• Hybrid

(3)

• ^今日の話

• →Web appをNativeぽく動かしたい！

(4)

• Webの技術を使ってNative appを作りたい！

– Titanium Mobile

(5)

• Deviceを扱いたい

– ^{加速度センサ}

– ^連絡先

– ^{カメラ画像} –

• →PhoneGap

• HTML5でがんばる

– ^{画面の向き}

– Geo Location

– Photo File upload

(6)

昔のWeb app

• Web app

– HTML1 – ^HTML2 –

– ^HTML3

• →同じ要素を何度も読み直す…BAD

(7)

SPA

• SPA: Single Page Application

• HTML

– ^{Page 1} –

– ^{Page 2} – ^{Page 3}

(8)

Client side

• ^DOM操作

– ページ遷移はDOMの入れ替えで実現

• ^Template

• MVC: Model View Controller

• AMD: Asynchonus Module Definition

• Application Cache

• Local Storage

• →HTML5

(9)

Server side

• 初回はHTML+CSS+Javascriptを渡す

– install app

• 以降はJSONでやりとり

–

– ^DB操作

(10)

jQuery

• ^{環境の違いを吸収}

• DOM操作を簡潔にするAPIを提供

– 1.8: module指向 –

– ^{1.9: API整理}

– 2.0: IE6/7/8 support終了

(11)

jQuery Mobile

• Widget (CSS)

– 1.3: Responsive Web Design

• Navigation (location.hash)

•• History

(12)

MVC

• backbone.js

– Model Collection View Controller Router – jQuery Mobileのnavigationは使わない

• underscore.js

– ^template

(13)

AMD

• require.js