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

1. オープンソースカンファレンス 2012
Tokyo Fall
jQuery Mobile で作る " 実用 " スマフォアプリ
2012/9/8
梶原 直人

2. カスタマイズ
● jQuery Mobile は、スマフォ用に UI をリッチ
にしたり、イベント処理を補助するだけ･･･
● jQuery Mobile をベースに、もっと色々なこと
がしたい
● HTML5 の API 、 jQuery Plugin 、その他各種
ライブラリを組み合わせて、「実用的なスマ
フォアプリ」が作れる！
● いくつかの例をご紹介

3. jQuery Mobile +
jQuery Validation(jQuery Plugin)
● 入力チェック
● HTML5 のフォームバリ
デーションでは OS やブ
ラウザの違いがある
● jQuery Validation はク
ロスプラットフォーム対
応

4. jQuery Mobile +
jqPlot(jQuery Plugin)
● 多彩なグラフ表示
● jQuery Mobile にも対
応、スマフォ特有のタッ
チイベントをキャッチ

5. jQuery Mobile +
加速度センサー API(HTML5)
● 旗取りゲーム
● スマフォを傾けてボール
を操作できる
● HTML5 の API を活用
● ondevicemotion イベント
● accelerationIncludingGra
vity

6. jQuery Mobile +
Canvas(HTML5)
● お絵かきアプリ
● jQuery Mobile が提
供する touch イベン
ト と Canvas 要素の
組み合わせ

7. jQuery Mobile +
SNS
● Twitter や FaceBook
のライブラリ、 API と
の組み合わせ
● ツイートのリスト化も
簡単

8. jQuery Mobile +
PhotoSwipe
● サーバに保存した画像を
スライドショー表示
● PhoteSwipe は MIT ラ
イセンスの OSS
● PhotoSwipe 側が
jQuery Mobile に対応し
ている

9. jQuery Mobile +
Geolocation API(HTML5) + Google Maps API
● 移動距離測定＋マップ表示アプリ
● HTML5 の位置取得 API と Google Maps API
の組み合わせ
● 移動した距離は WebStorage により履歴とし
て保管
● 詳しくはデモで

10. 実際使われてるの？
● jQuery Mobile Gallery
http://www.jqmgallery.com/
120 サイト以上登録されてます
120 サイト以上登録されてます

11. 日本でも利用事例多数！！！

12. こんなものまで･･･ !!???
● Angry Nerds
● http://www.jqmgallery.com/2011/04/01/angry-nerds/