HTML5でスマートフォンの加速度を取得する方法

あむちょです。

HTML5の便利な機能の一つ、加速度センサーの値を取得してJavaScriptで利用する際のメモ。

アクセス解析を見てみると、このブログの訪問数の内、半分はスマートフォンから見られているようなので、なるべくスマートフォンの操作性を意識するように心がけているのだが、どうにも入力方法が少ない。

ということで、加速度を試しに使ってみました。サンプルは以前紹介したタグクラウドを使いました。
HTML5とJavaScriptで3Dタグクラウド2歩手前

スマートフォンから以下のリンクにアクセスして端末を傾けると動きます。

3dTag Cloud

以下やり方

まず最初に、ユーザーエイジェントをチェック。

<br />
if(navigator.userAgent.indexOf(&#8216;iPhone&#8217;) &gt; 0 || navigator.userAgent.indexOf(&#8216;iPad&#8217;) &gt; 0<br />
    || navigator.userAgent.indexOf(&#8216;iPod&#8217;) &gt; 0  || navigator.userAgent.indexOf(&#8216;Android&#8217;) &gt; 0)mobileFlag=true;<br />

次にイベントリスナーを登録。

<br />
if(mobileFlag){<br />
    window.addEventListener(&quot;devicemotion&quot;, function(event){<br />
        var x_a = event.acceleration.x;<br />
        var y_a = event.acceleration.y;<br />
	var z_a = event.acceleration.z;</p>
<p>	var x_g = event.accelerationIncludingGravity.x;<br />
	var y_g = event.accelerationIncludingGravity.y;<br />
	var z_g = event.accelerationIncludingGravity.z;</p>
<p>    }, true);</p>
<p>}<br />

これで端末の動きに合わせて、3軸の加速度と重力加速度が得られます。

実際のソースはこんな感じ。tempX,tempYはパソコンだとクリックした時の座標になります。

<br />
if(mobileFlag){<br />
    window.addEventListener(&quot;devicemotion&quot;, function(event){<br />
        //var x_a = event.acceleration.x;<br />
	//var y_a = event.acceleration.y;<br />
	//var z_a = event.acceleration.z;</p>
<p>	var x_g = event.accelerationIncludingGravity.x;<br />
	var y_g = event.accelerationIncludingGravity.y;<br />
	//var z_g = event.accelerationIncludingGravity.z;</p>
<p>	tempX=width/2+x_g*50;<br />
	tempY=height/2-(y_g+7)*50;</p>
<p>	touchFlag=true;<br />
	if(Math.abs(x_g) &lt; 2 &amp;&amp; Math.abs(y_g+7) &lt; 2)touchFlag=false;</p>
<p>    }, true);</p>
<p>}<br />

重力加速度は-9.8~9.8の間の値を取るので、y軸の値に7を足して自然に端末を持った時に0の値を取るように調整してます。また50倍しているのは感度の調整です。

これで、端末を傾けて操作するゲームとか作れそうです。