ProcessingやWindows 8.1アプリでLeapの空間ジェスチャを使うには：PC制御UIの最先端Leapアプリ開発入門（3）（4/4 ページ）

画面タッチやマウスなどのように“触れる”ことなく空中ジェスチャでPC操作が可能な新しいデバイスLeap Motionを使い、これまでにないアプリを開発しましょう。今回は、ゲームループやLeapのジェスチャ3種Circle、Swipe、Tap、ProcessingのLeapジェスチャアプリ、そしてMVVMパターンで指の数を検出するC#アプリについて解説します。

[密葉優，＠IT]

応用編：指の数を使ってジェスチャを行う？

　今回は、前半でProccesingアプリでのLeapのジェスチャについて紹介しましたが、先ほどのWindowsストアアプリではジェスチャは使っていません。取得しているのは指の数だけです。

　しかし、指の数も少しアイデアを加えれば立派なジェスチャになります。例えば、このイラストであれば、指先の検出数が左から、0本、2本、5本となります。

　もう、お気付きですね。Leapで指の数が検出できれば、じゃんけんアプリができます。それも、とても簡単に実装できます。実装には指の数を表示する手前に、数をイラストに変換するConverterを挟みます。

　ConverterはデータをBindingするときに、値を変換する機能です。Converterにはパラメータを1つ付けられます。今回は、パラメータとBindingする値が同じだったらVisibilityをVisibleに、違っていれば、CollapsedにするSameToVisibilityConverterを用意しました。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
namespace LeapSample.Common
{
    public sealed class SameToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return value.ToString() == parameter.ToString() ? Visibility.Visible : Visibility.Collapsed;
        }
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return value.ToString() == parameter.ToString() ? Visibility.Visible : Visibility.Collapsed;
        }
    }
}

　そして、コントロールを使って、イラストを3つ重ねて表示します。

　この3つのImageコントロールのVisibilityに指の数をSameToVisibilityConverterを使ってBindingします。

　SameToVisibilityConverterのパラメータには、グーなら0を、チョキなら2を、パーなら5を入力してください。XAMLにすると以下のようになります。

<Image HorizontalAlignment="Center" Height="200" VerticalAlignment="Center" Width="200" Grid.Column="1" Source="ms-appx:///Assets/janken-01.png" Visibility="{Binding Item.FingerCount, ConverterParameter=0, Converter={StaticResource SameToVisibilityConverter}}"/>
<Image HorizontalAlignment="Center" Height="200" VerticalAlignment="Center" Width="200" Grid.Column="1" Source="ms-appx:///Assets/janken-02.png" Visibility="{Binding Item.FingerCount, ConverterParameter=2, Converter={StaticResource SameToVisibilityConverter}}"/>
<Image HorizontalAlignment="Center" Height="200" VerticalAlignment="Center" Width="200" Grid.Column="1" Source="ms-appx:///Assets/janken-03.png" Visibility="{Binding Item.FingerCount, ConverterParameter=5, Converter={StaticResource SameToVisibilityConverter}}"/>

　実行してみましょう。指の数に応じて、グーチョキパーが表示されます。Leapに用意されたものでなくても、少し工夫すれば、立派なジェスチャになりますね。

Leapアプリでコンテストに参加してみては？

　Windowsストアアプリを開発すれば、現在行われている「2013流行語アプリ選手権＆総選挙」にも応募できます。

　また、Leap Motionを使ったWindowsストアアプリは「デバイスと大連携でしょ」部門の対象にもなります。アプリ開発用素材を使えば、画像や3Dモデルも利用でき、音声素材には、じゃんけんのmp3ファイルもあります。後は今出しょう子に合わせて可愛らしくデザインすれば、じゃんけんアプリの完成するので、応募してみてはいかがでしょうか。

関連リンク

• 2013流行語アプリ選手権＆総選挙 by ＠IT Windowsタブレット向けアプリ開発

本コンテストでは、2013年9月1日〜12月1日に新たにWindowsストアに新規公開されたアプリを募集します。入賞したアプリの製作者には、総額130万円の賞金が授与されますので、ふるってご応募ください。

著者プロフィール

蜜葉 優

1988年神戸生まれ。UIデザインからプログラミング、表現までやりたい、自称クリエイティブデザイナ

“さわってみたい”を創ることが目標。フィジカルコンピューティングなどの試作を行う傍ら、コミュニティ活動ではExpression Blendを中心としたセッションを行っている