VIA JSON Building Tool を使いつつ VIA 対応してみる

# はじめに

先日、このような記事を作成しました

[VIA JSON Building Tool （VIA 対応お助けツール）を作ってみた][vjb_qiita]

そこで、 [VIA JSON Building Tool][vjb] を使いつつ、私が設計したマクロパッドを VIA 対応させた手順を、つらつらと書いていきたいと思います
備忘録ともいう

なお、この記事を読む人は VIA のことなんてご存じだと思うので、特に説明しません
簡単に言えば、インタラクティブにキーマップとかを変えられる便利なツールです
詳しいことは [公式][via] をご覧ください

# VIA 対応するぞ

では、 VIA 対応していきましょう

[公式ドキュメント][via_doc] も読んでくださいね

今回対応していくものは、私が設計した [BrownSugar Macro][bs_macro_booth] です
ファームウェアは [こちら][bs_macro_repo] （特に公式にマージはしていません）
VIA 用 JSON は [こちら][bs_macro_via]

最終的にこんな感じの画面でキーマップやレイアウトを編集できるようになります

![via_img]

## ファームウェアを VIA 対応する

まずは、ファームウェアを VIA に対応させていきましょう

### Vendor ID / Product ID をユニークにする

まずは、 Vendor ID / Product ID (VID / PID) をユニークにします
VIA では、キーボードのファームウェアを同定するために VID / PID を使用しているようです
なので、これらをユニークにする必要があります

QMK で新しいファームウェアを作成すると、 VID / PID は以下の値が自動的にセットされます

```cpp
// config.c

#define VENDOR_ID 0xFEED
#define PRODUCT_ID 0x0000
```

これを好きな値に変更します
ユニークである必要があるので、 VID / PID がそれぞれ他と被っていないことを確認しましょう

```cpp
// config.c

#define VENDOR_ID 0x1716
#define PRODUCT_ID 0x5963
```

ちなみに、私はこんな風に決めました

```
VID:
  koktoh (アカウント名) -> 5910 -> 0x1716

PID:
  "BrownSugar Macro" -> "BM" -> [ 66, 77 ] -> 0x424D -> 16973 -> 5910 + 16973 -> 22883 -> 0x5963
```

他と被らなければいいので、雑な決め打ちでもいいですが、適当なルールを決めておくと今後も楽になると思います

### VIA 用キーマップを作る

[公式ドキュメント][via_doc_qmk] に従って `keyboards/<keyboard>/keymaps/via` ディレクトリを作成し、 VIA 用キーマップを配置します

キーマップは `keymaps/default/keymap.c` をコピペで問題ないと思います
なお、 VIA のレイヤー数はデフォルトで4つなので、それに合わせて `KC_TRNS` のみのレイヤーを用意したり、減らしたりするとユーザーフレンドリーかもしれません
容量に余裕があるのであれば、レイヤーを減らす必要もないかもしれません

### rules.mk を作る

先ほど作った `keyboards/<keyboard>/keymaps/via` ディレクトリに `rules.mk` を作成します
中身は基本的に以下のみで大丈夫です

```makefile
VIA_ENABLE = yes
```

ここで注意があります

**Pro Micro (ATmega32U4) を使用している場合、 `RGBLIGHT_ENABLE = yes` と `BACKLIGHT_ENABLE = yes` を同時に指定するとファームウェアのサイズが大きくなりすぎてしまい、書き込むことができません**

Pro Micro で VIA 対応する場合は、どちらかを捨てましょう
私は Backlight を捨てました（諸行無常）

### ファームウェアを書き込む

これでファームウェアの準備ができたので、キーマップに `via` を指定して、いつものように書き込みましょう

## VIA 用 JSON を作る

ついに [VIA JSON Building Tool][vjb] の出番です
この JSON を VIA アプリケーションが読み込むことで、キーボードの設定をいじることができます

また、 BrownSugar Macro ではロータリーエンコーダーの種類によってキースイッチのレイアウトが変わるので、それにも対応していきます

### キーマップ JSON を作る

VIA で使われるキーマップ JSON は [Keyboard Layout Editor][kle] （以下 KLE）フォーマットです
VIA JSON Building Tool の [Keymap Converter][vjb_conv] で基本形を簡単に作ることができます

#### 基本形のキーマップ JSON を作る

まずは、 Keymap Converter の上部にある D&D エリアに `<keyboard>.h` と `info.json` ファイルを D&D します

![ViaJsonBuilder_converter_a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/8ed8859b-c8e6-fea6-27a0-bbea4b110312.png)

D&D すると、それぞれのファイルの内容がテキストエリアに表示されます

![ViaJsonBuilder_converter1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/51260064-a255-6cff-bc8f-82f6d9e5040b.png)

この状態で `コンバート` ボタンを押すと、 KLE フォーマットの JSON が生成されます

![ViaJsonBuilder_converter2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/37a0f333-a1ef-462a-4c50-9ce99f8684f6.png)

`JSON ダウンロード` か `クリップボードへコピー` ボタンで JSON を入手しましょう

キーレイアウトに変更がない場合は、 [VIA JSON Builder の作業](#via-用-json-を作る-1)へ移ってください
今回はキーレイアウトが複数あるので、 KLE に移動してさらに編集していきます

#### KLE で編集する

ダウンロードなりコピーなりした JSON を KLE に適用します
コピーした場合は、 `Raw data` タブにペーストしてください

![kle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/3c121d36-ca9c-e37e-ff00-224d4d792e6a.png)

ここで、 BrownSugar Macro について説明します

BrownSugar Macro は 3x3 のマクロパッドです
右上と左上にロータリーエンコーダを実装でき、それぞれ、プッシュスイッチ内蔵のロータリーエンコーダにも対応しています

つまり、レイアウトとしては以下の4種類になります

|プッシュスイッチ内蔵が|両方|右だけ|左だけ|なし|
|:--|:-:|:-:|:-:|:-:|
||![layout1]|![layout2]|![layout3]|![layout4]|

これらのレイアウト変更に対応できるように KLE で編集していきます

そして、対応したものがこちらです

![kle1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/c8546c8e-ca0e-309b-37e6-cbfcc9e61372.png)

変更点は以下です

* 変更用のレイアウトとして上に3行追加
* レイアウトによって変化するキーの右下に `0,0` などのレジェンドを追加

追加されたレジェンドの詳しい意味は [公式のドキュメント][via_doc_layout_opt] をご覧ください
簡単に説明すると、このような意味です

```
[レイアウトオプションの番号],[レイアウトオプションでの選択肢の番号]
```

どちらも `0` から自動的に採番されます
今回の場合は以下のようになっています

|レイアウトオプション|選択肢|
|:--|:--|
|プッシュスイッチ内蔵のロータリーエンコーダの位置 (0)|両方 (0)、右 (1)、左 (2)、なし (3)|

![layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/61f193e1-1245-f241-50de-982169e1e91a.png)


最終的に `k00` などの不要なラベルを消して完成です（消さなくても問題ありません）

![kle2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/4a4cebda-e5da-b47a-86ea-12b165409fc3.png)

できたら、右上の `Download` から `Download JSON` を選択して JSON を入手しましょう

![kle_dl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/dcde1fc9-326e-e286-ddc4-2e52dd764827.png)

### VIA 用 JSON を作る

それでは、 VIA JSON Building Tool に戻って作業していきましょう
次は [VIA JSON Builder][vjb_build] で作業していきます

Keymap Converter と同様に、上部の D&D エリアに `config.h` と 先ほど入手したキーマップ JSON を D&D します
キーマップ JSON については、 KLE での編集を特にしていない場合は Keymap Converter から直接コピペでも大丈夫です
すると、必要な情報が自動的に入力されます

![ViaJsonBuilder_builder1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/be8dcb7e-7d14-3c7b-5f25-43e2d7db68b9.png)

あとは、 `Lighting` と `Labels` を入力していきます

#### `Lighting` の選択

今回は QMK ファームウェアで RGB Lighting を実装しているので、ドロップダウンリストから `qmk_rgblight` を選択します

![lighting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/9306e401-3997-aa99-a6d1-5543b318c3ea.png)

#### `Labels` の入力

[KLE で編集する](#kle-で編集する) で示したように、 BrownSugar Macro はキーレイアウトが複数あります
それを VIA で選択できるようにするのが `Labels` の記述です

詳しくは [公式のドキュメント][via_doc_layout] をご覧ください

今回はドロップダウンリストとして表示する形になるので、 `string[]` 型の記述をしていきます

![labels.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/aa983ce9-b745-73d8-c1e7-e82776d6de66.png)

JSON の記法としては文字列は `"` で囲う必要がありますが、 VIA JSON Builder がいい感じに補完してくれるので気にする必要はありません（ちょっとした便利ポイント）
また、日本語でも問題ないかもしれませんが、一応英語表記をしています

`Labels` の表記の意味と対応は以下のような感じです

![labels1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/a1829a47-f7d7-cd32-4481-e6914ba536aa.png)

|レイアウトオプション|選択肢|
|:--|:--|
|プッシュスイッチ内蔵のロータリーエンコーダの位置 (0)|両方 (0)、右 (1)、左 (2)、なし (3)|

|両方 (0)|右 (1)|左 (2)|なし (3)|
|:-:|:-:|:-:|:-:|
|![layout1]|![layout2]|![layout3]|![layout4]|

VIA 上では以下のように表示されます

![via_layouts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/4ad6f196-81dd-c8b1-bb75-ac7147913c95.png)

これで、すべての情報を埋めることができました

![ViaJsonBuilder_builder2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/7da2ce0d-adfd-fc18-2439-4fae4282a2c0.png)

最後に `JSON ダウンロード` か `クリップボードへコピー` ボタンで JSON を入手しましょう
実物は[こちら][bs_macro_via] （エディタで整形しています）

# VIA を使おう

これで VIA を使う準備はすべて整いました
というわけで、最後に VIA で実行してみましょう

[公式][via] から VIA をダウンロードします
ダウンロードしたら `SETTINGS`タブで `Show Design tab` を ON にします

![via_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/7e85df15-d696-791b-a7c3-88d7a00966ee.png)

`DESIGN` タブで VIA JSON Building Tool で作成した JSON を読み込ませます

![via_design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/e3d2a801-2193-23b5-b86f-80461a91a770.png)

読み込ませるとこのようになります

![via_design1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/a7dad404-0b4f-973b-4a8d-b4fafe163f39.png)

VIA 用ファームウェアを書き込んであるキーボードを接続した状態で `CONFIGURE` タブを開くと、キーマップを編集できる状態になっているはずです

![via_img]

# おわりに

お疲れ様でした
以上で終了です

VIA 公式への JSON のマージなどについては [公式ドキュメント][via_doc] をご確認ください

この記事と [VIA JSON Building Tool][vjb] が皆さんの VIA 対応の助けになればうれしく思います
また、わからないことがあれば、お気軽にコメントなどで質問してください

それでは

[vjb_qiita]:https://qiita.com/koktoh/items/a5ee0458ff10b6e939e1
[vjb]:https://koktoh.github.io/ViaJsonBuilder/
[vjb_build]:https://koktoh.github.io/ViaJsonBuilder/builder
[vjb_conv]:https://koktoh.github.io/ViaJsonBuilder/converter

[via]:https://caniusevia.com/
[via_doc]:https://caniusevia.com/docs/specification
[via_doc_qmk]:https://caniusevia.com/docs/configuring_qmk
[via_doc_layout]:https://caniusevia.com/docs/optional#layouts
[via_doc_layout_opt]:https://caniusevia.com/docs/layouts#layout-options

[bs_macro_booth]:https://brownsugar.booth.pm/items/2106184
[bs_macro_repo]:https://github.com/koktoh/qmk_firmware_koktoh/tree/dev/bs_macro/keyboards/bs_macro
[bs_macro_via]:https://gist.github.com/koktoh/7cee3e86373b058d21e9f1879d745834

[kle]:http://www.keyboard-layout-editor.com/

[via_img]:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/c05b595d-0103-2868-d7be-db05c76042d5.png


[layout1]:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/149fc605-c9ec-5f36-3f32-9f40be583996.png
[layout2]:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/2a375f13-4732-422e-5d8a-32064cb1742f.png
[layout3]:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/2c2b40b4-80c2-04e2-9cfc-1dae4b220111.png
[layout4]:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/843d9e9b-f735-2fd4-503a-15e381f6c73e.png