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の画面(プロジェクト作成直後)
[画像のクリックで拡大表示]

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

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

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

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

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

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

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

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら