ブラウザで動作する手書きタイマーを作った
最初に作ったもののリンクを下に貼っておきますね。
最近はもっぱらオンラインで会議、発表会、ミーティングが開催されるようになり、従来は時間を測るときにはスマホだしてストップウォッチで、みたいなことで十分だったのですが、どうやらそれではうまく行かないことが増えました。例えばzoomで発表会をしているときに会場全体に時間経過を見せたい。なんてことはここ1年でかなり頻度があがりました。オンライン会議において時間経過を共有したい場合、一番てっとり速いのはカメラにストップウォッチを映すことかなと思います。ただこれだと自分がカメラに映らなくなるだけでなく、だいたいミーティングカメラって真下を向けるのはなかなか困難だったりします。ずっと手で持っているわけにもいかないですしね。今回はこっちの路線では頑張らず、もう少し継続利用可能な方面で検討します。具体的にはソフトウェア的にどうにかしよう。という路線です。
windowsだったら窓の杜（古い？）、macだったらapp storeでタイマー探せばいいじゃ～ん。と思ったそこの淑女紳士のみなさま。そっとこの画面を閉じずにもう少し読み勧めてください。
これはわたしの勝手な思いすごしかもしれませんが、20年前と違って、アプリのインストールって本当に利用するツールしかインストールしなくなりました。ブラウザ動作ですむならそれでいいじゃんっていうのが民意ではないかなと考えています。そういうわけで、ブラウザで動作するタイマーはどんなのがあるのかというと、結構あるんですよね。https://timer.onl.jp とか、https://ichiro-maruta.blogspot.com/2011/09/html5.html とか、「ブラウザ タイマー」なんて検索するとほんとにたくさんでてきます。後者のリンクはMaruta Ichiroさんによってgithubに公開されていて、appearanceもカスタマイズできちゃいます。詳しくはTime Keeperのgithubページをご参照ください。ブラウザ動作のタイマーだって別に作らなくていいんじゃない？と心をよぎります。実際わたしもこのtimekeeperや timer.onl.jp にはたくさんお世話になりました。
でもね。タイマーを使うときに毎回思っちゃうんです。もうちょっとかわいいタイマーないかなって。外観だけじゃなく、なんかボタンポチポチおして時間設定するのってダサくないですか？スマホだと面倒なのでやらないです。もう2021年なのに。宇宙の旅(2001年宇宙の旅）からもう20年経ってるんですよね。halならぬsiriやgoogleに音声でお願いするっていうのが普通にできる世の中になってきたんだから、もうちょっとインタフェースや外観を洗練したものにしたいなって思ったんです。これ、いま自分で書いてて思ったんですが、音声認識でも良かったですね。今度作ってみようと思います。
そこで今回インタフェースとして利用してみたのが、手書きです。手書きは非常に学習コストの高い技能の一つですが、私達はすでにそれは学習済みなのでそれを使わない手は無いですよね。こういうのって機械を人間に寄せる発想ですが、最近だと落合氏が「人間中心のデジタル社会」があまり好きでない なんて記事もありましたが、機能としてのデジタル中心設計であり、この記事を読んだ方が人間の思想や文化も効率化を優先していいんだ、なんてことをミスリードしないことを祈ります。見出しって怖いですね。
ストローク認識（手書き文字認識）には主にオンラインとオフラインがあります。オンラインストロークとは、タブレット上やマウスカーソルを使って、その筆跡データも取得済みのストロークのことで、オフラインストロークとはすでに記述された文章等をカメラで読み込んだ文字等に対して用います。今回はオンラインストロークを扱うのですが、Rubineさんの30年前の研究（Rubine, D. (1991) Specifying gestures by example. Proc. SIGGRAPH '91. New York: ACM Press, 329-337.）が古典ですかね。いわゆるジェスチャ認識の黎明期の研究です。いまでは深層学習でやっちゃいますね。とはいえシンプルなストローク認識だったらRubineさんの論文で示されてる通り、かなり精度が高いわけです。
さて、Wobbrockさん達がUIST07で発表した$1 recognizerってやつがあるんですが、これが超速で高精度のオンラインストローク識別器なんです。詳しくは Gestures without Libraries, Toolkits or Training: A $1 Recognizer for User Interface Prototypes をご参照ください。実装も簡単なんでいろんなものに移植できます。ちょっと前のわたしの研究ではこれを atmega328 に移植して組み込みで使っていました。その時の論文「手書き入力インタフェースを用いた日用品デバイスへの応用とそのプロトタイピング」にて簡単に紹介しております。すでに$1はjsライブラリが公開されているので、今回はこれを利用して、時間設定が手書きでできるタイマーを作りました。数字の書き方は私の書き方を一筆にしているので、最初は書きづらいなって思う方もいるかも知れません。ユニストローク（一筆書き）ではなくマルチストロークにすれば正しい書き順でできるので興味のある方は試して見ると良いと思います。先のWobbrockさんたちがマルチストロークの$1 recognizerも公開しています。
今回作成した手書きタイマーの制作動機を記載してみました。細かな作り込みとかはまた別の記事で書こうと思います。ここまで呼んでいただいてありがとうございました。
最後にgithubのページリンクを貼ります。プルリクお待ちしております。
この記事が気に入ったらサポートをしてみませんか？