キースイッチテスターを作った

概要

Demo: https://kymok.github.io/keyswitch-tester/

  • 12__はスペース)とタイプすると,専用キーボードの1行2列目にあるスイッチが表示される
  • ランダムボタンを押すと,登録されている中からスイッチをランダムに表示する

f:id:lunar0:20200222030716j:plain
完成したスイッチテスターとサーマルプリンタ

Tsukuba Mini Maker Faire (TMMF) の Self Made Keyboard in Japan (SMKiJ) 展示の一環として,キースイッチテスターを出展した.元ネタは遊舎工房の店頭にあるものだが,TMMF会場では店舗と異なり,気に入ったスイッチが見つかってもその場でスイッチを買えない.そこで,名前のメモを取ったりするかわりにサーマルプリンタでメモを出力する装置を作った.

システムの構成

f:id:lunar0:20200222043157p:plain
ハードウェア構成

  • ハードウェア:
    • デモ用パソコン
    • 専用キーボード(USB)
    • サーマルプリンタ(USB-シリアル変換器経由)
  • ソフトウェア:
    • フロントエンド(押されたキースイッチの表示,キースイッチリストのフォーマット,バックエンドへの送信)
    • バックエンド(http/JSON で受け取った文字列をシリアルポートに流す)

キーボード側

構造

基板を 5mm のアクリルプレートに直接ネジ留めした.これだけだと工夫が何もないので,底面のアクリルプレートに皿ザグリを施すことで,見た目をすっきりさせた.各キーには上からLEDを挿せるようになっており,頑張れば WebHID などを使って作者おすすめのキースイッチを光らせるなども可能だろう.

16x4 を一体で作らずに分割した理由は,基板を安価に作るため.深圳には Web から入稿・注文できる小ロット試作に対応する基板メーカーがいくつかあり,ほとんどの店舗では 100mm 角以内なら 5 ドル程度で基板が 10 枚作れる.サイズが大きくなると途端に高くなる.

f:id:lunar0:20200222032954j:plain
キーボードの全体像

回路

4x4 のキーパッドが4個 IIC で ATMEGA32u4 にぶらさがっている.昔作った細い基板が余っていたので,それを利用した. IOエキスパンダは MCP23017 .これは秋月で DIP 品が買えるので回路の試作がしやすいとともに,1ポート 25 mA まで扱えて LED 直結で動かすのに便利.

ファームウェア

開発には QMK Firmware を利用した.各キーにはマクロが設定してあり,00_ - f4__はスペース,f4はf行4列)までの文字列を送信する.単一のキーコード(aなど)を送る方式と比較して,利点は次の通り.

  • 理論上は際限なくキーが増やせる*1ので,ルブの有無などのバリエーションも画面上に表示させることが可能.
  • モディファイヤキーを送らずに済み,本体のキーボードと共存しても安全.
  • キーマップの入力がファームウェア,フロントエンドともに楽.

逆に,単一キーコードを送る方式の利点は次の通り.

  • 最初のキーの keydown だけ見ればよいので,反応が速い.
  • 実装がシンプル.

今後何かあるたびに使い回すとすれば,キーマップが柔軟に変えられたほうが良いだろうと考え,前者の方式を採用した.

本体側(デモ用パソコン)

フロントエンド

f:id:lunar0:20200222032015p:plain
ユーザインタフェース

ちょうどいい規模のプロジェクトかなと思って付け焼刃の React で書いてみた.勉強という大義名分のもと React + Redux + Redux-Saga という大所帯になったうえ,キーボード入力を読んで該当するデータを表示する部分も自前実装してある(このせいで当日までに物理印刷ボタンを付けられなかった).

キーボード入力を読んで該当するデータを表示する部分では,次のような実装をしている.

  • キーボード入力の履歴を蓄えておく配列を用意する.
  • 新しい入力を配列の末尾に付け加える.
  • 入力があらかじめ用意したパターンと一致したらアクションを発行し,入力履歴をクリアする.

ローカルで動作すればよいので,キースイッチ・キー配列のデータは JSON ファイルを直接読む形式とした.

ソースコードkymok/keyswitch-tester にある.また,元ネタにした遊舎工房店頭にあるキースイッチテスターのものは adeonhy/switch-tester-web にある.

バックエンド

今回利用したサーマルプリンタは Maker には有名なもので, PyPI に専用のライブラリまである.これに Flask で薄いラッパーをかぶせて使った.Python の既製品を組み合わせただけで,ほぼ何もしていないに等しいが,ソースコードはこちら:kymok/thermal-printer-server

反省

  • Amazon で買える安いスペーサを使ったら基板に不陸が生じた.急ぐにしても,レーザーカッタでアクリル板から切り出すなど,より精度よく作る方法はあったはずである.
  • UIについて,アイテムを画面上のリストに入れて,さらに印刷ボタンを押すのは手数が多すぎた.印刷キーを付けて,押すたびに直前に選択したスイッチが印刷される程度に単純なほうが良かっただろうと思われた.TMMF のゆったりした人通りですらこれなので,混雑したイベントでは使い物にならなかった可能性が高い.
  • ちょっとした記念品になるといいなと思ったが,主にプリンタからモノが出てくるということ自体が子供ウケしていた.
  • Web 技術で作ると UI の修正などをその場でデプロイできて便利.

*1:実際はスキャン頻度に響くので限界はある/計算はしていない