PR

Windows Phoneで自宅の様子をリモート監視するKinectプログラムを作ってみる

2012年10月15日(月)
薬師寺 国安

プロジェクトの作成(Windows Phoneアプリケーション)

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「インストールされたテンプレート」から「Silverlight for Windows Phone」を選択し、右に表示される項目から「Windows Phone アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「KINECT_WindowsPhone_CheckPerson」という名前を付けています。Windows Phone OSのバージョンは7.1を選択します。

参照の追加

VS2010のメニューから「プロジェクト(P)/参照の追加(R)」と選択して、各種コンポーネントを追加しておきます。今回追加するのは、Coding4Fun.Kinect.KinectService.CommonとCoding4Fun.Kinect.KinectService.PhoneClientとSystem.Xml.Linqの3つです。「.NET」タブ内に表示されていないDLLファイルは「参照」タブからDLLファイルを指定します。

Coding4Fun.Kinect.KinectService.Common.dlとCoding4Fun.Kinect.KinectService.PhoneClient.dllは、kinectservice.zipを解凍したフォルダの、\KinectService\Phone Client\フォルダ内に存在しますので、これを指定してください。System.Xml.Linqは「.NET」タブ内にあります。

コントロールの配置

ツールボックスからデザイン画面上にTextBlockコントロールを4個、Imageコントロールを1個、ListBoxコントロールを1個、Buttonコントロールを1個配置します。NameがTextBlock1というTextBlockは非表示にしておきます。ここにはKinectセンサーの視野範囲内にプレイヤーが入ったかどうかを判別するブール値を書き込んでいます。もうひとつNameがinTextBlockというTextBlockも非表示としておきます。ここには、現在の年月日時間分秒を書き込んでいます。書き出されるコードはリスト1、レイアウトは図6になります。

リスト1 (MainPage.xaml)

  • (1)Kinectセンサーの視野範囲内にプレイヤーが入ったかどうかを判別するブール値を格納するTextBlockコントロールで非表示にしておきます。
  • (2)実写を表示するImageコントロールです。
  • (3)Kinectセンサーの視野範囲内のプレイヤーがいると、その時点の年月日時間分秒が追加されて表示されるListBoxコントロールです。
  • (4)現在の年月日時間分秒を格納するTextBlockコントロールで非表示にしておきます。
  • (5)IPアドレスを入力するTextBoxコントロール(addressTextBox)です。
<phone:PhoneApplicationPage 
  x:Class="KINECT_WindowsPhone_CheckPerson.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  shell:SystemTray.IsVisible="True">
 
  <!--LayoutRoot は、全てのページ コンテンツが配置されるルート グリッドです-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <TextBlock Height="61" HorizontalAlignment="Left" Margin="141,490,0,0" Name="TextBlock1" Text="" VerticalAlignment="Top" Width="162" FontSize="28" FontWeight="Bold" Visibility="Collapsed" />■(1)
      <Image Height="336" Name="Image1" Stretch="Fill" Width="448" Margin="16,41,16,391" />■(2)
      <ListBox Height="98" HorizontalAlignment="Left" Margin="20,563,0,0" Name="ListBox1" VerticalAlignment="Top" Width="436" FontSize="24" FontWeight="Bold" Foreground="Gold" />■(3)
      <Button Content="データ一覧" Height="84" HorizontalAlignment="Left" Margin="18,467,0,0" Name="dataButton" VerticalAlignment="Top" Width="433" />
      <TextBlock Height="48" HorizontalAlignment="Left" Margin="16,687,0,0" Name="inTextBlock"  VerticalAlignment="Top" Width="413" FontSize="28" FontWeight="Bold" Visibility="Collapsed" />■(4)
      <TextBlock Height="46" HorizontalAlignment="Left" Margin="16,415,0,0" Name="TextBlock3" Text="Address" VerticalAlignment="Top" Width="81" />
      <TextBox Height="71" HorizontalAlignment="Left" Margin="90,396,0,0" Name="addressTextBox"  VerticalAlignment="Top" Width="271" />■(5)
      <Button Content="OK " Height="67" HorizontalAlignment="Left" Margin="352,396,0,0" Name="okButton" VerticalAlignment="Top" Width="84" />
    </Grid>
  </Grid>
 ~コード略~
</phone:PhoneApplicationPage>
図6:各種コントロールがレイアウトされた。非表示となるTextBlock1とinTextBlockは表示されていない。適当な位置に配置する(クリックで拡大)

次に[データ一覧]ボタンをクリックして遷移する、DataIchiranPage.xamlを作成します。

Windows Phone 縦向きのページ(DataIchiranPage.xaml)の追加

VS2010メニューの「プロジェクト(P)/新しい項目の追加(W)」と選択して、「Windows Phone 縦向きのページ」を選択します。「名前(N) 」にはDataIchiranPage.xamlと指定して[追加(A)]ボタンをクリックします(図7)。

図7:Windows Phone縦向きのページ(DataIchiranPage.xaml)を追加する(クリックで拡大)

コントロールの追加(DataIchiranPage.xaml)

ツールボックスからListBoxとButtonコントロールを1個ずつ配置します。

書き出されるXAMLコードは省略します。レイアウトは図8のようになります。

図8:各コントロールを配置した(クリックで拡大)

次に、ソリューションエクスプローラー内のMainPage.xamlを展開して表示される、MainPage.xaml.vbをダブルクリックしてリスト2のコードを記述します。

Think IT会員限定特典
  • Kinectセンサーの前を通過する人物を認識するサンプルプログラム

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています