iOS4.2から実装されたというJavaScriptの加速度センサーAPIを試してみました
    このエントリをはてなブックマークに登録

2010/12/16 木曜日 matsui Posted in iPhone | No Comments »

先日リリースされたiOS4.2から実装されたという、Safari上で動作するJavaScriptの加速度センサーAPIを試してみました。

使い方はごく簡単で、次のようにして加速度が取得できます。

event.accelerationIncludingGravity.x;

 

iPhoneを傾けると赤い点がコロコロと移動するというサンプルプログラムを作ってみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />
</head>

<body>

X:<span id="g_x"></span><br />
Y:<span id="g_y"></span><br />
Z:<span id="g_z"></span><br />
<br />
<div id="target" style="background-color:red; width:10px; height:10px; position:absolute; top:240px; left:240px;"> </div>


<script type="text/javascript" charset="utf-8">

// 加速度を格納するための変数
var x = y = z = 0;

// 動かす対象の座標を格納するための変数
var target_top = target_left = 0;

// イベントリスナー登録
window.addEventListener('devicemotion', function(event) {
	var gv = event.accelerationIncludingGravity;
	x = gv.x;
	y = gv.y;
	z = gv.z;
	refresh();
});

// 画面を再描画する
function refresh() {
	// デバッグ用表示
	document.getElementById('g_x').innerHTML = x;
	document.getElementById('g_y').innerHTML = y;
	document.getElementById('g_z').innerHTML = z;
	
	// 対象を動かす
	var el = document.getElementById('target');
	el.style.top = (parseInt(el.style.top.replace('px', '')) - y) + 'px';
	el.style.left = (parseInt(el.style.left.replace('px', '')) + x) + 'px';
}

</script>

</body>
</html>

 

動作確認はiPhone4で行っています。
実機をお持ちの方はこちらにアクセスしてください。

→　iOS4.2向け　加速度センサーAPIデモ [ke-tai.org]

iphone_gravity

 

動いたのは良いのですが、まあ問題は使いどころですね。
ブラウザ上での使い道を考えるのは、なかなか難しいです。

とりあえず、部屋の床が微妙に傾いているということはわかりました（笑）

 

関連：


タグ: ,

 

最近の記事







コメントを書く

«
»