PR

画面に並んだ写真が指の動きに反応して回転するLeap Motionプログラムを作る

2013年12月5日(木)
薬師寺 国安

今回のアプリは、ListBoxに表示されている画像の上をタッチしてなぞると、画像がY軸を中心に回転するアプリです。早速、開発手順を見ていきましょう。

まずWPFプロジェクトを作成しよう

今回のLeap MotionアプリもWPFで作成します。

これには、Visual Studio 2012(以下、VS 2012)のIDEを起動して、メニューバーから[ファイル]−[新規作成]−[プロジェクト]と選択して、それにより表示される[新しいプロジェクト]ダイアログで「Visual Basic」のテンプレートから「WPF アプリケーション」を選択します。上記VS2012はVS2013でも同じです。

※Leap Motionは、.NET Framework 3.5と4.0に対応しています。しかし、.NET Framework 4.5でも動作します。今回のアプリは全て.NET Framework 4.5で作成しています。しかし、あくまでも対応しているのは、.NET Framework 3.5と4.0です。心配な方は、.NET Framework 4.0で作成すると安心でしょう。

[名前]欄には、ここでは「ScaleTransformLeapMotion.xaml」と指定します。

ソリューション・エクスプローラー内にImagesというフォルダを作成して、10枚のPNG画像を配置しています。画像サイズは640×480です。今回はPNG画像を使用していますが、JPEG画像でも問題はありません。その場合は、これから作成するXMLファイルの内容を適時書き換えてください。

XMLファイルの追加

[ソリューション エクスプローラー]でプロジェクト項目を選択した状態で、VS 2012のメニューバーから[プロジェクト]−[新しい項目の追加]と選択します。そこで表示されるダイアログで、[データ]から「XML ファイル」を選択し、[名前]欄に「forest.xml」と指定します。

追加したファイルがXMLエディターで開かれるので、下記のリスト1のような内容のXMLコードを記述します。

リスト1 forest.xml

<?xml version="1.0" encoding="utf-8" ?>
<画像>
  <画像名>林_01.png</画像名>
  <画像名>林_02.png</画像名>
  <画像名>林_03.png</画像名>
  <画像名>林_04.png</画像名>
  <画像名>林_05.png</画像名>
  <画像名>林_06.png</画像名>
  <画像名>林_07.png</画像名>
  <画像名>林_08.png</画像名>
  <画像名>林_09.png</画像名>
  <画像名>林_10.png</画像名>
</画像>

要素に指定している画像ファイル名には、[ソリューション エクスプローラー]内の「Images」フォルダ内に実在する画像ファイルの名前を記述しています。従って、それぞれの状況に合わせて実際のファイル名に書き直してください。

forest.xmlファイルは.EXEファイルと同じフォルダに常に配置したいので、[ソリューション エクスプローラー]で「forest.xml」項目の右クリック・メニューで[プロパティ]を実行し、[プロパティ]ウィンドウの[ビルド アクション]の値を「コンテンツ」に、また[出力ディレクトリにコピー]の値を「常にコピーする」に変更しておきます。

ダウンロードされたサンプルファイルには、画像ファイルやXMLファイルは追加済みです。

ポーリング方式の採用

今回のサンプルは4回目のサンプルと同様、「ポーリング方式」を作用しています。「ポーリング方式」とは、Controllerクラス(Leap名前空間)だけを使用した方式です。詳細については、「C#によるLeap Motion開発の全体像」を参照してください。

WPFの基本的な作成手順は、「画面上の図形を5本の指で操作する基本的なLeap Motionプログラムを作る」と同じ手順となるので、説明を割愛します。具体的な手順は、第1回の「参照の追加」「プロジェクトのルートに「LeapCSharp.dll」と「Leapd.dll」を追加する」「プロパティを設定する」を参考にしてください。

今回のLeap Motionアプリについて

今回のアプリは、ListBoxに表示されている画像の上をタッチして画像をなぞると、画像がY軸を中心に回転していくアプリです(図1参照)。

図1:タッチしてなぞった画像がY軸を中心に回転する(クリックで拡大)

実際に動かした動画は次のようになります。

画面のレイアウト(MainWindow.xaml)

ツールボックスからListBox1という名前のListBoxコントロールを1個配置し、一番前面にタッチ・ポイントを表示する、名前がpaintCanvasというInkPresenterを配置します。

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

プロパティ要素内に、Key名が「WrapPanelTemplate」の要素を定義します。その子要素として要素を配置し、Widthプロパティに「1800」と指定します。この値はListBoxのWidthに近い値です。
ここで定義した各テンプレート(WrapPanelTemplate)を、StaticResourceマークアップ拡張機能を使用して、ListBox1のItemsPanelプロパティにリソースとして参照させます。具体的には、ItemsPanelプロパティに「WrapPanelTemplate」を参照させます。

一番前面にpaintCanvasという名前のInkPresenterを配置します。

リスト1 書き出され編集されたMainWindow.xaml

<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
  <Window.Resources>
    <ItemsPanelTemplate x:Key="WrapPanelTemplate">
      <WrapPanel Width="1800"/>
    </ItemsPanelTemplate>
  </Window.Resources>
  <Canvas>
    <ListBox x:Name="ListBox1" HorizontalAlignment="Left" Height="574" VerticalAlignment="Top" Width="1801" Canvas.Left="41" Canvas.Top="145"  ItemsPanel="{StaticResource WrapPanelTemplate}"/>
    <InkPresenter Name="paintCanvas"/>
  </Canvas>
</Window>

普通ならListBoxコントロールに画像を表示させる場合、縦一列に表示されるのですが、こうすることで横方向に表示されるようになり、ListBoxコントロールのWidth値以上になれば、折り返して自動的に2列で表示されるようになります。

レイアウトは図2のようになります。

図2:各コントロールをレイアウトした(クリックで拡大)
Think IT会員限定特典
  • 画面に並んだ写真が指の動きに反応して回転するLeap Motionプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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