leap motionでつくってみた(後編)#sa_study
TRANSCRIPT
![Page 1: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/1.jpg)
LEAP MOTION でつくってみた (後編)
Hikari Fukasawa
![Page 2: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/2.jpg)
LEAP MOTION
Leap Motion(リープモーション)は、2012年にLeap Motion社から販売された手のジェスチャーによってコンピュータの操作ができるデバイスである。
Wikipedia より
![Page 3: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/3.jpg)
MOKUJI
1. LEAP MOTIONの準備 2. LeapJSの準備 3. つく(りたか)ったもの 4. 使ってみた感想
![Page 4: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/4.jpg)
LEAP MOTIONの準備
V2 バージョンのインストーラーを公式サイトからダウンロードします。
前回紹介したベータ版の ORION は Windows しか公開されていませんでした。
![Page 5: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/5.jpg)
LEAP MOTION の準備
• JSでLeapMotionを扱う場合は、WebSocket通信でモーション情報を取得
• インストールしたソフトウェアがバックグラウンドで動いていて、WebSocketサーバを立てている
そのまま自分で実装して取得することもできますが、公式のJSライブラリを使ったほうが楽ちんなので、 LeapJSをつかって開発しましょう。
![Page 6: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/6.jpg)
LeapJSの準備
GitHubで公開されているので、落としてくるか、npm や bower とかしましょう。
https://github.com/leapmotion/leapjs
![Page 7: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/7.jpg)
Leap.loop()
Leap.loop({enableGestures: true}, function(frame){ // 処理 });
![Page 8: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/8.jpg)
つく(りたか)ったものたち
![Page 9: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/9.jpg)
そのいち
![Page 10: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/10.jpg)
LeapMotionじゃなくて いいんじゃなイカ?
![Page 11: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/11.jpg)
そのに
![Page 12: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/12.jpg)
そのに
• スリスリの取得がむずかしい手を合わせていると、一つの手として検出されてしまう
• 手つりそう
![Page 13: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/13.jpg)
そのさん(最終形態)
![Page 14: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/14.jpg)
つくった感想
• ずっと接続したまま開発しているせいか、LeapMotion本体がすごく熱くて怖い
• 開発中があやしすぎる
• 画面端とかは検出されにくい
• 思った以上にいろんな情報が取得できるのでもう少しあそびたい
![Page 15: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/15.jpg)
参考
• LeapMotionのモーション情報をJavaScriptで取得する仕組み
• LeapMotionをJavaScriptで制御してみる
• JavaScriptでLeapMotionアプリを作る方法
![Page 16: Leap Motionでつくってみた(後編)#sa_study](https://reader036.vdocuments.mx/reader036/viewer/2022092622/5876c3ca1a28ab6d5a8b5693/html5/thumbnails/16.jpg)
ご静聴ありがとうございました!