Windowsストア・アプリでのLeap Motion開発［C#］
連載：Leap Motion開発入門（C#編）
【obsolete： 旧コンテンツ】 正式にサポートされているわけではないが、Windowsストア・アプリとしても簡単にLeap Motionアプリを開発できる。その基本的な開発方法を紹介。
今回は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)」テンプレートでプロジェクト（およびソリューション）を作成する
2. ［ソリューション エクスプローラー］の［参照設定］で「LeapSDK\lib」フォルダにある「LeapCSharp.NET4.0.dll」ファイルを追加する
3. 「LeapSDK\lib\x86」フォルダまたは「LeapSDK\lib\x64」フォルダにある「Leap.dll」ファイルおよび「LeapCSharp.dll」ファイルをプロジェクト内に追加する（ここでは「x86」フォルダ以下のDLLファイルを追加した）
4. 追加した「Leap.dll」および「LeapCSharp.dll」のプロパティから［出力ディレクトリにコピー］を「新しい場合にはコピーする」に変更する
5. ［構成マネージャー］から3で追加したプラットフォームに合わせる（x86フォルダ以下を追加したら「x86」に。x64フォルダ以下を追加したら「x64」にする）
プログラムの作成
まずMainPage.xamlファイルにCanvasコントロールを追加する（次のコードを参照）。ここに指を表す点を表示する。Windowsストア・アプリではInkPresenterコントロールが使えないため、Canvasコントロールで代用している。
|
<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>
|
次に、そのコードビハインド・ファイルにLeap Motionからのデータ処理を記述する。基本的なコードは（「Leap Motion実用サンプル（Visual Basic編）」で説明されている）WPFで作る場合と同じだが、表示をInkPresenterコントロールではなくCanvasコントロールで行っているため、点の配置に若干の違いがある。やっていることは同じで、レンダリング周期（＝CompositionTarget.Renderingイベント）でLeap Motionからのデータを取得し、タッチ状態によって表示を変えている。詳細な解説は後の回で行う。
|
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)
{
}
}
}
|
最後にApp.xamlファイルに<Application>要素に「RequestedTheme="Light"」という属性を追加して背景を白色にする。
|
<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">
|
プログラムの実行
以上でプログラムを実行すると、指の動きに応じて、画面に点が表示される。
まとめ
このように、Windowsストア・アプリとしても簡単にLeap Motionアプリケーションを開発できる。ただし、正式に開発がサポートされているわけではないため、Windowsストア・アプリの審査に通るかどうかなど、不明瞭な部分はまだ多い。早めの対応を希望するところだ。
次回はUnityでの開発環境の構築について解説する。
