読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

次世代操作デバイス「LeapMotion」を使ったWebアプリを作ってみました

Leap Motion JavaScript Chrome

こんにちは、武村です。

突然ですが、トム・クルーズ主演の映画『マイノリティ・リポート』ってご存知ですか。舞台はずっと先の未来2058年で、人々は空中で手を動かしてパソコンを操作しています。

肩が疲れそう・・・。という心配はさておき、先進的でかっこいいですよね。
今回は「そんな技術がもう現実にある」ということで、Leap Motionという
空中ジェスチャー操作デバイスを使った簡単なWebアプリを作ってみました。


LeapMotionとは、2013年7月に発売された新しいコンピュータ操作デバイスです。
百聞は一見に如かずということで、以下の動画を見ればどんなものかご理解いただけるでしょう。


Introducing the Leap Motion - YouTube

マウス操作から画面を直接タッチするのが受け入れられるようになってからまだ数年というのに、技術の進歩はすばらしいですね。
遅れを取らないためにも、さっそくいじっていきましょう。

慣れ親しむ

まずLeapMotion本体を買わないと始まりませんので、準備という事で以下の3ステップをGigazineさんの記事を参考に行って下さい。

環境ですが、WebSocketに対応しているブラウザが必要です。
ChromeまたはFirefoxの最新版を使っていれば特に問題ありません。

Step1. LeapMotionを手に入れる
Step2. インストール
Step3. サンプルアプリをいじってみる

LeapMotionを手に入れ、操作には慣れたでしょうか。
私はGoogle Earthで酔ってしまい、肩も疲れてしまいました。
それではいよいよ本題の簡単なWebアプリを作成していきましょう。

作ってみる

今回なにを作るかと言うと、

ブラウザ上にたくさんの写真を横1列にならべて
スワイプジェスチャーで横スクロールできるようなWebアプリ

です。完成形がコチラです。

動画が小さくて分かりづらかったかもしれませんが、
ディスプレイの下部に写っている写真が手の動きに合わせてスクロールしていたのは確認できたでしょうか。
今回はこれを作ります。

ディプレイ上部のビジュアライザーはLeapMotionをインストールすると入っているソフトウェアです。
手をリアルタイムで検知して、手の形や指の位置などを表示してくれます。

ソースは以下のようになっています。

index.html

LeapMotionの情報をアプリ側で取得するには、leap.jsが必要です。
ダウンロードするか、http://js.leapmotion.com/0.2.0/leap.jsから読み込みましょう。
jQueryも使うので読み込んでおきます。

・styleタグ…写真が横並びになり、横スクロールできるようにしています。
・bodyタグ…写真を並べているだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>LeapMotionSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://js.leapmotion.com/0.2.0/leap.js"></script>
    <script src="javascript/main.js"></script>
    <style>
#pictures img {
    display: inline-block;
}

div#pictures {
    white-space: nowrap;
    overflow-x: scroll;
    margin-top: 200px;
}
    </style>
</head>

<body>
    <div id="pictures">
        <img src="images/1.jpg" style="width:300px; height:180px" />
         /********** 20枚写真を並べているだけのため省略 **********/
        <img src="images/20.jpg" style="width:300px; height:180px" />
    </div>
</body>
</html> 

main.js

それぞれの働きはコメントとして書きましたので、そちらをお読みください。

$(document).ready(function() {
    // Leapコントローラークラスのインスタンスを作成
    var controller = new Leap.Controller({enableGestures: true});

    var position = 0;  // スクロールの位置

    // スワイプが終了(stop)した時に呼び出される
    controller.gesture('swipe').stop(function(g) {

        // 引数にはその動作の一連の情報が配列で入ってくる
        // なので最後の情報がストップ時の情報
        var stopGesture = g.gestures[g.gestures.length - 1];

        // スタート位置とストップ位置を取得する
        var startX = stopGesture.startPosition[0];
        var stopX = stopGesture.position[0];

        // スワイプの距離をスクロール量の基準にする
        // スクロール量が少ないので2倍とする
        position += (startX - stopX) * 2;

        // jQueryのアニメーションを使ってスクロールさせる
        $("#pictures").animate({scrollLeft: position + "px"}, "fast");
    });

    // Leapコントローラーを接続(起動)する  
    controller.connect();
});

まとめ

予想より簡単にコーディングできました。しかし紹介動画のように軽快な動きにはならず、まだまだ今後に期待というところもあります。いずれにしろ未来を先取りしたようで楽しかったです。

次回は「LeapMotionのイベント情報をJavaScriptで取得している仕組み」について技術的な話をしていきます。