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
410
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.3k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
790
Pros and Cons で考える Vue 2 Composition API
mascii
4
890
TypeScript で Optional Chaining を使ってみた
mascii
1
600
Vue.jsでCSS Modulesを使ってみた
mascii
0
120
不変量
mascii
1
100
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.1k
JavaScriptのバージョンの話
mascii
1
1.9k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.8k
Other Decks in Programming
See All in Programming
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1k
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
Featured
See All Featured
Docker and Python
trallard
34
2.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Six Lessons from altMBA
skipperchong
21
3k
Designing for Performance
lara
601
67k
Making Projects Easy
brettharned
108
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Building Flexible Design Systems
yeseniaperezcruz
319
37k
For a Future-Friendly Web
brad_frost
172
9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
The Language of Interfaces
destraynor
151
23k
How GitHub (no longer) Works
holman
304
140k
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は プレゼンリモコンとしても 優秀! (リングフィットだけじゃないぞ!)