Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,085 views

Published on

Published in: Technology
  • Be the first to comment

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!

×