「ワンボタンキーボード」……。「iPad-Pro」にも繋がるということで、アプリ「Procreate」用の、３機能を備えたお絵かき左手デバイスとして作ってみました。 キーアサインが同じ「メディバン」でも使えるんじゃないでしょうか。
ていうかワンボタンキーボードって？
ワンボタンキーボードは、TOKYO FLIP-FLOPさん… ↓ こちらで制作・販売をしている、電子工作キットです。
メモリありのマイコンチップを搭載していて、Arduinoを使ったプログラミングで好きなキーアサインを記憶させたり、入力動作のバリエーションを作れます。
「ショートカットを持ち歩こう！」という公式コンセプトなだけあって、みなさん基本的には、「実用もできるネタガジェット」みたいな扱いで、１機能で楽しまれているようです。
でも、私は ↓ こういう感じで、Joy to key のボタンアサインで遊んできた人間なので……。
とか思ってしまったわけで。
さらに
・十字キー上 (E) → 消しゴムツール
・十字キー下 (X) → 1つ前の色に切り替え（ペイントモード）
・十字キー右 (C) → カラーパネルを開く
・セレクト (V) → 変形ツール
ぶっちゃけ「消しゴムとブラシの切り替え」「アンドゥ」できないならあんまり意味ないなあと。
というわけで、頭に天啓が下りてきました。
買いなさいと。
買ってみた！作ってみた！
「ノーサポート・自己責任」「自分にある程度の知識がある」ことをはっきり確認したのち購入。 ↓ 納品書にもしっかりその確認の経緯が記されていました。
きっと、よくわからない人が何も考えずに買って、ドはまりしたりするんでしょうね。 ていうか私も全然知識無いですが、自己責任で頑張る決意で購入してます。 しっかりとした組み立て説明の公式ページもありましたし、なんとかやれるんじゃないかと。
パーツはこれだけ。 マイコンチップ、ピンヘッダ。基板２枚、キースイッチ、キーキャップ（黄）、基板を合わせるためのネジ＆スペーサー。
準備は万端。でも、左上の青い２つは使いませんでしたね。
「半田づけ」だけ購入。少量の半田付属でAmazonで、送料税こみ700円弱。
ニッパーが無いのでカッターで切断。 自分はいつもプラモだとこうしてるんで迷いなくやっちゃいましたが、真似しない方が良いと思います……。
ピンヘッダから余分なピンを引っこ抜いて……。
基盤に差し込んで……。
ズレないようにマイコンチップを支えにしつつ、マスキングテープで固定して……。
マスキングテープ自体を「手術台」に応用して半田づけ。 このマスキングテープのやり方は公式の説明ページにあったんですが、賢いですよね！
そしたらいったんマイコンチップを外してキースイッチを乗せたら、それを半田づけです。
なお、キースイッチは Cherry MX キーボード系の「緑軸」。 カチャカチャとした打鍵感が楽しく、固さもちょうどよくて指を上に乗せただけでは誤爆しにくく、合っていると思います。
改めてマイコンチップを乗せて、半田づけ……。
２枚の基板をスペーサーを挟んでねじ止めして、上にキーキャップを付けたら完成！
接続は、片方の先端がワンボタンキーボード用の 「マイクロUSB」、もう片方の先端 がiPad pro用 の「USB-C」になっているケーブルで行います。
でもって、キーキャップがちょっと物足りなかったので、ネットでいろいろと物色……！ こちらを購入して換装しました。
Arduino でボタンアサイン！（１：セットアップ）
草生えるボタンの為にこれを買ったのではないので、さっそくセットアップしていきます。
詳しい公式マニュアルがあるので詳細は省きますが、初心者のたどった道を記していきますね。
ワンボタンキーボードへのプログラミングは、Arduino というプログラム言語で行います。 Arduinoのプログラム環境「Arduino IDE」は、こちらから無料でDLできます。
英語ですけど、一番上のメニューから「SOFTWARE」→「DOWNLOADS」でページ移動して、ちょい下にスクロールしたら 「Download the Arduino IDE」とある部分の右側からダウンロードです。 自分の使用しているOSの物をゲットしましょう。
これをインストールすると、ワンボタンキーボードのマイコン基盤のドライバもインストールされて、PCに認識されるようになります。 これでArduino IDE からのプログラミングが可能になります。
Arduino でボタンアサイン！（２：プログラム方法）
Arduino IDE を起動して、下側に出るテキスト入力部分にプログラムのコードを記入したら、矢印「→」のボタンを押すと、繋がっているワンボタンキーボードのメモリにコードが転送されて上書きされます。 ウインドウ下部にログがでますが、 私のPC環境の場合、ピコン♪ ピコン♪ と２回音が鳴ったら完了な感じです。
初めて Arduino IDE を起動すると、デフォルトで何かコードが書いてあると思いますが、消しちゃいましょう。 そこにキーアサインを入れていけばOKなわけです。
公式で、「ここのボタン部分を書きかえれば好きなボタンにアサインできる」コードがアップされてますので、とりあえず１機能だけでいいよ！という人にはこれのコピペで完成でございます。
なお、コード上でのキーは↓のように記載します。 内容は公式からの転載ですが、レイアウト少しだけ工夫したので許して……！
Arduino でボタンアサイン！（３：自分用プログラム）
公式さんの配布コードではちょっと難しい……
私が欲しいのは「ワンボタンで、多機能」。 一応、公式で４機能が可能なコードも公開されていたのですが……。 ボタンを押した回数に応じて4機能だったので、実用的ではないなあと。 「ボタンを素早く4回押す」とか、普通にやりませんよね。3回が限界かなあ。
「これは、そんな機能を追い求めるガジェットじゃないんだよ？」という、上級者の貫禄プレッシャーを感じたりもしたり。
欲しいのはこんな感じ。
短押しを、1回、2回、3回でそれぞれ「アンドゥ」「範囲選択ツール」「矢印ツール」にして３機能。 長押しで、長押し判定の瞬間に「消しゴム」。 そこから指を離すと「ブラシ」を狙っています。 合わせてせて５機能ですね。
とはいえ、自分はプログラミングは全くできないので、ネットに上がっている先人のコードでそれっぽいのが無いか検索……。
こちらの松下さんの note 記事が近かったんですが、これだと長押しの間ずっと入力を繰り返す挙動なのと、「ボタンを離した時」の挙動は無設定です。 こちらを丸々いただいて完成というわけにはいきません。
上述公式の「ボタンを押した回数で機能振り分け」と、この松下さんのコードをベースに、自分で何とか考えて頑張ってみようと思いました。
入力を繰り返さないようにする
これはどうということも無く、キー入力がされて一定時間たったら発動しないようにしました。
公式さんのコードで delay(10); から Keyboard.releaseAll(); のくだりの横に、コメントを入れてくれてたので解読余裕でした。↓ コピペなのでコメントも残ってます。
// 短押しの場合は Undo（Ctrl + z）
Keyboard.press(KEY_LEFT_GUI); // [Cmd]を押す
Keyboard.press('z'); // [z]を押す
delay(10); // 10ms待つ
Keyboard.releaseAll(); // すべて離すでも、これだと、この短押しの操作を行った後に、さらに長押しからボタンを離した効果も出てしまうようになりました……。
つまり、「アンドゥ」を行った後にそれで終了にならず、（「消しゴム」を飛ばしつつ）「ブラシ」が発動してしまっています。
Keyboard.releaseAll(); で「離した」っていうのは、まだ物理的にまで離した扱いにはなってなくて、一連の入力操作が終わってない扱いだったようです。
なのでコードの中で、完全に離して終了したことを、指定する記述を入れないといけないのですが……。
これなんですよね……。 デザインでもプログラムでも何でもそうなんですが、本当の意味で 初心者向けの情報サイトは存在しない……。
かなり勉強した時についでに覚えるとか、すごく勉強する時に常識として身に着けるとか、そういった「テクニック未満」の情報って、なかなかネットの海に放流されないのですよね。
「ボタンを離した」を発見
色々な Arduino関連のページをみて、それっぽいことをしてそうなコードを片っ端から試してついに発見……！ 最後に下記の２行を足して、これで短押し挙動の後、入力が完了するようになりました。
// 短押しの場合は Undo（Ctrl + z）
//Keyboard.press(KEY_LEFT_CTRL); // [Crtl]を押す（Win用）
Keyboard.press(KEY_LEFT_GUI); // [Cmd]を押す（iOS・iPad用）
Keyboard.press('z'); // [z]を押す
delay(10); // 10ms待つ
Keyboard.releaseAll(); // すべて放す
prevKeyState = LOW;
currKeyState = HIGH;できてみれば、超あったりまえの話で、このコードの中では 「prevKeyState が LOW で、currKeyState が HIGH の時」 が 「キーボードが離された」 ということなので、それを指定してあげれば良いだけでした。
わかっちゃうと確かに、「こんなん、わざわざ説明するまでのことじゃないよなあ」 と思っちゃうのが怖いですよね。
短押しからの「キーを押した回数に応じて機能振り分けが」できない…
でも、どうやってもこれができませんでした……。
↑の、「ボタンが押されてから 160ms保留」からの分岐がどうしてもうまくできません。
Arduino は、基本的には C++言語ということなので、その文法が分かっていればすぐできるんではと思うのですが、そういった基礎というか地力のない私にはお手上げです。 まる一日頑張ったのですが、どうしても2回押し以降の入力が発動せず、とうとう諦めました……。
言い訳っちゃあなんですが、キーの2回押し、3回押しって操作感的には煩雑でミス入力も増えるので、まあいいかなと……。
結局これで完成！ まあまあ満足！
キーの短押し一回で「アンドゥ」、長押しすると、押している間は「消しゴム」で、キーから指を離すと「ブラシ」になります。 動画だとこんな感じ！
なお、コードを全部書くと、↓ になります。 よろしかったらご参照ください。
//------------------------------------
// ワンボタンキーボード 長押し対応版
// https://www.one-button-key.com/
//Osakanaアレンジ https://www.semiro.info
//------------------------------------
#include "Keyboard.h"
#define PIN_KEYSW (9)
int prevKeyState;
int currKeyState;
void setup() {
pinMode(PIN_KEYSW, INPUT_PULLUP);
prevKeyState = HIGH;
currKeyState = HIGH;
Keyboard.begin();
}
void loop() {
currKeyState = digitalRead(PIN_KEYSW);
// キースイッチが押された
if ((prevKeyState == HIGH) && (currKeyState == LOW)) {
delay(160); // 長押し判定
if(digitalRead(PIN_KEYSW) == HIGH) {
// 短押しの場合は Undo（Ctrl + z）
Keyboard.press(KEY_LEFT_GUI); // [Cmd]を押す（iOS・iPad用）
Keyboard.press('z'); // [z]を押す
delay(10); // 10ms待つ
Keyboard.releaseAll(); // すべて放す
prevKeyState = LOW; // キー解放
currKeyState = HIGH;
} else {
// 長押しの場合は消しゴム
Keyboard.press('e'); // [e]を押す
delay(10); // 10ms待つ
Keyboard.releaseAll(); // すべて放す
}
// キースイッチが放された
}else if ((prevKeyState == LOW) && (currKeyState == HIGH)) {
Keyboard.press('b'); // [b]を押す
delay(10); // 10ms待つ
Keyboard.releaseAll(); // 押したキーを放す
}
prevKeyState = currKeyState;
delay(10);
}満足！ でも文字入力だけご愛敬……！
とりわけ欲しかった「アンドゥ」「消しゴムとブラシの切り替え」が手に入ったので、まあまあ満足です。 これだけでもかなりの効率化が図れます。
ひとつ気を付けないといけないのが「文字入力」。
これは「キーボード」なので、 iPad 側としては「キーボード」が接続された認識でいます。
なので、これをつないでいる間はソフトウェアキーボードがポップアップしません。 「設定」で出るようにもできますが、私は Bluetoothの普通のキーボードでもテキスト入力作業をしているので、そこをいじりたくもないです。
まあ、その時だけワンボタンキーボードを引っこ抜けばいいんですけどね。
……ていうか、Bluetoothキーボードを使えば、ワンボタンキーボードを刺したままでも文字入力できちゃいます。 だからまあいいやｗ
ちなみに、文字入力の際、ワンボタンキーボードを使うと……。
はいｗ ちゃんと長押しからキー離しの 「eb」が入力されましたｗ 確定後に 短押しすれば、ちゃんと cmd + z 発動で文字が消えますｗ
というわけで
初めての電子工作～プログラム制御でしたが、夏休みの自由研究よろしく目いっぱい楽しめました！ 半田ごてや、Arduino IDE、コード記述と、ハードルも中々高かったですが、得られた知識は沢山です！
なお、これに使っている青くて素敵なキーキャップは、ピアピア工作室さんで買い求めた「スタビライズドウッド」のキーキャップです。 こちらで詳しく実装記事を書いていますので、よろしかったらこちらもぜひぜひ。
以上、ワンボタンキーボードでiPadのProcreate用「ワンボタン左手デバイス」を作ったお話でした！
