WeJS Festival! https://wajs.connpass.com/event/151413/
Joy-ConをJavaScriptでプレゼンリモコンにした話@mascii_kWeJS Festival! 2019 @Cybozu
View Slide
自己紹介● ますきー (@mascii_k)● ビザスク エンジニア● WeJS 運営メンバー
デモ
デモ● 既にデモは始まっている● ブラウザのコンソールでJSを実行している
コード● Qiita, GitHubで公開中 https://qiita.com/mascii/items/ad17ffa962bc82b9c4f6https://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はプレゼンリモコンとしても優秀!(リングフィットだけじゃないぞ!)