5分でわかる jquery mobile
DESCRIPTION
AITC勉強会 第2回 資料 http://aitc.jp/events/20130713-HTML5/info_v2.htmlTRANSCRIPT
![Page 1: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/1.jpg)
5分で分かる
2013.07.13AITC第2回勉強会
「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」~ 2大スマホ向けWebアプリフレームワークを使いながら比較 ~
TAKAOKA Daisuke
![Page 2: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/2.jpg)
5分でわかる jQuery Mobile
jQuery Mobileとは
モバイルWebアプリフレームワークの一つなの。
いわゆるスマホ向けWebサイト(アプリ)が簡単にできるの。
2 AITC非公式キャラクターハルミン
![Page 3: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/3.jpg)
5分でわかる jQuery Mobile
jQuery Mobileとは
3
jQueyの作者John Resigが開発したの。jQueyを利用していて、むしろ必須なの。
デザイナーでもデベロッパーでも簡単にモバイルサイトを作成できるの。
AITC非公式キャラクターハルミン
![Page 4: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/4.jpg)
5分でわかる jQuery Mobile
特徴
• CSSやJSを書かなくてもスマホ対応できる•充実のウィジェット•クロスプラットフォーム•関連ツールが沢山
4
![Page 5: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/5.jpg)
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
![Page 6: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/6.jpg)
5分でわかる jQuery Mobile
クロスプラットフォーム
6
iOS, Androidはもちろん、BlackBerry, bada, Windows Phone, palm, symbian, MeeGoなんかもあるぞ
![Page 7: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/7.jpg)
5分でわかる jQuery Mobile
コンポーネント定義HTML5の仕様の一つで、タグに自由に属性を定義できる。
これを利用して、コンポーネントを定義
7
<div data-○○○ = "xxxx"></div>データ属性
![Page 8: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/8.jpg)
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
![Page 9: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/9.jpg)
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】コレガ データ ゾクセイダ
![Page 10: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/10.jpg)
5分でわかる jQuery Mobile
表示例
9
header
content
button
![Page 11: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/11.jpg)
5分でわかる jQuery Mobile
• 重厚長大なフレームワーク• ファイルサイズがおおきい• たまに変な動きをする• 標準デザインがイマイチ。カスタマイズ必須• 凝ったデザインが難しい
10
いいことばかりでもないの。
デメリット
![Page 12: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/12.jpg)
5分でわかる jQuery Mobile
関連ツール
• codiqa• Theme Roller• Dreamweaver
• 3rd party plugins & extensions11
補完するツールが沢山あるの。
![Page 13: 5分でわかる jQuery Mobile](https://reader034.vdocuments.pub/reader034/viewer/2022051610/549a37eab47959744d8b59b0/html5/thumbnails/13.jpg)
5分でわかる jQuery Mobile
jQM Gallery
12