HTML5:待つことに慣れていない人のためのセンサー

モバイルコンピューター市場は急速に変化し始めており、標準コンポーネントに加えて、タブレットやスマートフォンに続くウルトラブックにはセンサーとタッチスクリーンが装備されています。 センサーは開発者に新しい視点を開き、ソフトウェア製品を使用するための新しいモデルを作成できるようにします。 モバイルアプリケーションの市場を見ると、加速度計、ジャイロスコープ、コンパスをゲームコントローラとして使用してゲームをプレイする機会に驚かないでしょう。



デスクトップアプリケーションへのセンサーサポートの追加は簡単になりました;必要なすべてのAPIは既に利用可能です。 Windows 7およびWindows 8のデスクトップアプリケーションには、サポートされているセンサーに関する情報を取得し、そのデータを読み取ることができるセンサーと場所のプラットフォームがあります。 Windows UIアプリケーションでは、APIを使用してこのためにWindows RTのセンサーを操作できます。



Webアプリケーションはどうですか? ここでも、W3CコンソーシアムはWeb用のセンサーAPIを開発しています。 さらに、センサーを操作するための機能は、一部のバージョンのモバイルブラウザーで既に実装されています。たとえば、 デバイスの向きイベントの処理などです。



数週間、私はWebアプリケーションでセンサーを使用することに興味を持ち、Windowsブラウザーのいずれもセンサーをサポートしていないことがわかりました。 リラックスしてサポートが表示されるまで待つことができますが、彼らが言うように、これは私たちの方法ではありません。 かつて、私の好奇心を満たすために、本質的にDLLライブラリであるNPAPIプラグインを含むGoogle Chromeの拡張機能を作成する可能性を研究しました。 私はこの経験を実践に移すことに決め、その結果、 Sensors for Chrome拡張機能ができました。



仕組み



前述したように、この拡張機能は、Sensor and Location Platform APIを介してセンサーと連携するNPAPIプラグインに基づいています。 プラグインをロードすると、利用可能なすべてのセンサーが一覧表示され、傾斜計または3Dコンパスが検索されます。 センサーが見つかった場合、プラグインはインターフェースを登録し、新しいセンサー測定値に関する情報を含むプラットフォームからの通知の受信を開始します。 このデータを受け取った彼は、それらを拡張機能のバックグラウンドページにリダイレクトし、次に、アクティブなブラウザタブのページに送信します。



データを受信するために、ページはリスナーを登録し、データが到着すると受信します。 ページ上のデータを受け取るコードは次のようになります。



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







event.dataオブジェクトでは、アプリケーションのタスクに応じて解釈できるx、y、z値が使用可能になります。



拡張に加えて、テスト用のシンプルなMazeアプリケーションも作成し、mr doob- Ball Poolのサンプルコードをわずかに変更しました。











両方のアプリケーションは、Box2Dを使用して実装されます。両方で、デバイスの位置を変更すると重力に影響します。 傾斜計データ受信ハンドラーの例:



 window.addEventListener("message", function(event) { if(event.data.type && (event.data.type == "INCLINOMETER_DATA")) { gravity.x = Math.sin((event.data.y) * Math.PI / 180) ; gravity.y = Math.sin((Math.PI / 4) + event.data.x * Math.PI / 180); } }, false);
      
      







センサーを備えた「ハードウェア」はないが、すでに試してみたい場合は、 この記事で説明する「仮想」センサーを使用できます。



一般に、センサーで遊ぶのが待ちきれず、あなたがHTML5開発者である場合、ここにターンキーソリューションがあります。 使用して、実験して、知っている人は、おそらくゲーム中にユニークなアイデアを思いつき、アプリケーションを使用する新しいモデルが開きます。



All Articles