Blogスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。Blog株式会社インテリジェントテクノロジーの技術情報ブログです。MotionJavaScriptChromeこんにちは、武村です。「leap.jsが必要です」とお伝えしました。今回は、そのleap.jsとアプリ側JavaScriptの関係について書いていきます。最初に白状しておきますが、調べていくうちに実はleap.jsは必須ではないことが分かりました。あるとないとでは開発のしやすさに雲泥の差があります。その理由は、この記事を読んでLeapMotionの仕組みを理解すると分かるでしょう。それではLeapMotionの仕組みについて紹介いたします。LeapMotionを使うにあたって最初にLeapMotionソフトウェアをPCにインストールしました。あのソフトウェアは一体何者でしょうか?その正体はUSB接続したLeapMotionからのモーション情報を扱うバックグラウンドプログラムです。バックグラウンドで動くプログラムは、Daemon(WindowsではService)と名付けられているので、以降この記事では「LeapMotionDaemon」と呼びます。LeapMotionDaemonは、アプリに対してモーション情報を2種類の方法で提供しています。C++で書かれたライブラリを呼び出すWebSocket通信によるJSON形式データの提供LeapMotionDaemonのライブラリはC++で書かれているので、アプリの開発言語によってモーション情報の取得方法が分かれます。Interfaceを参考にしてください。今回は開発言語をJavaScriptに絞って、WebSocket通信による方法と、Leap.jsライブラリを使う方法の2通りのモーション情報取得方法を説明します。1.WebSocket通信による取得LeapMotionDaemonは、デフォルトでlocalhost(127.0.0.1)のポート6437でWebSocketサーバを立てています。通信を行うと、モーション情報が25~200fps(毎秒フレーム)で返ってきます。LeapMotionコントロールパネルにてトラッキング優先度が、バランス/精度/高速から選べます。それによりフレームスピードが変わってきます。ちなみに私の環境だと、動きがない時で25fps、動きがあるときで98fpsくらいでした。試しにChromeブラウザの拡張機能を使ってWebSocketサーバへ簡単に通信してみましょう。Clientをインストールします。Clientが追加されますので、起動すると以下のようなタブが開きます。LocationのURLにws://localhost:6437と入力して[Open]ボタンを押すと、ログがすごい速さで書き出されます。1フレーム1行ですので、最低でも毎秒25行は書き出されます。LeapMotionが動きを検知していない時の1フレームの内容は以下の通りです。このように細かい数値がたくさん含まれています。ここには載せませんが少し動きがあるとこれの3~4倍のモーション情報量になります。この数値などを解析してアプリケーションでの動きに反映させていけばいいわけですが、自分で実装するにはかなり骨が折れます。そこで通常JavaScriptでアプリを開発するのに使われるのが、「Leap.js」です。http://hatsune.hatenablog.jp/entry/2013/08/27/161747つまりLeap.jsがWebSocket通信でデータを取得し解析をしてくれるので、アプリは「ジェスチャ」に対してプログラミングを行う事ができます。前回作成したサンプルアプリのJavaScriptプログラムを例に、ページが読み込まれてからどういった処理が行われているか段階ごとソースコードを見ていきます。/***以下省略***/コントローラクラスのインスタンスを作成するときに以下の様なleap.js内のコンストラクタ関数が呼ばれます。this.connectionType(opts);でWebSocket通信に必要なホストとポートなどを設定するために、以下のコンストラクタ関数が呼び出しています。/**中略**/}これでコントローラのインスタンスが作成されました。次にコントローラを接続します。以上のメソッドが実行されると、leap.jsの以下のメソッドが呼び出されます。&quot;.json&quot;;}以上のコードからLeap.js内でWebSocket通信を行っているのが分かりました。Controllerインスタンスを作成してジェスチャと状態に対してcallbackを指定しておくと、ジェスチャが起きたときに各モーション情報(距離、座標、指の本数、手の本数など)が渡されます。前回作成したサンプルアプリではスワイプジェスチャが終了した時に以下の様なcallbackを指定してスワイプジェスチャの距離をもとにスクロールが行われるようにしました。&quot;fast&quot;);});サンプルでは使っていませんが、その他にも指の本数、手の本数、各指の位置など様々なモーション情報を取得することが可能です。コチラを参考にしてください。まとめ結論として、JavaScriptからはleap.jsを使うのが一般的であると言えます。今後はLeapMotionに限らずこういった次世代デバイスがどんどん出現してくる時代となるでしょう。遅れを取らないためにも新しい物・技術にたくさん触れて、このブログで紹介していきたいです。Blog|ブログを報告する。