Edited at

【JavaScript】スイッチのJoy-Conをプレゼンリモコンにするワンライナー

以前に Joystick Mapper という、ゲームパッドのボタンをキーに対応させる有料ツールを使ってJoy-Conをプレゼンリモコンにする方法が紹介されていました1が、ブラウザ上であればJavaScriptのワンライナーでJoy-Conをプレゼンリモコンにすることができます!


動作環境


  • macOS High Sierra

  • Chrome 70

  • Joy-Con (L)


準備

Joy-Con (L) を macOS の標準の機能で接続しておきます。



矢印の部分にあるボタンを長押しすると、ペアリングモードに入ります。


Joy-Conをプレゼンリモコンにするワンライナー

以下のスクリプトをデベロッパーツール(Macであればcommand+option+I)の Console に貼り付け Enter で実行します

(()=>{const[a,b]=[0,3],[c,d]=[37,39];let e=!1;const f=a=>{if(e)return;const b=document.activeElement,c="IFRAME"===b.tagName?b.contentWindow:window;["keydown","keyup"].forEach(b=>{[c.document,c].forEach(c=>{c.dispatchEvent(new KeyboardEvent(b,{keyCode:a}))})}),e=!0};setInterval(()=>{const g=[].find.call(navigator.getGamepads(),a=>null!==a);if(g){const e=g.buttons;if(e[a].pressed)return void f(c);if(e[b].pressed)return void f(d)}e=!1},1e3/60)})();

(minify前のコードはこちらにあります: https://github.com/mascii/presentation-joy-con/blob/master/src/presentation-joy-con.js )

ページが再読み込みされた場合には、再度上記のスクリプトを実行する必要があります。


利用するボタン

画像で図示したボタンでスライドを進めたり、戻したりすることができます。


対応サイト

以下の対応サイトで利用できることを確認しました


解説

Gamepad APIを利用してJoy-Con (L)で押されたボタンを検知し、dispatchEventで左矢印キー・右矢印キーのイベント(keyupkeydown)を発火しています。

Joy-Conのボタンイベントの取得はWeb Bluetooth APIで頑張らないとできないのかな思っていましたが、調べていくうちにGamepad APIが使えること2がわかりました。

一方、矢印キーを押すイベントについてはGoogle スライドのようにiframeの中で発生させないといけないものもあることがわかり、複数サイトで対応させる方が大変でした。


コード

minify前のコードはこちらです:

https://github.com/mascii/presentation-joy-con

git clone, npm install, npm run minify でminifyしたワンライナーを出力可能です。改善点ありましたら、ぜひPull Requestしてください!


参考