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

20110518 jquery mobile + phonegap

on

  • 2,410 views

 

Statistics

Views

Total Views
2,410
Views on SlideShare
2,402
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/