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
Top Related