5分でわかる jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

5分でわかる jQuery Mobile

  • 2,055 views
Uploaded on

AITC勉強会 第2回 資料 ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,055
On Slideshare
1,123
From Embeds
932
Number of Embeds
5

Actions

Shares
Downloads
6
Comments
0
Likes
2

Embeds 932

http://dsuket.hatenablog.com 928
http://s.deeeki.com 1
http://honyaku.yahoofs.jp 1
http://cloud.feedly.com 1
http://webcache.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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