Compassによるコンパス機能 (2/4)
作成:2012-04-02 08:27
更新:2012-04-02 08:27
更新:2012-04-02 08:27
■コンパスの値を取得する
では、実際にgetCurrentHeadingでコンパスの値を取得してみましょう。
これも、簡単なサンプルを以下に挙げておきましょう。ここでは単純に値を取得して画面に表示しているだけですが、コンパスの基本的な使い方はわかるでしょう。
実際に動作を確認したら、コードをチェックしてみてください。ここでは、単純にスクリプトでgetCurrentHeadingを呼び出しているわけではないことがわかります。documentのonloadで関数を呼び出し、以下のような処理を実行していますね。
これは、先にAccelerometerによる加速度センサーを利用した時に使ったものです。addEventListenerを使い、"deviceready"というイベントに関数をバインドしています。この"deviceready"というイベントは、デバイスの準備が完了し、デバイスの機能が利用可能になったときに発生するイベントです。
アプリを起動した直後には、まだ各種のセンサーなどデバイスのハードウェアを利用する機能は使える状態になっていません。このため、準備が完了したところで処理を実行してやる必要があります。"deviceready"イベントを利用してデバイスの機能を呼び出す、というのは、ハードウェア利用時の基本といってよいでしょう。
その他の部分は、既に説明した通りですので難しくはありません。センサーの値取得に成功した時に呼び出されるonSuccessでは、引数のheadingからtrueHeadingの値を取得し、それを<div>タグに表示しています。
これも、簡単なサンプルを以下に挙げておきましょう。ここでは単純に値を取得して画面に表示しているだけですが、コンパスの基本的な使い方はわかるでしょう。
実際に動作を確認したら、コードをチェックしてみてください。ここでは、単純にスクリプトでgetCurrentHeadingを呼び出しているわけではないことがわかります。documentのonloadで関数を呼び出し、以下のような処理を実行していますね。
document.addEventListener("deviceready", onReady, false);
これは、先にAccelerometerによる加速度センサーを利用した時に使ったものです。addEventListenerを使い、"deviceready"というイベントに関数をバインドしています。この"deviceready"というイベントは、デバイスの準備が完了し、デバイスの機能が利用可能になったときに発生するイベントです。
アプリを起動した直後には、まだ各種のセンサーなどデバイスのハードウェアを利用する機能は使える状態になっていません。このため、準備が完了したところで処理を実行してやる必要があります。"deviceready"イベントを利用してデバイスの機能を呼び出す、というのは、ハードウェア利用時の基本といってよいでしょう。
その他の部分は、既に説明した通りですので難しくはありません。センサーの値取得に成功した時に呼び出されるonSuccessでは、引数のheadingからtrueHeadingの値を取得し、それを<div>タグに表示しています。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※index.html <!DOCTYPE html> <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <script type="text/javascript" src="phonegap-1.4.1.js"></script> <script type="text/javascript"> function onLoad(){ document.addEventListener("deviceready", onReady, false); } function onReady() { navigator.compass.getCurrentHeading(onSuccess, onError); } function onSuccess(heading) { var heading = heading.trueHeading; document.getElementById('msg').innerHTML = "HEAD: " + heading; } function onError(compassError) { alert('Compass Error: ' + compassError.code); } </script> </head> <body onload="onLoad();"> <!-- home page --> <div id="home" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <h2>Sample Page</h2> <div id="msg"></div> </div> </div> </body> </html>
※関連コンテンツ
「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る