タイトルの通りです。
カメラで姿勢を監視し、猫背を検知するとﾈｺﾁｬﾝが「にゃ～ん」と鳴いてお知らせします。映像や姿勢データは外部に送信せず、すべてブラウザ内で処理するので安心安全です。ぜひご利用ください。
- アプリ「ねこ背検知」： https://nekoze.mujuko.com/
- ソースコード： https://github.com/mujuko/nekozekenchi ←「貴様がホストするWebアプリなど信用できるか！」という方は、ソースコードを手元に持ってきて
npm ci→npm run devで起動するとよいです。
使い方
- カメラを起動する
- 姿勢を登録する
- 3秒間、良い姿勢を維持
- 3秒間の姿勢変更タイム
- 3秒間、猫背の姿勢を維持
- 良い姿勢をキープする
本題は以上です。ありがとうございました。
おまけ
せっかくなので、技術的な話を少し。
猫背検知のしくみ
姿勢の推定には MediaPipe Pose Landmarker を使い、ブラウザ上でリアルタイムに処理しています。
猫背かどうかは、シンプルに頭の位置（正確には鼻のY座標）がどれくらい下がったかを見て判定します。
ChatGPT/Codexは背中の湾曲だの肩の位置だのと小難しい方法を提案してきたものの、姿勢が悪くなれば頭の位置はだいたい下がります。「うるせえ！ 頭の高さを見ればいいんだよ！」で押し切りました。
リリースパイプライン
GitHub Actionsで静的アプリをビルドし、Cloudflare Workersへデプロイしています。
ちなみに、最初はCloudflare Workers BuildsのGit連携を使っていましたが、次の要件を満たせなかったため、GitHub Actionsに移行しました。
- 共通のmainブランチから開発環境と本番環境の2面に配りたい
- コミットが追加されるたびに開発環境を更新したい
- コミットに バージョンタグが付いていたときだけ 本番環境を更新したい ←Workers BuildsのGit連携ではこれが設定できなかった
ちなみにちなみに、開発環境にはCloudflare Zero Trustで認証をかけ、一般の方は入れないようにしています。ダッシュボードからボタンポチで手軽に導入でき、無料枠のおかげで出費ゼロです。ありがたいですね。
今後の展望
ブラウザ拡張版を作りたい。
サイドパネルで常時起動するのは邪魔だし、かっこ悪い。ポップアップで設定を済ませて、あとはバックグラウンドで監視を実行したい。だが、そこには技術的な制約があって……？（次回予告）
あと、ちゃんとしたアイコンも用意したい。
それでは皆様、本日も良い姿勢でお過ごしください。