Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Masaki Koyanagi

December 07, 2019
Tweet

More Decks by Masaki Koyanagi

Other Decks in Programming

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