プロダクト

印算(いんざん)

印算(いんざん)

印を結ばなければ打刻できない勤怠管理。Webカメラに両手を映して十二支の印を順に結ぶと出退勤が記録されます。打刻ボタンはありません。

印を結ばねば、打刻は通らぬ

Webカメラに両手を映し、課された印を順に結ぶと出退勤が記録される勤怠管理です。打刻ボタンは置いていません。

階級を下忍・中忍・上忍から選ぶと、それに応じた術が打刻のたびに課されます。下忍なら印1〜3個の手ほどきの術、上忍なら8〜10個の奥義です。画面の巻物に印の並びと手の形が出るので、そのとおりに両手で結びます。1つの印は450ms保持すると確定し、6秒空くと連なりは解けてやり直しです。

十二支の印を単眼カメラで読み分ける

扱う印は十二支の十二種すべてです。原典の印は立てる指の組み合わせが印ごとに重ならないので、単眼カメラでも取り違えずに読めます。戌だけは指ではなく手の重ね方(握った手にもう一方の掌をかぶせる)で決まります。

MediaPipe HandLandmarkerで両手21点のランドマークを取り、指の伸展と両手の位置関係から印を判定します。しきい値はすべて手の大きさ(手首から中指付け根)を1とした比で持っているので、カメラとの距離や画角に依存しません。

判定を毎フレームそのまま使うと苦戦しました。指の伸展判定はしきい値の境目でちらつき、手が深く重なるフレームでは片手を見失う。1フレームの化けで保持時間が振り出しに戻り、正しく結んでいるのに確定しない。直近5フレームの多数決で均してから印の連なりに流すようにして解決しています。

打刻の可否はサーバー側でも印の連なりを照合します。課す術もサーバーが台帳の階級から導くので、クライアントが易しい術を騙ることはできません。どの術が課されるかは識別子と打刻種別と直前の打刻から決定的に決まるので、画面を読み込み直しても課題は変わりません。

意匠

配色は勝色(かちいろ)です。藍を限界まで濃く染めた紺で、忍の装束が黒ではなく紺だったのは夜陰では黒がかえって浮くためだと言われています。その紺地に、印を捺す朱とチャクラの浅葱、術が成った金茶を役割ごとに載せました。

技術

  • Vite / React / TypeScript / MediaPipe Tasks Vision
  • Hono on Cloudflare Workers / D1

ブラウザから試せます。カメラの許可が要りますが、映像は端末内で処理していてサーバーには送っていません。