Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Joy-ConをJavaScriptでプレゼンリモコンにした話
Search
Masaki Koyanagi
December 07, 2019
Programming
0
560
Joy-ConをJavaScriptでプレゼンリモコンにした話
WeJS Festival!
https://wajs.connpass.com/event/151413/
Masaki Koyanagi
December 07, 2019
Tweet
Share
More Decks by Masaki Koyanagi
See All by Masaki Koyanagi
Vitestを使った型テストの始め方
mascii
6
2.9k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
TypeScript で Optional Chaining を使ってみた
mascii
1
730
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
180
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
790
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
710
NPOでのDevinの活用
codeforeveryone
0
810
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
170
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Fireside Chat
paigeccino
37
3.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Transcript
Joy-Conを JavaScriptで プレゼンリモコン にした話 @mascii_k WeJS Festival! 2019 @Cybozu
自己紹介 • ますきー (@mascii_k) • ビザスク エンジニア • WeJS 運営メンバー
デモ
デモ • 既にデモは始まっている • ブラウザのコンソールでJSを実行している
コード • Qiita, GitHubで公開中 https://qiita.com/mascii/items/ad17ffa962bc82b9c4f6 https://github.com/mascii/presentation-joy-con
なぜ Joy-Con + JavaScript?
理由1: 無料だから • macOS では Joystick Mapper というマッピング アプリを利用する方法もあるが、有料である
理由2: ブラウザの機能だから安心 • Joystick Mapper は macOS Catalina 対応で 5年ぶりにアップデートが必要に
• 一方、ブラウザ標準の機能を用いるので、 Chrome, Firefox, Safari などで利用可能
理由3: 電池持ちが良い • Joy-Con なら常に充電されている • Joy-Con は公称値で約20時間使用できる • 市販のプレゼンリモコンは電池切れになりがち
どのような実装をしたか?
Gamepad APIを使用 • Joy-Con は Bluetooth 接続だが、ブラウザ上で はゲームパッドとして認識する
Gamepad APIの使い方 • gamepadconnected のイベントリスナーを登録 してJoy-Conの接続を検知する • Joy-Conを検知したら 60fps のインターバルで
ボタンのON/OFFを監視する
window.addEventListener('gamepadconnected', e => { const index = e.gamepad.index; setInterval(() =>
{ const buttons = navigator.getGamepads()[index].buttons; if (buttons[LEFT_BUTTON].pressed) { isPressing = true; // 左矢印キーの押下処理 } }, 1000 / 60); });
どのようにしてスライドを動かすか • ほとんどのスライドサービスがキーボードの 矢印キーでスライドを動かせる • キーボードの矢印キーの keydown, keyup イベントを発火する
iframe対応 • Google スライドは全画面モードの際に iframe の中で SVG 描画を行うため、フレーム 内でキーイベントを発火する必要があった
ディスプレイのスリープ問題 • プレゼン中にスリープしてしまうことがある • Wake Lock API が使えるようになると解決する ◦ Chrome
78 でもフラグ有効化で利用可能 chrome://flags/
まとめ
まとめ • Joy-Conはゲームパッドとして認識するので Gamepad API を用いて入力を取得できる • 矢印キーのキーイベント発火でほとんどの スライドサービスに対応できる •
Gamepad API + Wake Lock API の組合せに期待
Joy-Conは プレゼンリモコンとしても 優秀! (リングフィットだけじゃないぞ!)