※こちらの記事に対して、より適切な設定がありましたので改訂します（6/19）

ほぼ毎月なんらかのアップデートが実施されているAdobeのプロトタイピングツール「XD」に、キーボードのキー入力によって画面が遷移するという新しい機能が追加されました。

簡単なところでは、キーボードのカーソルキーでメニューリストを動かすことが実現できます。しかし本当に威力を発揮するのはもう少し複雑な使い方です。

デジカメの十字キーやダイヤル、医療機器の各種スイッチなど、タッチUIではなくフィジカルで物理的な入力デバイス（ソリッドということでSUIと呼ぶこともある）でプロトタイプを動作させるために利用することができるようになるのです。

「簡単」同士が繋がる意味

これまで大変苦労をしてSUIとGUIが融合した製品のプロトタイプを作ってきましたが、XDのキー入力によって一気に簡単になります。

近年のAdobeXDをはじめとするGUIのためののプロトタイピングツールの便利さ・簡単さからくる作成スピードの魅力は、従来のツールでの作成を躊躇してしまうほど大きな差となっていました。

またマイコンボードもイギリスのBBCが小中学生向けに開発したmicro:bitは、驚くほど簡単に相互に無線通信ができたり、PCとシリアル通信ができる仕組みが用意されています。

この２つの「簡単」を組み合わせる具体的な方法について３つのステップで書きます。

①micro:bitでシリアル通信で文字を送信する

今回は単純にボタンを押すことで"a”の文字をシリアル通信で送信するブロックスクリプトを書きます。たったこれだけです。

micro:bitを使う理由は、何かを実行するための事前手続きが不要だからです。

aというキー入力をPCに送るために必要なブロックコードはたったこれだけです

[追記 6/19]
複数のスイッチ入力を利用するときのコードを記載しておきます。まず入出力端子にスイッチを接続します。ピンヘッダが付いた拡張ボードを利用すると便利です。

キーの数が多くなることで「もし」のリピートスピードが変化するので、初期変数で設定できるようにしてます。スイッチの数が１つの場合には300ms程度が良いみたいです。
数が増えてくれば、100msくらいにすることで、スイッチの反応を最適化することができます。

②シリアル通信をキー入力に変換する

komozoさんが作成された「Seri2Key」というフリーウェアを利用させてもらいました。

Seri2Key.exeをダブルクリックすると、タスクバーにアイコンが表示されるので、右クリックでメニューを出し「設定」をおこないます。
設定後は「接続」を選択すると、シリアル通信で送られてきたテキストがキー入力に変換される。

※Seri2Keyの設定でいくつか最適化できていませんでしたので上記の図に改訂しました。　こちらで快適に使えるようになります。

③AdobeXDでキー入力を使って画面遷移させる

１つの画面に対して、複数の行き先がある場合には、複数のオブジェクトを配置して、そこから線を引き出していきます。この方法を使うことで１つの画面から複数の移動先をキー入力で操作できるようになります。

画面内の四角形がキーボードの行き先を指定するイベントリスナーオブジェクトです。１つの画面に対して複数の行き先を設定することができます

以上、たった３つの作業だけで、キー入力に対してXDの画面を操作できるようになりました。

※以前の記事では、反応スピードに関する問題を記載していましたが、設定を最適化することで解決することができました。

動画のデモでは、加速度の特定範囲を文字に置き換えてからキー入力に変換しています。

ありがとうBBC！　ありがとうkomozoさん！　ありがとうAdobe！