my-first-project

このリポジトリには、5つのアプリが入っています。それぞれ独立していて、お互いに影響しません。

アプリ	開くファイル / 場所	ビルド
ダイエット食事管理アプリ	diet-tracker.html	不要
InBody × 痛み因果診断アプリ	index.html	不要
React アプリ（開発中）	react-app/ フォルダ	必要（Vite）
AI肌分析・美容管理アプリ（開発中）	skin-app/ フォルダ	必要（Next.js）
整骨院・整体院向け WEB 予約システム	booking-app/ フォルダ	必要（Next.js）

ダイエット食事管理アプリ

diet-tracker.html をブラウザで開くだけで使えるダイエット用の食事管理アプリです。ビルドは不要です。ログインしない場合はブラウザの localStorage のみにデータが保存され、ログインするとクラウド（Firebase Firestore）に保存され、別の端末・ブラウザからも同じアカウントで同じデータにアクセスできます。

機能

• パーソナルデータ（性別・年齢・身長・体重・活動量・目標）からBMR/TDEEを計算し、目標カロリー・PFC（たんぱく質/脂質/炭水化物）を自動算出
• 目標値は自動計算後も手動で調整可能
• 朝食・昼食・夕食・間食ごとの食事記録（カロリー、P/F/C）
• 日別のカロリー摂取サマリーと進捗バー、目標PFCとの比較
• 日付を移動して過去の記録を確認・編集
• 直近14日間のカロリー推移グラフ、体重記録と推移グラフ
• ブラウザ内プロフィール切り替え（同じ端末を複数人で使う場合。ログイン中は無効）
• メールアドレス/パスワードでのログインによるクラウド同期（別端末・別ブラウザから同じデータにアクセス可能）
• 写真からAI（Google Gemini）でカロリー・PFCを自動解析、food名+分量からのAI自動計算
• 1日の食事内容をAIが評価し一言アドバイスを表示
• PWA対応（スマホのホーム画面にアプリとして追加可能、簡易オフライン対応）

使い方（ローカルのみで使う場合）

1. diet-tracker.html をブラウザで開く
2. パーソナルデータを入力して「自動計算する」→「この設定を反映する」、または目標値を直接入力
3. 食事を記録し、日々の摂取量を確認

クラウド同期（別端末からのアクセス）を使う場合のセットアップ

クラウド同期には自分の Firebase プロジェクトが必要です（無料枠で利用できます）。

1. Firebase コンソール で新しいプロジェクトを作成する
2. 「Authentication」→「Sign-in method」で メール/パスワード 認証を有効にする
3. 「Firestore Database」を作成する（本番モードでよい）。ルールタブで以下を設定する:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /users/{userId} {
         allow read, write: if request.auth != null && request.auth.uid == userId;
       }
     }
   }
   

4. プロジェクト設定（⚙️ → プロジェクトの設定）の「マイアプリ」でウェブアプリを追加し、表示される firebaseConfig の値をコピーする
5. diet-tracker.html 内の firebaseConfig オブジェクト（var firebaseConfig = { ... }）を、コピーした値に書き換えて保存する
6. 書き換えた diet-tracker.html をブラウザで開くと、画面上部に「☁️ クラウド同期」欄が表示される。メールアドレスとパスワードで「新規登録」し、他の端末・ブラウザでも同じ diet-tracker.html（同じ firebaseConfig を書き込んだもの）を開いて同じアカウントでログインすればデータが同期される

firebaseConfig を書き換えずに開いた場合は「クラウド同期は未設定です」と表示され、従来どおりブラウザ内保存のみで動作します。

ホーム画面に追加する（PWA）

diet-tracker.html をブラウザで開いた状態で、以下の操作をするとアプリのように使えます。

• iPhone（Safari）: 共有ボタン（□に↑）→「ホーム画面に追加」
• Android（Chrome）: メニュー（⋮）→「アプリをインストール」または「ホーム画面に追加」
• PC（Chrome/Edge）: アドレスバー右側のインストールアイコン、またはメニューから「アプリをインストール」

ホーム画面のアイコンから起動すると、ブラウザのアドレスバーなしでアプリのように表示されます。オフライン時も、直前まで開いていた画面の骨組みは表示されます（データの読み書き自体はオンラインが必要な機能もあります）。

InBody × 痛み因果診断アプリ

InBody計測結果シートの画像をアップロードすると、OCR（Tesseract.js）で数値を自動読み取りし、体の痛みの部位・強さと合わせて、関連しそうな要因の分析と数値に基づく危険度予測を行うブラウザ完結型のHTMLアプリです。

使い方

1. index.html をブラウザで直接開きます（OCRライブラリをCDNから読み込むため、初回実行時はインターネット接続が必要です）。
2. InBody計測結果の画像をアップロードし、「画像から数値を読み取る」を押します。
3. 自動入力された計測値（体重・BMI・体脂肪率・内臓脂肪レベル・部位別筋肉量など）を確認・修正します。
4. 気になる痛みの部位・強さ・期間を選択します。
5. 「この内容で診断する」を押すと、以下が表示されます。
   • 総合リスク（安全〜危険の4段階）
   • 各計測値の評価（安全/注意/警告/危険）
   • 左右の筋肉量バランス
   • 選択した痛みの部位ごとの関連要因分析
   • 推奨アクション

特徴・注意事項

• すべての画像処理・数値解析はブラウザ内（クライアントサイド）で完結し、外部サーバーへデータは送信されません。
• OCRの読み取り精度には限界があるため、自動入力された値は必ず確認・修正してください。
• 本アプリの結果は医学的診断ではなく、あくまで参考情報です。強い痛みや長引く症状がある場合は医療機関を受診してください。

技術構成

• 単一の index.html（HTML / CSS / JavaScript）
• OCR: Tesseract.js（CDN経由で読み込み、外部サーバー通信なし）
• 外部フレームワーク不要、ビルド不要

React アプリ（開発中）

react-app/ フォルダにある React + TypeScript + Vite のアプリです。セットアップ方法とコマンドは react-app/README.md を見てください。

cd react-app
npm install
npm run dev

AI肌分析・美容管理アプリ（開発中）

skin-app/ フォルダの Next.js ＋ Supabase のアプリです。現在は第2段階（認証・権限・顧客台帳・撮影）まで実装済みです。詳しくは skin-app/README.md を参照してください。

整骨院・整体院向け WEB 予約システム

booking-app/ フォルダにある、整骨院・整体院が自院で管理できる WEB 予約システムです（Next.js + Supabase + Vercel）。 お客様は公開 URL からメニュー・日付・空き時間を選んで予約でき、店舗は管理画面で予約・営業時間・休業日・メニュー・施術スペース・施術者を管理できます。 詳しくは booking-app/README.md、公開手順は booking-app/docs/setup.md を参照してください。