【Claude Code】保育園の紙の連絡帳をぴよログから1分で作るアプリを自作した話

この記事でわかること

• ぴよログのテキスト出力を、保育園の紙の生活記録票フォーマットに変換するブラウザアプリを自作した話
• Claude Codeで「自分一人しか使わない小さなアプリ」をゼロから作るときの進め方
• 育児のちょっとした手作業を「ちょうどいい自動化」でラクにする実例

本記事は筆者が自分用に作ったアプリの紹介です（記事公開後にGitHubでOSSとして公開しました。詳細は末尾の追記をご覧ください）。

背景：毎朝、同じ情報を紙に書き写していました

わが家のこどもが通っている保育園では、登園時に紙の生活記録票を提出します。前日の夜19時から当日の朝までの体温・授乳・ミルク・排泄・睡眠を、横側の時間軸に沿ってマス目に書き込む形式の用紙です。

記録自体は普段からぴよログに入れていて、アプリ側には全部のデータが揃っています。やっていることは「ぴよログの画面を見ながら紙に書き写す」だけです。作業時間にすれば5分かからないのですが、毎朝バタバタしている時間帯に、縦のタイムラインを見ながら横のタイムラインに転記する作業は、ことさら認知負荷が高く感じられました。

育休も残りわずかというタイミングで、復職したら朝の5分はもっと貴重になるはずです。ここをもっとうまいことできないか。そこでClaude Codeに相談しながら、自分用の小さな変換ツールを作ってみました。

作ったもの：ぴよログを貼るだけで紙のレイアウトが出るアプリ

アプリの仕様はかなりシンプルにしました。

• ぴよログの「テキスト出力」機能で1日分（または複数日分）をコピー
• アプリのテキストエリアに貼り付けてボタンを押す
• 保育園の記録票と同じ時間軸（前日19時〜当日18時59分）で、体温・水分・排泄・睡眠の表が出てくる
• 複数日貼っても、日付セレクタで切り替えられる

画面は本当にこれだけです。テキストエリアとボタンだけの最小構成にしました。

ボタンを押すと、紙の記録票と同じレイアウトで表が展開されます。

睡眠は赤い横線のバーで時間帯を可視化していて、日をまたぐ睡眠（前日22時〜当日6時など）にも対応させています。一目で「この日は夜まとまって寝た」「夕方に長い昼寝があった」がわかるようになりました。

表の下には、食事（離乳食）と自由記入のメモを時刻付きで並べています。保育園の連絡帳には「家庭での様子」欄があって、ここにも夕食の内容や体調の変化を書くので、そのまま参考にできるようにしています。

Tips：MacからぴよログのテキストはiPhoneミラーリングで取る

macOS SequoiaのiPhoneミラーリングはとても便利という話を差し込んでおきます。

ぴよログはスマホアプリなので、テキスト出力機能もiPhone側で操作する必要があります。最初はiPhoneでエクスポートしてAirDropでMacに送って……とやっていたのですが、朝の5分を短くするのが目的、作業は限りなくシンプルにしたい。

iPhoneミラーリングを使うと、Macの画面にiPhoneがそのまま映って、Macのキーボードとトラックパッドで操作できます。ぴよログを開いてエクスポート画面まで進み、「テキスト出力」で出てきた文字をそのままMac側のクリップボードにコピーできるので、アプリへの貼り付けまで1つのマシンの中で完結します。

Macでこの手の「スマホアプリからデータを吸い出す」作業をするときの定番手順として、覚えておいて損はないと思います。

技術スタック：HTMLファイル1枚だけ

自分しか使わないアプリなので、構成は極限まで削りました。

• HTML + CSS + Vanilla JavaScriptをまとめた1枚のファイル（PiyologConverter.html）
• サーバー不要、外部ライブラリなし、ビルドなし
• ブラウザで開くだけで動く

Pythonでコマンドラインツールとして作る選択肢もありましたが、朝の忙しい時間にターミナルを開くのは現実的ではありません。スマホでもPCでも「ブラウザで開いて貼り付けてボタンを押す」で完結させたかったので、静的HTML1枚に落ち着きました。

フレームワークを使わなかったのは、機能が小さいからです。テキストをパースして表に流し込むだけのアプリにReactやVueを持ち込むと、自分で保守するコードよりもビルド設定のほうが大きくなります。数年後に「ちょっと直したい」と思ったとき、HTML1枚ならエディタで開いて直せばおしまいです。

Claude Codeでの作り方：実物の写真を見せるところから始めた

今回、Claude Codeに最初に渡したのは保育園の記録票を撮った写真でした。文章で「時間軸が前日19時から当日18時までで、体温と水分と排泄と睡眠の行があって」と説明するより、実物を1枚見せたほうが圧倒的に早かったです。

そのうえで、こんな順番で会話を進めました。

Step 1：仕様をすり合わせる

まずは写真を見せて「このフォーマットに、ぴよログのテキスト出力を流し込みたい」と伝えました。Claude Codeからは「1日の区切りはどこですか（0時基準か、登園日基準か）」「睡眠はどう表現しますか」といった質問が返ってきて、紙の記録票を前提にした仕様が固まりました。

ここで決まったのが「前日19時〜当日18時59分を1登園日として扱う」ルールです。保育園に提出する紙は登園日単位で区切られているので、0時で切ってしまうと夜間の睡眠がぶつ切りになってしまいます。

Step 2：最小機能で動かす

次に、ぴよログのテキスト出力のサンプルを貼って、まずは体温と授乳だけ表にするコードを書いてもらいました。この段階ではデザインは後回しで、データが正しく読めるかだけを確認しています。

ぴよログのテキストは、日付行（2026/04/10 (金)）とイベント行（07:30 母乳 左10分 右5分）が交互に並んでいる、パースしやすい形式でした。正規表現で時刻を拾って、キーワード（「母乳」「ミルク」「おしっこ」「うんち」「寝る」「起きる」）で分岐するだけで、だいたいのイベントは処理できます。

Step 3：詰まりそうなところを潰す

最小版ができたあとは、実際のデータで詰まったところを1つずつ潰していきました。

• 睡眠のペアリング：「寝る」と「起きる」を紐付けないと時間帯のバーが引けません。連続するイベントを順に見て、直前の「寝る」をストックしておき、次の「起きる」で1区間を確定させる、という素直な実装にしました
• 日またぎの睡眠：前日22時に寝て当日6時に起きた場合、19時〜18時の時間軸の途中でバーが切れないように、開始時刻が前日のときは左端から引き直すようにしています
• 母乳の合算：「母乳 左10分 右5分」のような行は数字を全部足して「母15分」と表示するようにしました。回数ではなく合計授乳時間が見たかったからです

どれもClaude Codeに「このパターンだとバーが途切れる」「この表記だと数字が拾えていない」と具体例付きで伝えると、修正版を出してくれました。自分で全部書き切るよりも、実データで詰まりを見つけて直す、という流れのほうがずっと速かったです。

Step 4：UIを紙に寄せる

機能がひととおり動いたあと、見た目を紙の記録票に近づけていきました。マス目のサイズ、時間ヘッダーの位置、行ラベルの文字など、細かいところを「あと少し左に」「行の高さをもう少し」と指示しながら調整しています。

ここはClaude Codeに任せきりにせず、自分でブラウザの開発者ツールを開いて直接CSSをいじったほうが早い部分もありました。デザインの微調整は、AIと人間の分担をその都度切り替えるくらいがちょうどいいと思っています。

使ってみて：朝の転記が本当に1分になりました

出来上がったアプリは、想像していたよりも効果がありました。

ぴよログで「テキスト出力」を押して全選択コピー、アプリに貼り付けてボタンを押すだけで、紙に書き写すべき情報が登園日単位で整理されて出てきます。あとは画面を見ながら紙のマス目を埋めるだけなので、「どの記録がどの時間帯だったか」を頭の中で整理する手間がなくなりました。

特に効果が大きかったのが、日をまたぐ記録の一覧性です。ぴよログのアプリ画面は日付単位で表示されるため、前日夜から当日朝にかけての記録を確認しようとすると、日付をまたいで画面を行き来する必要があります。このアプリは「前日19時〜当日18時59分」を1画面に並べて出してくれるので、画面遷移なしで一気に見渡せます。紙に書き写す範囲がそのまま1枚の表になっているので、転記の手間がぐっと減りました。

家族と共有するときにも使えました。夫が保育園に送っていく日の朝、前夜の様子を口頭で伝えるのが大変だったのですが、アプリの画面を見せるだけで「この時間に起きて、このくらい飲んだ」が一目で伝わります。

「自分一人のためのアプリ」を作る価値

今回のアプリは、当初は配布も公開も考えずに作りました。ローカルブラウザで開いて使うだけのつもりで、わが家の保育園のフォーマットにピタリ合わせる方向に振り切っています。

世の中には既に育児記録アプリがたくさんあって、中には紙の連絡帳フォーマットに出力してくれるものもあるかもしれません。それでも自作したのは、わが家の保育園の記録票の形式にピタリと合わせたかったからです。既製品の「だいたい合っている」と、自作の「完全に合っている」の差は、毎日使うものだと意外と大きいです。

Claude Codeを使うようになってから、こういう「自分一人のための小さなアプリ」を作るハードルが一気に下がりました。以前なら「1日しか使わないものに半日かけるのはもったいない」と思っていた作業が、1〜2時間で形になります。作って捨てる前提のアプリでも、その1〜2時間が毎朝の5分を買ってくれるなら、十分すぎるほど元が取れます。

【追記 2026-04-30】GitHubで公開しました

このアプリはわが家の保育園のフォーマットに合わせて作ったものなので、そのまま他の家庭で使えるとは限りません。ただ、各家庭が同じ発想で「自分の園のフォーマットに合わせる」ためのたたき台としてなら役に立つかもしれない、と思うようになりました。HTMLファイル1枚なので改造しやすいですし、毎朝の転記作業に困っている保育園児のいる家庭は他にもいるはずです。そういう前提で、OSSとしてGitHubに公開することにしました。

• リポジトリ: https://github.com/satosan-dev/app-piyorenraku
• ブラウザから直接使えるURL: https://satosan-dev.github.io/app-piyorenraku/PiyologConverter.html
• ライセンス: MIT

使い方は2通りあります

A. ブラウザで開いて使う（おすすめ）

GitHub Pagesでホスティングしているので、上記のURLをスマホやPCのブラウザで開けばそのまま使えます。インストールも会員登録も不要です。iPhoneのSafariで開いて「ホーム画面に追加」すれば、アプリのようなアイコンから1タップで起動できるようになります。

B. HTMLファイルをダウンロードしてローカルで使う

リポジトリから PiyologConverter.html を1ファイルだけダウンロードして、ダブルクリックで開いても同じように動きます。ネットに繋がっていなくても動作するので、機内モードのスマホでも問題ありません。

「ぴよログのデータを貼り付けて大丈夫？」と気になる方へ

育児の記録は他人に見られたくない情報なので、Webサイトに貼り付けることに抵抗がある方もいると思います。このアプリは、その点を最初から強く意識して作りました。

保育園のフォーマットに合わせて自由に改造してください

保育園ごとに紙の生活記録票のフォーマットは少しずつ違います。行項目の順序、時間軸の刻み方、記入欄の配置など、自分の園に合わせて手を入れたい部分は必ず出てくるはずです。

MITライセンスで公開しているので、リポジトリをforkして自由に書き換えてください。HTMLファイル1枚なので、ブラウザの開発者ツールで眺めながら少しずつ変えていけます。Claude Codeに「この行項目をこういう順番に並べ替えたい」と頼めば、コードを読まなくてもだいたい意図どおりに書き換えてくれます。

次に作りたいもの

「ぴよログ→紙の連絡帳」の逆方向、つまり保育園から返ってきた紙の連絡帳をスマホで撮影して、ぴよログにインポートするツールも構想中です。保育園での様子を家庭側のぴよログに統合できると、こどもの記録が1つのアプリにまとまって便利になりそうです。こちらは形になったら別記事で書く予定です。

まとめ

• 保育園の紙の生活記録票を、ぴよログのテキスト出力から自動生成するブラウザアプリを作りました
• 構成はHTMLファイル1枚のみ。サーバーもビルドも不要で、自分のPCで開くだけです
• Claude Codeには最初に実物の写真を見せ、仕様のすり合わせ→最小機能→実データでの詰まり潰し→UI調整、の順で進めました
• 「自分一人しか使わないアプリ」を1〜2時間で作れるようになったのは、Claude Codeを使うようになってからの大きな変化でした

紙の連絡帳の転記に時間を取られている方は、ぴよログのテキスト出力を起点にした小さな変換ツールを作ってみると、朝の体感がかなり変わると思います。