AITC勉強会 第2回 資料 http://aitc.jp/events/20130713-HTML5/info_v2.html

1. 5分で分かる
2013.07.13
AITC第2回勉強会
「jQuery MobileとSencha TouchでWebアプリを作ってみよう！」
∼ 2大スマホ向けWebアプリフレームワークを使いながら比較 ∼
TAKAOKA Daisuke

2. 5分でわかる jQuery Mobile
jQuery Mobileとは
モバイルWebアプリフレームワーク
の一つなの。
いわゆるスマホ向けWebサイト
（アプリ）が簡単にできるの。
2
AITC非公式キャラクター
ハルミン

3. 5分でわかる jQuery Mobile
jQuery Mobileとは
3
jQueyの作者John Resigが開発したの。
jQueyを利用していて、むしろ必須なの。
デザイナーでもデベロッパーでも簡単に
モバイルサイトを作成できるの。
AITC非公式キャラクター
ハルミン

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

5. 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

6. 5分でわかる jQuery Mobile
クロスプラットフォーム
6
iOS, Androidはもちろん、
BlackBerry, bada, Windows
Phone, palm, symbian, MeeGo
なんかもあるぞ

7. 5分でわかる jQuery Mobile
コンポーネント定義
HTML5の仕様の一つで、タグに自由に
属性を定義できる。
これを利用して、コンポーネントを定義
7
<div data-○○○ = "xxxx"></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

9. 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】
コレガ データ
ゾクセイダ

10. 5分でわかる jQuery Mobile
表示例
9
header
content
button

11. 5分でわかる jQuery Mobile
• 重厚長大なフレームワーク
• ファイルサイズがおおきい
• たまに変な動きをする
• 標準デザインがイマイチ。カスタマイズ必須
• 凝ったデザインが難しい
10
いいことばかりでもないの。
デメリット

12. 5分でわかる jQuery Mobile
関連ツール
• codiqa
• Theme Roller
• Dreamweaver
• 3rd party plugins ＆ extensions
11
補完するツールが沢山あるの。

13. 5分でわかる jQuery Mobile
jQM Gallery
12