Ultrabook™ のセンサー・コントロールを HTML5 アプリケーションに追加する

この記事は、インテル® デベロッパー・ゾーンに掲載されている「Adding Ultrabook Sensor Control To HTML5 Apps」の日本語参考訳です。

---

タッチおよびセンサー機能に対応した Windows* 8 搭載の Ultrabook™ が登場し、HTML5 アプリケーション開発者はこれらの機能をアプリケーションに実装できるようになりました。現在、これらのセンサー機能を HTML5 標準規格に追加する作業が進められていますが、一足先に Google* の拡張機能を利用してタッチおよびセンサー機能を HTML5 アプリケーションに実装し、テストすることができます。インテルの Dmitry Rizshkov が作成した、センサーへの C++ アクセスを JavaScript に渡す Google* プラグインを利用して、アプリケーションの作成とテストを行うことができます。現在、このプラグインでは、デバイスの傾き/角度を計測できる傾斜計をサポートしています。今後、その他のセンサーもサポートされる予定です。

(JavaScript/HTML5 で Windows* 8 のセンサーを利用するアプリケーションを開発する場合は、次の記事もご覧ください:
http://software.intel.com/en-us/blogs/2012/09/28/html5-to-winrt-with-sensor-input (英語))

ビデオ
以下のビデオでサンプルをご覧ください。

サンプルコードを実際に試してみよう:

次の Google* Chrome* 拡張機能をインストールします:
https://chrome.google.com/webstore/detail/bnoopapopgglfeecfncmjbdcjafpkoai (英語)
このサンプルコードを検証するには、Google* Chrome* とホストされている HTML を使用する必要があります (ローカルでは動作しません)。

拡張機能を追加し、次のイベントリスナー関数をコードに追加するだけで、JavaScript でセンサーデータを利用できます。このイベントリスナーは、空間におけるデバイスの位置に基づいて変数を x、y、z の角度に設定します。

window.addEventListener("message", function(event) 
{
    if (event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
    {
      event.data.x;
      event.data.y;
      event.data.z;
    }
}, false);

サンプル HTML5 コード (純粋な JavaScript なので、すべてのレンダリングはキャンバスで行われます):

傾斜計センサー – デバイスの傾きに応じて船が画面上を動き回ります:
http://dl.dropbox.com/u/6833005/rotateship-sensor2.htm (英語)

以下のコードは、新しいグローバル変数 xAngle と yAngle を作成し、それぞれに event.data.y と event.data.x を代入します。画面はキーボードに対して垂直なため、ここでは X と Y を入れ替えています。また、angleRate 変数を掛けて、必要に応じて移動の角速度を調整しています。

window.addEventListener("message", function(event) 
{
    if (event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
    {
        event.data.x; 
        event.data.y;
        event.data.z;
        xAngle=event.data.y*angleRate;  
        yAngle=event.data.x*angleRate;
    }
}, false);

そして、画面上で船の動きを繰り返し描画する main 関数で、xAngle と yAngle をそれぞれ shipX 変数と shipY 変数に足して、船とキャンバスの位置を設定しています (実際のコードではさらに追加処理を行っていますが、基本的な処理はここで説明したとおりです)。

   shipx+=xAngle; 
   shipy+=yAngle; 
   context.translate(shipx,shipy);
   drawship();

タッチの追加: http://dl.dropbox.com/u/6833005/altmegarace/code-tutorial/Canvas-click-rotate.htm (英語)

以下のコードは、タッチを追加します。タッチは簡単に追加でき、その方法はさまざまです。ここでは、画面がタップされるたびに新しい座標を取得し、船の向きを変えて移動できるように、マウスの座標を取得するイベントリスナーを追加しています。(XY において船を適切な角度に回転させるため、実際にはさらに追加処理を行っています。詳細はコードを参照してください。)

window.onload = function() {
   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
   canvas.addEventListener('mousemove', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      shotX=mousePos.x;
      shotY=mousePos.y;
      shot=true;
   }, false);
};

センサーおよびタッチ機能は HTML5 に簡単に追加して利用できます。センサーはベース (キーボード) にあるため、画面の傾きに応じて動作が異なることがあります。そのため、ここでは X と Y の値を入れ替え、画面がキーボードに対して垂直の場合にアプリケーションが最適に動作するようにしています。このコードには WinRT バージョンもあります。ぜひご覧ください:
http://software.intel.com/en-us/blogs/2012/09/28/html5-to-winrt-with-sensor-input (英語)

コード内に詳しい説明があります。

コンパイラーの最適化に関する詳細は、最適化に関する注意事項を参照してください。