放課後のtoioあそび：ゲームやロボコンに使えてビット演算が身近になる４ボタン自作キーボード「8421キーボード」の作り方

2019年10月27日 23:13

このNoteではtoioのビジュアルプログラミングを中心に紹介していますが、今回はtoioの操作に限らず汎用的に使える、ゲーム用の大きなボタンを搭載した4ボタンの自作キーボード、「8421キーボード」の作り方を紹介します。ロボットコンテストのようなあそびにも使えますし、ゲームや早押しクイズなどにも向いているかもしれません。USBキーボードとして認識されるので汎用的でOSを選ばず使えます。詳しくは後述しますがビット演算が身近になる効果もありそうです。少ないキー数のキーボードを作りたい方にもおすすめです。
いくつかのイベントで使ったところ大変好評で、「使ってみたい」「作ってみたい」というリクエストの声が多かったので、出来るだけ詳しく紹介したいと思います。

（toioの公式イベントでも使用された様子がYouTubeに出ています）

はじめに

前回、toioのビジュアプログラミングを使い、キーボードでキューブを操作する記事を紹介しました。

PCのキーボードの矢印キーを使いラジコン的に操作ができて楽しいのですが、これを応用してゲームやロボコンのような機敏な操作をしようとするとキーボードの小さなキーではやや味気なかったり、イベントなどで複数人で競争する場合は見た目にも地味になってしまう印象があります。

そこで、今回は機敏に楽しく操作でき、見た目にも派手さを多少演出できる専用キーボード「8421キーボード」を自作しました。これはゲームセンターにあるアーケードゲーム機で使われるようなボタンを使い、PCに対してはUSBキーボードとして各ボタンから「8,4,2,1」の文字入力ができるものです。なぜ「8,4,2,1」なのか？は後で紹介しますが、ぜひ予想してみてください（タイトルでネタバレしてますが）。

なお、単にボタンが少ないキーボードが欲しい、という目的に対しては市販のゲーム用のUSBアーケードコントローラーやテンキーなどでも十分だと思いますが、今回は自分の娘も含めて小学生でも簡単に扱えるシンプルなものが欲しかったのと、最近の自作キーボードブームへの興味もあって自作することにしました。予算は2,500円〜4,000円（部品の購入先による）ですが、ボタンを変えたり多少低コスト化することはできると思います。

中身の様子

見た目の割に中身はスカスカです。加工・配線・組み立ても最小限に仕上げてあります。作ってみると、驚くほど簡単です。

それではここから詳しい作り方を紹介します。

材料

材料費：2,500円〜4,000円程度（購入先による）
・Arduino互換機 Pro Micro (※)
　→コネクタ強度的にはスイッチサイエンス版がおすすめです

・USBケーブル（Micro-B） ※必要に応じUSB Type-C変換コネクタ
・ケース（例：100円ショップウェットティッシュケース、タッパー、ダンボール箱など）
・三和電子　φ30ゲームSW(はめ込み) 白　OBSF-30-W　x4個
・ファストン端子 110番（千石、秋月） x8個
・ＸＨコネクタ2P x4個
・コネクタ付コード2P x4個
・基板固定用のカプトンテープ or 厚手両面テープ（3Mコマンドタブ等）

　※Amazon/Aliexpress等で売られている安価なPro Micro互換機もありますが、コネクタがもげやすかったり質が悪いものもあるのでご注意ください（参考記事）。

道具・工具

・ケース：ニッパー、カッターナイフ、ボール盤、φ30ホールソー
　（レーザーカッターがあるとより楽です）
・回路：半田ごて、ハンダ、コテ台、はんだ吸煙器
・配線：圧着工具、ラジオペンチ

作り方：ハードウェア編

今回はケースに100円ショップのウェットティッシュケースを使いました。100円(税別) の割に見た目がシンプルで安っぽくなく、裏蓋の方はシンプルで加工がしやすくサイズもちょうどよいこと、かつ強度や耐久性が十分だと感じられたためです。さらに、ヒンジの部分に穴があり、少し広げればUSBケーブルの引き出し口としても使えそうなことから、総合的に判断して選定しました。店舗によっては売っていなかったり、販売終了になったりもすると思いますので、必ずしも同じものでなくても良いと思います。

ケースの加工

まずはボタンを取り付けられるようにケースにφ30（直径30mm）の穴を開ける作業から取り掛かります。カッターや細いドリルで少しずつ穴を開けて広げていくやり方もありますが、ホールソーという大きな直径の穴を開ける専用のドリルがあると綺麗で簡単なのでオススメです。

まず穴を開ける場所に油性ペンや定規を使ってケガキを行います。ボタンの間隔がこれで決まってしまいますので慎重に場所を決めてください。今回は片手で4ボタン同時押しができると面白いかなということで、穴の中心同士の距離を55mm程度に設定しました。下記の例は何度か書き損じてしまったものですが、穴を開けて除去する部分なので、自分がわかりさえすれば気にしなくて大丈夫です。

次に細いドリルで下穴を開けます。ボール盤を使って安定した場所で作業しましょう。危険を伴うので安全には細心の注意を払ってください。

更にボール盤に取り付けたホールソーでφ30の穴を4つ開けます。

穴あけが終わったらバリ取りカッター等でバリ除去しましょう。

（参考：なお、Fabスペースなどが使える方は、レーザーカッターで穴を開ける方が精度が出せますし、複数個作る場合は圧倒的に楽になります。その場合、マスキングテープを予め貼って焦げや汚れを防止しましょう。）

最後に、USBケーブルとMicro-B側のコネクタを通すためにカッターやニッパーで引き出し口の穴を広げます。

ボタンを押し込みます。

ボタンにカッティングシートや市販のシールなどを使ってボタン名を表示します。一旦これでケースの加工は完成です。ティッシュケースの裏蓋を利用していますが、そう見えないいい感じの雰囲気で満足しています。

電子回路の加工

回路ですが、ちゃんとした回路図を描くほどでもなかったので、配線図のみ記します。

今回は誰でも簡単に作れるようにしたいという意図でできる限り加工を減らしたかったので、Pro Microに直接ボタン用の2Pコネクタを半田付けしてしまいました。複数作ったので、こちらはSparkfunのPro Microの例になっています。今回のボタンは極性がないので、コネクタの方向は部品との干渉がない向きを優先しています。

なお、通常はボタン入力にはプルアップ抵抗を接続しますが、今回はArduinoのコード内でソフトウェア設定によるプルアップ(INPUT_PULLUP)で代用します。また、GND接続も半田付けの手間を減らすために省略し、隣のGPIOポートをLOW出力設定にすることで代用します。これは今回のキーボードは4ボタンしかなく、Pro Microのポート数に余裕があるのでできる贅沢な芸当です。

（なお、Pro Microは18ポート分のGPIOがあるので、GNDを適切に使えば18個までのボタンが使えます。また、本格的な自作キーボードを使う場合はボタン数を増やすためにキーマトリクス（スイッチマトリクス）などの方法がありますが、ネット上に多数記事があるのでそちらに譲ります。）

次に、ボタンと基板を接続するケーブルを配線します。今回はコネクタにあらかじめリード線が配線されたケーブルを使用したので、ボタン側のファストン端子をカシメる（圧着する）だけですみますので簡単ですね。圧着には、高価ではありますができる限り専用の圧着工具を使いましょう。断線のリスクが減り信頼性が上がります。

ボタンの配線はポート番号との対応を間違わないよう注意しましょう。最後にUSBコネクタを配線し、基板をカプトンテープや両面テープで固定すれば完成です。なお、ケーブルが外から引っ張られた際にコネクタに不要な力がかからないようにケース内部のケーブルの長さに余裕を持ち、さらにケーブルをケース側に固定しておくことをおすすめします。

裏蓋を閉じたら完成です。

作り方：ソフトウェア編

・使用するOSに対応したArduino IDEをダウンロード→インストール→起動します。

・Pro MicroはArduino IDEに標準では含まれていないので、Pro Micro用のセットアップを行います（参考）。設定を間違って書き込むと、初回は書き込めても２回目以降書き込めなくなるケースがありますので注意してください。

・下記のコードをダウンロードしArduino IDEに読み込んでください。

念の為上記ファイルの中身のコードも貼り付けておきます。至ってシンプルですが、回路簡略化のためのちょっとした工夫をしていますので興味のある方は細かい点も見てみてください。

#include "Keyboard.h"

const int gnd[4] = {2,5,20,15};
const int key[4] = {3,6,21,18};
const int val[4] = {1,2,4,8};
int state[4] = {0,0,0,0};
int i;

void setup() {
 for (i = 0; i<4; i++){
   pinMode(key[i],INPUT_PULLUP);
   pinMode(gnd[i],OUTPUT);
   digitalWrite(gnd[i], LOW); // to output LOW as used as GND
 }
 delay(1500); //to avoid deactivation of flash rewriting
 Keyboard.begin();
}


void loop() {
 //detect key 1 to 4
 for(i=0;i<4;i++){
   if(digitalRead(key[i]) == LOW){
     Keyboard.press(0x30+val[i]); //ASCII conversion for key stroke 
     state[i] = 1;
   }else if(state[i] == 1){
     Keyboard.release(0x30+val[i]); //ASCII conversion for key release
     state[i] = 0;
   }
 }
}

・書き込む前に必ずデバイスの設定を「Pro Micro 5V/16MHz」など使うデバイスに設定してください。もし間違って書き込んでしまった場合、２回目以降の書き込みはタイミングがシビアになることがありますので注意してください。また、一度書き込む前にPCにPro Microに繋がったUSBケーブルを接続し、使うシリアルポートを確認・選択しましょう。

デバイスの設定を改めて確認できたら、左上から2番目にある「マイコンボードに書き込む」アイコンを押します。コンパイル後、書き込みが始まります。

これで完成です！

使い方

早速触ってみましょう。基本的にはUSBキーボード（HID）として認識されますので、MacでもWindowsでもドライバ不要で繋げばすぐに使えるはずです。Macでは初回接続時にキーボードの種類を認識するための「キーボード設定アシスタント」ダイアログが出ることがありますが、無視して閉じて構いません。

テキストエディタ等を開いた状態でボタンを押すと、8,4,2,1のボタンに対応した文字列が表示されます。連打したり、押しっぱなしにしたりしてみましょう。通常のキーボードと同じように入力を受け付ければ成功です！

もし入力されなかったり、違う文字が表示される場合は配線を確認しましょう。文字が連続入力できなかったり不安定になる場合は半田付けや配線の状態を再度確認しましょう。

信号や使い方は普通のキーボードではありますが、ボタンの押し心地は小気味良くアーケードゲーム感があって快適ですね。

8421の理由

ボタンの数字を8421にしたのは、プログラムを簡単にするためです。具体的にはボタンの入力信号を2の冪（べき）にし、全て合計した1つの2進数で扱うためです。ボタンから入力された8,4,2,1の値は4ビットの2進数の1〜4桁目となります。
このメリットとして、入力された値のOR演算（足し算）を行うと、複数のボタンを同時に押したとしても値が0〜15までの16種類の一意な数に定まり、プログラムの中で場合分け・条件分岐を簡単に記述して扱うことができるようになります。例えば、1と2の同時押しは足し算して3と一意に決まり、1と8の同時押しは9、2,4,8の同時押しは14など、足し算した値は絶対に他の組み合わせと同じになりません。これは2進数の原理的な理由そのものから来ていますが一見不思議で楽しいですね。また、これを応用してどのボタンが入力されたかを知るためにそのビット以外を0にした「ANDマスク」を使って判別するなど、プログラムをシンプルにするためにも有効です。このようないわゆる「ビット演算」を使ったOR演算による複数入力の判定は組み込みプログラミング等では多用される便利なテクニックになります。

なお、普通はこういったビット演算はプログラムの裏側の見えないところで処理されるため、ボタン名称にまでする必要はないのですが、今回はどちらかというと小学生の子どもにも足し算でボタンの押し方の全組み合わせを表現できる、ということを実感してもらいたかった意図もあって、あえて明示的にボタン名にも取り入れることにしました。

ちなみに発想の元ネタは「マウスの父」でありGUIやあまたのユーザーインターフェースの父であるダグラス・エンゲルバートのコードキーセットの影響を受けてます。コードキーセットは五本指キーボードの同時押しにより31個の組み合わせを使って文字入力を行えるものです。今回は4ボタンにしましたが、理由としては元々ロボットで相撲技を作るのに使いたいということで、15個のコマンドがあれば十分かなということと、5つボタンがあると単押しのみで前後左右と技が作れてしまい同時押しのプログラムを書くモチベーションがなくなってしまうためです。単押しと同時押しでは急にプログラムの作り方が変わるので、それを楽しみながら感じられたらという意図がありました。単押しと全押し（４つ同時押し）だけでも結構楽しめます。

toioとの組み合わせ例

toioのビジュアルプログラミングを使って動かしてみました。実際に小学生の子どもたちに0〜15までのボタン入力の組み合わせにプログラム（ここでは相撲の技）を割り当てて使ってもらうと、大興奮であそんでくれました。

（再掲：toioの公式イベントでも使用された様子がYouTubeに出ています）

やっていることは普通のキーボード操作と同じなのですが、ユーザーインターフェースは触り心地や見た目も重要だなということを改めて実感します。また、ボタンが4つしかないことで、組み合わせの工夫などが生まれ、ゲーム性も向上します。相撲やサッカーなどのロボットコンテスト的な使い方にはとても適していると思います。

まとめ

回路やコードを改造すれば、オリジナルの少ボタン・デカボタンキーボードが簡単に作れます。使ってみると思いの外快適で楽しく、イベントやツールとして応用も効くと思いますし、複数のキー入力をアサインすればショートカットにも使えますのでオススメです。タブレットなどに繋いで使えばキオスク端末・デジタルサイネージにも応用できるかもしれません。
自分は自作キーボードには無縁だと思っていましたが、やってみると結構楽しいので、今後も何か作ってみたいと思います。もしこれを改造して作られた方はぜひWebやSNS、Note等でシェアしていただければ嬉しいです。