LMC(LeapMotionController)を持っている方は以下のページで試すことができます。(Chrome推奨)https://kray.jp/projects/leap-motion-piano/index.htmlleap.jsの用意ピアノアプリの作り方を紹介するのは音楽知識も多く必要になってくるので、本記事ではleap.jsの基本的な使い方を書いていきます。JavaScriptを使ってブラウザで動かせるLeapMotionアプリの作成には、leap.jsというものが必要なので、下記のリポジトリから持ってきます。https://github.com/leapmotion/leapjsそして、HTMLファイルを用意しleap.jsを読み込むだけで、LMCへの入力をブラウザのJavaScriptで扱えるようになります。これでLMCとブラウザのJavaScriptが連携できることが不思議でしたが、どうやらLeapMotionがWebSocketサーバを立てているらしく、leap.jsはそのサーバと通信をして情報を取っているようです。故に、WebSocket未対応のブラウザでは動きません。読み込んでいれば、Leapオブジェクトを使うことができます。Leap.loopメソッドにフレーム毎のコールバックを登録することにより、フレーム毎の処理を記述することができます。1秒間に何十回も呼ばれる部分なので、コールバック内部に記述する処理のパフォーマンスには注意したほうが良いです。true}を渡しています。Frameオブジェクトloopのコールバック関数に出てくるframeはLeap.Frameのインスタンスです。手指の座標、動き、角度など、全ての情報が詰まっています。ここから欲しい情報をひっぱてきて使うだけなので簡単です。いくつか例を挙げて説明します。frame.fingersこれには現在LMCが認識している指の情報が入っています。}]などなど、使えそうな情報が入っています。冒頭で紹介したピアノでは、ここで取得できるtipVelocityを利用して、早い速度の時は大きい音を出すという細工をしています。frame.handsLeapMotionが認識している手の情報です。handsの中身を見てみると以下のようになっています。]指情報には無い情報として、sphereCenter,shpereRadiusというものがあり、これは手のひらにフィットしている球があるとしたときの中心座標や半径になっています。面白そうな情報なのですが、ピアノでは特に使っていません。frame.gesturesLeap.loopメソッドに渡したenableGesturesオプションにtrueを指定すると、ジェスチャに対応した動作を行ったフレーム内でそのジェスチャの情報を取得することができるようになります。ジェスチャオブジェクトによって、持っているプロパティがバラバラですが、オブジェクトがどのジェスチャに対応しているかどうかはtypeプロパティを参照すればわかります。現在用意されているジェスチャとしては、circleswipekeyTapscreenTapの4つのtypeがあるようです。stateプロパティというものもあり、これはジェスチャの開始、途中、終了に対応した文字列がはいっています。それぞれ、startジェスチャ開始updateジェスチャの途中stopジェスチャ終了となっています。circle指でぐるぐるぐるぐる円を描いているとcircleジェスチャと認識されます。取得できる情報には以下のようなものがあります。*/}そのままですが、centerは円の中心座標、radiusは半径です。冒頭のピアノでcircleジェスチャを行うと、「きらきら星変奏曲」の一部が自動で演奏されます。swipeスマホやタブレット端末でスクロールをする時のように、手をサッと動かすとSwipeになります。*/}swipeとして重要なのはやはりdirectionだと思います。スワイプしている方向がわからなければしょうがないので。ほかにも、speedや、startPositionなど、便利そうな情報が入っています。ピアノでは、グリッサンドの実装にswipeを使ったりもしていましたが、とっても弾き難いのでやめました。keyTapスマホやタブレット端末での画面タップに似ていますが、正しく認識されるためにはコツが必要ようで、すこし難しいです。コツとしては、これぐらい大げさにやることだと思います。以下のような情報取れます。*/}ピアノを作り始めた時の打鍵の実装にはkeyTapを使っていましたが、あまりにも弾き難くなるのでやめました。今はfingerのtipPositionを見て、ある領域に入った時に音を鳴らしています。screenTapkeyTapの奥方向バージョンです。コツがつかめず、個人的にはかなり難しかったです。ペンなどを使うとやりやすいかもしれません。これもとくに目新しい情報はありません。*/}以上のようにLeapMotionのプログラミングはframeに入っている情報をどう扱うかに限ります。LMCは入力装置なので当然ですね。感想メインのコードも短く、イベントループ内でFrameオブジェクトから必要な情報を選んで使用するだけなので、非常に簡単です。エンターテインメント分野だけでなく、普通のwebサイトに組み込むことも現実的なのではないかと思いました。具体的には、「既存のwebサイトにLeapMotionのスワイプでページ送りする機能を組み込む」なんてことをしたいときには、JavaScriptを数行書くだけで出来てしまいます。実際の利用やデバッグで、LMCの操作は腕がかなり疲れるのではないかと思っていましたが、人間慣れるもんですね。たしかに初日はかなり疲れましたが、2日目からはまったく疲れは感じませんでした。デモのコードGithubにピアノのコードを公開しました。leap.jsやMIDI.jsを参考URLから取得して、適切なディレクトリに配置すると動きます。Consoleで限られた操作ができるユ...次の記事Git初心者に捧ぐ!Gitの「これなんで?」を解説し...「いいね!」で応援よろしくお願いします!このエントリーに対するコメント買ってみたものの、使い方がよくわからず挫折しそうになっていたところでした。サンプルのページでピアノが弾けることができて、やる気を取り戻せました。内容確認していませんがコードが置いてあるのも大変助かります。ありがとうございました。date*日本語が含まれない投稿は無視されますのでご注意ください。Glassはフューチャーウェアぽくあり、ボアウェアでもあるかもしれない。Motionも、ボアウェアとフューチャーウェアの要素が少しあるとぼくは思う。ボアウェアは、多かれ少なかれ現在ウェアラブル・デバイス全般に当てはまる面がありそうだ。最初は嬉しくて身に着けるけど結局実用的価値が低くて飽きたら着けないという。fax.0422-26-9781お問い合わせはこちらからどうぞ。