Leap Motion入門ハンズオン

1. Leap Motion入門ハンズオン
Microsoft MVP Windows Platform Development
Oracle ACE for RDBMS
TMCNテクニカルエヴァンジェリスト
初音玲
Twitter : @hatsune_
Blog : http://hatsune.hatenablog.jp/
2015.06.09

2. ハンズオンの概要
1. アプリ作成の基礎を学びます
2. Leap対応アプリを作ります
3. じゃんけんWindowsストアアプリを作ります
本資料のダウンロード
http://bit.ly/1T8qD1n

3. LeapMotionの座標系

4. LeapMotionの座標系
Hands
Arms
Fingers
Tools
Gestures
• Circle、Swipe、Key Tap、Screen Tap
Motions
• 拡大縮小、回転、移動
SensorImage

5. 1. アプリ作成の基礎

6. チェック
Microsoft Windows 8.1 (x64)
Visual Studio Community 2013
Leap Motion SDK v2.2.6
⇒[download]
⇒[install]
⇒LeapSDKフォルダまるごとC:¥Leapフォルダにコピー

7. 新しいプロジェクト開始
1. Visual Studioを立ち上げます。
2. 新しいプロジェクトをクリックします。

8. [新しいプロジェクト]ダイアログ
1. Visual C#をクリック
2. Windowsデスクトップをクリック

9. テンプレートを選択してプロジェクトを作成
2. 空のアプリケーションをクリック
3. 名前を「HandsOn」と入力
4. OKをクリック
1. .NET Framework 4.5を選択

10. 主な名称 メニューバー
ソリューションエクスプローラー
エディター
（コードエディタ / XAMLエディタ)

11. ３つのフォルダを作成します
1. プロジェクト名を右クリック
2. [追加]→[新しいフォルダ]とクリック
3. 「Models」と名前を入力
同じように「ViewsModels」「Views」を作成

12. ３つのフォルダを作成
Models
• Kinectと接続するコードを記述
ViewModels
• 複数のModelをまとめるなど
Views
• 画面定義などを記述

13. 不要なファイルの削除
1. 「MainWindow.xaml」を右クリック
2. [削除]をクリック

14. ViewsフォルダにMainWindow.xamlを作成
1. 「Views」を右クリック
2. [追加]→[ウィンドウ]をクリック

15. ViewsフォルダにMainWindow.xamlを作成
1. 「ウィンドウ(WPF)」をクリック
2. 名前を「MainWIndow.xaml」と入力
3. [追加]をクリック

16. ViewsModelsフォルダにMainViewModel.csを作成
1. 「ViewModels」を右クリック
2. [追加]→[クラス]をクリック

17. ViewsModelsフォルダにMainViewModel.csを作成
1. 「クラス」をクリック
2. 名前を「MainViewModel.cs」と入力
3. [追加]をクリック

18. ModelsフォルダにLeapModel.csを作成
1. 「Models」を右クリック
2. [追加]→[クラス]をクリック

19. ModelsフォルダにLeapModel.csを作成
1. 「クラス」をクリック
2. 名前を「LeapModel.cs」と入力
3. [追加]をクリック

20. ここでビルド
1. [F5]キーを押す

21. 実行時エラーの対応
1. [OK]をクリック
2. [デバッグ]→[デバッグの停止]をクリック

22. 実行時エラーの対応
1. App.xamlを右クリック
2. [開く]をクリック

23. 実行時エラー対応
1. MainWindow.xamlを
Views¥MainWIndow.xamlに変更

24. ここでビルド
1. [F5]キーを押す

25. 2. 簡単なLeap対応アプリを作成

26. ここまでの結果
http://bit.ly/1B2DQ5Q
• HandsOn01

27. .NET用関連モジュールを追加します
2. [参照の追加] をクリック
1. [参照設定]を右クリック

28. .NET用関連モジュールを追加します
2. [参照]をクリック
1. [参照]をクリック

29. .NET用関連モジュールの参照
2. [LeapCSharp.NET4.0.dll]をクリック
1. [C:¥Leap¥LeapSDK¥lib]をフォルダを指定
3. [追加]をクリック

30. SDKの取り込み
1. プロジェクト名を右クリック
2. [追加]→[既存の項目]をクリック

31. SDKの取り込み
1. C:¥Leap¥LeapSDK¥lib¥x86フォルダを指定
2. [すべてのファイル]を選択
3. CTRLキーを押しながら[Leap.dll]と
[LeapCSharp.dll]をクリック
4. [追加]をクリック

32. SDKの取り込み
1. CTRLキーを押しながら[Leap.dll]と
[LeapCSharp.dll]をクリック
2. 右クリック
3. [プロパティ]をクリック

33. SDKの取り込み
1. [新しい場合はコピーする]を選択

34. ビルドの構成を変更します
1. [ビルド]→[拡張マネージャー]をクリック

35. ビルドの構成を変更します
2. ここをクリックし、[x86] を選択します。
1. 左のような画面が表示されます。
3. 左のような画面が表示されます。
4. [閉じる] ボタンをクリックし、
設定を終了します。
これにてビルド構成の変更は完了です。

36. LeapModel.csを作成

37. http://bit.ly/1F55hHi
1. 画面を右クリック→[すべて選択]をクリック
2. 画面を右クリック→[コピー]をクリック

38. Visual StudioのLeapModel.cs
1. [編集]→[すべて選択]をクリック
2. [編集]→[貼り付け]をクリック

39. MainViewModel.csを作成

40. http://bit.ly/1MjpZc5
1. 画面を右クリック→[すべて選択]をクリック
2. 画面を右クリック→[コピー]をクリック

41. Visual StudioのMainViewModel.cs
1. [編集]→[すべて選択]をクリック
2. [編集]→[貼り付け]をクリック

42. ここでビルド
アプリが無事立ち上がるが何も起きない
1. [F5]キーを押す

43. MainWindow.xaml.csの編集
Public partial class MainWindow : Window
{
private ViewModels.MainViewModel ViewModel = new ViewModels.MainViewModel();
public MainWindow()
{
InitializeComponent();
this.DataContext = this.ViewModel;
this.ViewModel.LeapStart();
}
private void WindowClosing(object sender, System.ComponentModel.CancelEventArgs e)
{
this.ViewModel.LeapStop();
}
}

44. <Window x:Class="HandsOn.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300">
<Grid>
</Grid>
</Window>
MainWindow.xamlの編集

45. <Window x:Class="HandsOn.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Closing="WindowClosing"
Title="MainWindow" Height="300" Width="300">
<Grid>
<TextBlock VerticalAlignment="Bottom" Text="{Binding Message}"
TextWrapping="Wrap" Foreground="Orange" Margin="10,0,0,0"/>
</Grid>
</Window>
MainPage.xamlの編集

46. ここでビルド
1. [F5]キーを押す

47. Leapをつないでみよう

48. ここでビルド
Leapのデータが表示で来たら成功！
1. [F5]キーを押す

49. 3. じゃんけんアプリを作成
(宿題)

50. ここまでの結果
http://bit.ly/1B2DQ5Q
• HandsOn02

51. じゃんけんアプリの仕組み
ハンズオンで作成したLeapアプリを拡張
右手のFingerを取得
Fingerのプロパティからじゃんけん判定
判定結果をじゃんけんにマッピング

52. 宿題のヒント
http://bit.ly/1B2DQ5Q
• HandsOn03

53. FIN
53