指で操作できる「フィンガータッチタイマー」を作りました
勉強や仕事をするとき、タイマーを使う人は多いと思います。
僕も時間を区切って作業するときによく使います。
で、休憩しながらポテチとか食べます。
当然、手はベタベタです。
そんな手でスマホやマウスを触りたくない。
ちょうどその頃、ml5.jsやp5.jsを使って、カメラから手の動きを認識するプログラムを勉強していました。
勉強中なので、思いつきでくだらないものをいろいろ作って試しています。
その中で、
「これ、タイマーを指で操作できるようにしたらいいんじゃないか？」
と思って作ったのがフィンガータッチタイマーです。
くだらない実験のつもりでしたが、これはなんか普通に使えそうです。
手をカメラで映すと上記のように手の骨格？が表れます。蜘蛛みたい。
指で操作するタイマー
カメラに人差し指を映して、画面上のボタンに指先を合わせます。
少し止めると、そのボタンが選択されます。
画面に触る必要はありません。
5分・25分・45分を選べる
指を約0.7秒止めると選択
指をつまんで上下に動かすとスクロール
終了音のオン・オフ
画面の明るさ調整
普通のマウスやタッチ操作にも対応
実際のタイマーはこちらです。
指で操作するフィンガータッチタイマー｜LYNROAD人差し指をボタンに合わせて時間を選び、画面に触れずに操作できる無料のブラウザタイマーです。リンク先を開く作ってみると意外と難しい
最初は「指先の位置を取ってボタンを押すだけ」と思っていました。
でも実際には、指は常に少し動きます。
ボタンの近くを通っただけで反応したり、逆に押したつもりなのに反応しなかったり。
そこで、指がボタンの上に約0.7秒とどまったら操作したことにする仕組みにしました。
普通のWebサイトでは考えないような操作方法なので、作りながら調整しています。
まだ試作品です。
カメラ映像はサーバーに送りません
手を認識するためにカメラを使いますが、カメラ映像そのものは画面に表示しません。
認識処理はブラウザ内で行い、カメラ映像や手の座標などのデータをサーバーへ送信したり、保存したりする処理はありません。
そのため、カメラを使うツールではありますが、映像が外部に送られることはありません。
手の認識に必要なライブラリやモデルの読み込みには通信します。
なお、手の認識処理を端末側で行うため、スマートフォンでは少し重く感じる場合があります。
ポテチを食べながらでもスマホが汚れません
勉強、読書、仕事、休憩など、時間を区切りたいときに使えます。
もちろん普通に使ってもいいんですが、
ポテチを食べて手がベタベタのときに使う
ために作りました。
ml5.jsやp5.jsを勉強している途中で思いついて作ったものですが、意外と実用性はありそうです。
とりあえず、指だけでどこまでブラウザを操作できるのか。
その実験も兼ねています。
気になったら使ってみてください。
指で操作するフィンガータッチタイマー｜LYNROAD人差し指をボタンに合わせて時間を選び、画面に触れずに操作できる無料のブラウザタイマーです。リンク先を開くあと、ほかにもカメラで体験できるものを作ってみましたのでぜひなんかの形でお楽しみください。
カメラに手を映して遊ぶ｜炎魔法・パズル・指タイマーなどの無料アプリ｜LYNROADカメラに手を映して遊べる5つの無料アプリです。炎魔法、写真パズル、拡大鏡、四角形、指で操作するタイマーをブラウザで試せます。登録・インストールは不要です。リンク先を開くこんなツールも作っています
LYNROADでは、講義を盛り上げるため、ちょっとした不便を便利にするツールを製作して公開しています。このブログも自作のCMSです。
当ブログの以下のカテゴリで画像加工やカメラを使ったツールなどを公開しています。すべて無料、ほとんどが登録不要で安心してお使いいただけます。
[ほかのカメラツールを見る]
カメラに手を映して遊ぶ｜炎魔法・パズル・指タイマーなどの無料アプリ｜LYNROADカメラに手を映して遊べる5つの無料アプリです。炎魔法、写真パズル、拡大鏡、四角形、指で操作するタイマーをブラウザで試せます。登録・インストールは不要です。リンク先を開く[ほかの自作ツール・サービスを見る]
カテゴリー: 作る自作のサービスやツールなど。便利なものから楽しめるものまで！リンク先を開くLYNROADのほかの記事もよければ見て行ってください。
[LYNROADの記事を見る]
ウェブ五万｜自作プロダクトで月5万円を目指す在宅副業IT講師・フリーランスのエンジニアが自分の代わりに働くWeb資産を育てて月5万円の収入を得るまでの実践記録。副業で月5万円を目指して、ブログ・Webツール・アフィリエイトを実際に試す記録。失敗したこと、かかった費用、改善したことまで残しますリンク先を開く
