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

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

998b440234ba4524a2c1ba1f130728f8?s=128

Masaki Koyanagi

December 07, 2019
Tweet

Transcript

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

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

  3. デモ

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

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

  6. なぜ Joy-Con + JavaScript?

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

  8. 理由2: ブラウザの機能だから安心 • Joystick Mapper は macOS Catalina 対応で 5年ぶりにアップデートが必要に

    • 一方、ブラウザ標準の機能を用いるので、 Chrome, Firefox, Safari などで利用可能
  9. 理由3: 電池持ちが良い • Joy-Con なら常に充電されている • Joy-Con は公称値で約20時間使用できる • 市販のプレゼンリモコンは電池切れになりがち

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

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

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

    ボタンのON/OFFを監視する
  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); });
  14. どのようにしてスライドを動かすか • ほとんどのスライドサービスがキーボードの 矢印キーでスライドを動かせる • キーボードの矢印キーの keydown, keyup イベントを発火する

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

  16. ディスプレイのスリープ問題 • プレゼン中にスリープしてしまうことがある • Wake Lock API が使えるようになると解決する ◦ Chrome

    78 でもフラグ有効化で利用可能 chrome://flags/
  17. まとめ

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

    Gamepad API + Wake Lock API の組合せに期待
  19. Joy-Conは プレゼンリモコンとしても 優秀! (リングフィットだけじゃないぞ!)