Submit Search
Upload
JavascriptでLeap Motion事始め
•
6 likes
•
3,830 views
Kenta Kowaki
Follow
JavascriptとLeapMotionとCanvasで子供向けコンテンツを作った話
Read less
Read more
Internet
Report
Share
Report
Share
1 of 46
Download now
Download to read offline
Recommended
TRICK 2022 Results
TRICK 2022 Results
mametter
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
dena_study
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
witstudio
Product Backlog の管理だけじゃない⁈〜5年目だから分かる。本当の Product Owner の役割〜
Product Backlog の管理だけじゃない⁈〜5年目だから分かる。本当の Product Owner の役割〜
Junji Asada
TCP/IPプロトコルスタック自作入門
TCP/IPプロトコルスタック自作入門
雅也 山本
JSX 速さの秘密 - 高速なJavaScriptを書く方法
JSX 速さの秘密 - 高速なJavaScriptを書く方法
Kazuho Oku
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
Recommended
TRICK 2022 Results
TRICK 2022 Results
mametter
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
dena_study
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
witstudio
Product Backlog の管理だけじゃない⁈〜5年目だから分かる。本当の Product Owner の役割〜
Product Backlog の管理だけじゃない⁈〜5年目だから分かる。本当の Product Owner の役割〜
Junji Asada
TCP/IPプロトコルスタック自作入門
TCP/IPプロトコルスタック自作入門
雅也 山本
JSX 速さの秘密 - 高速なJavaScriptを書く方法
JSX 速さの秘密 - 高速なJavaScriptを書く方法
Kazuho Oku
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Web Accessibility Infrastructure Committee (WAIC)
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
코루틴(Coroutine)
코루틴(Coroutine)
QooJuice
remote Docker over SSHが熱い
remote Docker over SSHが熱い
Hiroyuki Ohnaka
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
Yoshio Hanawa
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~
Yuta Matsumura
NDC 2014, 피할 수 없는 문자열의 세계
NDC 2014, 피할 수 없는 문자열의 세계
tcaesvk
진선웅 유저수만큼다양한섬을만들자 공개용
진선웅 유저수만큼다양한섬을만들자 공개용
Sunwung Jin
超軽量経路探索 for Unity
超軽量経路探索 for Unity
Tomioka Yusei
新・逆説のカスタマーサクセス
新・逆説のカスタマーサクセス
Ayumu Takahashi
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
shinta rock
インセプションデッキの紹介
インセプションデッキの紹介
lita
ゲーム開発を知らない人にも分かるKLabのゲーム開発運営
ゲーム開発を知らない人にも分かるKLabのゲーム開発運営
KLab Inc. / Tech
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
Yoshitaka Kawashima
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
iPride Co., Ltd.
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
Takeshi Kakeda
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
Yahoo!デベロッパーネットワーク
More Related Content
What's hot
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Web Accessibility Infrastructure Committee (WAIC)
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
코루틴(Coroutine)
코루틴(Coroutine)
QooJuice
remote Docker over SSHが熱い
remote Docker over SSHが熱い
Hiroyuki Ohnaka
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
Yoshio Hanawa
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~
Yuta Matsumura
NDC 2014, 피할 수 없는 문자열의 세계
NDC 2014, 피할 수 없는 문자열의 세계
tcaesvk
진선웅 유저수만큼다양한섬을만들자 공개용
진선웅 유저수만큼다양한섬을만들자 공개용
Sunwung Jin
超軽量経路探索 for Unity
超軽量経路探索 for Unity
Tomioka Yusei
新・逆説のカスタマーサクセス
新・逆説のカスタマーサクセス
Ayumu Takahashi
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
shinta rock
インセプションデッキの紹介
インセプションデッキの紹介
lita
ゲーム開発を知らない人にも分かるKLabのゲーム開発運営
ゲーム開発を知らない人にも分かるKLabのゲーム開発運営
KLab Inc. / Tech
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
Yoshitaka Kawashima
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
iPride Co., Ltd.
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
Takeshi Kakeda
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
Yahoo!デベロッパーネットワーク
What's hot
(20)
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
코루틴(Coroutine)
코루틴(Coroutine)
remote Docker over SSHが熱い
remote Docker over SSHが熱い
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~
NDC 2014, 피할 수 없는 문자열의 세계
NDC 2014, 피할 수 없는 문자열의 세계
진선웅 유저수만큼다양한섬을만들자 공개용
진선웅 유저수만큼다양한섬을만들자 공개용
超軽量経路探索 for Unity
超軽量経路探索 for Unity
新・逆説のカスタマーサクセス
新・逆説のカスタマーサクセス
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
インセプションデッキの紹介
インセプションデッキの紹介
ゲーム開発を知らない人にも分かるKLabのゲーム開発運営
ゲーム開発を知らない人にも分かるKLabのゲーム開発運営
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
WebSocketのキホン
WebSocketのキホン
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
JavascriptでLeap Motion事始め
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.
ご静聴ありがとうございました
Download now