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

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

以前に Joystick Mapper という、ゲームパッドのボタンをキーに対応させる有料ツールを使ってJoy-Conをプレゼンリモコンにする方法が紹介されていました¹が、ブラウザ上であれば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"===document.activeElement.tagName?b.contentWindow:window;[c,c.document].forEach(b=>{["keyup","keydown"].forEach(c=>{b.dispatchEvent(new KeyboardEvent(c,{keyCode:a}))})}),e=!0};setInterval(()=>{const g=navigator.getGamepads()[0];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)})(); 

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

利用するボタン

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

対応サイト

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

• 
  Google スライド(プレゼンモードのとき)
• SlideShare
• Speaker Deck
• Qiita

解説

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

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

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

コード

minify前のコードはこちらです:
https://github.com/mascii/presentation-joy-con
git clone, npm install, npm run minify でminifyしたワンライナーを出力可能です。改善点ありましたら、ぜひPull Requestしてください！

参考

---

1. 
   Joy-Con を、最高のプレゼンリモコンに。 ↩
   
   
   
2. 
   Joy-Conを使って片手でひらがな入力 | 東京工業大学デジタル創作同好会traP ↩