JavascriptとLeapMotionとCanvasで子供向けコンテンツを作った話

1. Javascriptで
LeapMotion事始め

2. 自己紹介
幸脇 健太（コウワキ ケンタ）です
フリーランス2年目になりました。
コウワキデザイン
という屋号でやっています
元Flasherなフロントエンドエンジニアです
時々サーバやバックエンド言語もさわってます
Twitter : @kuwk
Web : http://kuwk.jp

3. LeapMotionを使って
JavascriptとCanvasで
子供向けのコンテンツを
作ってみた話
今日のアジェンダ

4. コトの始まり

5. 自分には3歳の娘と
1歳の息子がいます

6. 前々から自分の子供に
ゲームとか作ってみたかった

7. でも、コントローラとかマウ
スとかキーボードまだ難しい

8. iPad持ってない

9. LeapMotion持ってる！

10. LeapMotionで
作ってみよう

11. LeapMotionとは

12. 2012年にLeap Motion社から販売された
手元専用のモーションキャプチャ機器
キャプチャできるのは指先から肘まで
キャプチャ範囲は60センチ立方くらい

13. なんか楽しそう！

14. 思ったより精度良くなかった！

15. • 手を握ると指をうまくキャプチャ
できなかったり
• 手のひら/手の甲が逆だったり
• キャプチャされてる指が骨折して
たり（関節の方向おかしい）

16. 2014年にv2リリース

17. 格段に精度良くなってる！

18. • v1であったような変なキャプ
チャ激減
• 以下検出可能に
手の左右/指の種類/関節/ピンチ/グラブ
• 赤外線カメラ画像の取得
• VR対応

19. Actionscriptがなくなってる…
SDKも色々

20. Visualizerのデモ

21. Javascriptで
LeapMotion

22. LeapJS
詳しくはこちら
https://developer.leapmotion.com/javascript
https://js.leapmotion.com/leap-0.6.4.js

23. <script type="text/javascript"
src=“https://js.leapmotion.com/
leap-0.6.4.js”></script>

24. <script type="text/javascript">
function init(){
// LeapMotionClass
var controller =
new Leap.Controller({enableGestures: true});
// LeapMotion接続
controller.connect();
// LeapMotionの実行frame
controller.on('frame', function(frame) {
// 実行コード
});
}
window.addEventListener('load', init);
</script>

25. ちなみにLeapMotionの内部では
WebSocketサーバが起動してます
ws://localhost:6437/
詳しくはこちら
https://developer.leapmotion.com/documentation/javascript/
supplements/Leap_JSON.html

26. どんな値が取れるのか

27. 主に使いそうな情報
•手
- 位置（x/y/z）
- 左右
- 手の向き
- グラブ
•指
- 位置（各関節 x/y/z）
- 種類（親指～小指）
- 曲げ伸ばし
- ピンチ
•ジェスチャー
- フリック - キータップ - 回転

28. あと手の他にツール（棒状のもの）の
キャプチャも可能です
※白色じゃないと認識されにくい
詳しくはこちら
https://developer.leapmotion.com/documentation/javascript/
devguide/Leap_Overview.html#motion-tracking-data

29. ここから作ったものの話

30. コンテンツ1デモ

31. 各指の曲げ伸ばしから、
グー・チョキ・パーの判定

32. // LeapMotionの実行frame
controller.on('frame', function(frame) {
// 親指から小指に向かって 0 ～ 4
console.log(frame.hands[0].fingers[0].extended);
});

33. // extendedNumber = 伸びてる指の数
if (extendedNumber == 5) {
// パー
} else if (extendedNumber == 2 &&
_finger[1].extended && _finger[2].extended) {
// チョキ
} else if(extendedNumber == 0){
// グー
}

34. 実際遊ばせてみた

35. ＿人人人人人＿
＞ 不評!! ＜
‾Y^Y^Y^Y‾

36. 理由
•センサーの反応場所がわからない
•子供の手だとうまく指がキャプチャされ
ない
•アンパンマンがいない

37. コンテンツ2デモ

38. 遊ばせてみた

39. ＿人人人人人＿
＞ 好評!! ＜
‾Y^Y^Y^Y‾

40. 理由
•手のキャプチャ表示があるので自分の操
作がわかりやすい
•寿司 = にぎるってわかってる
•寿司が好き

41. 1歳がやるとこんな感じ

42. まとめ

43. 悩ましかった点
•基本のジェスチャーが少ない
•細かい操作が大変/UIの工夫が必要
•キャプチャ範囲の慣れが必要
•テストしてるとおかしな人間に見られる
•子供の手だとうまくキャプチャされない

44. 良かった点
•ハード買い換えることなく、ソフトウェ
アの改善で精度が上がってる
•今後の精度向上に期待がもてる
•キャプチャされる情報が多く精度高い
•未来感ある
•作ってて楽しい

45. 楽しいは正義

46. ご静聴ありがとうございました