読者です 読者をやめる 読者になる 読者になる

PhoneGapで簡単。Androidでコンパスセンサーを使うサンプルを紹介します。

今回は、PhoneGapを利用してAndroid端末に搭載されているコンパスセンサーから方位を取得するサンプルを紹介します。コンパスセンサーは、他のカメラやGPSセンサー、加速度センサーと比べて非常にシンプルです。取得できるパラメータは「方位」と「取得日時」のみですから(・∀・)

さて、シグニチャです。

navigator.compass.getCurrentHeading( compassSuccess, compassError, [ compassOptions ] );

参考:PhoneGap API Documentation

compassOptions

frequency

コンパスからパラメータを取得する間隔を設定します。

設定値 ミリ秒単位で設定(デフォルトは100)


Androidでサポートしているのは、frequencyのみとなります。

compassSuccess

取得した方位データが引数として渡されますので、データの処理を記述します。

function(compassHeading){
    // ここに処理を記述
}
compassHeading
compassHeading.magneticHeading 北を0度として、0~359
compassHeading.timestamp パラメータを取得した日時のミリ秒

cameraError

コンパスの情報が取得できなかった場合に実行されます。エラーコード(compassError.code)が引数として渡されますので、メッセージの表示や代替の処理を記述します。

function(compassError){
    // ここに処理を記述
}
compassError.code
CompassError.COMPASS_INTERNAL_ERR コンパスセンサーの内部的なエラーが発生した場合
CompassError.COMPASS_NOT_SUPPORTED コンパスセンサーがサポートされていない端末の場合

とりあえずサンプルソース

<!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">
<STYLE type="text/css">
<!--
-->
</STYLE>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>PhoneGap Showcase</h1>
        </div>
        <div data-role="page">
            <div data-role="header">
                <h1>Compass Showcase</h1>
            </div>
            <div data-role="content">
                <div id="compass_heading"></div>
                <div id="compass_timestamp"></div>
                <div style="width:100%;height:200px;text-align:center;">
                    <div id="kita" style="line-height:200px;font-size:30px; ">(*´ω`*)</div>
                </div>
            </div>
        </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(){
            watchStartCompass();
        },
        false);
})
/*
 * コンパスセンサーから現在の方位を取得
 */
function watchStartCompass(){
    navigator.compass.watchHeading(
        function(heading){
            // compassSuccess
            $('#compass_heading').html('方角:'+heading.magneticHeading);
            $('#compass_timestamp').html('日付:'+new Date(heading.timestamp).toString());
           
            if( (0<=heading.magneticHeading&&heading.magneticHeading<=10)
                      || (350<=heading.magneticHeading&&heading.magneticHeading<=360)){
                $('#kita').html('キタ━━━━(゚∀゚)━━━━!!');
            }else{
                 $('#kita').html('(*´ω`*)');
            }
        },
        function(compassError){
            // compassError
            if(CompassError.COMPASS_INTERNAL_ERR==compassError.code){
                 alert('コンパスで内部エラーが発生しました');
            }else if(CompassError.COMPASS_NOT_SUPPORTED){
                alert('コンパスがサポートされていません');
            }
        },
        {
            frequency : 100,
        }
    );
}
</script>
</html>

コンパスから情報を取得する

コンパスからは、方位と取得日時が取得できます。取得日時があるのでログを残して、あとから履歴を参照するような使い方もできます。以下のコードでは、引数として受け取った方位と取得日時を画面に表示します。
https://lh4.googleusercontent.com/-4nxpGWnY-pc/TvBqYtWBXvI/AAAAAAAALBY/EKepBaBJEgg/s800/compass.jpg

/*
 * コンパスセンサーから現在の方位を取得
 */
function watchStartCompass(){
    navigator.compass.watchHeading(
        function(heading){
            // compassSuccess
            $('#compass_heading').html('方角:'+heading.magneticHeading);
            $('#compass_timestamp').html('日付:'+new Date(heading.timestamp).toString());
           
            if( (0<=heading.magneticHeading&&heading.magneticHeading<=10)
                      || (350<=heading.magneticHeading&&heading.magneticHeading<=360)){
                $('#kita').html('キタ━━━━(゚∀゚)━━━━!!');
            }else{
                 $('#kita').html('(*´ω`*)');
            }
        },
        function(compassError){
            // compassError
            if(CompassError.COMPASS_INTERNAL_ERR==compassError.code){
                 alert('コンパスで内部エラーが発生しました');
            }else if(CompassError.COMPASS_NOT_SUPPORTED==compassError.code){
                alert('コンパスがサポートされていません');
            }
        },
        {
            frequency : 100,
        }
    );
}


ちなみに、北の方角を向くとこうなります。
https://lh6.googleusercontent.com/-WjJKUhAI2kc/TvBqZcgw6bI/AAAAAAAALBc/wB_UT1AMicw/s800/compass_north.jpg
キタ━━━━(゚∀゚)━━━━!!
これがやりたかっただけです。

まとめ

いかがだったでしょうか。取得できるパラメータは少ないですが、地図を利用したアプリの開発には欠かせないものです。数行で実装できますので、コンパスの利用を検討したときには、参考にしてください。