オープンソースカンファレンスオープンソースカンファレンス 2012 2012 Tokyo FallTokyo Fall

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

2012/9/8梶原 直人

カスタマイズ

● jQuery Mobile は、スマフォ用に UI をリッチにしたり、イベント処理を補助するだけ･･･

● jQuery Mobile をベースに、もっと色々なことがしたい

● HTML5 の API 、 jQuery Plugin 、その他各種ライブラリを組み合わせて、「実用的なスマフォアプリ」が作れる！

● いくつかの例をご紹介

jQuery Mobile +jQuery Validation(jQuery Plugin)● 入力チェック● HTML5 のフォームバリ

デーションでは OS やブラウザの違いがある

● jQuery Validation はクロスプラットフォーム対応

jQuery Mobile +jqPlot(jQuery Plugin)● 多彩なグラフ表示● jQuery Mobile にも対

応、スマフォ特有のタッチイベントをキャッチ

jQuery Mobile +加速度センサー API(HTML5)● 旗取りゲーム● スマフォを傾けてボール

を操作できる● HTML5 の API を活用

● ondevicemotion イベント● accelerationIncludingGra

vity

jQuery Mobile +Canvas(HTML5)● お絵かきアプリ● jQuery Mobile が提

供する touch イベントと Canvas 要素の組み合わせ

jQuery Mobile +SNS● Twitter や FaceBook

のライブラリ、 API との組み合わせ

● ツイートのリスト化も簡単

jQuery Mobile +PhotoSwipe● サーバに保存した画像を

スライドショー表示● PhoteSwipe は MIT ラ

イセンスの OSS● PhotoSwipe 側が

jQuery Mobile に対応している

jQuery Mobile +Geolocation API(HTML5) + Google Maps API

● 移動距離測定＋マップ表示アプリ● HTML5 の位置取得 API と Google Maps API

の組み合わせ● 移動した距離は WebStorage により履歴とし

て保管● 詳しくはデモで

実際使われてるの？● jQuery Mobile Gallery

http://www.jqmgallery.com/

120サイト以上登録されてます120サイト以上登録されてます

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

こんなものまで･･･ !!???

● Angry Nerds● http://www.jqmgallery.com/2011/04/01/angry-nerds/