Joy-ConをJavaScriptでプレゼンリモコンにした話

WeJS Festival!
https://wajs.connpass.com/event/151413/

Transcript

1. Joy-Conを
   JavaScriptで
   プレゼンリモコン
   にした話
   @mascii_k
   WeJS Festival! 2019 @Cybozu
   

   View Slide

2. 自己紹介
   ● ますきー (@mascii_k)
   ● ビザスク エンジニア
   ● WeJS 運営メンバー
   

   View Slide

3. デモ
   

   View Slide

4. デモ
   ● 既にデモは始まっている
   ● ブラウザのコンソールでJSを実行している
   

   View Slide

5. コード
   ● Qiita, GitHubで公開中 https://qiita.com/mascii/items/ad17ffa962bc82b9c4f6
   https://github.com/mascii/presentation-joy-con
   

   View Slide

6. なぜ Joy-Con + JavaScript？
   

   View Slide

7. 理由1: 無料だから
   ● macOS では Joystick Mapper というマッピング
   アプリを利用する方法もあるが、有料である
   

   View Slide

8. 理由2: ブラウザの機能だから安心
   ● Joystick Mapper は macOS Catalina 対応で
   5年ぶりにアップデートが必要に
   ● 一方、ブラウザ標準の機能を用いるので、
   Chrome, Firefox, Safari などで利用可能
   

   View Slide

9. 理由3: 電池持ちが良い
   ● Joy-Con なら常に充電されている
   ● Joy-Con は公称値で約20時間使用できる
   ● 市販のプレゼンリモコンは電池切れになりがち
   

   View Slide

10. どのような実装をしたか？
    

    View Slide

11. Gamepad APIを使用
    ● Joy-Con は Bluetooth 接続だが、ブラウザ上で
    はゲームパッドとして認識する
    

    View Slide

12. Gamepad APIの使い方
    ● gamepadconnected のイベントリスナーを登録
    してJoy-Conの接続を検知する
    ● Joy-Conを検知したら 60fps のインターバルで
    ボタンのON/OFFを監視する
    

    View Slide

13. 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);
    });
    

    View Slide

14. どのようにしてスライドを動かすか
    ● ほとんどのスライドサービスがキーボードの
    矢印キーでスライドを動かせる
    ● キーボードの矢印キーの keydown, keyup
    イベントを発火する
    

    View Slide

15. iframe対応
    ● Google スライドは全画面モードの際に　
    iframe の中で SVG 描画を行うため、フレーム
    内でキーイベントを発火する必要があった
    

    View Slide

16. ディスプレイのスリープ問題
    ● プレゼン中にスリープしてしまうことがある
    ● Wake Lock API が使えるようになると解決する
    ○ Chrome 78 でもフラグ有効化で利用可能
    chrome://flags/
    

    View Slide

17. まとめ
    

    View Slide

18. まとめ
    ● Joy-Conはゲームパッドとして認識するので
    Gamepad API を用いて入力を取得できる
    ● 矢印キーのキーイベント発火でほとんどの
    スライドサービスに対応できる
    ● Gamepad API + Wake Lock API の組合せに期待
    

    View Slide

19. Joy-Conは
    プレゼンリモコンとしても
    優秀！
    (リングフィットだけじゃないぞ!)
    

    View Slide