PhoneGapでやらずにはいられない!! GPSセンサーを使うサンプルを紹介します。

GPSセンサーを搭載したスマートフォンが広まったことで、位置情報を利用したサービスやゲームが増えてきました。また、アプリの企画をブレストすると、GPSセンサーはカメラと並んで人気がありますね。
そこで、今回は、PhoneGapを利用してAndroid端末に搭載されているGPSセンサーから現在地情報を取得するサンプルを紹介します。

さて、シグニチャです。

今回は、ボタンを押下することで現在の位置情報をを取得します。

navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, [geolocationOption]);

参考：PhoneGap API Documentation

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センサーから位置情報を取得

取得した位置情報の緯度、経度をつかってMapを表示

まとめ

今回のサンプルのように現在地を取得して連携することで周辺情報を提供するサービスや、今回は紹介しませんでしたが、一定間隔ごとに位置情報を取得し移動したルートを利用したサービスなど、位置情報を活用したアプリはこれからもっと増えていくことでしょう。また、位置情報をユニークに利用したアプリを考えるのも楽しそうですね。

さて、これまで４回にわたってAndroid端末に搭載されているセンサー系のサンプルを紹介しました。「センサーから情報を取得する」となると難しそうなイメージがありますが、紹介したサンプルを見ると難しいことはありません。尻込みすることなく自分のアイデアをどんどん形にしてみてはいかがでしょうか。私の記事が少しでも役に立ち、はじめの一歩の背中を押せれば幸いです。