back
Compassによるコンパス機能 (2/4)
■コンパスの値を取得する
では、実際に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>
| << 前へ | 次へ >> |