オープンソースカンファレンス 2012 KyotojQuery Mobile と PhoneGap で     スマートフォンアプリ楽々クッキング2012/8/4日本 jQuery Mobile ユーザ会 ( 仮 )              ...
本発表のターゲット PhoneGap , jQuery Mobile は何っていう人 手軽にスマートフォンアプリを開発したい人 HTML/JavaScript は少しは分かる。でも、 Java やま や Java は分かるとして Objecti...
自己紹介●   Twitter ID: @LightningX●   自称電波系エンジニア●   jQuery Mobile スマートフォンアプリ開発を出版
スマートフォン開発の悩み
スマートフォン開発の悩み●   プラットフォームが沢山    ●   iPhone 、 Android 、 Windows Phone●   覚える言語も沢山    ●   Objective C, Java, C#●   API もばらばら
安易な解決策●   HTML5 と JavaScript なら今どきのスマホ    ならうごく!!         HTML5       JavaScript
●   でも素の HTML+JavaScript ではスマホアプリ    を作るには色々面倒。そこで、           jQuery Mobile            PhoneGap              で解決!!
【参考】 eclipse.org の survey●   モバイルフレームワークとプラットフォームに何を使っていま    すか ?             http://www.slideshare.net/IanSkerrett/eclips...
【参考】 mozilla の調査 What libraries do you use to                           Which frameworks do you use to build mobile web ap...
jQuery Mobile 編
jQuery Mobile●   JavaScript フレームワークで有名な jQuery プ    ロジェクトの拡張フレームワーク●   スマートフォン対応のフレームワークとして開    発される。      2010           ...
jQuery Mobile でできること●   スマホっぽい画面がそれなりに作れる●   OS/ 端末間で大体同じに表示してくれる●   スマホ特有のアクションを簡単に使える
jQuery Mobile●   スポンサー    Adobe,Microsoft,Fillament Group,Jive Software    Nokia,Research In Motion, RIM●   ツールサポート     Dr...
【コラム】●   jQuery Mobile と PhoneGap のライセンス●   jQuery Mobile      MIT/GPL デュアルライセンス●   PhoneGap      Apache License v2.0    →...
スマホっぽい画面がそれなりに●    普通の HTML    <h2> ユーザ登録 </h2>    <form action="...">     <field>      <legend> 名前 :</legend>      <input...
スマホっぽい画面がそれなりに●   jQuery Mobile<div data-role="page" id="p-jqm">        <div data-role="fieldcontain"> <div data-role="hea...
異なるプラットフォームでだいたい同じ  iPhone   Android(HTC)   Windows Phone
デモ しょぼい HTML を jQuery Mobile で綺麗にし てみる
使い方<!DOCTYPE html><html><head>... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min...
ツールバー     ●   スマートフォンっぽいアプリ         が簡単に<div data-role="header"> <a href="" data-rel="back"> 戻る </a> <h2> ユーザ登録 </h2> <a h...
リスト●   リスト    ●   メニューや一覧表示に利用    ●   slide アニメーションと組み合わせ    <ul data-role="listview" >     <li><a href=".."> ニュース </a></l...
スマホ特有のアクションが簡単に●   スワイプ ( 右、左、適当 )●   タップ・タップホールド●   スクロール$(document).on(“swiperight”,”#screen“  function(e){    // 右にスワイプ...
ボタンアイコン <button data-icon="xxxx"> ボタン </button>
カスタムアイコン CSS でアイコンを定義 .ui-icon-myicon {    background-image: url("myicon.png"); } data-icon で定義したアイコンを指定 <button data-icon...
でもアイコン作るの面倒だし、、、、
そんな面倒くさがり屋の人には
jQuery Mobile Icon Pack●   http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/●   120 個もの豊富なアイコンが利用可能
jQuery Mobile 拡張イベント   イベント名         説明   orientation   端末の方向変更   vmousedown    画面を押下   vmouseup      画面から指を離す   vmousemov...
イベントの注意●   マウス系のイベントは正しく動作しない●   Android は click イベントの反応が遅い。 cclick を利用し    た方がレスポンスの良い UI が作れる。    「 JQuery Mobile スマートフォ...
画面遷移アニメーション 画面遷移を普通のブラウザの画面遷移ではな く、アニメーションで行うことができる。 ・リンクで使う <a href="index.html" data-transition="slide">Ill pop</a> ・ Ja...
JQM でできること●   一覧表示やメニュー、フォーム入力の画面●   画面遷移やポップアップ●   縦方向のスクロール制御●   位置情報を使ったアプリ●   カメラを使ったアプリ    (Android 2.2 以上、 iPhone は ...
JQM でできないこと●   ゲーム画面のような自由なレンダリングを行う    画面    → 登録・検索アプリ、 twitter のような Web    アプリ的なものに向いている
JQuery Mobile が重い場合は ?●   通信速度が遅いため重い●   モバイル回線なのでブチブチ切れる●   そもそも端末が遅い ( 特に Android)
パフォーマンスチューニング●   CDN を利用して jQuery / jQuery Mobile を利用    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1....
●   PhoneGap 編
Web アプリの問題●   HTML+JavaScript の表現力が高まったと言って    も、 Apple Store や Google Play でアプリ売って儲    けれない、、、●   カメラや加速度センサーはデバイス毎に Web ...
PhoneGap の特徴●   スマートフォンネイティブのアプリが作れる    (AppStore 、 Google Play へ登録可 )●   Web ブラウザだけじゃ利用できない機能が    HTML/JavaScript で使える●  ...
電話帳                                コンパスメディア処理                              ファイル イベント処理                                  加速...
jQuery Mobile と PhoneGap の住み分け                    ・ユーザインタフェース                    ・ Web ブラウザでは利用                    できないデバイ...
アーキテクチャ                      アプリケーション (HTML/JavaScript)開発者が実装する部分       プラグイン               プラグイン                  プラグイン  ...
API            説明Acceleromer    加速度センサーの値取得Camera         カメラで写真を取得Capture        写真、音声、ビデオなどの取得Compass        コンパスの値取得Con...
PhoneGap の使用例 1(Android)                              ①PhoneGap プロジェクト作成                                           ③Androi...
PhoneGap の使用例 2(Android)   assets/www フォルダ下に   HTML/JS/CSS などを作成
PhoneGap の情報収集の注意●   Nitobi->Adobe 買収 ->Apache Project へ寄贈●   名前 :    ● PhoneGap    ●   Apache Callback    ●   Apache Cord...
PhoneGap と Cordova の関係    Safari                 PhoneGapレンダリングエンジン                                   将来的には               ...
●   PhoneGap の使い方
おまじないPhoneGapの準備が完了したらdevicreadyイベントが発生する。Devicereadyイベント発生後、アプリケーションの初期化処理を行う。deviceReady = false;document.addEventListen...
JQuery Mobileと組み合わせる場合、最初の画面のpageinitで初期化すると良い。$(document).on("pageinit","#p-page",function(e){  deviceReady = false;  doc...
Camera API    デバイスによってカメラ操作の対応は異なる●   Android ~ 2.3     フォルダからのアップロードは     <input type="file">     で可能。カメラの直接操作は不可●   Andr...
Camera API navigator.camera.getPicture(     function(url) {                                                プラットフォームを問わず   ...
File API●   ストレージのファイルへのアクセス・アップ    ロード    localUri = "http://photoservice.example.com/upload.php";    var opts = new File...
Acceleromer API●   加速度センサーの値はデバイス毎に方向が異な        z             z    る。         +          -                                ...
Acceleromer API                 z             -                     - y                              wid=navigator.acceler...
Notification API    ユーザに通知を行う API●   バイブレーション    navigator.notification.vibrate(500);●   ビープ音    navigator.notification.be...
Event●   ボタンの押下、レジューム、サスペンド、ネッ    トワークの切断・復帰など、ブラウザ単独では    利用できないイベントを利用可能    例:    $(document).on("backbutton", function(...
Event 一覧 イベント              説明 backbutton        戻るボダンが押された menubutton        メニューボタンが押された searchbutton      検索ボタンが押された pau...
PhoneGap Builder●   なんか、プラットフォーム毎にビルドするのめ    んどくさいんですけど、、、●   そういう人には PhoneGap Builder 。 GitHub    などの公開 Git リポジトリにアプリをアップ...
JQuery Mobile と PhoneGap と               ユカイな仲間たち                                                                         ...
書籍のご紹介         ・ PhoneGap を利用した         HTML/JavaScript アプリのネイティブ         化 (iPhone/Android/Windows Phone)         ・ jQuer...
まとめ●   JQuery Mobile+PhoneGap で      楽々スマートフォン開発●   Web ブラウザで動かすので制限もある    ●   要件に合わないと思ったら諦めることも重要    ●   要件に合えば、格段の生産性を見...
Upcoming SlideShare
Loading in …5
×

jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング

17,868 views

Published on

jQuery MobileとPhoneGapによるスマートフォンアプリの開発について紹介

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
17,868
On SlideShare
0
From Embeds
0
Number of Embeds
211
Actions
Shares
0
Downloads
121
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング

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

×