指で操作できる「フィンガータッチタイマー」

指で操作できる「フィンガータッチタイマー」を作りました

勉強や仕事をするとき、タイマーを使う人は多いと思います。

僕も時間を区切って作業するときによく使います。

で、休憩しながらポテチとか食べます。

当然、手はベタベタです。

そんな手でスマホやマウスを触りたくない。

ちょうどその頃、ml5.jsやp5.jsを使って、カメラから手の動きを認識するプログラムを勉強していました。

勉強中なので、思いつきでくだらないものをいろいろ作って試しています。

その中で、

「これ、タイマーを指で操作できるようにしたらいいんじゃないか？」

と思って作ったのがフィンガータッチタイマーです。

くだらない実験のつもりでしたが、これはなんか普通に使えそうです。

手をカメラで映すと上記のように手の骨格？が表れます。蜘蛛みたい。

カメラに人差し指を映して、画面上のボタンに指先を合わせます。

少し止めると、そのボタンが選択されます。

画面に触る必要はありません。

実際のタイマーはこちらです。

最初は「指先の位置を取ってボタンを押すだけ」と思っていました。

でも実際には、指は常に少し動きます。

ボタンの近くを通っただけで反応したり、逆に押したつもりなのに反応しなかったり。

そこで、指がボタンの上に約0.7秒とどまったら操作したことにする仕組みにしました。

普通のWebサイトでは考えないような操作方法なので、作りながら調整しています。

まだ試作品です。

手を認識するためにカメラを使いますが、カメラ映像そのものは画面に表示しません。

認識処理はブラウザ内で行い、カメラ映像や手の座標などのデータをサーバーへ送信したり、保存したりする処理はありません。

そのため、カメラを使うツールではありますが、映像が外部に送られることはありません。

手の認識に必要なライブラリやモデルの読み込みには通信します。

なお、手の認識処理を端末側で行うため、スマートフォンでは少し重く感じる場合があります。

勉強、読書、仕事、休憩など、時間を区切りたいときに使えます。

もちろん普通に使ってもいいんですが、

ポテチを食べて手がベタベタのときに使う

くらいが、このタイマーにはちょうどいい気がします。

ml5.jsやp5.jsを勉強している途中で思いついて作ったものですが、意外と実用性はありそうです。

とりあえず、指だけでどこまでブラウザを操作できるのか。

その実験も兼ねています。

気になったら使ってみてください。