ワンボタンキーボードでiPadのProcreate用「お絵かき用左手バイス」作ってみた

 
「ワンボタンキーボード」
。 iPad pro にも繋がるということで、アプリ「Procreate」用の、3機能を備えたお絵かき左手デバイスとして作ってみました。 キーアサインが同じ「メディバン」でも使えるんじゃないでしょうか。

ていうかワンボタンキーボードって?

ワンボタンキーボードは、TOKYO FLIP-FLOPさん… ↓ こちらで制作・販売をしている、電子工作キットです。


メモリありのマイコンチップを搭載していて、Arduinoを使ったプログラミングで好きなキーアサインを記憶させたり、入力動作のバリエーションを作れます。

「ショートカットを持ち歩こう!」という公式コンセプトなだけあって、みなさん基本的には、「実用もできるネタガジェット」みたいな扱いで、1機能で楽しまれているようです。

でも、私は ↓ こういう感じで、Joy to key のボタンアサインで遊んできた人間なので……。

【Joy to Key】お絵かき用の左手デバイス:ジョイコンのキーアサイン!

2018年12月9日
おさかな
1つのボタンったって、プログラム制御できるんなら、「1回押し」「2回押し」「3回押し…」「長押し」「長押しからの解放」だけで5機能以上使えるじゃんよ?

とか思ってしまったわけで。

さらに

おさかな
ボタン自体にキーアサインや入力動作を記憶させられるってことは、iPad proの……Procreateに使える、多機能左手デバイスとして使えるじゃん!
ProcreateでOKな左手デバイスが無かった
iPad 向けの左手デバイスとして有名な「8bitDO」などのゲームコントローラーは、ボタンのキーアサインが Procreate とあまりマッチしていないんです。使える機能はこれらだけで、しかも変更ができないんですよね。

・十字キー上 (E) → 消しゴムツール
・十字キー下 (X) → 1つ前の色に切り替え(ペイントモード)
・十字キー右 (C) → カラーパネルを開く
・セレクト (V) → 変形ツール

ぶっちゃけ「消しゴムとブラシの切り替え」「アンドゥ」できないならあんまり意味ないなあと。

というわけで、頭に天啓が下りてきました。

買いなさいと。

買ってみた!作ってみた!

「ノーサポート・自己責任」「自分にある程度の知識がある」ことをはっきり確認したのち購入。  ↓ 納品書にもしっかりその確認の経緯が記されていました。

きっと、よくわからない人が何も考えずに買って、ドはまりしたりするんでしょうね。 ていうか私も全然知識無いですが、自己責任で頑張る決意で購入してます。 しっかりとした組み立て説明の公式ページもありましたし、なんとかやれるんじゃないかと。

パーツはこれだけ。 マイコンチップ、ピンヘッダ。基板2枚、キースイッチ、キーキャップ(黄)、基板を合わせるためのネジ&スペーサー。

準備は万端。でも、左上の青い2つは使いませんでしたね。

「半田づけ」だけ購入。少量の半田付属でAmazonで、送料税こみ700円弱。

created by Rinker
白光(HAKKO)
¥681 (2020/09/28 20:42:02時点 Amazon調べ-詳細)
「あわせ買い」ができるなら、こっちの40Wの方がお得かな。
created by Rinker
白光(HAKKO)
¥640 (2020/09/28 20:42:03時点 Amazon調べ-詳細)

ニッパーが無いのでカッターで切断。 自分はいつもプラモだとこうしてるんで迷いなくやっちゃいましたが、真似しない方が良いと思います……。

ピンヘッダから余分なピンを引っこ抜いて……。

基盤に差し込んで……。

ズレないようにマイコンチップを支えにしつつ、マスキングテープで固定して……。

マスキングテープ自体を「手術台」に応用して半田づけ。 このマスキングテープのやり方は公式の説明ページにあったんですが、賢いですよね!

そしたらいったんマイコンチップを外してキースイッチを乗せたら、それを半田づけです。
なお、キースイッチは Cherry MX キーボード系の「緑軸」。 カチャカチャとした打鍵感が楽しく、固さもちょうどよくて指を上に乗せただけでは誤爆しにくく、合っていると思います。

 

改めてマイコンチップを乗せて、半田づけ……。

2枚の基板をスペーサーを挟んでねじ止めして、上にキーキャップを付けたら完成!

接続は、片方の先端がワンボタンキーボード用の 「マイクロUSB」、もう片方の先端 がiPad pro用 の「USB-C」になっているケーブルで行います。

おさかな
このワンボタンキーボード、デフォルトでは「w」の入力が設定されていました。 写真取り忘れましたが、キーを押すたびに草生えて草生えましたwwww。

でもって、キーキャップがちょっと物足りなかったので、ネットでいろいろと物色……! こちらを購入して換装しました。

おさかな
キーキャップの換装には、色々と紆余曲折あって何とも悩ましかったのですが、記事がかなり長くなるので、別記事に分けました。 ↓ こちらをどうぞ……!

深くてかわいい!おしゃれキーキャップのディープな世界

2020年8月23日

Arduino でボタンアサイン!(1:セットアップ)

草生えるボタンの為にこれを買ったのではないので、さっそくセットアップしていきます。

詳しい公式マニュアルがあるので詳細は省きますが、初心者のたどった道を記していきますね。

ワンボタンキーボードへのプログラミングは、Arduino というプログラム言語で行います。 Arduinoのプログラム環境「Arduino IDE」は、こちらから無料でDLできます。

英語ですけど、一番上のメニューから「SOFTWARE」→「DOWNLOADS」でページ移動して、ちょい下にスクロールしたら 「Download the Arduino IDE」とある部分の右側からダウンロードです。 自分の使用しているOSの物をゲットしましょう。

これをインストールすると、ワンボタンキーボードのマイコン基盤のドライバもインストールされて、PCに認識されるようになります。 これでArduino IDE からのプログラミングが可能になります。

Arduino でボタンアサイン!(2:プログラム方法)

Arduino IDE を起動して、下側に出るテキスト入力部分にプログラムのコードを記入したら、矢印「→」のボタンを押すと、繋がっているワンボタンキーボードのメモリにコードが転送されて上書きされます。 ウインドウ下部にログがでますが、 私のPC環境の場合、ピコン♪ ピコン♪ と2回音が鳴ったら完了な感じです。

初めて Arduino IDE を起動すると、デフォルトで何かコードが書いてあると思いますが、消しちゃいましょう。 そこにキーアサインを入れていけばOKなわけです。

公式で、「ここのボタン部分を書きかえれば好きなボタンにアサインできる」コードがアップされてますので、とりあえず1機能だけでいいよ!という人にはこれのコピペで完成でございます。

なお、コード上でのキーは↓のように記載します。 公式からの転載ですが、レイアウト少しだけ工夫したので許して……!

Windows
CTRLKEY_LEFT_CTRL または KEY_RIGHT_CTRLESCKEY_ESC
SHIFTKEY_LEFT_SHIFT または KEY_RIGHT_SHIFTINSERTKEY_INSERT
ALTKEY_LEFT_ALT または KEY_RIGHT_ALTDELETEKEY_DELETE
WINKEY_LEFT_GUI または KEY_RIGHT_GUIPAGE UPKEY_PAGE_UP
スペース0x20PAGE DOWNKEY_PAGE_DOWN
上(↑)KEY_UP_ARROWHOMEKEY_HOME
下(↓)KEY_DOWN_ARROWENDKEY_END
左(←)KEY_LEFT_ARROWCAPS LOCKKEY_CAPS_LOCK
右(→)KEY_RIGHT_ARROWF(1~24)KEY_F1~24
BACKSPACEKEY_BACKSPACERETURNKEY_RETURN
TABKEY_TAB
Mac / iOS / iPad
cmdKEY_LEFT_GUIoptionKEY_LEFT_ALT

Arduino でボタンアサイン!(3:自分用プログラム)

公式さんの配布コードではちょっと難しい……

私が欲しいのは「ワンボタンで、多機能」。 一応、公式で4機能が可能なコードも公開されていたのですが……。 ボタンを押した回数に応じて4機能だったので、実用的ではないなあと。 「ボタンを素早く4回押す」とか、普通にやりませんよね。3回が限界かなあ。

おさかな
ていうかこのサンプルコード集、「おみくじ」とか「オラオラ連続入力」とか、おちゃらけた機能のコードがやたら充実してるので「活用」とはちょっと違うんでは……。 と思いつつ
「これは、そんな機能を追い求めるガジェットじゃないんだよ?」という、上級者の貫禄プレッシャーを感じたりもしたり。

欲しいのはこんな感じ。

短押しを、1回、2回、3回でそれぞれ「アンドゥ」「範囲選択ツール」「矢印ツール」にして3機能。 長押しで、長押し判定の瞬間に「消しゴム」。 そこから指を離すと「ブラシ」を狙っています。 合わせてせて5機能ですね。

とはいえ、自分はプログラミングは全くできないので、ネットに上がっている先人のコードでそれっぽいのが無いか検索……。

こちらの松下さんの 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関連のページをみて、それっぽいことをしてそうなコードを片っ端から試してついに発見……! 最後に下記の2行を足して、これで短押し挙動の後、入力が完了するようになりました。

// 短押しの場合は 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 の時」 が 「キーボードが離された」 ということなので、それを指定してあげれば良いだけでした。

わかっちゃうと確かに、「こんなん、わざわざ説明するまでのことじゃないよなあ」 と思っちゃうのが怖いですよね。

おさかな
素人の奮闘記として、上記、書き残しておきましたw

短押しからの「キーを押した回数に応じて機能振り分けが」できない…

でも、どうやってもこれができませんでした……。

↑の、「ボタンが押されてから 160ms保留」からの分岐がどうしてもうまくできません。

Arduino は、基本的には C++言語ということなので、その文法が分かっていればすぐできるんではと思うのですが、そういった基礎というか地力のない私にはお手上げです。 まる一日頑張ったのですが、どうしても2回押し以降の入力が発動せず、とうとう諦めました……。

言い訳っちゃあなんですが、キーの2回押し、3回押しって操作感的には煩雑でミス入力も増えるので、まあいいかなと……。

おさかな
でもどなたか、「このコードでいけるよ!」 とお知恵を拝借できましたら幸いです! やっぱり正直、 キー2回押しくらいは欲しいのです。orz

結局これで完成! まあまあ満足!

キーの短押し一回で「アンドゥ」、長押しすると、押している間は「消しゴム」で、キーから指を離すと「ブラシ」になります。 動画だとこんな感じ!

なお、コードを全部書くと、↓ になります。 よろしかったらご参照ください。

おさかな
でも、本人も内容については、コードをブラックBOXのまま切り貼りしているので良くわかっておらず、質問をいただいても恐らくお答えできません……。ごめんなさい。
//------------------------------------
// ワンボタンキーボード 長押し対応版
// 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);
}

満足! でも文字入力だけご愛敬……!


とりわけ欲しかった「アンドゥ」「消しゴムとブラシの切り替え」が手に入ったので、まあまあ満足です。 これだけでもかなりの効率化が図れます。

おさかな
キーアサインが自由自在なので、Procreate だけでなく メディバン とかでも活用できると思います。 ていうか メディバンは 「アンドゥ」「消しゴム」「ブラシ」が Procreate と同じキーアサインなので、このまま使えちゃうはずです。

ひとつ気を付けないといけないのが「文字入力」。

これは「キーボード」なので、 iPad 側としては「キーボード」が接続された認識でいます。

なので、これをつないでいる間はソフトウェアキーボードがポップアップしません。 「設定」で出るようにもできますが、私は Bluetoothの普通のキーボードでもテキスト入力作業をしているので、そこをいじりたくもないです。

まあ、その時だけワンボタンキーボードを引っこ抜けばいいんですけどね。

……ていうか、Bluetoothキーボードを使えば、ワンボタンキーボードを刺したままでも文字入力できちゃいます。 だからまあいいやw

ちなみに、文字入力の際、ワンボタンキーボードを使うと……。

はいw ちゃんと長押しからキー離しの 「eb」が入力されましたw 確定後に 短押しすれば、ちゃんと cmd + z 発動で文字が消えますw

というわけで

初めての電子工作~プログラム制御でしたが、夏休みの自由研究よろしく目いっぱい楽しめました! 半田ごてや、Arduino IDE、コード記述と、ハードルも中々高かったですが、得られた知識は沢山です!

なお、これに使っている青くて素敵なキーキャップは、ピアピア工作室さんで買い求めた「スタビライズドウッド」のキーキャップです。 こちらで詳しく実装記事を書いていますので、よろしかったらこちらもぜひぜひ。

深くてかわいい!おしゃれキーキャップのディープな世界

2020年8月23日

以上、ワンボタンキーボードでiPadのProcreate用「ワンボタン左手デバイス」を作ったお話でした!

 

【カテゴリー】iPad ガジェットコラム
お絵かき目線での、iPad(pro) 活用情報コラムです。 運用方法やメンテの豆知識、物欲に悩まされつつの購入Tips についての記事リストです。

よく読まれている記事