ブラウザでNintendo SwitchのJoy-Conの色を変える

ブラウザでNintendo SwitchのJoy-Conの色を変える

昨今、入手困難となっているNintendo Switchは、3年前のスプラトゥーン2セットモデルが発売された時も激戦でした。 各種通販サイトを廻り、運良く発売日に手に入れられた喜びは今でも鮮明に覚えています。

スプラトゥーン2:商品情報 | Nintendo Switch | 任天堂

当時のSplatoon人気から、多くの人がスプラトゥーン2セットモデルを買い、遊ぶ人遊ぶ人全員が同じカラーのNintendo Switchを持っているなんてこともありました。本体から外してしまったら、もうどれが誰のJoy-Conだったかわからなくなります。

joycon splatoon color

そんなSplatoon 2も発売から2年を迎えるタイミングでファイナルフェスが開催され、先週末に開催された本当に最後(?)のおかわりフェスも終わったことで、一旦節目を迎えました。

頑張って手に入れたSplatoon 2カラーを持つことの満足感も捨てがたいですが、Joy-Conに個性を持たせたい気持ちが高まってきたので、この節目をもってSplatoon 2カラーを卒業することにしました。

目次

Open 目次

  1. Joy-Conカラーバリエーション
  2. 外装シェル(ガワ)
    1. 組み替え
  3. 表示色との食い違い
    1. Joy-Conの色情報
    2. WebHID API
  4. Joy-Con ToolWeb
    1. PCとのペアリング
    2. コントローラーの接続
    3. 色の変更
  5. まとめ

Joy-Conカラーバリエーション

Joy-Conは外装シェルと呼ばれるプラスチックの「ガワ」に色がついており、その色の違いで多くのバリエーションが展開されています。Splatoon 2カラーもこれらの組み合わせの一つです。

joycon list

出典: 周辺機器 | Nintendo Switch|任天堂

新たな色の組み合わせを買うことで、自分の個性を出していくことができますが、1組8,000円強する上に、Joy-Conを買い足す必要も今はありません。 安く、好きな色の「ガワ」さえ手に入れられれば、手持ちのJoy-Conの外装交換するだけで事足ります。

外装シェル(ガワ)

安く交換パーツを手に入れる方法はいくつかありますが、今回もAliexpressで探索しました。 Joy-Conで失われていた十字キーを搭載するものもあり、価格も安価で1,800円程で買えるものが見つかりました。

Myriann (D PAD バージョン) 交換ハウジングケース nintend スイッチ NS コントローラ喜び Con シェルゲームコンソールスイッチケース|交換部品 & アクセサリー| - AliExpress

買いました。

new purple shell

後から知ったんですが、販売元のMyriannはAmazon.co.jpでも展開してるっぽいので、数百円高くなりますがこっちの方が早く届くかもしれません。

Amazon | Myriann 任天堂 Nintendo Switch ニンテンドー カラー置換ケース 代わりケース 外殻 ついに登場! (透明+) | 周辺機器・アクセサリ

組み替え

Nintendoのハーウェアは簡単に開けられないよう、昔から特殊ネジが使われています。 ゲームキューブの分解ではLHドライバーが必要になり、わざわざそのためだけに2,000円近くするドライバーを買った覚えがあります。 Nintendo SwitchのJoy-Conはその点では難易度が下がり、精密ドライバーセットに含まれるY型2mmビットがあれば開けられました。

reassemble

両面テープでの貼り付けがなかなか剥がれなかったりと躓くところはあれど、順にネジを外し逆の要領で組み上げるだけで容易に交換できました。

表示色との食い違い

ゲームボーイカラーのクリアパープルを思い出させる見た目に仕上がりました。

my new gear

外観はとても満足いく形になったものの、一つ問題が残ります。 それはNintendo Switchのゲーム画面上での表示色との食い違いです。 画面上ではSplatoonカラーのままです。ぴえん。

Joy-Conの色情報

Pro ControllerのUSB Gadgetシミュレーションを行った際、コントローラーの色情報がPro Controller内部のSPIフラッシュメモリーに書き込まれており、その情報を参照して画面上に色が表示されていることを知りました。 Joy-ConのSPIフラッシュメモリーの同じ領域をみてみると、確かに色情報が格納されていることがわかったので、これを紫に書き換えてあげれば完璧に満足できる形になります。

WebHID API

Joy-ConのSPIフラッシュメモリーにアクセスするには、HIDプロトコルの通信を行う必要があります。 ハードウェアとのやり取りを担う比較的低いレイヤーを扱うため、OS依存度が高いプログラムができてしまいがちです。

色という視覚的情報を扱うため、GUIを使って調整をしたいものです。ただ、そのためにGUI環境を組み立てるのがだるい。 非同期に数十バイトのデータをやり取りするだけのプログラムに、色々とライブラリを揃えたりマルチプラットフォームに向けた対応をしたりするのも、とてもめんどくさいです。

だるくてめんどくさいので、ハードウェア関連APIをモリモリ実装しているガラパゴスブラウザこと、Google Chrome(Blink)に搭載のWebHID APIを使ったWebアプリとして仕上げることにしました。

Joy-Con ToolWeb

APIは仕様とExampleを読んで完全に理解したので、あとはちゃっちゃと書くだけです。

書きました。Joy-Con Tool(Web)です。

https://mzyy94.com/joycon-toolweb/

joycon-toolweb

mzyy94/joycon-toolweb: Joy-Con and Pro Controller color modification tool

WebHIDでJoy-ConのSPIフラッシュメモリーの値をちょこっと変えるだけのものです。 体裁はAlpine.jstailwindcssで整えました。 Joy-Conと名前にありますが、どうせならと奮起してベクターイラストを書いて、Pro Controllerにも対応しました。

執筆時点では、WebHID APIの実装があるGoogle Chromeでしか動きません。

PCとのペアリング

Joy-Con Tool(Web)で色を変えるには、予めmacOSやWindowsにJoy-ConをBluetoothで繋げておく必要があります。 繋げ方はmacOSならシステム環境設定→Bluetoothを開いている状態で、Joy-Conのシンクロボタンを押せば繋げられるようになります。 シンクロボタンの位置はサポートページに書いてあります。

【Switch】はじめて使用するコントローラーを、無線でSwitch本体に登録したい。

bluetooth connect

コントローラーの接続

Joy-Con Tool(Web)をGoogle Chromeで開いて、”+ Add”を押すと、コントローラーの接続メニューが出てきます。

connect controller

色を変えたいJoy-Conを選ぶとChromeに接続され、コントローラー一覧に表示されます。

connected

色の変更

右側のSelect ~~のボタン(<button>ではない)を押すとカラーピッカーが出てくるので、好きな色を選ぶだけです。

select color

余談ですが、先日配信されたChrome 83から独自のカラーピッカーが実装されるようになり、システムのカラーピッカーで使えていたパレットへの色の保存や、色の抽出ができなくなったのがちょっと残念です。

Google Developers Japan: Chrome のフォーム コントロールとフォーカスのアップデート

好きな色を選んだら、Applyで書き込んでおしまいです。 書き込むと出荷時の状態には戻せなくなるので、自己責任のもと行ってください。

apply color

ブラウザを閉じて、Joy-ConをNintendo Switch本体に取り付ければ、選んだ色が反映されて最高の気分になれます。

my new gear2

screenshot

まとめ

食い違いもなくなり、モヤモヤも晴れて最高になりました。

ああ、どうぶつの森カラーのPro Controller発売されないかなぁ。

acnh-procon

Related Posts

ドイツのトリ in Splatoon 2

ドイツのトリ in Splatoon 2

Q. なんやこれA. ドイツのトリ Advent Calendar 2017 - Adventar の18日目の記事。インターネットの悪いおたくたちの間で局所的に流行しているドイツのトリ。...

read more
スマホでNintendo Switchを操作する 〜 USB GadgetでPro Controllerをシミュレート 〜

スマホでNintendo Switchを操作する 〜 USB GadgetでPro Controllerをシミュレート 〜

あつまれ どうぶつの森の配信が開始されましたね。いくつか積みゲーが増え始めたNintendo Switchも、また新たにゲームが増えて稼働時間が伸びる一方です。物をよくなくす身として、ゲームがした...

read more
スマホでNintendo Switchのゲームをする

スマホでNintendo Switchのゲームをする

前々回 はNintendo Switch Pro ControllerのWeb対応。 前回 はNintendo Switchゲーム画面のWeb対応。 今回 はNintendo Switchゲーム音声の...

read more
リモートワークでバ美肉ビデオ会議

リモートワークでバ美肉ビデオ会議

みなさん体調は大丈夫ですか?私は咳が止まらない毎日を送っています。医師の診断によるとただの風邪らしいです。 巷では新型肺炎が流行しているようで、情勢を鑑み出社を禁止する会社もちらほら出てきている現状で...

read more
HDMI入力をRaspberry Piで駆使する

HDMI入力をRaspberry Piで駆使する

昨今の衰えることのない技術トレンドに追従すべく、映像配信とかやりたいなーと思っていた2019年。 めっきり時間がなく何もできず、気付けば2020年になっていました。今年も時間がないだろうなぁと思っ...

read more
UAC GadgetでNintendo Switchの音声出力をRaspberry Piに取り込む

UAC GadgetでNintendo Switchの音声出力をRaspberry Piに取り込む

前回の記事 でHDMI映像入力をRaspberry Piで扱う方法を紹介し、その最後に音声の取り込みについて、まだ課題が残っていると書きました。 HDMI入力からの音声取り込みといった、本質的な課題の...

read more
中華10GbEスイッチNetcore GS6を運用して1ヶ月たったレビュー

中華10GbEスイッチNetcore GS6を運用して1ヶ月たったレビュー

春に新居に越してからベストエフォートで10Gbpsのインターネット回線を引き込み利用している。 リビングに光コンセントを設置し、ONUに自作ルーターにNASやら母艦やらを集中してリビングに設置していた...

read more