育児ログを自分用にカスタマイズ。ぴよログのデータを可視化するWebアプリを作ってみた。

はじめに

0歳と2歳の育児をしていて、育児の記録に「ぴよログ」アプリを夫婦で利用しています。せっかくのデータを使って何か作れないかと思い、バックアップも兼ねて簡単なWebアプリをCursorを使って作りました。

技術とアーキテクチャ

レイヤー	技術	説明
フロント	Next.js (App Router)	React 19 + Tailwind CSS
ホスティング	Vercel	無料枠で SSR/API
認証・DB	Supabase	Auth + PostgreSQL + RLS（行レベルセキュリティ）
グラフ描画	Chart.js	react-chartjs-2 でラップ
定期取り込み	GitHub Actions	cron で毎日 01:00 JST に実行
データ取得	Google Drive API	ぴよログのエクスポートファイルを取得

フロントエンドとバックエンドを1リポジトリで完結させ、Supabase のクライアントライブラリから直接 DB にアクセスしてます。

データの流れとしては、ぴよログアプリから手動で Google Drive にテキストファイルをエクスポートし、GitHub Actions の cron ジョブが毎晩そのファイルを取得 → パース → Supabase に投入 → 処理済みフォルダへ移動、です。

すべて無料枠で、月額コストは 0円 です。（これ大事）
育児の合間でAIにちまちま開発進めてもらいました。

開発の工夫など

アプリ内データの更新

「ぴよログ」は基本テキストデータでしかエクスポートできません。（betaでjson出力ボタンも置けるようですが自分には合わなさそうでした）
Andriodを定期的に自動操作させる強者もいらっしゃるようですが、自分はiPhoneしか持っていないため、思い出したときに以下の画面からGoogle Driveへ手動アップロードして、毎日の夜間処理でImportされるようにしました。

テキストデータのパース

ぴよログのエクスポートデータはこんなフォーマットのテキストファイルです。

【ぴよログ】2023年3月

----------
2023/3/1(水)
たろう (0歳0か月0日)

00:38   母乳 左7分 / 右8分
05:03   うんち
05:58   体重 2.80kg
05:58   身長 50.4cm
09:13   寝る
10:18   起きる (1時間5分)
16:27   お風呂

母乳合計　　   左 87分 / 右 93分
ミルク合計　   0回 0ml
睡眠合計　　   9時間34分
おしっこ合計   5回
うんち合計　   4回

----------

これを正規表現ベースの自作パーサーで変換しています。

ちょっとした工夫として、同一時刻に「おしっこ」と「うんち」が記録されている場合は同じイベントとしてマージするようにしています。（おむつ替えは1回としてカウントするため）

ぴよログへの感謝

順調に成長しているか確認したいとき、体調を崩したとき医師に正しく情報を伝えるとき、妻と情報連携したいとき、助かっていることがたくさんあります！「ぴよログ」よ、いつもありがとう！
また、アレクサ連携すると音声入力で記録をつけることができて、両手が塞がりがちな育児中でも無理なく記録をつけることができるので大変便利です！
（にも関わらず課金してなくてすみません！）

おわりに

AIにコードを書かせたとしても、アプリを作るのは楽しいですね。
「ぴよログ」でも見られる情報ですが、Webアプリとしてダッシュボード的に見ると新しい発見がありました。
アプリを通して記録を振り返る機会があると、育児のモチベーションも上がるというものです。