libro
www.tuyano.com
PhoneGapによるAndroid/iPhoneアプリ開発入門

Compassによるコンパス機能 (4/4)

作成:2012-04-02 08:31
更新:2012-04-02 08:31

■コンパスをビジュアルに表示するには？

では、コンパスの値の応用例として、コンパスの値をグラフィックを利用して表示する簡単なサンプルを考えてみましょう。

下のリスト欄に掲載したサンプルは、コンパスの値を取り出し、現在の向きをグラフィックで表示する例です。薄い赤の円の上に、濃い赤の直線で北の方角が表示されるのがわかるでしょう。

ここでは、<canvas>タグを使ってグラフィックの表示をしています。<canvas>はHTML5のビットマップグラフィック描画のためのタグで、グラフィックコンテキストを取得してグラフィックの描画を行うことができます。ここでは、drawという関数に描画の処理をまとめています。

Canvasなどのグラフィック描画機能でコンパスの値を利用する場合、注意したいのは「単位の違い」でしょう。向きを示す角度から描画する線の位置を取得するためには、JavaScriptの三角関数（sin、cos）を利用することになりますが、この種の関数では角度は基本的にラジアン単位（２Πを１回転とするもの）になります。が、Compassの値は１回転＝360度による角度になります。

また三角関数は水平方向（方角でいえば東）がゼロの値になりますが、Compassは北（グラフィックで表示するなら真上）がゼロになり、デバイスが時計回りに回転する（中に描かれる北の方向は反時計回りに回転する）と値が増えるようになります。このあたりの違いをうまく修正してグラフィック化できるように考える必要があるでしょう。

ここでは、取得した角度を元に、描画する線の位置を以下のようにして計算しています。
var x = Math.sin(heading / 360 * Math.PI * 2) * 50 * -1;
var y = Math.cos(heading / 360 * Math.PI * 2) * 50 * -1;
x方向をsin、y方向をcosで取得していますね。そして針の向きを補正するのにそれぞれ-1をかけています。また、headingの値をラジアンに変換するために、取得されたheadingの値を360で割り、Math.PI * 2をかけています。


※Canvasについては以下を参照ください。
http://libro.tuyano.com/index3?id=207001

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!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 draw(heading){
	var canvas = document.getElementById('canvas1');
	var context = canvas.getContext('2d');
	context.fillStyle = "#EEEEFF";
	context.fillRect(0, 0, 300, 200);

	context.beginPath();
	context.arc(100, 100, 50, 0, Math.PI * 2, true);
	context.closePath();
	context.fillStyle = 'rgba(255, 0, 0, 0.5)';
	context.fill();
	
	context.beginPath();
	context.strokeStyle = 'red';
	context.moveTo(100, 100);
	var x = Math.sin(heading / 360 * Math.PI * 2) * 50 * -1;
	var y = Math.cos(heading / 360 * Math.PI * 2) * 50 * -1;
	context.lineTo(100 + x, 100 + y);
	context.closePath();
	context.stroke();
}

function onReady() {
	var opt = { frequency: 200 };
	navigator.compass.watchHeading(onSuccess, onError, opt);
}

function onSuccess(heading) {
	var heading = heading.trueHeading;
	document.getElementById('msg').innerHTML = "HEAD: " + heading;
	draw(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>
			<canvas id="canvas1" width="300" height="200"></canvas>
		</div>
	</div>
</body>
</html>
※関連コンテンツ

「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る