GPSセンサーを搭載したスマートフォンが広まったことで、位置情報を利用したサービスやゲームが増えてきました。また、アプリの企画をブレストすると、GPSセンサーはカメラと並んで人気がありますね。
そこで、今回は、PhoneGapを利用してAndroid端末に搭載されているGPSセンサーから現在地情報を取得するサンプルを紹介します。
さて、シグニチャです。
今回は、ボタンを押下することで現在の位置情報をを取得します。
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, [geolocationOption]);
geolocationOptions
maximumAge
設定した時間以内でキャッシュされた位置情報を取得します。
設定値 | ミリ秒単位で設定(デフォルトは10000) |
timeout
コールバック関数 geolocationSuccess が呼ばれるまで待機する時間を設定します。
設定値 | ミリ秒単位で設定 |
geolocationSuccess
取得した位置情報が引数として渡されますので、データの処理を記述します。
function(position){ // geolocationSuccess $('#geolocation_position').html( '緯度: ' + position.coords.latitude + '<br>' + '経度: ' + position.coords.longitude + '<br>' + '高度: ' + position.coords.altitude + '<br>' + '位置精度: ' + position.coords.accuracy + '<br>' + '高度精度: ' + position.coords.altitudeAccuracy + '<br>' + '方位: ' + position.coords.heading + '<br>' + '速度: ' + position.coords.speed ); // 取得した日時を表示 $('#geolocation_timestamp').html('日付:'+new Date(position.timestamp).toString()); // ボタンを表示し地図を表示するインテントをhrefに設定 $('#geolocation_viewmap') .attr('href', 'geo:'+position.coords.latitude+','+position.coords.longitude) .css('display', 'block'); }
position
position.coords.latitude | 緯度 |
position.coords.longitude | 経度 |
position.coords.altitude | 高度 |
position.coords.accuracy | 位置精度 |
position.coords.altitudeAccuracy | 高度精度 |
position.coords.heading | 方位 |
position.coords.speed | 速度 |
position.timestamp | 情報を取得した日時のミリ秒 |
geolocationError
GPSセンサーの情報が取得できなかった場合に実行されます。メッセージの表示や代替の処理を記述します。
function(error){ // geolocationError alert(error.message); }
error
error.code | エラーコードが格納されています。定数についてはこちら |
error.message | エラーメッセージが格納されています |
サンプルソース
<!DOCTYPE HTML> <html> <head> <title>PhoneGap Showcase</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"/> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" type="text/css" media="all"> <link rel="stylesheet" href="jquery.mobile.structure-1.0.min.css" type="text/css" media="all"> </head> <body> <div data-role="page" id="geolocation"> <div data-role="header"> <a data-role="button" data-icon="back" data-rel="back" data-direction="reverse">戻る</a> <h1>Geolocation Showcase</h1> </div> <div data-role="content"> <a id="geolocation_getPosition" href="#" data-role="button">現在地を取得する</a> <div id="geolocation_position"></div> <div id="geolocation_timestamp"></div> <a id="geolocation_viewmap" href="#" style="display:none;" data-role="button">取得した現在地を地図表示する</a> </div> </div> </body> <script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> <script type="text/javascript"> $(function(){ document.addEventListener("deviceready", function(){ $('#geolocation_getPosition').attr('href', 'javascript:getPosition()'); }, false); }) /* * GPSセンサーから現在の方位を取得 */ function getPosition(){ navigator.geolocation.getCurrentPosition( function(position){ // geolocationSuccess $('#geolocation_position').html( '緯度: ' + position.coords.latitude + '<br>' + '経度: ' + position.coords.longitude + '<br>' + '高度: ' + position.coords.altitude + '<br>' + '位置精度: ' + position.coords.accuracy + '<br>' + '高度精度: ' + position.coords.altitudeAccuracy + '<br>' + '方位: ' + position.coords.heading + '<br>' + '速度: ' + position.coords.speed ); $('#geolocation_timestamp').html('日付:'+new Date(position.timestamp).toString()); $('#geolocation_viewmap') .attr('href', 'geo:'+position.coords.latitude+','+position.coords.longitude) .css('display', 'block'); }, function(error){ // geolocationError alert(error.message); }, { enableHighAccuracy : true, timeout : 5000, maximumAge : 5000, } ); } </script> </html>
GPSセンサーから位置情報を取得
まとめ
今回のサンプルのように現在地を取得して連携することで周辺情報を提供するサービスや、今回は紹介しませんでしたが、一定間隔ごとに位置情報を取得し移動したルートを利用したサービスなど、位置情報を活用したアプリはこれからもっと増えていくことでしょう。また、位置情報をユニークに利用したアプリを考えるのも楽しそうですね。
さて、これまで4回にわたってAndroid端末に搭載されているセンサー系のサンプルを紹介しました。「センサーから情報を取得する」となると難しそうなイメージがありますが、紹介したサンプルを見ると難しいことはありません。尻込みすることなく自分のアイデアをどんどん形にしてみてはいかがでしょうか。私の記事が少しでも役に立ち、はじめの一歩の背中を押せれば幸いです。