はじめに
こんにちは。いきなり私事ではあるのですが、第一子が生まれ、現在は夫婦で育児の真っ最中です。
子育ての中で授乳、ミルク、おしっこ、うんち、睡眠など、赤ちゃんのお世話は「いつ何をしたか」をあとから確認したい場面が何度もあります。
そんなログのために育児界隈でかなり人気なのが、育児記録アプリ ぴよログです。
夫婦で授乳や排泄、睡眠を記録して共有できるため、我が家でも使い始めました。
ただ、記録がたまるほど、前回の授乳から何分たったか、いま眠っているかを家族がざっと確認できるダッシュボードも欲しくなりました。
また、ちょうど妻の実家で過ごしており、赤ちゃんの世話に関わる家族全員にアプリを入れてもらうのは少し面倒が生じますし、そういう意味でも一目で状況のわかるダッシュボードが欲しかったのです。
ぴよログには、記録した内容をテキストで書き出す機能があります。
そのテキストを定期的に取り込めば、夫婦の記録方法は変えずに、家族がブラウザで見られるのではないかと考えました。
じゃあどうするか？
夫婦はこれまでどおりぴよログへ入力し、家族はiPhoneやタブレットなどのブラウザから見る形にしました。
記録する人と見る人を分ける構成です。
| 誰が | 何をするか |
|---|---|
| 夫婦 | ぴよログへ育児記録を入力する |
| 夫婦+妻の家族 | ブラウザで現在の状況を見る |
| 家庭内のMac | 15分ごとに記録を取得して画面を更新する |
独自アプリへ同じ内容をもう一度入力する必要はありません。
見る側も、新しいアプリの操作を覚えずに済みます。
なお、本アプリ作成においては、全面的にCodexを実装に用いています。
ClaudeCodeも一時期は使っていましたが、最近はもっぱらCodexを利用しています。
細かいUI調整には一部手作業でのコーディングもしましたが、体感では95％以上をCodexに作業させています。
記録が画面に届くまで
全体の構成は次のようになりました。
自宅のMacの中で仮想Android端末を動かし、その中でぴよログアプリのテキスト吐き出しを実施し、Mac側に取り込むイメージです。
育児記録は次の順番で家族の画面まで届きます。
- 夫婦がスマートフォンのぴよログへ記録する
- ぴよログの家族共有機能により、Mac内の仮想Android端末にも記録が届く
- Macが15分ごとにぴよログのテキスト書き出しを実行する
- 書き出したファイルを仮想Android端末からMacへ転送する
- Macが記録を読み取り、データベースへ保存する
- 家族がブラウザでダッシュボードを見る
また、図にあるAndroid Emulatorは、Macの中でAndroidアプリを動かすための仮想端末です。
実物の端末をもう一台置く代わりに、Macの画面の中でぴよログを動かしています。
記録の保存には、SQLiteを選びました。
手動でファイルを置く方法も考えましたが、夜間や忙しい日ほど更新を忘れます。
そこで、macOSに用意されている定期実行の仕組みを使い、15分ごとに自動で取得するようにしました。
書き出しテキストをSQLiteへ移す
ぴよログのエクスポート機能はCSVではなく、日付見出しの下に時刻付きの記録が並び、末尾に種類ごとの合計も入るテキスト形式での出力です。
構造だけを残した例は次のようになります。
【ぴよログ】2026年8月
----------
2026/8/12(水)
こども
00:40 ミルク 120ml
01:10 寝る すぐにねた
04:10 母乳 左 8分 / 右 7分
母乳合計 左 8分 / 右 7分
ミルク合計 1回 120ml
パーサーは日付見出しを見つけるとその日付を後続の記録に引き継ぎ、時刻から始まる行だけを一件として種類、詳細、メモに分けます。
たとえば、上の三行はSQLiteで次のような行になります。
日時 (occurred_at) |
日付 (event_date) |
種類 (kind) |
詳細 (details) |
メモ (note) |
量 (amount_ml) |
|---|---|---|---|---|---|
| 2026-08-12T00:40:00+09:00 | 2026-08-12 | ミルク | 120ml | 120 | |
| 2026-08-12T01:10:00+09:00 | 2026-08-12 | 寝る | すぐにねた | NULL | |
| 2026-08-12T04:10:00+09:00 | 2026-08-12 | 母乳 | 左 8分 / 右 7分 | NULL |
120mlのような量は数値として取り出す一方、母乳の左右の時間は元の表現とします。
ただし、解析した記録を毎回追加すると、同じ授乳や睡眠が二重に保存されるため、新しいファイルに含まれる日付の記録をまずSQLiteから削除し、その日の記録を入れ直す方法としました。
同じファイルを何度取り込んでも記録は増えず、ぴよログ側で修正や削除をした内容も次の自動取得で反映できます。
実際の画面
実際に作成したダッシュボード画面はこちらです。
画面の左上には、前回授乳からの経過時間でそろそろ泣き出すかな？そろそろお腹空いたかな？等がある程度予想できるため、経過時間を最も大きく表示しています。
右上では、現在眠っているかと、今日の睡眠時間を確認できます。
下側には、今日の授乳、排泄、睡眠の回数と、直近の記録を並べました。
詳細画面についても作成しており、授乳をどれくらいの時間行ったか、おしっこやうんちは何回行ったか、等を日毎に詳細に確認できるようにしています。
また、当初は白背景（いわゆるライトモード）にしていたのですが、夜中に開いてもまぶしくないよう、画面全体を暗い配色にしています。
デザインの考え方もCodexのSkillにした
ダッシュボードは、数字を並べただけでは見やすくなりません。
とくに夜中は、家族が短い時間で「前回の授乳からどれくらいたったか」「いま眠っているか」を判断できる必要があります。
そこで、デジタル庁の「ダッシュボードデザインの実践ガイドブック」を参考に、ダッシュボード設計の考え方を自分用のCodex Skillにまとめました。
これはデジタル庁が提供する公式Skillではなく、ガイドブックにある要件整理、情報の優先順位、レイアウト、誤解を生みにくい表現などを、Codexが画面を設計・レビューするときに使える形へ整理したものです。
このSkillには、「誰が、どの端末で、何を判断する画面なのか」を最初に定めるよう指示しています。
今回なら、見る人は育児に関わる家族、端末はiPhoneやタブレット、最初に知りたいのは授乳間隔と睡眠状態です。
その前提から、前回の授乳からの経過時間を最も大きくし、次に現在の睡眠状態、今日の集計、直近の記録へ視線が流れる構成にしました。
暗い部屋で使うためのダークテーマ、画面幅に合わせた並び替え、色だけに頼らない状態表示も、同じSkillを使って調整しています。
結果として、家族が次に確認したい情報へ迷わずたどり着ける、かなり見やすいダッシュボードにできたと思っています。
実際に使ってみて
15分間隔の自動取得を有効にした状態で数日運用し、妻の家族もブラウザから状況を確認できています。
ただし、Macがスリープしている間は更新が遅れます。
取得に失敗した場合は、古い記録を最新だと思わないよう画面へ警告を出しています。
また、この画面にはパスワード入力などの利用者確認がありません。
そのため、家庭内のネットワークからだけ開けるようにし、インターネットには公開していません。わざわざ外部に出す理由もないですしね。
まとめ
このダッシュボードのおかげで、自分達だけでなくアプリを入れていない家族もぱっと見で状況がわかるようになりました。
夜中に赤ちゃんが泣いたときも、家族はブラウザを開けば前回の授乳や睡眠を確認できます。
既存の記録を見やすい形で届けるだけでも、育児中の状況を家族で共有しやすくなりました。
最近は深夜も必ず元気に泣いてくれるので、少し寝不足ですが、便利にできそうな部分は便利にしつつ楽しみながら育児続けていこうと思います。