すくすく手帳

夫婦で育児タスク・記録・スケジュールを共有する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認証などの追加サインイン方法

育児記録の種類

記録タブで残せるのはミルク（授乳）・おむつ・搾乳の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

認証・データ連携の仕組み

• src/proxy.ts（Next.js 16のmiddlewareはproxyに名称変更）: 未ログイン時は/loginへ、family_id未設定時は/family-setupへリダイレクト
• /login: メール/パスワードでのサインアップ・ログイン（Supabase Auth）
• /family-setup: 家族の新規作成（familiesにINSERT→自分のusers.family_idを更新→定番ToDoを一括投入）、または招待コード（家族のUUID）を入力して既存家族に参加
• src/lib/api/tasks.ts: tasksテーブルのCRUDとDB行⇔アプリ型のマッピング。SukusukuAppから呼び出し、楽観的UI更新＋失敗時ロールバックを行う
• src/lib/api/account.ts: usersテーブルのうち自分の役割（パパ/ママ）・表示名の取得と更新
• サインアップ時はauth.usersへのINSERTをトリガーにpublic.usersへ空プロフィール行を自動作成（0005_auth_user_trigger.sql）
• 設定タブの一番下にアカウントカード（AccountSection）があり、役割（パパ/ママ）の変更・表示名の変更・招待コードの再確認・ログアウトができる。家族参加時に役割を選び間違えた場合はここで修正する

メール確認リンクの挙動について

サインアップ確認メールのリンクはSupabaseの/auth/v1/verifyを経由し、そこでメールアドレスの確認が完了してからアプリの/auth/confirmへcode=付きでリダイレクトされます。

codeをセッションに交換する処理（PKCE）には、登録操作を行ったブラウザに保存されたcode_verifierが必要です。そのため、登録した端末と別の端末やメールアプリ内のブラウザでリンクを開くと交換に失敗します。このときメール確認自体は成功しているため、以前は「確認リンクが無効か、有効期限切れです」と表示されるのに登録自体は完了している、という食い違いが起きていました。

現在の/auth/confirmはこの2つを区別します。

状況	遷移先	表示
セッション交換に成功	/（そのままログイン状態）	—
Supabase側の検証に失敗（error/error_code付き。期限切れ・使用済みリンク）	/login?error=confirm_failed	「確認リンクが無効か、有効期限切れです」
検証は成功したがセッション交換に失敗（別ブラウザで開いた等）	/login?message=email_confirmed	「メールアドレスの確認が完了しました。…ログインしてください」

端末をまたいでもそのままログイン状態にしたい場合は、Supabaseダッシュボードの Authentication > Email Templates で確認メールのリンクを

{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next=/

に変更してください。token_hash形式はcode_verifierに依存しないverifyOtp()フローを使うため、どの端末で開いてもその場でログイン状態になります（/auth/confirmは両方の形式に対応済み）。

既知の制約 / 動作確認について

この開発環境（サンドボックス）はネットワークポリシーにより*.supabase.coへの直接アクセスがブロックされているため、ブラウザから実際にサインアップ〜家族作成〜タスク登録までの動作確認は行えていません（npm run build / next lint / tsc --noEmit は通過済み、DBスキーマとRLSポリシーはSupabase側で適用・Advisorでの警告なしを確認済み）。Vercelへのデプロイ後、またはローカル環境（npm run dev）で一度実際にサインアップ〜家族作成〜予定追加の一連の流れをご確認ください。

Supabaseプロジェクト

• 組織: daizooo / プロジェクト名: sukusuku / リージョン: ap-northeast-1（東京）
• URL・anonキーはSupabaseダッシュボード（Project Settings > API）から取得し、.env.local に設定してください
• スキーマは supabase/migrations/ を上から順に適用したものと同一です（apply_migration で反映済み）
• src/types/supabase.ts はこのプロジェクトから generate_typescript_types で生成した型です。スキーマ変更後は再生成してください
  • nursing_alarms の型は手で書き足したあと、マイグレーション適用後の再生成結果と 一致することを確認済みです

デプロイ

Vercel Platform にこのリポジトリを接続し、上記の環境変数を設定してデプロイします。

実行リージョンを東京に固定している理由（重要）

vercel.json で "regions": ["hnd1"]（東京）を指定しています。この設定を外さないでください。

このアプリはミドルウェアとServer Componentの両方からSupabaseへアクセスするため、初回表示あたり 複数回のサーバー→Supabase往復が発生します。Supabaseプロジェクトは ap-northeast-1（東京）にあるため、 Vercel側の実行リージョンが既定の iad1（米国バージニア）のままだと往復1回ごとに太平洋横断の レイテンシ（RTT 約150〜200ms）が上乗せされ、起動が体感で1秒近く遅くなります。

起動パフォーマンス上の設計方針

• 認証チェックには getUser() ではなく getClaims() を使う。getUser() は毎回Authサーバーへの ネットワーク往復を伴うが、getClaims() はJWTが非対称鍵で署名されていればWebCrypto＋ キャッシュ済みJWKSでローカル検証が完結する（このプロジェクトの署名鍵は ES256）。 getSession() は署名を検証しないため認可判断には使わない。
• ホームタブ以外のタブは next/dynamic で遅延ロードする。特に LogTab は成長グラフのために recharts（単体で約350KB）を持ち込むため、静的importに戻すと初期バンドルへ混入する。
• トップページには loading.tsx を置き、サーバー側の認証・プロフィール取得を待つ間も 白画面にならないようにする。

検討メモ

• ネイティブアプリ化（iPhone/Android）の進め方 → docs/native-app.md
• 育児記録として何を残すべきか（記録の設計の見直し） → docs/what-to-record.md
• リスト機能（買い出し・やりたいこと・やること）の作り方 → docs/lists.md
• 設計書に残っている作業の一覧（未着手・未決・手元の作業） → docs/remaining-work.md

Androidネイティブ版 (mobile/)

Expo(React Native)で作り直しているネイティブ版が mobile/ にある（このNext.jsとは独立した プロジェクト。Vercelは今までどおりルートだけを見る）。進め方は docs/native-app-rewrite.md、動かし方は mobile/README.md を参照。