Windows Phoneには、実機が向いている方角を測るコンパス、自分がいる位置を知ることができるGPS、実機の加速度を検知する加速度計などのセンサーがついています。ここでは、カメラとこれらのセンサーを組み合わせたアプリケーションを作ってみましょう。

カメラ画像に方角と地図を表示する

図1●作成したアプリケーションを使用しているところ
図1●作成したアプリケーションを使用しているところ

 このアプリケーションでは、画面の上半分のカメラ画像に方角を表す文字を重ね、さらに下半分に地図を表示させます(図1)。画面の上半分は、Windows Phoneのカメラが写している画像をリアルタイムに表示させています。さらに、画像に重ねて、実機(の背面のカメラ)が向いている方角を東西南北の文字で表示しています。ちょっとわかりにくいかもしれませんが、文字は実機の傾きに合わせて、擬似3次元的に傾けています。

 下半分の画像には、今いる場所の地図を表示します。地図は、実機が向いている方角に合わせて回転します。例えば、実機が南を向いていれば、南を上にして表示する、といった具合です。

プロジェクトを作成する

 アプリケーションの開発を始めましょう。開発ツールは、Windows Phone SDK 7.1と一緒にインストールされた「Visual Studio 2010 Express for Windows Phone」を利用します。Windows Phoneアプリケーションのプラットフォームには、Silverlight for Windows PhoneとXNA Frameworkの2種類が用意されていますが、ここではSilverlightを使うことにしましょう。

 Windowsのスタートメニューで「Visual Studio 2010 Express for Windows Phone」を選んでツールを起動します。統合開発環境(IDE)の画面が開いたら、メニューから「ファイル」→「新しいプロジェクト」を選択してダイアログを開きます。開発言語は「Visual C#」、テンプレートは「Silverlight for Windows Phone」の「Windows Phoneアプリケーション」を選択します。「名前」の欄に適当な名前を入力して「OK」を押すとターゲットとするOSを選択するダイアログが表示されますので、Windows Phone 7.1を選びます*1

画面を設計する

図2●IDEの画面(プロジェクト作成直後)
図2●IDEの画面(プロジェクト作成直後)
[画像のクリックで拡大表示]

 アプリケーションのプロジェクトが作成されると、IDEの画面が現れます(図2)。画面の中央ウィンドウ左側にはアプリケーションの画面をデザインする画面(以降、デザイン画面)、右側にはアプリケーション画面のデザインに対応する「XAML(ザムル)」と呼ばれるXMLベースのマークアップ言語のコードが表示されます。

図3●自動生成されたXAMLのコードから、背景を青くした個所を削除する
図3●自動生成されたXAMLのコードから、背景を青くした個所を削除する
[画像のクリックで拡大表示]

 今回はアプリケーションの画面をなるべく広く使いたいので、画面に表示されている「マイアプリケーション」と「ページ名」という部分を削除してしまいましょう。デザインの画面で削除することもできますが、XAMLのコードでまとめて削除する方が簡単です。

図4●図3の背景を青くした個所のコードを削除後の画面
図4●図3の背景を青くした個所のコードを削除後の画面
[画像のクリックで拡大表示]

 XAMLのコードの画面を大きめに表示し(図3)、Gridタグの内側にある、背景色が青い個所のコードをすべて削除してください。デザイン画面からマイアプリケーションとページ名という文字が消えてすっきりしましたね(図4)。次に、カメラで撮影した画像を表示する部分を作りましょう。

 先ほどXAMLのコードを削除した個所に、リスト1のコードを挿入します。これは、高さ(Height)480、幅(Width)480の矩形(Rectangle)を画面上部に配置し、その矩形にカメラの画像を表示するコードです。Rectangleタグで矩形を配置し、Rectangle.FillタグとVideoBrushタグを組み合わせて、矩形の内側にカメラの画像を表示させています。

 矩形などの図形は、その中の領域をブラシで塗りつぶすことができます。ブラシでは、赤や青など単色で領域を塗りつぶしたり、グラデーションを描いたりするほか、画像やカメラに写った動画を表示させることができます。