jqm20120804 publish
DESCRIPTION
TRANSCRIPT
![Page 1: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/1.jpg)
オープンソースカンファレンスオープンソースカンファレンス 2012 Kyoto2012 Kyoto
jQuery MobilejQuery Mobile とと PhoneGapPhoneGap ででスマートフォンアプリ楽々クッキングスマートフォンアプリ楽々クッキング
2012/8/42012/8/4
日本日本 jQuery MobilejQuery Mobile ユーザ会ユーザ会 (( 仮仮 )) おかもとたかしおかもとたかし
![Page 2: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/2.jpg)
本発表のターゲット
PhoneGap , jQuery Mobile は何っていう人
手軽にスマートフォンアプリを開発したい人
HTML/JavaScript は少しは分かる。でも、 Java やまや Java は分かるとして Objective-C や C# なんて勉強したくない人
![Page 3: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/3.jpg)
自己紹介● Twitter ID: @LightningX● 自称電波系エンジニア● jQuery Mobile スマートフォンアプリ開発を出版
![Page 4: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/4.jpg)
スマートフォン開発の悩み
![Page 5: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/5.jpg)
スマートフォン開発の悩み
● プラットフォームが沢山● iPhone 、 Android 、 Windows Phone
● 覚える言語も沢山● Objective C, Java, C#
● API もばらばら
![Page 6: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/6.jpg)
安易な解決策
● HTML5 と JavaScript なら今どきのスマホならうごく!!
HTML5 JavaScript
![Page 7: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/7.jpg)
● でも素の HTML+JavaScript ではスマホアプリを作るには色々面倒。そこで、
jQuery Mobile
PhoneGap
で解決!!
![Page 8: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/8.jpg)
【参考】 eclipse.org の survey● モバイルフレームワークとプラットフォームに何を使っていま
すか ?
http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-final
![Page 9: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/9.jpg)
【参考】 mozilla の調査
Which frameworks do you use to convert apps to native apps?
What libraries do you use to build mobile web apps/sites?
https://hacks.mozilla.org/2012/07/html5-web-applications-and-libraries-survey-first-results/
![Page 10: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/10.jpg)
jQuery Mobile 編
![Page 11: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/11.jpg)
jQuery Mobile
● JavaScript フレームワークで有名な jQuery プロジェクトの拡張フレームワーク
● スマートフォン対応のフレームワークとして開発される。
2010 2011 2012
1.0a1(10/26)
1.0a2(11/12)
1.0a3(2/4)
1.0a4(3/31)
1.0b1(6/20)
1.0b2(8/3)
1.0RC1(9/29)
1.0RC2(10/19)
1.0(11/16)
1.0.1(1/26)
1.1.0(4/13)
1.1.1(7/11)
![Page 12: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/12.jpg)
jQuery Mobile でできること
● スマホっぽい画面がそれなりに作れる● OS/ 端末間で大体同じに表示してくれる● スマホ特有のアクションを簡単に使える
![Page 13: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/13.jpg)
jQuery Mobile
● スポンサーAdobe,Microsoft,Fillament Group,Jive Software Nokia,Research In Motion, RIM
● ツールサポートDreamweaver
![Page 14: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/14.jpg)
【コラム】
● jQuery Mobile と PhoneGap のライセンス
● jQuery MobileMIT/GPL デュアルライセンス
● PhoneGapApache License v2.0
→ どちらも利用してもアプリのソースコードを公開しなくてもいいので使いやすい
![Page 15: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/15.jpg)
スマホっぽい画面がそれなりに
● 普通の HTML <h2> ユーザ登録 </h2> <form action="..."> <field> <legend> 名前 :</legend> <input type="text"/><br /> </field> <field> <legend> 名前 ( よみ ):</legend> <input type="text"><br /> </field> <field> <legend> 年齢 :</legend> <select>
<option value="10">10 代 </option> ... <option value="80">80 代 </option> </select> </field> <fieldset>
<legend> 性別 :</legend><input type="radio" name="sex" id="sex1" value="male"><label for="sex1"> 男 </label><input type="radio" name="sex" id="sex2" value="female">
<label for="sex2"> 女 </label> </fieldset> <input type="submit" value=" 送信 " />
![Page 16: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/16.jpg)
スマホっぽい画面がそれなりに
● jQuery Mobile<div data-role="page" id="p-jqm"> <div data-role="header"> <h2> ユーザ登録 </h2> </div> <div data-role="content"> <form action="..."> <field> <legend> 名前 :</legend> <input type="text"/> </field> <field> <legend> 名前 ( よみ ):</legend> <input type="text"> </field> <field> <legend> 年齢 :</legend> <select>
<option value="10">10 代 </option> ... <option value="80">80 代 </option> </select> </field>
<div data-role="fieldcontain"> <fieldset data-role="controlgroup" >
<legend> 性別 :</legend><input type="radio" name="sex"
id="sex1" value="male"><label for="sex1"> 男 </label><input type="radio" name="sex"
id="sex2" value="female"> <label for="sex2"> 女 </label> </fieldset> </div> <input type="submit" value=" 送信 " /> </form> </div></div>
![Page 17: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/17.jpg)
異なるプラットフォームでだいたい同じ
iPhone Android(HTC) Windows Phone
![Page 18: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/18.jpg)
デモ
しょぼい HTML を jQuery Mobile で綺麗にしてみる
![Page 19: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/19.jpg)
使い方<!DOCTYPE html><html><head>... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/><link rel="stylesheet" href="css/custom.css"/><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>...<script src="js/config.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><script src="js/custom.js"></script></head><body> <div data-role="page" id="p-top"> <div data-role="header"> <h2> ヘッダタイトル </h2> </div> <div data-role="content"> <h2> 本文 </h2> <p> こんにちは </p> </div> <div data-role="footer"> <h2> フッタです </h2> </div> </div></body></html>
![Page 20: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/20.jpg)
ツールバー
● スマートフォンっぽいアプリが簡単に
<div data-role="header"> <a href="" data-rel="back"> 戻る </a> <h2> ユーザ登録 </h2> <a href="" data-icon="edit"> 追加 </a> </div>
<div data-role="footer" > <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid" class="ui-btn-active"> 一覧 </a></li> <li><a href="#" data-icon="search"> 検索 </a></li> <li><a href="#" data-icon="start"> ブックマーク </a></li> <li><a href="#" data-icon="gear" > 設定 </a></li> </ul> </div></div>
![Page 21: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/21.jpg)
リスト
● リスト● メニューや一覧表示に利用● slide アニメーションと組み合わせ
<ul data-role="listview" > <li><a href=".."> ニュース </a></li> <li><a href=“.."> 天気 </a></li> <li><a href="..">TV 番組 </a></li> <li><a href=".."> 特売品 </a></li>
...</ul>
![Page 22: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/22.jpg)
スマホ特有のアクションが簡単に
● スワイプ ( 右、左、適当 )● タップ・タップホールド● スクロール
$(document).on(“swiperight”, ”#screen“ function(e){ // 右にスワイプしたときの処理 });
jQuery のふつーのイベントとして扱える
![Page 23: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/23.jpg)
ボタンアイコン
<button data-icon="xxxx"> ボタン </button>
![Page 24: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/24.jpg)
カスタムアイコン
CSS でアイコンを定義.ui-icon-myicon { background-image: url("myicon.png");}
data-icon で定義したアイコンを指定<button data-icon="myicon">...</button>
![Page 25: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/25.jpg)
でもアイコン作るの面倒だし、、、、
![Page 26: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/26.jpg)
そんな面倒くさがり屋の人には
![Page 27: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/27.jpg)
jQuery Mobile Icon Pack● http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/● 120 個もの豊富なアイコンが利用可能
![Page 28: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/28.jpg)
jQuery Mobile 拡張イベント
イベント名 説明
orientation 端末の方向変更
vmousedown 画面を押下
vmouseup 画面から指を離す
vmousemove 画面上を指が移動した軌跡
vmouseover 領域に指が入った場所
tap タップ
taphold 長押し
swipe スワイプ
swipeleft 右から左へスワイプ
swiperight 左から右へスワイプ
scrollstart スクロール開始
scrollstop スクロール停止
![Page 29: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/29.jpg)
イベントの注意● マウス系のイベントは正しく動作しない● Android は click イベントの反応が遅い。 cclick を利用し
た方がレスポンスの良い UI が作れる。
「 JQuery Mobile スマートフォンアプリ開発サンプル
http://okamototk.github.com/jqmbook-sample
10章イベント処理 > マウスイベントの比較
で jQuery Mobile の仮想マウスイベントと通常のマウスイベントの比較ができるのでスマートフォンでアクセスして試してみるとよい
![Page 30: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/30.jpg)
画面遷移アニメーション
画面遷移を普通のブラウザの画面遷移ではなく、アニメーションで行うことができる。
・リンクで使う<a href="index.html" data-transition="slide">I'll pop</a>
・ JavaScript から使う $.mobile.changePage("index.html", {transition: "slide"});
![Page 31: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/31.jpg)
JQM でできること
● 一覧表示やメニュー、フォーム入力の画面● 画面遷移やポップアップ● 縦方向のスクロール制御● 位置情報を使ったアプリ● カメラを使ったアプリ
(Android 2.2 以上、 iPhone は picup 使えば )
![Page 32: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/32.jpg)
JQM でできないこと
● ゲーム画面のような自由なレンダリングを行う画面
→ 登録・検索アプリ、 twitter のような Webアプリ的なものに向いている
![Page 33: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/33.jpg)
JQuery Mobile が重い場合は ?
● 通信速度が遅いため重い● モバイル回線なのでブチブチ切れる● そもそも端末が遅い ( 特に Android)
![Page 34: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/34.jpg)
パフォーマンスチューニング● CDN を利用して jQuery / jQuery Mobile を利用
● HTML5 アプリケーションキャッシュを利用● DOM キャッシュ● 遅延ロードを利用
● リストを Ajax+Collapsible で展開● プリフェッチ● ファイルサイズの削減
● google closure,YUI Compressor● Apache mod_deflate
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" >
参考 : パフォーマンスチューニングのサンプル http://okamototk.github.com/jqmbook-sample/19_PerformanceTuning/index.html
![Page 35: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/35.jpg)
● PhoneGap 編
![Page 36: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/36.jpg)
Web アプリの問題● HTML+JavaScript の表現力が高まったと言って
も、 Apple Store や Google Play でアプリ売って儲けれない、、、
● カメラや加速度センサーはデバイス毎に Webブラウザのサポート状況が違って使えたり使えなかったりするし、、、
● そもそも、電話帳とかと連携したり、バイブ機能を使ったりできないし、、、
![Page 37: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/37.jpg)
PhoneGap の特徴
● スマートフォンネイティブのアプリが作れる(AppStore 、 Google Play へ登録可 )
● Webブラウザだけじゃ利用できない機能がHTML/JavaScript で使える
● プラグインにより機能を拡張可
![Page 38: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/38.jpg)
コンパス
ファイル
イベント処理
通知
加速度
電話帳
メディア処理
ストレージ
Web SQLWeb Storage
www.icondrawer.com
![Page 39: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/39.jpg)
jQuery Mobile と PhoneGap の住み分け
・ユーザインタフェース
・ Web ブラウザでは利用できないデバイスの利用・スマートフォンアプリとしてビルド
![Page 40: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/40.jpg)
アーキテクチャ
PhoneGapLib WP7GapClassLibDroidGap
iOS Android Windows Phone
PhoneGap API (JavaScript)
Xcode Eclipse Visual Studio
アプリケーション (HTML/JavaScript)
プラグイン(Objective-C)
プラグイン(Java)
プラグイン(C# など )
テンプレート テンプレートプラグイン開発ツール
開発者が実装する部分
PhoneGapFramework
∞
![Page 41: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/41.jpg)
API 説明
Acceleromer 加速度センサーの値取得
Camera カメラで写真を取得
Capture 写真、音声、ビデオなどの取得
Compass コンパスの値取得
Connection ネットワークの状態を取得
Contacts 電話帳を操作
Device デバイス情報を取得
Events キー操作、バッテリー残量の低下、ネットワークの遮断などのイベント
File ファイル操作、転送などの処理
Geolocation 位置情報取得
Media 音声の録音、再生
Notification バイブ、ビープ音やダイアログでの通知など
Storage Web SQL Database, Web Storageの機能
![Page 42: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/42.jpg)
PhoneGap の使用例 1(Android)
②AndroidManifest.xml を編集
③AndroidManifest.xml のこの行を削除
①PhoneGap プロジェクト作成
![Page 43: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/43.jpg)
PhoneGap の使用例 2(Android)
assets/www フォルダ下にHTML/JS/CSS などを作成
![Page 44: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/44.jpg)
PhoneGap の情報収集の注意● Nitobi->Adobe買収 ->Apache Project へ寄贈● 名前 :
● PhoneGap● Apache Callback● Apache Cordova
と変わってきた。
Cordova
PhoneGap で検索して知りたい情報が出てこないときは、Apache Callback や Cordova で検索すると出てくることもある。( ただし、古い情報で最新版には当てはまらないこともあるので注意 )
![Page 45: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/45.jpg)
PhoneGap と Cordova の関係
Safari
WebKit
レンダリングエンジン+JavaScript をOSS 化
Cordova
PhoneGap
+ α で製品化将来的にはApache に入れれないものを追加
![Page 46: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/46.jpg)
● PhoneGap の使い方
![Page 47: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/47.jpg)
おまじないPhoneGapの準備が完了したらdevicreadyイベントが発生す
る。Devicereadyイベント発生後、アプリケーションの初期化処理を行う。
deviceReady = false;document.addEventListener("deviceready", function(){ deviceReady = true; // 初期化処理
} , false);
window.setTimeout(function() { if (!deviceReady) { // PhoneGap初期化失敗処理
}}, 5000);
![Page 48: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/48.jpg)
JQuery Mobileと組み合わせる場合、最初の画面のpageinitで初期化すると良い。
$(document).on("pageinit","#p-page",function(e){ deviceReady = false; document.addEventListener("deviceready", function(){ deviceReady = true; // 初期化処理
} , false); ....});
![Page 49: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/49.jpg)
Camera API
デバイスによってカメラ操作の対応は異なる● Android ~ 2.3
フォルダからのアップロードは
<input type="file">
で可能。カメラの直接操作は不可● Android 3.0+
<input type="file">
でカメラからアップロード可能● iOS/Windows Phone/Android -2.1
そもそもできない
![Page 50: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/50.jpg)
Camera APInavigator.camera.getPicture( function(url) { img = $("#photoframe"); img.css("visibility","visible"); img.css("display" ,"block"); img.attr("src",url); }, function(e) { // エラー及びキャンセル }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType : navigator.camera.PictureSourceType.CAMERA} );...<img style="visibility:hidden;display:none;" id="photoframe" src="" />
プラットフォームを問わずカメラ操作が可能に
![Page 51: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/51.jpg)
File API
● ストレージのファイルへのアクセス・アップロード localUri = "http://photoservice.example.com/upload.php"; var opts = new FileUploadOptions(); opts.fileKey="photo"; filename = fileEntry.name; opts.fileName= "upload.jpg"; opts.mimeType="image/jpeg";
var ft = new FileTransfer(); ft.upload(localUri, UPLOADURL, function(r){ // アップロード成功 }, function(e){ // アップロード失敗 }, opts);
console.log("ファイル取得エラー :"+e);
● });
<?phprequire_once 'HTTP.php';if (is_uploaded_file($_FILES["photo"]["tmp_name"])) { $filename = 'images/' . $_FILES['photo']['name']; $filename = mb_convert_encoding($filename, "SJIS", "AUTO"); if (move_uploaded_file($_FILES["photo"]["tmp_name"], $filename)) { chmod("images/" . $_FILES["photo"]["name"], 0644); echo $_FILES["photo"]["name"] . " をアップロードしました。"; HTTP::redirect("index.html"); } else { echo " ファイルをアップロード "; }} else { echo " ファイルが選択されていません。 ";}?>
サーバ側のコード( 通常の POST のマルチパート処理でお k)
![Page 52: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/52.jpg)
Acceleromer API
● 加速度センサーの値はデバイス毎に方向が異なる。
x
y
z
x
y
z
iOS(1G=9.8)Windows Phone(1G=1.0)
Android(1G=9.8)(Android 3.0 以上からブラウザで取得可 )
+
+
+ +
++
-
-
-
-
--
ブラウザで取得できたりできなかったりする
![Page 53: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/53.jpg)
Acceleromer API
x
y
z
+
++
-
-
-
wid=navigator.accelerometer.watchAcceleration( function(e){ // e.x: 水平方向の加速度 // e.y: 垂直方向の加速度 // e.z : 奥方向の加速度 }, function(e){ // エラー処理 }, {frequency: 500 // 取得間隔 (ms)} );
1G=9.8
![Page 54: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/54.jpg)
Notification API
ユーザに通知を行う API● バイブレーション
navigator.notification.vibrate(500);
● ビープ音 navigator.notification.beep(1);
● alert/confirm navigator.notification.alert( " 警告メッセージ ", function(){ // OKボタンが押されたときの処理 }, " 警告ダイアログ ", "OK");
Windows Phone では、 PhoneGap を利用すると alert/confirm が利用できない→Notification API の alerm/confirm を利用
![Page 55: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/55.jpg)
Event
● ボタンの押下、レジューム、サスペンド、ネットワークの切断・復帰など、ブラウザ単独では利用できないイベントを利用可能例 :
$(document).on("backbutton", function() { // 戻るボタン押下時の処理 });
![Page 56: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/56.jpg)
Event 一覧
イベント 説明
backbutton 戻るボダンが押された
menubutton メニューボタンが押された
searchbutton 検索ボタンが押された
pause 待機状態になった
resume 待機状態から復帰した
offline オンラインからオフライン状態へ変更
online オフライン状態からオンライン状態へ変更
batterycritical バッテリーの残りが少なくなった
![Page 57: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/57.jpg)
PhoneGap Builder
● なんか、プラットフォーム毎にビルドするのめんどくさいんですけど、、、
● そういう人には PhoneGap Builder 。 GitHubなどの公開 Git リポジトリにアプリをアップしておけば、リポジトリからソースを取得、ビルドし、パッケージを作成してくれる !!
![Page 58: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/58.jpg)
JQuery Mobile と PhoneGap とユカイな仲間たち
iOS(iPhone/iPad) Android Windows Phone
jQuery Mobile
Mobile Bookmark Bubble
Picup
jqPlot
Twitter APIFacebook API
PhotoSwipe
HTML5/JavaScript
Device MotionAPI
GeologicationAPI
ソーシャルメディア API
その他ライブラリ *.app
*.apk
*.xap
ネイティブアプリ作成
Visu
al S
tud
ioE
clipse
XC
od
e
Android アプリ
Windows Phone アプリ
iPhone アプリP
honeGap
Ph
on
eG
ap
AP
I
Offline WebApplication
jQuery Validation
f
![Page 59: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/59.jpg)
書籍のご紹介
・ PhoneGap を利用したHTML/JavaScript アプリのネイティブ化 (iPhone/Android/Windows Phone)・ jQuery Validator と組み合わせた 入力値チェック・ jqplot によるグラフ・画像管理アプリ・ twitter 検索アプリ・加速度センサーを活用した旗取りゲーム・ Geolocation API を利用したランニングの開始・終了地点と距離の登録アプリ
![Page 60: Jqm20120804 publish](https://reader031.vdocuments.net/reader031/viewer/2022020105/549a37c5ac7959412e8b5a5b/html5/thumbnails/60.jpg)
まとめ
● JQuery Mobile+PhoneGap で 楽々スマートフォン開発
● Webブラウザで動かすので制限もある● 要件に合わないと思ったら諦めることも重要● 要件に合えば、格段の生産性を見込める
● jQuery Mobile ユーザ会 ( 仮 ) で一緒に何かやりましょう!!