Webアプリケーション開発での    位置情報活用     2011.10.21 まにゼミ    HTML5-WEST.jp 村岡正和
自己紹介むらおか まさかず村岡正和           @bathtimefishWebアプリケーション開発 IT業務システム設計/開発Webサービス導入/事業戦略コンサルティングHTML5-WEST.jp代表 / 京都GTUG / CSS Ni...
HTML5-WEST.jp位置情報アプリケーション
もうすぐベータ公開!!
位置情報とモバイル                     ManiMani Labo モバイルと相性のいいサービス  地図、現在位置の周辺情報...    突発的ニーズ    =                    HTML5-WEST.jp
HTML5-WEST.jp位置情報とHTML5
Geolocation API                                        ManiMani Labo       http://dev.w3.org/geo/api/spec-source.html     ...
var geo = navigator.geolocation;
geo.getCurrentPosition(            successCb, // function(pos) {...}            errorCb, // function(errorCode) {...}     ...
options = {        enableHighAccuracy:true,        timeout:60000,        maximumAge:0};
successCb = function (pos) {   console.log( pos.coords.latitude ); // 緯度     console.log( pos.coords.longitude ); // 経度   ...
errorCb = function (err) {      alert( error.code ); // 1 or 2 or 3   };1 = 位置情報の利用が許可されていない2 = 位置情報サービスの内部エラー3 = タイムアウト
Geo絡みでよく言われるアレ                                                        ManiMani Labo できるだけ高精度で取得したい   enableHighAccuracy = ...
watchPositionで高精度取得                  ManiMani Labo                watchPosition() で                一定量の位置                デ...
watchPositionで高精度取得                  ManiMani Labo              wifi+GPSの場合、最              初のデータの精度が              低い。移動している...
ハマりどころ                                        ManiMani Labo errorCode = 1 Permission Error    // ex. Android 設定 位置情報利用ON e...
テスト・デバッグ                         ManiMani Laboひたすら      徊する...街頭 徊 // 位置、精度の変化をみるためGPSは屋内では弱いから外を歩き回る画面に集中せず車や人に注意!深夜のテストは...
まとめ                          ManiMani Labo •位置情報は手軽でインタラクティブな機能 •Geolocation APIは簡単強力 •高精度な位置取得はちょっと工夫が必要 •位置は遍在する情報。様々なサー...
Thanks!
Webアプリケーション開発での位置情報活用
Upcoming SlideShare
Loading in …5
×

Webアプリケーション開発での位置情報活用

2,019 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,019
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Webアプリケーション開発での位置情報活用

    1. 1. Webアプリケーション開発での 位置情報活用 2011.10.21 まにゼミ HTML5-WEST.jp 村岡正和
    2. 2. 自己紹介むらおか まさかず村岡正和 @bathtimefishWebアプリケーション開発 IT業務システム設計/開発Webサービス導入/事業戦略コンサルティングHTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など HTML5-WEST.jpHTML5 JavaScript Python中国拳法 主夫になりたい 炊事 Google Apps http://html5-west.jp/
    3. 3. HTML5-WEST.jp位置情報アプリケーション
    4. 4. もうすぐベータ公開!!
    5. 5. 位置情報とモバイル ManiMani Labo モバイルと相性のいいサービス 地図、現在位置の周辺情報... 突発的ニーズ = HTML5-WEST.jp
    6. 6. HTML5-WEST.jp位置情報とHTML5
    7. 7. Geolocation API ManiMani Labo http://dev.w3.org/geo/api/spec-source.html HTML5-WEST.jp
    8. 8. var geo = navigator.geolocation;
    9. 9. geo.getCurrentPosition( successCb, // function(pos) {...} errorCb, // function(errorCode) {...} options);
    10. 10. options = { enableHighAccuracy:true, timeout:60000, maximumAge:0};
    11. 11. successCb = function (pos) { console.log( pos.coords.latitude ); // 緯度 console.log( pos.coords.longitude ); // 経度 console.log( pos.coords.altitude ); // 高度 console.log( pos.coords.accuracy ); // 誤差(m) console.log( pos.coords.altitudeAccuracy ); // 高度の誤差(m) console.log( pos.coords.heading ); // 方角(0~360度) console.log( pos.coords.speed ); // 速度(m/秒)};
    12. 12. errorCb = function (err) { alert( error.code ); // 1 or 2 or 3 };1 = 位置情報の利用が許可されていない2 = 位置情報サービスの内部エラー3 = タイムアウト
    13. 13. Geo絡みでよく言われるアレ ManiMani Labo できるだけ高精度で取得したい   enableHighAccuracy = true;   watchPosition() をsetInterval()でしばらく回してaccuracyが一番高い   やつをとる 2点間の距離を求めたい   http://gihyo.jp/dev/serial/01/chrome-web-store/0004?page=2   真ん中あたりにJavaScriptコードが掲載   http://lab.uribou.net/ll2dist/ Web API HTML5-WEST.jp
    14. 14. watchPositionで高精度取得 ManiMani Labo watchPosition() で 一定量の位置 データログを取 得して一番精度 の高いデータを 取得する HTML5-WEST.jp
    15. 15. watchPositionで高精度取得 ManiMani Labo wifi+GPSの場合、最 初のデータの精度が 低い。移動している とだんだん良くなっ ていく感じ。 HTML5-WEST.jp
    16. 16. ハマりどころ ManiMani Labo errorCode = 1 Permission Error // ex. Android 設定 位置情報利用ON errorCode = 2 Internal Error // ex. Wifiで利用している場合、Androidでは"Wifiで 位置情報利用ON"にチェックがないと   内部エラーになる。 Android WebBrowser 微妙にキャッシュが効きっぱなしな場合 が.. // option: expire=0 、pragma-nocache とかで対応 端末によってGPSの精度がまちまち... HTML5-WEST.jp
    17. 17. テスト・デバッグ ManiMani Laboひたすら 徊する...街頭 徊 // 位置、精度の変化をみるためGPSは屋内では弱いから外を歩き回る画面に集中せず車や人に注意!深夜のテストはやめたほうがいいかも HTML5-WEST.jp
    18. 18. まとめ ManiMani Labo •位置情報は手軽でインタラクティブな機能 •Geolocation APIは簡単強力 •高精度な位置取得はちょっと工夫が必要 •位置は遍在する情報。様々なサービスと マッシュアップしやすいデータ。 HTML5-WEST.jp
    19. 19. Thanks!

    ×