ブラウザでNintendo SwitchのJoy-Conの色を変える
昨今、入手困難となっているNintendo Switchは、3年前のスプラトゥーン2セットモデルが発売された時も激戦でした。 各種通販サイトを廻り、運良く発売日に手に入れられた喜びは今でも鮮明に覚えています。
スプラトゥーン2：商品情報 | Nintendo Switch | 任天堂
ｽﾌﾟﾗﾄｩｰﾝ2!!! pic.twitter.com/nnu4HztBQr
— ミ゛ (@mzyy94) July 21, 2017
当時のSplatoon人気から、多くの人がスプラトゥーン2セットモデルを買い、遊ぶ人遊ぶ人全員が同じカラーのNintendo Switchを持っているなんてこともありました。本体から外してしまったら、もうどれが誰のJoy-Conだったかわからなくなります。
そんなSplatoon 2も発売から2年を迎えるタイミングでファイナルフェスが開催され、先週末に開催された本当に最後（？）のおかわりフェスも終わったことで、一旦節目を迎えました。
頑張って手に入れたSplatoon 2カラーを持つことの満足感も捨てがたいですが、Joy-Conに個性を持たせたい気持ちが高まってきたので、この節目をもってSplatoon 2カラーを卒業することにしました。
目次
Open 目次
Joy-Conカラーバリエーション
Joy-Conは外装シェルと呼ばれるプラスチックの「ガワ」に色がついており、その色の違いで多くのバリエーションが展開されています。Splatoon 2カラーもこれらの組み合わせの一つです。
出典: 周辺機器 | Nintendo Switch｜任天堂
新たな色の組み合わせを買うことで、自分の個性を出していくことができますが、1組8,000円強する上に、Joy-Conを買い足す必要も今はありません。 安く、好きな色の「ガワ」さえ手に入れられれば、手持ちのJoy-Conの外装交換するだけで事足ります。
外装シェル（ガワ）
安く交換パーツを手に入れる方法はいくつかありますが、今回もAliexpressで探索しました。 Joy-Conで失われていた十字キーを搭載するものもあり、価格も安価で1,800円程で買えるものが見つかりました。
買いました。
後から知ったんですが、販売元のMyriannはAmazon.co.jpでも展開してるっぽいので、数百円高くなりますがこっちの方が早く届くかもしれません。
Amazon | Myriann 任天堂 Nintendo Switch ニンテンドー カラー置換ケース 代わりケース 外殻 ついに登場！ (透明+) | 周辺機器・アクセサリ
組み替え
Nintendoのハーウェアは簡単に開けられないよう、昔から特殊ネジが使われています。 ゲームキューブの分解ではLHドライバーが必要になり、わざわざそのためだけに2,000円近くするドライバーを買った覚えがあります。 Nintendo SwitchのJoy-Conはその点では難易度が下がり、精密ドライバーセットに含まれるY型2mmビットがあれば開けられました。
両面テープでの貼り付けがなかなか剥がれなかったりと躓くところはあれど、順にネジを外し逆の要領で組み上げるだけで容易に交換できました。
表示色との食い違い
ゲームボーイカラーのクリアパープルを思い出させる見た目に仕上がりました。
外観はとても満足いく形になったものの、一つ問題が残ります。 それは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/
mzyy94/joycon-toolweb: Joy-Con and Pro Controller color modification tool
WebHIDでJoy-ConのSPIフラッシュメモリーの値をちょこっと変えるだけのものです。 体裁はAlpine.jsとtailwindcssで整えました。 Joy-Conと名前にありますが、どうせならと奮起してベクターイラストを書いて、Pro Controllerにも対応しました。
執筆時点では、WebHID APIの実装があるGoogle Chromeでしか動きません。
PCとのペアリング
Joy-Con Tool(Web)で色を変えるには、予めmacOSやWindowsにJoy-ConをBluetoothで繋げておく必要があります。 繋げ方はmacOSならシステム環境設定→Bluetoothを開いている状態で、Joy-Conのシンクロボタンを押せば繋げられるようになります。 シンクロボタンの位置はサポートページに書いてあります。
【Switch】はじめて使用するコントローラーを、無線でSwitch本体に登録したい。
コントローラーの接続
Joy-Con Tool(Web)をGoogle Chromeで開いて、”+ Add”を押すと、コントローラーの接続メニューが出てきます。
色を変えたいJoy-Conを選ぶとChromeに接続され、コントローラー一覧に表示されます。
色の変更
右側のSelect ~~のボタン（<button>ではない）を押すとカラーピッカーが出てくるので、好きな色を選ぶだけです。
余談ですが、先日配信されたChrome 83から独自のカラーピッカーが実装されるようになり、システムのカラーピッカーで使えていたパレットへの色の保存や、色の抽出ができなくなったのがちょっと残念です。
Google Developers Japan: Chrome のフォーム コントロールとフォーカスのアップデート
好きな色を選んだら、Applyで書き込んでおしまいです。 書き込むと出荷時の状態には戻せなくなるので、自己責任のもと行ってください。
ブラウザを閉じて、Joy-ConをNintendo Switch本体に取り付ければ、選んだ色が反映されて最高の気分になれます。
まとめ
食い違いもなくなり、モヤモヤも晴れて最高になりました。
ああ、どうぶつの森カラーのPro Controller発売されないかなぁ。
