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

同カテゴリーの次の記事

Ultrabook™ のセンサーの検出

この記事は、インテル® デベロッパー・ゾーンに掲載されている「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.yevent.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 (英語)

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

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

関連記事

  • Ultrabook のタッチとセンサーに関するリソースUltrabook のタッチとセンサーに関するリソース この記事は、インテル® デベロッパー・ゾーンに掲載されている「Ultrabook Touch and Sensor Resources」の日本語参考訳です。 最新の Ultrabook™ ではハードウェア機能であるタッチおよびセンサーと Windows* 8 […]
  • モバイルデバイス向け HTML5 および JavaScript エンジン JIT の最適化モバイルデバイス向け HTML5 および JavaScript エンジン JIT の最適化 この記事は、インテル® デベロッパー・ゾーン(IDZ)サイトに掲載されている「Graphics Acceleration for HTML5 and Java Script Engine JIT Optimization for Mobile Devices」の日本語参考訳です。 HTML5[1] は、Web […]
  • Ultrabook™ のセンサーの検出Ultrabook™ のセンサーの検出 この記事は、インテル® デベロッパー・ゾーンに掲載されている「Detecting Ultrabook Sensors」の日本語参考訳です。 第 3 世代インテル® Core™ プロセッサー (開発コード名: Ivy Bridge) のリリースにより、市場に変革をもたらす新しいタイプの Ultrabook™ が登場しました。第 […]
  • アプリケーション・ゲーム・インターフェイス実装ガイドアプリケーション・ゲーム・インターフェイス実装ガイド この記事は、インテル® デベロッパー・ゾーンに掲載されている「App Game Interface Implementation Guide」(http://software.intel.com/en-us/html5/articles/app-game-interface-implementation-guide) […]
  • Windows* 8 開発向け Ultrabook™ 機能の互換性Windows* 8 開発向け Ultrabook™ 機能の互換性 この記事は、インテル® デベロッパー・ゾーンに掲載されている「Ultrabook Feature Compatibility Matrix for Windows 8 Development」の日本語参考訳です。 概要 この記事では、Windows* 8 デスクトップ・アプリケーションおよび Windows* […]