25
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

双子育児が限界だったので、新生児を抱っこしたまま「授乳ダッシュボード」を作った話

Last updated at Posted at 2025-12-03

先日、子供が生まれました。双子です。

IMG_4362.jpg

予定日より10週間以上も早い出産による極低体重出生児 だったこともあり、NICUからの退院後も繊細なケアが必要になりました。

育休に入って夫婦で挑んでいますが、正直なところ、まったく手が足りていません。
ふたりとも寝ないし、よく泣くし、飲んだそばから吐くし。
睡眠時間どころかトイレに行くタイミングすら見失い、スマホを手に取ることすらおぼつきません。

さっきどっちにミルクあげた?

双子育児を始めてみて最初にキツいのが 「授乳の管理」 です。

基本は3時間おきですが、ワンオペだと同時に二人を相手にできないので、あえて時間をずらす必要があります。
実質的に、約1時間半おきの授乳が24時間続きます。
しかも「片方は飲むのが苦手だから回数を多く」「もう片方は20ml多め」みたいな微調整も必要です。

頭が朦朧としていると、こういうことが起きます。

  • 「あれ、さっきミルク飲ませたのどっちだっけ?」
  • 「いま何時? さっきあげてから何分経った?」
  • 「(手伝いに来てくれたお義母さんに)次はいつあげればいいの?」「えっと、スマホ見ないとわからなくて……(スマホが見当たらない)」

ぴよログは神だけど、スマホを開くのが大変

育児記録アプリの「ぴよログ」は本当に便利です。これがないと死にます。

ただ、「スマホを取り出して、ロック解除して、アプリを開く」という動作すら、両手が塞がっている時には高いハードルになります。

「壁を見れば、ひと目で『次はいつか』がわかるようにしたい」

ダッシュボードを作ろう

ぴよログのデータをGrafanaで可視化する試みには先人が多くいらっしゃいます。

しかし、ぴよログには公開APIがなく、手動でデータをエクスポートするしかありません。先人たちの多くはAndroid端末でRPAを仕込むアプローチを取っていますが、我が家には使える端末がありません。あと、Grafanaの設定ファイルをいじっている暇があったら寝たい。

そこで今回は、ぴよログの 「カスタムアクション」 機能を使うことにしました。
これを使えば、最大14日分のログをJSONで指定したURLにPOSTしてくれます。

IMG_4535.jpg
自動で送ってくれるわけではなく、右下のボタンを都度押す必要がありますが、ぜんぜん許容範囲内です。

開発をはじめる

稼働リソース: 私(片手に赤ちゃん装備)

開発期間: 2時間

技術スタック

  • Framework: Nuxt 4 (サーバー/クライアント)
  • AI Coding: Claude Code / Spec Kit
  • Infra: Vercel + Prisma Postgres

Spec Kitに雑に指示して開始

今回は Claude Code と Spec Kit の組み合わせを試すことにしました。
片手が赤ちゃんで塞がっているので、もう片方でがんばってプロンプトを打ち込みます。
例えばこんな感じ:

「ぴよログ」iOSアプリから育児記録データ(授乳、睡眠、おむつ交換など)をHTTP経由で受信しDBに蓄積するAPIと、PCやiPadなどのモニター端末で記録をリアルタイム表示するWebアプリケーションを構築する。
POST /api/records エンドポイントで最大14日分のデータをJSON形式で一括受信し、子供ごとにnicknameで識別して管理する。
モニター画面は30秒間隔のポーリングで自動更新し、最新の授乳時刻と次回授乳予定時刻を最も目立つように表示する。

はっきりしないことがあれば次々質問してくれるし、技術選定のためのリサーチもどんどん勝手に進めてくれます。ある程度の意思決定や軌道修正は必要ですが、要件が整理できたら実装がスタート。赤ちゃんの背中をトントンしながら、「もっと文字を大きく」とか「色は赤のほうがいい」といった文句を付けているだけで、アプリがどんどん形になっていきます。

VercelとかPrisma Postgresのセットアップも、Warpに適当に指示するだけでほとんど自動で進みます。

IMG_4519.jpg
この記事も左手に赤ちゃん抱えながら書いてます

完成

できました。Macで表示して、お世話する場所にそれぞれ設置します。

IMG_4531-2.jpg

IMG_4528.jpg

デカい文字でカウントダウン

  • 次の授乳時間が「あと15分」のように表示されます。
  • 時間が近づくと画面が点滅したり、ゲージの色が変わったりして直感的にわかりやすくなっています。Claudeが勝手にそうしてくれました。

AIのひとことアドバイス(おまけ)

  • 過去14日間の全ログ(排泄、睡眠、体温など)をLLMに渡し、次回以降の授乳についてのアドバイスを表示する機能も追加しました。

想像してたより便利

リビングにこれを置いてから、「次、いつ?」という会話がなくなりました。

手伝いに来てくれたヘルパーさんも、画面を見るだけで「あ、そろそろミルク作りますね」と動いてくれます。
「あと10分あるから、その間にトイレに行っておこう」という判断もできるようになりました。
「情報が見えている」というだけで、人間はずいぶん落ち着けるものなんだなと実感しています。

AIがあれば、極限状態でもアプリは作れる

赤ちゃんを抱えながらでもたった数時間でアプリを構築できるってすごい時代ですね。

(追伸:ぴよログ様へ) HTTP POSTのカスタムアクション、本当に神機能なのですが、私の環境だと送信後にアプリがクラッシュしてしまいます...! もし修正いただけたら、睡眠時間がさらに10分増えます。何卒...!

さて、画面の文字が赤くなってきたので、ミルクを作ってきます。

25
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?