食事と体重の記録
DailyFit
食事と体重をスマートフォンから記録する個人用Webアプリ。食品や定番食の登録、食事写真と栄養成分表示の読取り、日別の摂取量と体重の確認に対応する。通信が途切れたときの操作は端末に保存して再送し、記録画面とAPIはログインした本人だけが利用できる。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| React | 今日の記録、食事入力、体重の推移、設定の画面を表示する。 |
| Hono | Cloudflare Worker上で食事、体重、写真解析、データ出力のAPIを提供する。 |
| Cloudflare D1 | 本人ごとの食品、食事、体重、目標と食事写真を保存する。 |
| IndexedDB | 端末内に未送信の操作、写真の下書き、定番食のキャッシュを保持する。 |
| Cloudflare Workers AI | 食事写真の栄養値の概算と、包装にある栄養成分表示の読取りを補助する。 |
| Cloudflare Access | 記録画面へのログインを要求し、WorkerでもAPIの認証トークンを検証する。 |
処理の流れ
食品や定番食を登録する
食品の名前と栄養値を入力する。包装の栄養成分表示を撮った場合は読取り結果を入力欄で確認し、必要な箇所を直して保存する。
食事と体重を記録する
定番食を選ぶか食品と量を入力する。食事写真は任意でAIによる概算を使い、内容を確認してから記録する。体重は日付を指定して入力する。
端末から同期する
食事や体重の操作を端末内に保存してWorkerへ送る。未送信の操作はオンライン復帰や画面復帰時に再送し、同期が終わるまで区別して表示する。
日別の記録を確かめる
確定した食事のエネルギーとたんぱく質、脂質、炭水化物を集計し、未確定の項目と1日の確認状態、体重の履歴を表示する。
実装の工夫
未知の栄養値と予定を集計から分ける
日別の集計は実際に食べた記録だけを対象にする。栄養値が不明な食事をゼロとみなさず、その項目の合計を不明として表示し、判明分のエネルギーと不明な件数も示す。
オフライン操作の重複と競合を扱う
端末は利用者ごとに操作ID付きの未送信データを保存する。Workerは同じ操作IDの再送を重複処理せず、食事の編集と削除では記録の版番号を照合し、別端末で変更された記録を無言で上書きしない。
写真の解析結果を保存前に確認する
食事写真のAI概算は利用者がボタンを押したときだけ実行し、料理名と栄養値を修正できる入力欄に反映する。栄養成分表示の読取りも食品登録欄への入力補助とし、読めなかった値は空欄で残す。
構成と制約
- 現在は本人向けの試用版で、公開トップから記録画面へ進むにはCloudflare Accessでのログインが必要である。
- 端末にだけ残る未送信の記録は、ブラウザーのデータを消すと失われる。AI解析と最新のクラウド履歴の取得にも通信が必要である。
実装確認：