今回は、PhoneGapを利用してAndroid端末に搭載されているコンパスセンサーから方位を取得するサンプルを紹介します。コンパスセンサーは、他のカメラやGPSセンサー、加速度センサーと比べて非常にシンプルです。取得できるパラメータは「方位」と「取得日時」のみですから(・∀・)
さて、シグニチャです。
navigator.compass.getCurrentHeading( compassSuccess, compassError, [ compassOptions ] );
compassOptions
compassSuccess
取得した方位データが引数として渡されますので、データの処理を記述します。
function(compassHeading){ // ここに処理を記述 }
compassHeading
compassHeading.magneticHeading | 北を0度として、0~359 |
compassHeading.timestamp | パラメータを取得した日時のミリ秒 |
cameraError
コンパスの情報が取得できなかった場合に実行されます。エラーコード(compassError.code)が引数として渡されますので、メッセージの表示や代替の処理を記述します。
function(compassError){ // ここに処理を記述 }
とりあえずサンプルソース
<!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>
コンパスから情報を取得する
コンパスからは、方位と取得日時が取得できます。取得日時があるのでログを残して、あとから履歴を参照するような使い方もできます。以下のコードでは、引数として受け取った方位と取得日時を画面に表示します。
/* * コンパスセンサーから現在の方位を取得 */ 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, } ); }
まとめ
いかがだったでしょうか。取得できるパラメータは少ないですが、地図を利用したアプリの開発には欠かせないものです。数行で実装できますので、コンパスの利用を検討したときには、参考にしてください。