5分で分かる

2013.07.13AITC第2回勉強会

「jQuery MobileとSencha TouchでWebアプリを作ってみよう！」～ 2大スマホ向けWebアプリフレームワークを使いながら比較 ～

TAKAOKA Daisuke

5分でわかる jQuery Mobile

jQuery Mobileとは

モバイルWebアプリフレームワークの一つなの。

いわゆるスマホ向けWebサイト（アプリ）が簡単にできるの。

2 AITC非公式キャラクターハルミン

5分でわかる jQuery Mobile

jQuery Mobileとは

3

jQueyの作者John Resigが開発したの。jQueyを利用していて、むしろ必須なの。

デザイナーでもデベロッパーでも簡単にモバイルサイトを作成できるの。

AITC非公式キャラクターハルミン

5分でわかる jQuery Mobile

特徴

• CSSやJSを書かなくてもスマホ対応できる•充実のウィジェット•クロスプラットフォーム•関連ツールが沢山

4

5分でわかる jQuery Mobile

ウィジェットが充実Accordion, Navigation, Button, Checkbox, Dialog, Footer, Form, Grid, Icon, List, Panel, Toolbar, Toggle, Popup, Radio button, Select, Slider, Table, Text inputs, Transitions,

and more...

5

5分でわかる jQuery Mobile

クロスプラットフォーム

6

iOS, Androidはもちろん、BlackBerry, bada, Windows Phone, palm, symbian, MeeGoなんかもあるぞ

5分でわかる jQuery Mobile

コンポーネント定義HTML5の仕様の一つで、タグに自由に属性を定義できる。

これを利用して、コンポーネントを定義

7

<div data-○○○ = "xxxx"></div>データ属性

5分でわかる jQuery Mobile

<div data-role="page"> <div data-role="header"> <h1>Sample Page</h1> </div> <div data-role="content"> <a data-role="button">Push Me!</a> </div></div>

コード例

8

5分でわかる jQuery Mobile

<div data-role="page"> <div data-role="header"> <h1>Sample Page</h1> </div> <div data-role="content"> <a data-role="button">Push Me!</a> </div></div>

コード例

8

【キャラクターパターン 2】コレガ データ ゾクセイダ

5分でわかる jQuery Mobile

表示例

9

header

content

button

5分でわかる jQuery Mobile

• 重厚長大なフレームワーク• ファイルサイズがおおきい• たまに変な動きをする• 標準デザインがイマイチ。カスタマイズ必須• 凝ったデザインが難しい

10

いいことばかりでもないの。

デメリット

5分でわかる jQuery Mobile

関連ツール

• codiqa• Theme Roller• Dreamweaver

• 3rd party plugins ＆ extensions11

補完するツールが沢山あるの。

5分でわかる jQuery Mobile

jQM Gallery

12