加速度センサーやジャイロスコープセンサーを使った、3つのセンサーサンプル

前回までは、PROJECT KySSの薬師寺国安が、マーケットプレイスで公開しているアプリ（発行者名：kuniyasu）を例に出しながら、サンプルプログラムを解説しました。

最終回では、これまでの連載でお伝えしきれなかったWindows Phoneのセンサープログラミングについて、私、薬師寺聖から補足して解説します。3つのサンプルを紹介していきますので、ぜひアプリ制作の参考にしてください。

Windows Phone アプリ開発で使えるセンサー

まず、Windows Phone アプリ開発でセンサーからのデータを利用したい場合は、Microsoft.Devices.Sensors 名前空間のクラスを用います。次の4種類のデータを取得できます。

（1）加速度センサー（Accelerometer）

実機の傾きが分かります。

（2）コンパスセンサー（Compass）

磁気強度と方角が分かります。

（3）ジャイロスコープセンサー（Gyroscope）

どのくらいの速さで、どの方向に、どれだけの角度、デバイスの姿勢が変化したかが分かります。

（4）複合モーション（Combined Motion API）

（1）～（3）をまとめて扱える1つの複合APIです。

これらのセンサーにより取得できるデータは、表1のとおりです。

表1：4種類のセンサーで取得できるデータの一覧

クリックで拡大します。

本稿では、加速度センサーを使った「転がるボール」と、ジャイロスコープセンサーを使った「カウンター」、複合モーションを使った「回転する針」の3つのサンプルについて解説します。

このうち、加速度センサーの処理を応用すると、筆者（薬師寺聖）がマーケットプレイスで公開中の「ビジュアル傾斜計 Ver.0.8」のようなアプリになります（図1）。
→参照：ビジュアル傾斜計（Windows Phone/Marketplace）

ジャイロスコープセンサーと複合モーションの処理を応用すると、「センサー計測セット Ver.0.8」のようなアプリになります（図2）。
→参照：センサー計測セット（Windows Phone/Marketplace）

図1：「ビジュアル傾斜計 Ver.0.8」の一画面（クリックで拡大）

図2：「センサー計測セット Ver.0.8」の各計測ページ（クリックで拡大）

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

加速度センサーを使った、転がるボールのサンプル

最初に、加速度センサーを使った「転がるボール」の作り方を解説します。サンプルの動作は以下の通りです。

1. ページをロードした時、楕円の中央に、緑色のボールが表示されています。
2. 「開始」ボタンをタップして実機を傾けると、ボールが楕円の中を移動します。
3. 実機の頭側を下に傾けた時は、遠近法のようにボールが小さくなります。
4. 「停止」ボタンをタップすると、ボールの移動は止まります（図3）。

このボールはExpression Designで描いた単純なpng画像ですが、回転させることによって転がるように見せかけています。

図3：実機を傾けると、ボールが楕円の中を転がる。図は、エミュレーターでの動作確認画面（クリックで拡大）

プロジェクトの作成

VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「Windows Phone アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「AccelerometerSample」という名前を付けています。

Windows Phoneのバージョンは7.1を選択します。ソリューションエクスプローラー内にImageというフォルダを作って、PNG画像（Ball1.png）を追加しておきます。サンプルファイルには画像ファイルは追加済みです。

MainPage.xamlの編集とコントロールの追加

ツールボックスからButtonコントロールを1個、TextBlockコントロールを1個配置します。また、Ellipse（楕円）を描き、Imageコントロールを1個配置します。このImageコントロールの名前は「BallImage」としておき、SourceプロパティにはImageフォルダ内の画像を指定します。

書き出されるXAMLコードをリスト1のように編集します。

リスト1　編集されたXAMLコード(MainPage.xaml)

Nameが「BallImage」のImage要素の中に、Image.Projection要素を追加します。さらに、その子として、PlaneProjection要素を追加します。x:Nameは「MyAngleProjection」としておきます。

ロジックコードを記述する前に、「プロジェクト／参照の追加」で、Microsoft.Devices.Sensors名前空間への参照を追加しておきます。また、Microsoft.Xna.Framework名前空間への参照も追加しておきます。

参照の追加ができたら、xaml.vbを開いて、ロジックコードを記述します。

ロジックコードを記述する

リスト2　(MainPage.xaml.vb)

名前空間のインポートと変数の宣言

加速度計にアクセスする API を提供する、Microsoft.Devices.Sensors名前空間をインポートします。また、Vector3型のセンサーデータを扱うために、Xna.Framework名前空間もインポートしておきます。

加速度センサーオブジェクトと、加速度センサーの生データを格納する変数、楕円の中心点の座標値と長軸と短軸、ボールの画像の幅と高さを代入する変数を宣言します。

このページがロードされた時の処理

デバイスがセンサーをサポートしているかどうかをチェックして、サポートしていなければ、メッセージを表示します。

ボールの幅と高さ、楕円の長軸と短軸の半径を取得します。また、楕円のマージンを取得して、中心点の座標値をもとめておきます。このように、XAML中の値を利用するように記述しておくと、楕円のサイズなどを変更した場合でも、プログラムを変更する必要がないので、レイアウトの微調整が容易です。

ボタンがタップされた時の処理

このサンプルでは、1個のボタンをタップする都度、センシングの開始と停止を切り替えます。センサーオブジェクトが有効であれば、センサーを停止し、ボタンの文字列を「開始」にします。

一方、センサーオブジェクトが空であれば、加速度センサーの新しいインスタンスを作成して、ボタンの文字列を「停止」にしたうえで、センシングを実行します。

AddHandlerステートメントを用いて、センサーの情報が変化したときに発生するCurrentValueChanged イベントにイベント ハンドラーを追加します。非 UI スレッドのデータを UI スレッド上で処理するため、Dispatcher クラスを使います。

センサーデータが更新された時の処理

センサーデータが更新された時、X、Y、Zの3つに分解して生データを取得します。この値は基本的に-1～1の範囲になりますが、念のために範囲外の値をカットしておきます。

実機が頭側に傾くほどボールを小さくして遠近感があるように見せるため、Yの値をもとに、ボールの幅と高さを算出して適用します。

楕円の中のボールの可動範囲と角度からボールの移動距離を計算し、楕円の中心点と幅と高さと移動距離から、ボールの表示位置の座標を計算します。

さらに、ボールそのものにも動きを付けます。XとYのセンサーデータをもとにMath.Atanを使って、ボールを回転させます。

ボールの画像に、計算した座標を適用して移動させます。