KERIgoKBD のキーマップ表示・編集アプリを作ってみた
はじめに
こんにちは、子供から風邪をもらって、シルバーウィークが療養で消えかけているけりです。
風邪と闘いながら、自作キーボード KERIgoKBD の キーマップ表示・キーマップ編集アプリ「KERIgoKBD Studio」 を作ったので紹介します。
KERIgoKBD Studio から出力したレイアウト早見表
KERIgoKBD のソースコードにあるキー割り当てを基に、複数レイヤを一枚にまとめた早見表を自動で生成するWebアプリです。
さらに、実際にキーボードに接続して、その場でキーの割り当てを編集する機能も搭載しています。
自作キーボード KERIgoKBD v2
アプリを作った理由
まずは、早見表アプリが欲しくなったきっかけと、これまで苦労していたところを紹介します。
レイアウト全体を見ながら試行錯誤したい
KERIgoKBD では、日々キーの割り当てを少しずつ変えながら、自分にとって使いやすいレイアウトを探しています。「この記号はこっちのほうが押しやすいかな？」と配置を変えては、実際に使ってみることの繰り返しです。
少ないキーでさまざまな入力をするために、レイヤという仕組みも使っています。たとえば親指で Num キーを押している間は、アルファベットのキーが数字や記号のキーに変わります。
これまでは、既存の Remap アプリでキーの割り当てを変更して試していました。
Remap で KERIgoKBD v2 のキー配置を表示した画面
画面左側の番号でレイヤを切り替えて確認できますが、配置を考えるときには、同じキーにほかのレイヤで何を割り当てているかも、一緒に見たいところです。
そこで、レイヤごとに分かれた図ではなく、複数レイヤが一枚にまとまった早見表が欲しくなりました。全体を眺めながら、どこに何を置くか検討できるようにしたかったわけです。
また、一枚にまとまっていれば、人に KERIgoKBD の使い方を説明したり、ブログでレイアウトを紹介したりするときにも便利です。
これまでは Keyboard Layout Editor で頑張っていた
これまでは KLE (Key Layout Editor) というWebツールを使って、各レイヤの割り当てを手作業で書き込んで早見表を作成していました。
参考：KLE で作成した早見表（2026年5月9日版）
表示位置やアイコン表現の制約から、一部のレイヤを別の図に分けたり、マウス操作を文字で説明したりと、見やすくまとめるには工夫が必要でした。
さらに、配置を変更するときは、Remap で変更して試す → よさそうならソースコードに反映する → KLE の早見表も更新するという流れで、同じ変更をソースコードと図の両方に書き写す必要があり、レイアウトを見直すたびに手間がかかっていました。
早見表を自動で作るアプリへ
今どきは Copilot があれば、ほとんど自分でコードを書かずにアプリを作れます。それなら、自分の思い通りの早見表を生成するアプリを自作してみようと思いました。
まずは 見やすい早見表を自動で作る機能を目標に、余力があればキーマップの編集もできるようにしよう、という気持ちで作り始めました。
そうしてできたのが KERIgoKBD Studio です。キーマップを早見表で確認し、編集画面で変更できるようにしました。
ソースコードで変更した配置は、Studio の更新に合わせて早見表にも反映されます。同じ変更を図に書き写す必要がなくなったので、更新もかなり楽になりました。
作成した KERIgoKBD Studio
KERIgoKBD Studio はブラウザから使えます。KERIgoKBD v1 / v2 に対応していて、ページを開くだけで標準のキー配置を確認できます。
KERIgoKBD Studio の全体画面
複数レイヤをまとめて表示
いちばんのポイントは、複数レイヤの割り当てを一枚で見渡せることです。各レイヤを色分けして、同じキーにどんな役割があるかをまとめて表示しています。
長押し時の機能も載せ、クリックやスクロールなどはアイコンにしました。文字入力からマウス操作まで、画面を切り替えずに確認できます。
表示するレイヤを選べる
情報が多すぎるときは、必要なレイヤだけに絞れます。数字や記号の配置だけ確認したい、といったときに便利です。
表示するレイヤを絞った早見表
自分のキー配置を読み込める
キーボードを接続すると、実機に保存された割り当てを読み込んで早見表に反映できます。自分好みに変更した配置も、そのまま確認できます。
PNG 画像で共有できる
共有用に、PNG 画像としてコピー・ダウンロードする機能も付けました。冒頭の画像も、この機能で保存したものです。
表示するレイヤの設定も反映されるので、必要な情報だけを載せて、自分のレイアウトや使い方を紹介できます。
キーマップを編集できる
Editor 機能では、キーボードに接続した状態で「キーマップを編集する →」を押すと、編集画面に切り替わります。
KERIgoKBD Studio のキーマップ編集画面（実機接続時）
変更したいレイヤとキーを選び、割り当てたい文字や機能を選ぶと、その場でキーボードに反映されます。「この記号を別の場所に移してみよう」と思ったら、変更してすぐに打ち心地を試せます。
編集後は早見表に戻って、ほかのレイヤも含めた配置を確認できます。配置を考える、変更する、実際に使ってみる、という試行錯誤を一つのアプリで完結できるようになりました。
ただし、Editor はまだ基本的な編集ができる段階です。早見表を中心に作り始めたアプリなので、編集画面の使い勝手はこれから少しずつブラッシュアップしていく予定です。
おわりに
今回は、キー配置を早見表で確認しながら、編集や共有もできるアプリを作ってみました。
キーマップから自動で早見表を作れるので、キー配置を変えるたびに KLE を開いて修正する作業からも解放されました。早見表で全体を眺め、Editor で配置を変えて試しながら、引き続き使いやすいレイアウトを探していこうと思います。
KERIgoKBD のキー配置に興味がある方は、ぜひ触ってみてください。ソースコードも GitHub で公開しています。