jQuery Mobile で作る" 実用" スマフォアプリ

3,722 views

Published on

オープンソースカンファレンス2012 Tokyo Fall
jQuery Mobile で作る" 実用" スマフォアプリ

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,722
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery Mobile で作る" 実用" スマフォアプリ

  1. 1. オープンソースカンファレンス 2012 Tokyo FalljQuery Mobile で作る " 実用 " スマフォアプリ 2012/9/8 梶原 直人
  2. 2. カスタマイズ● jQuery Mobile は、スマフォ用に UI をリッチ にしたり、イベント処理を補助するだけ・・・● jQuery Mobile をベースに、もっと色々なこと がしたい● HTML5 の API 、 jQuery Plugin 、その他各種 ライブラリを組み合わせて、「実用的なスマ フォアプリ」が作れる!● いくつかの例をご紹介
  3. 3. jQuery Mobile +jQuery Validation(jQuery Plugin)● 入力チェック● HTML5 のフォームバリ デーションでは OS やブ ラウザの違いがある● jQuery Validation はク ロスプラットフォーム対 応
  4. 4. jQuery Mobile +jqPlot(jQuery Plugin)● 多彩なグラフ表示● jQuery Mobile にも対 応、スマフォ特有のタッ チイベントをキャッチ
  5. 5. jQuery Mobile +加速度センサー API(HTML5)● 旗取りゲーム● スマフォを傾けてボール を操作できる● HTML5 の API を活用 ● ondevicemotion イベント ● accelerationIncludingGra vity
  6. 6. jQuery Mobile +Canvas(HTML5)● お絵かきアプリ● jQuery Mobile が提 供する touch イベン ト と Canvas 要素の 組み合わせ
  7. 7. jQuery Mobile +SNS● Twitter や FaceBook のライブラリ、 API と の組み合わせ● ツイートのリスト化も 簡単
  8. 8. jQuery Mobile +PhotoSwipe● サーバに保存した画像を スライドショー表示● PhoteSwipe は MIT ラ イセンスの OSS● PhotoSwipe 側が jQuery Mobile に対応し ている
  9. 9. jQuery Mobile +Geolocation API(HTML5) + Google Maps API● 移動距離測定+マップ表示アプリ● HTML5 の位置取得 API と Google Maps API の組み合わせ● 移動した距離は WebStorage により履歴とし て保管● 詳しくはデモで
  10. 10. 実際使われてるの?● jQuery Mobile Gallery http://www.jqmgallery.com/ 120 サイト以上登録されてます 120 サイト以上登録されてます
  11. 11. 日本でも利用事例多数!!!
  12. 12. こんなものまで・・・ !!???● Angry Nerds ● http://www.jqmgallery.com/2011/04/01/angry-nerds/

×