すくすく手帳

夫婦で育児タスク・記録・スケジュールを共有するWebアプリケーション。

技術スタック

• フロントエンド: Next.js (App Router) + React + TypeScript
• スタイリング: Tailwind CSS
• UI/アイコン/グラフ: lucide-react, recharts
• バックエンド/DB: Supabase (PostgreSQL, Auth, Storage)
• ホスティング: Vercel

詳細な設計方針は基本設計書を参照してください。

セットアップ

npm install
cp .env.local.example .env.local
# .env.local に Supabase の値を設定
npm run dev

http://localhost:3000 を開くとアプリが表示されます。

環境変数 (.env.local)

変数名	用途
NEXT_PUBLIC_SUPABASE_URL	Supabaseプロジェクトの URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabaseの公開anonキー

ディレクトリ構成

src/
  app/
    page.tsx              # トップページ（SukusukuAppを読み込み）
    login/                # ログイン・サインアップ画面
    family-setup/         # 家族の作成・招待コード参加画面
    auth/confirm/         # メール確認リンクのコールバック
  components/sukusuku/
    SukusukuApp.tsx        # アプリ本体（状態管理・タブ/モーダルの組み立て）
    tabs/                  # ホーム/予定/記録/保活/設定の各タブ
    modals/                # タスク追加・詳細の各モーダル
  lib/
    dateUtils.ts / uiUtils.ts / seedData.ts
    nursingTimer.ts        # 母乳の左右別ストップウォッチ + 経過時間のお知らせ
    feedingSchedule.ts     # 次の授乳の目安（前回の授乳 + 間隔）の計算
    alarm.ts               # ビープ音の合成・バイブ・画面スリープ抑止のラッパー
    supabase/client.ts     # ブラウザ用Supabaseクライアント
    supabase/server.ts     # サーバー用Supabaseクライアント
  types/app.ts             # ドメイン型定義
supabase/migrations/
  0001_init_schema.sql     # テーブル定義 + RLSポリシー
  0002_storage.sql         # 書類箱用Storageバケット + ポリシー
  0010_calendar_fields.sql # カレンダー用カラム(日付・時刻・ラベル・リマインダー)

現在の実装状況

• Next.jsプロジェクトの初期化・Tailwind設定
• プロトタイプUI（ホーム/予定/記録/お祝い/設定の5タブ、各種モーダル）をTypeScriptコンポーネントとして移植（画面は現時点ではダミーデータで動作）
• Supabaseスキーマ（9テーブル）・RLSポリシー・Storageポリシーのマイグレーションを追加
• Supabaseクライアント（ブラウザ/サーバー）の雛形を追加
• Supabaseプロジェクト作成・マイグレーション適用・Security/Performance Advisor対応・型生成 (src/types/supabase.ts)
• 認証（メール/パスワード）・招待コード（家族UUID）による夫婦の家族紐付け機能 (/login, /family-setup)
• 予定(tasks)タブをSupabase実データに接続（一覧取得・追加・編集・完了切替・削除、家族作成時に定番ToDoを自動投入）
• カレンダー機能（日付・時刻・場所・詳細・ラベル・リマインダーの入力、月カレンダーの日付選択）→ docs/calendar.md
• リマインダーの配信（PWA + Web Push）※現在は通知タイミングを保存するのみ
• アカウント設定（役割（パパ/ママ）の変更・表示名の変更・招待コードの確認・ログアウト）
• 授乳の経過時間お知らせ（一定間隔で音・バイブ。鳴り方だけで経過時間が分かる）
• 搾乳した母乳の記録と搾乳ストック（ためた分を1パックずつ持ち、飲ませるときにその中から選ぶ）
• 授乳のお知らせを、画面を消している間はサーバー(Web Push)から鳴らす
• 次の授乳の目安（前回の授乳＋設定した間隔を表示し、その時刻に通知）
• 検温のお知らせ（朝・夕の決まった時刻に体温の記録を促す。時刻は設定タブで変えられる）→ docs/notifications.md
• 保活タブ（園ごとに基本情報と見学チェックリストを切り替えて見る。お祝い・書類箱は取りやめ）
• リストタブ（買い出し・やりたいこと・やることを家族で共有する。お店などのグループで束ねて絞り込める）→ docs/lists.md
• Google認証などの追加サインイン方法
• 育児記録・成長グラフのSupabase連携
• Vercelへのデプロイ・GitHub連携

育児記録の種類

記録タブで残せるのはミルク（授乳）・おむつ・搾乳の3つ。

• ミルク: 「母乳」「搾乳」「ミルク」から選ぶ。母乳は左右それぞれの時間（ストップウォッチ または分数の入力）、ミルクは量(ml)で記録する。搾乳は下記のとおり搾乳ストックから選ぶ。
• 搾乳: 搾ってためた母乳。1件が搾乳ストックの1パック（母乳パック1つぶん）にあたる。 搾れる量は毎回まちまちなので、量は数値の直接入力だけにしている。

搾乳ストック

飲ませる量は「どの搾乳を使ったか」で決まるため、残量を1つの数字で持たず、ためた搾乳を 1パックずつ持つ。ミルクの記録で「搾乳」を選ぶと、まだ使っていないパックの一覧から使うものを 選び、選んだパックの合計がそのまま記録する量になる。

• 使ったかどうかは飲ませた側だけが持つ（details.pumpedFrom に搾乳の記録のid）。 搾乳の記録そのものは書き換えないので、授乳の記録を消せばその搾乳はストックに戻る。
• 選択肢は搾った順（古いものから使えるように）。編集中の記録が使っているパックは、 選び直せるよう一覧に残す。
• 記録タブの上部に「残り nパック・◯ml」を常に出す。全期間の差し引きなので表示中の日には 左右されない。
• DB側は care_logs の type = 'pumping'（ためた分）と type = 'milk' かつ details.method = 'pumped'（飲ませた分）で表す。
• 部分的に飲ませる（1パックの一部だけ使う）ことは今のところできない。

睡眠（ねんね計測）の記録は取り止めた。すでに保存されている type = 'sleep' の行は DBに残したまま、アプリ側では取得しない。

授乳の経過時間お知らせ

授乳中は手が離せず画面を見られないため、母乳の左右別ストップウォッチ （src/lib/nursingTimer.ts）に、一定間隔で音とバイブを鳴らす仕組みを載せている。 画面を狭くしないよう、間隔・音・バイブを切り替える表示は記録画面から外してあり、 端末に控えてある設定（なければ既定の5分間隔・音とバイブON）でそのまま鳴る。

• 鳴らし方だけで経過時間が分かる: 短い「ピッ」1回＝5分、長い「ポーン」1回＝30分。 5分＝ピッ / 10分＝ピッピッ / 15分＝ピッピッピッ / 30分＝ポーン / 40分＝ポーン＋ピッピッ。 バイブも同じ長短のパターンで振動する。数え方はお知らせ間隔の設定によらず一定。
• お知らせ間隔は5/10/15分（短音＝5分・長音＝30分で言い表せる間隔のみ）。既定は5分。
• 鳴らす基準は計測中の側の合計時間。左右を行き来しても、その側の経過時間で数える。
• 実装上の注意
  • 音は Web Audio API で合成する（音声ファイル不要）。iOS/Chromeはタップの処理の中でしか 再生を許可しないため、左右のタップと「テスト」で unlockAudio() を呼んでいる。
  • バイブは navigator.vibrate。iOS Safariは非対応なのでボタンを無効化し、音でお知らせする。 ブラウザは画面が消えている／裏に回っている間の振動要求を無視するため、鳴らし損ねた分は 控えておき、アプリに戻ってきた時点（visibilitychange）で振動させ直す。 ユーザー操作起点で鳴らすときは、音の準備を待つ前に先に振動させる。
  • お知らせの見張りは React の外（モジュール側の setInterval）で動かし、SukusukuApp から useNursingAlarmWatcher() で起動する。記録タブを開いていなくても鳴り、読み込み直後に 計測が残っていた場合も再開する。
  • 計測中は Screen Wake Lock API で画面を消灯させない。画面が消える（タブがバックグラウンドに なる）とブラウザのタイマーが間引かれ、お知らせが遅れるため。経過時間そのものは常に実時刻から 計算しているので、遅れても表示がズレることはない。
  • 「何回目まで鳴らしたか」は左右それぞれ端末内に控える。画面を開き直しても鳴り直さない。

画面を消している間はサーバーから鳴らす。 上の回避策を重ねてもなお、画面が消えている・ アプリを閉じている間は端末内のタイマーだけでは鳴らせない（iPhoneは振動もできない）。 そこで鳴らす基準を nursing_alarms に預けておき、端末が鳴らせなかった分を Edge Function send-nursing-alarms が Web Push で鳴らす。計測そのものは今までどおり 端末内で完結していて、預けるのは「いつ・何分ごとに鳴らすか」だけ。 通知をオンにしていない端末では預け先が無いので、これまでどおり端末内でだけ鳴る。 → docs/notifications.md

次の授乳の目安

授乳が終わったころには次が何時だったか分からなくなり、夫婦で「次はいつだっけ？」と 確かめ合うことになる。前回の授乳の記録から一定の間隔をおいた時刻を「次の目安」として 画面に出し、その時刻に通知する。

• ホームと記録タブの両方に同じカードを出す（NextFeedingCard）。目安の時刻・残り時間・ 前回からの進み具合のバー・前回の時刻を1枚にまとめている。ホームのカードはタップすると 記録タブへ移る。
• 起点はいちばん新しい授乳の記録の時刻（＝飲ませ始めた時刻）。母乳・搾乳・ミルクの どれでも起点になる。ためた搾乳（type = 'pumping'）は飲ませた記録ではないので数えない。
• 目安を過ぎたら赤字で「◯分すぎ」に変わる。過ぎていること自体は間違いではない （赤ちゃんが欲しがるタイミングが本来の正解なので、あくまで目安）。
• 参考として最近の授乳間隔の平均も小さく添える。設定した間隔が実際と合っているかを そこで確かめて、月齢が進んだら設定を変えてもらう。記録し忘れで大きく空いた分 （6時間超）は平均に数えない。
• 間隔の設定は家族で共通（feeding_settings）。夫婦で違う目安が出ては意味がないため。 設定タブで2〜4時間を30分刻みで選ぶ。既定は3時間。
• 夜中の授乳は前の日の記録になるため、記録タブの1日分とは別に、日付にとらわれず 直近の授乳だけを取る（listRecentMilkLogs）。パートナーの端末で記録された分を拾えるよう、 アプリに戻ってきた時点（visibilitychange）で取り直す。

目安の時刻に通知する。 家族のうち通知をオンにしている端末すべてへ、 Edge Function send-feeding-reminders が Web Push で送る（設定でオフにできる。 オフにしても画面の表示は出る）。定期実行が1分おきなので、目安の時刻と同じ分のうちに届く。 授乳中（母乳のストップウォッチを計測中）の家族には送らない。記録は授乳が終わってから 保存されるため、飲ませている最中に「そろそろ次の授乳」が届いてしまうのを避けている。 → docs/notifications.md

This is the beginning of the README. Read the rest at the original. Read the full README ↗