Code Reference

コード解説

BioLog Mobileの現在の構成、データの流れ、保守時に守るべき前提をまとめた技術資料です。

Overview

アプリの構成

BioLog Mobileは、依存パッケージやビルド工程を使わない静的なHTML／CSS／JavaScriptのPWAです。index.html が画面の土台を持ち、各JavaScriptファイルを読み込んで端末内の健康記録を扱います。

健康記録の保存先はブラウザのIndexedDBです。テーマと規約・プライバシーポリシーへの同意記録はlocalStorage、オフライン表示用のアプリ資産はCache Storageに保存されます。

Modules

index.html：画面の枠、各タブ、入力・バックアップ操作の要素を定義し、JavaScriptを読み込みます。
app.js：画面状態、タブ切替、フォーム送信、履歴・グラフ表示、バックアップ操作、同意画面とService Worker登録をつなぎます。
consent.js：利用規約・プライバシーポリシーの同意対象版と日時をlocalStorageへ保存し、有効性を確認します。
db.js：IndexedDBのbiolog_mobileデータベースとhealth_recordsストアを管理します。
form.js：測定項目の範囲確認、フォーム値の変換、表示用の整形を担当します。
backup.js：JSONバックアップの作成、形式検証、原子的な復元を担当します。
csv.js：UTF-8 CSVを解析・検証し、記録として取り込みます。
charts.js：保存済みの測定値から、ブラウザ標準のSVG要素でグラフを描画します。
service-worker.js：アプリ資産をCache Storageへ保存し、同一オリジンのGET要求に対してネットワーク優先・失敗時キャッシュ利用を行います。
test.html／test.js：別のテスト用データベースを用い、保存・検証・表示・PWA設定を確認する手動実行用のテストです。

Data Flow

1. 同意確認: consent.jsが有効な同意記録を確認し、同意済みの場合だけapp.jsのstartApplication()が通常機能を開始します。

2. 入力と検証: BioLogForm.buildPayloadFromForm()が値を取り出し、validatePayload()が測定範囲と必要な入力を確認します。

3. 保存: BioLogDB.upsertRecord()が、利用者識別子selfと日付の組み合わせを基準に、1日1件の記録を追加または更新します。

4. 表示: 履歴はgetAllRecords()、グラフはBioLogCharts.renderCharts()で再描画します。入力済みテキストはDOMのテキストとして表示します。

5. バックアップ: JSONはbuildExportPayload()で書き出し、復元時は形式・日付・項目・重複を検証してからimportRecordsAtomic()で反映します。

Stored Record

数値項目は体重、体温、収縮期血圧、拡張期血圧、脈拍、体脂肪率、基礎代謝、筋肉量です。テキスト項目は食事ログ、行動ログ、メモです。各記録には日付、作成・更新日時、内部識別子も保持されます。

IndexedDBではdate_userに日付とselfを結合した値を保存し、同じ日付の重複を防ぎます。

Maintenance

用語の意味は用語解説を参照してください。