20110518 jquery mobile + phonegap

2,351 views

Published on

  • Be the first to comment

  • Be the first to like this

20110518 jquery mobile + phonegap

  1. 1. jQuery mobile + PhoneGap ネイティブに触ってみた Android勉強会 組長 森茂樹
  2. 2. PhoneGap とは <ul><li>クロスプラットフォーム・モバイルアプリケーションの開発フレームワーク </li></ul><ul><li>(特徴) </li></ul><ul><li>HTML + CSS + JavaScript を用いて、 iPhone/Android/BlackBerry/Symbian/Palm のネイティブアプリケーションを開発できる。 </li></ul><ul><li>モバイルデバイスのカメラ、 GPS 、加速度センサに JS でアクセス。 </li></ul>
  3. 3. PhoneGap – カメラを呼び出す <ul><li>navigator. camera.getPicture (onSuccess, onFail, { quality: 50 }); function onSuccess(imageData) {     var image = document.getElementById('myImage');     image.src = &quot;data:image/jpeg;base64,&quot; + imageData; } function onFail(message) {     alert('Failed because: ' + message); } </li></ul>
  4. 4. PhoneGap – GPS 位置情報 <ul><li>var onSuccess = function(position) {     alert('Latitude: '          + position.coords.latitude          + 'n' +           'Longitude: '         + position.coords.longitude         + 'n' +           'Altitude: '          + position.coords.altitude          + 'n' +           'Accuracy: '          + position.coords.accuracy          + 'n' +           'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + 'n' +           'Heading: '           + position.coords.heading           + 'n' +           'Speed: '             + position.coords.speed             + 'n' +           'Timestamp: '         + new Date(position.timestamp)      + 'n'); }; // onError Callback receives a PositionError object // function onError(error) {     alert('code: '    + error.code    + 'n' +           'message: ' + error.message + 'n'); } navigator. geolocation.getCurrentPosition (onSuccess, onError); </li></ul>
  5. 5. jQuery Mobile とは <ul><li>jQuery をベースとしたモバイルアプリケーション用の Javascript ライブラリ </li></ul><ul><li>(特徴) </li></ul><ul><li>HTML を書くだけでモバイルアプリケーションができてしまう </li></ul><ul><li>モバイルのユーザーインターフェイス対応の部品が多く揃っている (アニメーション付き) </li></ul><ul><li>iOS 、 Android 、 WebOS 、 Windows Moblie 、 Symbian などクロスプラットフォーム対応である </li></ul>
  6. 6. さんぷる あります <ul><li>ざっくりさんぷるつくりました </li></ul>
  7. 7. PhoneGap + jQuery Mobile <ul><li>(良いこと) </li></ul><ul><li>女子供でも簡単に画面が作れる </li></ul><ul><li> ->HTML + CSS </li></ul><ul><li>ネイティブの呼びだしも簡単 </li></ul><ul><li> ->JavaScriptなので楽 </li></ul><ul><li>デザイナとエンジニアの分業が出来る </li></ul>
  8. 8. PhoneGap + jQuery Mobile <ul><li>(悪いこと) </li></ul><ul><li>PhoneGap で対応しているネイティブ機能がまだそんなに多くない </li></ul><ul><li>jQuery Mobile が α 版なのでバグいっぱい </li></ul><ul><li>処理速度は Android 標準の WebView と JavaScript エンジンに依存している </li></ul>
  9. 9. 参考 <ul><li>PhoneGap Documentation </li></ul><ul><li>http://docs.phonegap.com/index.html </li></ul><ul><li>jQuery Mobile </li></ul><ul><li>http:// jquerymobile.com / </li></ul><ul><li>第 2 回  JavaScript から Flickr API で画像検索 </li></ul><ul><li>http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/ </li></ul>

×