• Save
20110518 jquery mobile + phonegap
Upcoming SlideShare
Loading in...5
×
 

20110518 jquery mobile + phonegap

on

  • 2,403 views

 

Statistics

Views

Total Views
2,403
Views on SlideShare
2,395
Embed Views
8

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 8

http://paper.li 5
http://s.deeeki.com 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20110518 jquery mobile + phonegap 20110518 jquery mobile + phonegap Presentation Transcript

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