2012年6月29日金曜日

PhoneGapで方位（方角）を取得する

さきほどはAndroidのネイティブでセンサー使って方位を取得しました。
http://teru2-bo2.blogspot.jp/2012/06/android.html

試しにとおもってPhoneGapでも作ってみました。
せっかくPhoneGapなんでiOS版とAndroid版と作ろうと思ったんですがまったく同じアプリをつくるのに別々で作らないといけないってのがいやで前に紹介したMonacaを使ってみました。
Monaca beta

コードは以下
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels (横幅640pxに設定)
            monaca.viewport({width: 640});

            var watchID;
            var orient_range = new Array(
                    45,
                    135,
                    225,
                    315
                );
            var orient_string = new Array(
                    "south",
                    "west",
                    "north",
                    "east"
                );
            
            document.addEventListener("deviceready", onDeviceReady, false);
            
            // 初期時
            function onDeviceReady() {
                start_watch();
            }
            
            // コンパス起動
            function start_watch() {
                var options = { frequency: 500 };
                watchID = navigator.compass.watchHeading(onSuccess, onError, options);
            }

            // コンパス停止            
            function stop_watch() {
                if (watchID) {
                    navigator.compass.clearWatch(watchID);
                    watchID = null;
                }
            }
            
            // コンパスデータ取得
            function onSuccess(heading) {
                var element = document.getElementById('heading');
                element.innerHTML = '方位: ' + heading.magneticHeading + ' , ' + 
                                    '方角: ' + orient_string[toOrientationString(heading.magneticHeading)];
            }
            
            // コンパスデータ取得失敗
            function onError(e) {
                if (e.code == CompassError.COMPASS_INTERNAL_ERR) {
                    alert("内部エラーが発生しました");
                } else if (CompassError.COMPASS_NOT_SUPPORTED) {
                    alert("サポートしていません");
                } else {
                    alert("エラーが発生しました[" + e.code + "]")
                }
                stop_watch();
            }
            
            // 方位を取得
            function toOrientationString(angrad) {
                var idx = 0;
                
                for (i = 0; i < orient_range.length; i++) {
                    if (angrad < orient_range[i]) {
                        idx = i;
                        break;
                    }
                }
                
                return idx;
            }
        </script>
        <style>
            div, button {
                font-size: 24pt;
            }
        </style>
    </head>
    <body>
        <h1>コンパス</h1>
        <div id="heading">方位：取得中...</div>
        <button onclick="start_watch()">開始</button>
        <button onclick="stop_watch()">終了</button>
    </body>
</html>

方位を取得するのはnavigator.compass.watchHeadingの部分。
これは一定間隔で方位を取得してくれるもので引数は順に成功時イベントハンドラ、失敗時イベントハンドラ、間隔（ms）。

ネイティブアプリに比べるとものすごく楽。

これでAndroidの動作は確認することができました。
（iOSは手元にiPod touchしかなく動きませんでした。。。）

一番苦労したというかハマったことがGoogle検索。。。
Google検索でPhoneGapのドキュメントとか見てたら見てたやつがver1.0のもの。
おかげでなかなか動きませんでした。

ドキュメントは読む際はバージョンもしっかり確認しないとですね。
Apache Cordova API Document

※2012.6.30
ちょっと式が間違ってたんで修正しました。


時刻:

0 件のコメント:

コメントを投稿