syakitto

リアルタイム姿勢チェッカーで、健康的なデスクワークをサポート

syakittoは、Webカメラを使ってあなたの姿勢をリアルタイムでチェックし、猫背を検知してお知らせするデスクトップアプリケーションです。長時間のデスクワークによる姿勢の乱れを防ぎ、健康的な毎日をサポートします。

主な機能

• リアルタイム姿勢分析: Webカメラの映像からリアルタイムであなたの姿勢を分析し、「猫背スコア」として表示します。
• 多彩な通知機能: 猫背を検知すると、アニメーション、音声、デスクトップ通知など、お好みの方法でお知らせします。
• ポモドーロタイマー: 作業と休憩のサイクルを作るポモドーロタイマーを搭載。集中力の維持を助けます。
• プライバシーへの配慮: 映像の解析はすべてお使いのPC内で完結します。インターネットに映像データが送信されることは一切ありませんので、安心してお使いいただけます。
• カスタマイズ性: 通知のタイミングや種類、検知の感度などをあなたの好みに合わせて細かく設定できます。

使い方

1. 起動: アプリケーションを起動します。
2. キャリブレーション: 最初に表示されるカメラ映像に顔と肩が映るように座り、「正しい姿勢を記憶」ボタンを押して、あなたの正しい姿勢をアプリに記憶させます。
3. 自動チェック開始: キャリブレーションが完了すると、自動的に姿勢のチェックが始まります。
4. スコア確認: 猫背になるとスコアが上昇します。スコアが一定の値を超えると、設定した方法で通知が届きます。

アプリケーションの構造

syakittoは、以下の3つの主要な技術要素で構成されています。

1. 画面表示 (フロントエンド)

   • 技術: Next.js, React, TypeScript
   • 役割: あなたが操作する設定画面、カメラ映像、スコア表示など、アプリの見た目全般を担当しています。Web技術をベースに作られています。

2. デスクトップアプリの器 (Electron)

   • 技術: Electron
   • 役割: Web技術で作られた画面を、WindowsやmacOSで使えるデスクトップアプリとして動かすための「器」の役割を担っています。OSの通知機能の呼び出しや、画面上へのポップアップ表示なども担当します。

3. 姿勢検知エンジン (TensorFlow.js)

   • 技術: TensorFlow.js, MediaPipe
   • 役割: アプリの心臓部です。Webカメラから受け取った映像をリアルタイムで解析し、顔や肩の関節の位置を特定して、猫背スコアを計算します。この処理はすべてあなたのPC上で行われ、外部にデータが送信されることはありません。

猫背スコアの仕組み

syakittoは、あなたの「耳」「目」「肩」の位置関係から、猫背の度合いをスコアとして計算しています。

1. 基準となる正しい姿勢: まず、キャリブレーション（正しい姿勢を記憶）時に、あなたの「目と肩の距離」を基準として覚えます。

2. 猫背のチェック: 次に、リアルタイムの映像から「耳と肩の距離」を常に計測します。

3. スコアの計算: 正しい姿勢の時と比べて、耳が前に出て「耳と肩の距離」が「目と肩の距離」に近づくほど、猫背スコアが高くなります。つまり、頭が前に突き出ているほど、スコアが上昇する仕組みです。

この計算により、あなたが画面に近づいたり離れたりしても、正確に姿勢の変化を捉えることができます。

ダウンロード

最新版のアプリケーションは、以下のリンクからダウンロードできます。

• 最新版をダウンロード (v1.0.0)

macOSでのダウンロードに関する注意点

macOSをご利用の場合、ダウンロードしたアプリケーションが正常に起動しない場合があります。これはmacOSのセキュリティ機能（Gatekeeper）によるものです。以下のコマンドをターミナルで実行することで、問題を解決できる場合があります。

xattr -d com.apple.quarantine /Applications/syakitto.app

syakitto.app の部分は、アプリケーションをインストールしたパスに合わせて変更してください。 例: ダウンロードフォルダに存在する場合は /Users/あなたのユーザー名/Downloads/syakitto.app

開発者向け情報 (For Developers)

技術スタック

• Next.js
• TypeScript
• TensorFlow.js
  • @tensorflow-models/pose-detection (MoveNet)
• Tailwind CSS
• Electron (デスクトップアプリ版)

セットアップ

1. リポジトリのクローン:

   git clone https://github.com/TsubasaShioda/syakitto.git
   cd syakitto

2. 依存関係のインストール:

   npm install

3. 開発サーバーの起動:

   npm run dev

4. ブラウザで確認: http://localhost:3000 をブラウザで開く。

Electron デスクトップアプリ開発

• Electron開発モードの起動:

  npm run electron:dev

• デスクトップアプリのパッケージング:

  npm run electron:package:mac

ビルド確認

npm run build