Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Windowsストア・アプリでのLeap Motion開発[C#]

Windowsストア・アプリでのLeap Motion開発[C#]

  • このエントリーをはてなブックマークに追加

連載:Leap Motion開発入門(C#編)

【obsolete: 旧コンテンツ】 正式にサポートされているわけではないが、Windowsストア・アプリとしても簡単にLeap Motionアプリを開発できる。その基本的な開発方法を紹介。

Natural Software 中村 薫
2013年9月17日
本稿はLeap Motion SDK バージョン1に基づいた記事です。すでにバージョン2の連載記事に改訂しており、その改訂の際に本稿の内容はカットされました。同じLeap Motionデバイスで、最新のSDKバージョン2を利用できますので、最新版SDKをご利用ください。

 今回はWindowsストア・アプリでのLeap Motion開発について解説する。ただし前回も書いたとおり、公式な動作環境ではないため自己責任としていただきたい。今後、正式に対応したときのための参考という位置付けにしていただけると幸いだ。

 サンプル・コードは次のリンクで公開しており、Visual Studio Express 2012 for Windows 8での動作確認を行っている。

Windowsストア・アプリの開発環境を構築する

 Windowsストア・アプリの開発環境を構築する。基本的な手順はWPFなど一般的なWindowsデスクトップ・アプリの手順と同じだ(参考:「Leap Motion実用サンプル(Visual Basic編)」)。一般的なデスクトップ・アプリ開発と比べてLeap Motion開発で一点だけ異なるのが、LeapCSharp.NET4.0.dllファイルへの参照設定とともに、実行に必要なLeap.dllファイルおよびLeapCSharp.dllファイルをプロジェクトに含めて実行場所に配置する必要があることだ。具体的な手順は後述する。

Leap Motionを使ったWindowsストア・アプリの開発手順

 Leap Motionのサイトにある「Touch Emulationサンプル」をWindowsストア・アプリとして動かしてみよう。

ソリューションおよびプロジェクトの作成

1. Windowsストア・アプリの「新しいアプリケーション (XAML)」テンプレートでプロジェクト(およびソリューション)を作成する
Windowsストア・アプリの新規プロジェクトを作成する(今回は「App3」という名前で作成している)
2. [ソリューション エクスプローラー]の[参照設定]で「LeapSDK\lib」フォルダにある「LeapCSharp.NET4.0.dll」ファイルを追加する
LeapCSharp.NET4.0アセンブリを参照設定に追加する
LeapCSharp.NET4.0アセンブリを参照設定に追加する
3. 「LeapSDK\lib\x86」フォルダまたは「LeapSDK\lib\x64」フォルダにある「Leap.dll」ファイルおよび「LeapCSharp.dll」ファイルをプロジェクト内に追加する(ここでは「x86」フォルダ以下のDLLファイルを追加した)
Leap.dllファイルおよびLeapCSharp.dllファイルを追加する
4. 追加した「Leap.dll」および「LeapCSharp.dll」のプロパティから[出力ディレクトリにコピー]を「新しい場合にはコピーする」に変更する
追加した2つのDLLファイルのプロパティを変更する
追加した2つのDLLファイルのプロパティを変更する
5. [構成マネージャー]から3で追加したプラットフォームに合わせる(x86フォルダ以下を追加したら「x86」に。x64フォルダ以下を追加したら「x64」にする)
プラットフォームを変更する

プログラムの作成

 まずMainPage.xamlファイルにCanvasコントロールを追加する(次のコードを参照)。ここに指を表す点を表示する。Windowsストア・アプリではInkPresenterコントロールが使えないため、Canvasコントロールで代用している。

XAML
<Page
  x:Class="App3.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:App3"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
 
  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <!-- Canvasを追加する -->
    <Canvas x:Name="CanvasPaint" />
  </Grid>
</Page>
指の点を表現するためのCanvasコントロールを追加する(MainPage.xaml)

 次に、そのコードビハインド・ファイルにLeap Motionからのデータ処理を記述する。基本的なコードは(「Leap Motion実用サンプル(Visual Basic編)」で説明されている)WPFで作る場合と同じだが、表示をInkPresenterコントロールではなくCanvasコントロールで行っているため、点の配置に若干の違いがある。やっていることは同じで、レンダリング周期(=CompositionTarget.Renderingイベント)でLeap Motionからのデータを取得し、タッチ状態によって表示を変えている。詳細な解説は後の回で行う。

C#
using Leap;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;
 
namespace App3
{
  /// <summary>
  /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
  /// </summary>
  public sealed partial class MainPage : Page
  {
    Controller leap;
 
    public MainPage()
    {
      this.InitializeComponent();
 
      leap = new Controller();
 
      CompositionTarget.Rendering += CompositionTarget_Rendering;
    }
 
    void CompositionTarget_Rendering( object sender, object e )
    {
      CanvasPaint.Children.Clear();
      var windowWidth = (float)ActualWidth;
      var windowHeight = (float)ActualHeight;
 
      Leap.Frame frame = leap.Frame();
      InteractionBox interactionBox = leap.Frame().InteractionBox;
 
      foreach ( Pointable pointable in leap.Frame().Pointables ) {
        Leap.Vector normalizedPosition = interactionBox.NormalizePoint( pointable.StabilizedTipPosition );
        float tx = normalizedPosition.x * windowWidth;
        float ty = windowHeight - normalizedPosition.y * windowHeight;
 
        Color color = Color.FromArgb( 0, 0, 0, 0 );
        if ( pointable.TouchDistance > 0 && pointable.TouchZone != Pointable.Zone.ZONENONE ) {
          var alpha = 255 - (int)(255 * pointable.TouchDistance);
          color = Color.FromArgb( (byte)alpha, 0x0, 0xff, 0x0 );
        }
        else if ( pointable.TouchDistance <= 0 ) {
          var alpha = -(int)(255 * pointable.TouchDistance);
          color = Color.FromArgb( (byte)alpha, 0xff, 0x0, 0x0 );
        }
        else {
          var alpha = 50;
          color = Color.FromArgb( (byte)alpha, 0x0, 0x0, 0xff );
        }
 
        // 点を表示する
        var ellipse  = new Ellipse()
        {
          Width = 40,
          Height = 40,
          Fill = new SolidColorBrush( color ),
        };
 
        Canvas.SetLeft( ellipse, tx );
        Canvas.SetTop( ellipse, ty );
 
        CanvasPaint.Children.Add( ellipse );
      }
    }
 
    /// <summary>
    /// このページがフレームに表示されるときに呼び出されます。
    /// </summary>
    /// <param name="e">このページにどのように到達したかを説明するイベント データ。Parameter
    /// プロパティは、通常、ページを構成するために使用します。</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }
  }
}
Leap Motionからのデータ処理を記述する(MainPage.xaml.cs)

 最後にApp.xamlファイルに<Application>要素に「RequestedTheme="Light"」という属性を追加して背景を白色にする。

XAML
<Application
  x:Class="App3.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:App3"
  RequestedTheme="Light">
背景を白色にするための属性を追加(App.xaml)

プログラムの実行

 以上でプログラムを実行すると、指の動きに応じて、画面に点が表示される。

今回のサンプル・プログラムの実行結果

まとめ

 このように、Windowsストア・アプリとしても簡単にLeap Motionアプリケーションを開発できる。ただし、正式に開発がサポートされているわけではないため、Windowsストア・アプリの審査に通るかどうかなど、不明瞭な部分はまだ多い。早めの対応を希望するところだ。

 次回はUnityでの開発環境の構築について解説する。

サイトからのお知らせ

Twitterでつぶやこう!