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
450
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
5
2.4k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
880
Pros and Cons で考える Vue 2 Composition API
mascii
4
940
TypeScript で Optional Chaining を使ってみた
mascii
1
630
Vue.jsでCSS Modulesを使ってみた
mascii
0
120
不変量
mascii
1
110
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.1k
JavaScriptのバージョンの話
mascii
1
2k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.9k
Other Decks in Programming
See All in Programming
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
CSC307 Lecture 10
javiergs
PRO
0
310
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
37
2.2k
Side Projects
sachag
451
42k
Atom: Resistance is Futile
akmur
261
25k
Debugging Ruby Performance
tmm1
71
11k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Code Reviewing Like a Champion
maltzj
517
39k
We Have a Design System, Now What?
morganepeng
46
7k
Unsuck your backbone
ammeep
666
57k
Agile that works and the tools we love
rasmusluckow
325
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Web development in the modern age
philhawksworth
203
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
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は プレゼンリモコンとしても 優秀! (リングフィットだけじゃないぞ!)