7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

はじめに

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

VIA JSON Building Tool (VIA 対応お助けツール)を作ってみた

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

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

VIA 対応するぞ

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

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

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

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

via_img

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

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

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

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

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

// config.c

#define VENDOR_ID 0xFEED
#define PRODUCT_ID 0x0000

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

// 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 用キーマップを作る

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

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

rules.mk を作る

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

VIA_ENABLE = yes

ここで注意があります

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

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

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

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

VIA 用 JSON を作る

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

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

キーマップ JSON を作る

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

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

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

ViaJsonBuilder_converter_a.png

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

ViaJsonBuilder_converter1.png

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

ViaJsonBuilder_converter2.png

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

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

KLE で編集する

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

kle.png

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

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

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

プッシュスイッチ内蔵が 両方 右だけ 左だけ なし
layout1 layout2 layout3 layout4

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

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

kle1.png

変更点は以下です

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

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

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

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

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

layout.png

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

kle2.png

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

kle_dl.png

VIA 用 JSON を作る

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

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

ViaJsonBuilder_builder1.png

あとは、 LightingLabels を入力していきます

Lighting の選択

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

lighting.png

Labels の入力

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

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

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

labels.png

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

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

labels1.png

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

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

via_layouts.png

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

ViaJsonBuilder_builder2.png

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

VIA を使おう

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

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

via_settings.png

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

via_design.png

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

via_design1.png

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

via_img

おわりに

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

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

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

それでは

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?