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
530
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.8k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
970
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
TypeScript で Optional Chaining を使ってみた
mascii
1
710
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
150
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.3k
JavaScriptのバージョンの話
mascii
1
2.2k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
980
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.2k
AI時代のプログラミング教育 / programming education in ai era
kishida
22
20k
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
生産性アップのためのAI個人活用
kunoyasu
0
640
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Faster Mobile Websites
deanohume
306
31k
Agile that works and the tools we love
rasmusluckow
328
21k
How STYLIGHT went responsive
nonsquared
99
5.4k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Designing for Performance
lara
606
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A better future with KSS
kneath
238
17k
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は プレゼンリモコンとしても 優秀! (リングフィットだけじゃないぞ!)