【Robo Blocksの使い方】ディスプレイのタッチを処理する_おまけ

2021年11月24日 21:05

ソフトバンクロボティクスでPepperを使ったプログラミング教育を担当してる佐藤です！
前回の記事ではタブレットのタッチを処理する方法を紹介しました。こちらではしっかり作り込む方法を紹介しましたが、さっと作りたい時に楽ができる方法をご紹介します。

ボタンを大きくする

前回の記事でご紹介した以下のパターンですとボタンの領域を指定するために軸（赤線）が横4本・縦2本の計6本必要になります。

この線が少なければ少ないほど楽に実装できることになります。
出来るだけ隙間を埋めるためにボタンを大きくしてみます。

こうした場合、厳密に考えると以下のようになり軸の数は変わりません。

しかしながら、端部分より指の幅の方が大きいぐらいにしておくと物理的に触ることが非常に難しくなるので、そこはもうボタンの一部だと考えてしまうと、端の軸は無視できます。

残るは中央の軸ですが、これも細いのでここをタッチされるのはレアケースだと割り切って、真ん中一本にしてしまいます。

こうすると6本あった軸を1本にすることができました。
Pepperに「○か×か、ボタンを触ってね」など発話をさせて、触れば進むことを分かりやすく誘導すれば、これぐらい簡略化しても何の問題もなく使えるケースが多いと思います。

選択肢の数が多くなった場合も同様です。
四択なら以下のようにボタンのサイズが大きい画像を用意すると、軸2本で処理できます。

数字を入力するようなケースも同様です。
以下のように数字を並べると処理するために必要な軸の数が多くなりますが・・・

思い切ってこう並べてしまうと処理としてはとても楽になります。

とはいえ、入力のしやすさは前者の方が上だと思いますので、作り込む時間があるかどうかでどういう画面にするのか検討すると良いと思います。

条件分岐が増えると設定が難しくなって、思った通りに反応しない・違うボタンが反応するなどのバグが発生しやすくなります。
プログラミングに不慣れな内はレイアウトでなんとかしてしまうというのも良いのではないかと思いますので、複雑なタッチ処理を受け付ける画面は簡略化して楽にプログラムを作りましょう！

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ソフトバンクロボティクス株式会社　ホームページ
https://www.softbankrobotics.com/jp/

Pepper教育関係者フォーラム
https://pepper-schoolchallenge.com/

━━━━━━━━━━━━━━━━━━━━Pepperブログ編集部━┛