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
490
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.6k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
930
Pros and Cons で考える Vue 2 Composition API
mascii
4
1k
TypeScript で Optional Chaining を使ってみた
mascii
1
670
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
140
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.3k
JavaScriptのバージョンの話
mascii
1
2.1k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Outline View in SwiftUI
1024jp
1
320
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Why Our Code Smells
bkeepers
PRO
334
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
How GitHub (no longer) Works
holman
310
140k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
YesSQL, Process and Tooling at Scale
rocio
169
14k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Writing Fast Ruby
sferik
627
61k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
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は プレゼンリモコンとしても 優秀! (リングフィットだけじゃないぞ!)