1. Webアプリケーション開発での
位置情報活用
2011.10.21 まにゼミ
HTML5-WEST.jp 村岡正和

2. 自己紹介
むらおか まさかず
村岡正和 @bathtimefish
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス
ティバル実行委員など
HTML5-WEST.jp
HTML5 JavaScript
Python
中国拳法 主夫になりたい
炊事 Google Apps
http://html5-west.jp/

3. HTML5-WEST.jp
位置情報アプリケーション

5. もうすぐベータ公開！！

6. 位置情報とモバイル
ManiMani Labo
モバイルと相性のいいサービス
地図、現在位置の周辺情報...
突発的ニーズ ＝
HTML5-WEST.jp

7. HTML5-WEST.jp
位置情報とHTML5

8. Geolocation API
ManiMani Labo
http://dev.w3.org/geo/api/spec-source.html
HTML5-WEST.jp

9. var geo = navigator.geolocation;

10. geo.getCurrentPosition(
successCb, // function(pos) {...}
errorCb, // function(errorCode) {...}
options
);

11. options = {
enableHighAccuracy:true,
timeout:60000,
maximumAge:0
};

12. 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/秒)
};

13. errorCb = function (err) {
alert( error.code ); // 1 or 2 or 3
};
1 = 位置情報の利用が許可されていない
2 = 位置情報サービスの内部エラー
3 = タイムアウト

14. 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

15. watchPositionで高精度取得
ManiMani Labo
watchPosition() で
一定量の位置
データログを取
得して一番精度
の高いデータを
取得する
HTML5-WEST.jp

16. watchPositionで高精度取得
ManiMani Labo
wifi+GPSの場合、最
初のデータの精度が
低い。移動している
とだんだん良くなっ
ていく感じ。
HTML5-WEST.jp

17. ハマりどころ
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

18. テスト・デバッグ
ManiMani Labo
ひたすら 徊する...
街頭 徊 // 位置、精度の変化をみるため
GPSは屋内では弱いから外を歩き回る
画面に集中せず車や人に注意！
深夜のテストはやめたほうがいいかも
HTML5-WEST.jp

19. まとめ
ManiMani Labo
•位置情報は手軽でインタラクティブな機能
•Geolocation APIは簡単強力
•高精度な位置取得はちょっと工夫が必要
•位置は遍在する情報。様々なサービスと
マッシュアップしやすいデータ。
HTML5-WEST.jp

20. Thanks！