Help us understand the problem. What is going on with this article?

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

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

presentation-joy-con.gif

動作環境

  • macOS Catalina
  • Chrome 84
  • Joy-Con (L)

準備

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


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

スクリーンショット 2018-10-20 17.47.02.png

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

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

(()=>{const[a,b]=[0,3],[c,d]=[37,39];let f,g,h=!1;const i=a=>{if(h)return;const b=document.activeElement,c="IFRAME"===b.tagName?b.contentDocument:document;["keydown","keyup"].forEach(b=>{c.body.dispatchEvent(new KeyboardEvent(b,{keyCode:a,bubbles:!0}))}),h=!0};if(addEventListener("gamepadconnected",j=>{const e=j.gamepad.id;null==f&&e.includes("057e")&&e.includes("2006")&&(f=j.gamepad.index,g=setInterval(()=>{const e=navigator.getGamepads()[f].buttons;return e[a].pressed?void i(c):e[b].pressed?void i(d):void(h=!1)},1e3/60))}),addEventListener("gamepaddisconnected",a=>{f===a.gamepad.index&&(clearInterval(g),f=g=null)}),navigator.wakeLock){const a=b=>{"visible"!==document.visibilityState||navigator.wakeLock.request("screen").then(()=>{b&&(document.addEventListener("visibilitychange",a),document.addEventListener("fullscreenchange",a))}).catch(()=>{})};a(!0)}})();

(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してください!

(2020/07/24追記)

  • Chrome 84 から Screen Wake Lock API が利用可能となったので、対応ブラウザではディスプレイがオフにならないようにリクエストするようにしました(Pull Request)
  • Speaker Deck でスライド以外の要素が active のときにスライドを動かそうとするとエラーが発生する問題を修正しました(Pull Request)

参考

mascii
JavaScript, RaspberryPi, Arduino, ESP32の記事が多めです。大学院での専攻はグラフ理論でした。
https://mascii.hatenablog.com/
visasq
ビザスクは「知見と、挑戦をつなぐ」をミッションに、世界で1番のナレッジプラットフォームをつくっています。 様々なニーズにつなぐことで、実際に経験したことで得られた知識や意見を、知見として価値最大化します。組織、世代、地域を超えて、知見を集めつなぐことで、世界中のイノベーションに貢献します。
https://visasq.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした