はじめに
GW中に、Codexを触ってみました。
テーマは、以前から家庭内で地味に困っていた、学校・保育園からの大量プリント管理です。
学校や保育園からのプリントには、親が対応しないといけない情報がたくさんあります。
- 提出期限
- 持ち物
- 集金
- 保護者説明会
- PTA関連
- 検診や尿検査
- 家族に共有すべき予定
ただ、これらは紙やPDF、写真として届くことが多く、親が目で見て、期限を拾い、家族に共有し、忘れないように管理する必要があります。
- 期限がある。
- 担当が曖昧。
- 見落とすと困る。
- 家族共有が必要。
これはもう、家庭内の小さな運用です。
そこで今回は、ChatGPTとCodexを使って、学校・保育園プリントから親がやるTodoを抽出するWebアプリを作ってみました。
実装や修正に使った時間は、体感で実質10時間程度です。
もちろん、構想、調査、記事化、細かい試行錯誤の時間は別です。
できたもの
作ったのは、プリント画像またはPDFからTodoや予定候補を抽出し、家族に共有しやすい形に整えるスマホ用Webアプリです。
主な機能は以下です。
- 画像/PDFアップロード
- ローカルOCR
- OCR結果の正規化
- 個人情報らしき箇所のマスク
- AIによるTodo抽出
- 月間予定表モード
- 画像AI解析
- 家族共有文コピー
- 家族共有CSV出力
- スマホ向けカードUI
構成としては、フロントはHTML/CSS/JavaScript、サーバーはNode.jsで作りました。
OCRにはTesseract.js、AI抽出にはOpenAI APIを利用しています。
最終的には、以下のような共有文を生成できるようにしました。
【プリントTodo】
■ 2026-09-04 / 提出期限
PTA活動費800円を封筒に入れて提出する
持ち物: PTA活動費800円、封筒
担当: 未定
■ 2026-09-12 / 行事当日
上履きと保護者用名札を持参する
持ち物: 上履き、保護者用名札
担当: 未定
家族チャットにそのまま貼れることを重視しました。
作り方
今回の作り方は、ほぼ以下の繰り返しです。
ChatGPTで壁打ちする
↓
Codexに投げるプロンプトを作る
↓
Codexへ入力する
↓
Codexがコードを修正する
↓
ローカルで動作確認する
↓
詰まったところをChatGPTに相談する
↓
次のCodexプロンプトを作る
自分で一からコードを書くというより、ChatGPTを設計相談役、Codexを実装担当として使う形でした。
この流れはかなり強力でした。
特に、いきなりCodexに雑に依頼するのではなく、ChatGPTで要件を分解してからCodexに投げると進めやすかったです。
最初に考えた構成
最初は、かなりシンプルに考えていました。
画像/PDF
↓
ローカルOCR
↓
Todo抽出
↓
CSV出力
スマホで撮ったプリント画像を読み込み、OCRで文字起こしし、そこからTodoを抽出する。
一見シンプルですが、実際にやってみると、ここがかなり大変でした。
実際に詰まったところ
1. OCR結果がかなり崩れる
最初に詰まったのはOCRです。
Tesseract.jsを使ってローカルOCRを試しましたが、日本語プリントでは数字や文字がかなり崩れました。
たとえば、以下のような誤認識が出ました。
2026 → ⑳②⑥
5月10日 → ⑤月⑩日
8時15分 → ⑧時⑮分
このままだと日付抽出ができません。
そこで、OCR結果をそのまま使うのではなく、正規化処理を入れました。
主な正規化内容は以下です。
- 丸数字を通常の数字へ変換
- 全角数字を半角数字へ変換
- 数字間の不要な空白を削除
- 日本語文字間の不要な空白を削除
- 日付表記を抽出しやすい形に変換
- 時刻表記を抽出しやすい形に変換
- 電話番号表記を整える
OCRは「読めたら終わり」ではなく、OCR後処理まで含めて設計しないと実用にならないと感じました。
2. 個人情報をそのままAIに渡すのが怖い
正直、スマホで撮ったプリントをそのままChatGPTに渡しても、かなり高精度に整理してくれます。
ただ、学校や保育園のプリントには、学校名、園名、地域名、電話番号、メールアドレス、場合によっては個人名に近い情報が含まれます。
そのまま外部APIに送るのは少し怖い。
そこで最初は、以下の構成にしました。
ローカルOCRで文字起こし
↓
個人情報らしき箇所をルールベースでマスク
↓
マスク後テキストだけAIに送信
完全な匿名化ではありませんが、少なくとも画像や原文をそのまま送るよりはリスクを下げられます。
AIを活用しながら、AIを使うリスクも抑える。
ここは今回かなり意識しました。
3. ルールベース抽出が沼だった
最初は、AIに頼らずルールベースでTodo抽出しようとしました。
たとえば、以下のような語を見てTodo候補にする方式です。
- 提出してください
- 持参してください
- 回答してください
- 電話してください
- 集金
- 申込
単純なお知らせプリントなら、ある程度うまくいきました。
しかし、少し複雑になるとすぐに限界が来ました。
たとえば、以下のような区別が必要になります。
- 連絡先情報としての電話番号
- 欠席時に電話してくださいという行動
- 当日の持ち物
- 提出期限
- 行事実施日
- 予備日
これらをルールだけで正しく分類するのはかなり難しいです。
実際に、以下のような問題が起きました。
- 欠席連絡がTodo化されない
- 直前の提出期限が次のTodoに引き継がれる
- 連絡先情報がTodo化される
- 予備日まで共有対象になる
- 同じ予定が重複表示される
ここで、ルールベースを深追いしすぎると沼に入ると感じました。
最終的には、ルールベースはフォールバックとして残し、メインの判断はAIに寄せる方針にしました。
AI抽出成功
→ AI結果を表示
AI抽出失敗
→ ローカルルールで抽出
この構成にしたことで、APIキー未設定やクォータ不足があっても、最低限アプリは動くようになりました。
4. 月間予定表はOCRでは厳しかった
一番苦戦したのが、月間予定表です。
通常のお知らせプリントは文章中心なので、ローカルOCR + AI抽出で比較的うまくいきました。
しかし、月間予定表は表形式です。
- 日付列
- 曜日列
- 主な行事予定
- 授業時数
- 罫線
- 小さい文字
- 写真の傾き
- 紙の影
これらが混ざると、OCR結果がかなり崩れます。
実際、OCR結果は以下のようなノイズだらけになりました。
ド ー BBucs 時間授業個人面談安全指導安全点検...
[セーフティ教室,] 日日日B|日
ま ー 関四・開固一詞
これをルールで補正しようとしましたが、かなり厳しい。
ここで方針を変えました。
月間予定表は、OCRでテキスト化してからAIに渡すのではなく、画像をそのままAIに渡して、表構造ごと判断させることにしました。
月間予定表画像
↓
画像AI解析
↓
日付ごとの予定候補を抽出
↓
共有対象だけ選別
この方が、右側の授業時数列や罫線ノイズを無理にOCRしなくて済みます。
ただし、画像をAIに送ることになるので、UI上では明示するようにしました。
ローカルOCR: ローカル処理のみ
画像AI解析: 画像をAIに送信
この表示は、信頼性のために大事だと感じました。
5. UIは後からかなり変わった
最初は、抽出結果を表形式で表示していました。
PCでは見やすいのですが、スマホでは横スクロールが必要になります。
このアプリは、家庭でスマホから使う可能性が高いです。
そこで、スマホではカード表示に変更しました。
また、ボタンも最初は増えすぎました。
- AIで再抽出
- ルールで再抽出
- AI結果で置き換え
- ルール結果に戻す
- 通常CSV
- 家族共有CSV
- 共有文コピー
開発中は便利ですが、家族で使うには多すぎます。
最終的には、通常利用で見せるボタンを絞りました。
- 家族に送る文をコピー
- 家族共有CSV
- 別のファイルを選ぶ
開発・検証用の操作は「詳細操作」に隠す方針にしました。
ChatGPTとCodexの使い分け
今回、ChatGPTとCodexの使い分けがかなり重要でした。
自分の場合は、以下のように使いました。
ChatGPT
→ 方針整理
→ 詰まりどころの相談
→ Codex向けプロンプト作成
→ UIや設計の壁打ち
Codex
→ 実装
→ ファイル修正
→ テスト実行
→ エラー修正
特に良かったのは、ChatGPTで「次にCodexへどう指示するか」を整理できたことです。
Codexに直接お願いすることもできますが、要件が曖昧だと迷走しやすいです。
ChatGPTで一度、目的・制約・期待結果・注意点を整理してからCodexに渡す。
この流れにすると、かなり進めやすかったです。
Codexで感じたメリット
Codexを使って良かった点は以下です。
- UI修正を小さく依頼できる
- HTML/CSS/JavaScriptをまとめて修正できる
- エラー原因をログから切り分けられる
- テスト実行まで任せられる
- READMEやNOTESの整理も依頼できる
- 試行錯誤のサイクルが速い
自分で一から実装していたら、GW中ではここまで進まなかったと思います。
特に、UI改善や細かいボタン整理、スマホカード表示などは、Codexとの相性が良いと感じました。
一方で怖さもある
一方で、怖さもあります。
正直、今の自分はこのアプリのコード内容を完全には理解していません。
動くものはできました。
家庭内で使う分にはかなり便利です。
ただし、そのままGitHubに公開したり、Webサービスとして展開したりするとなると話は別です。
特に怖いのは以下です。
- APIキー流出
- 画像アップロード処理の不備
- サーバー側のセキュリティ不備
- 個人情報の取り扱い
- ログに機微情報が出るリスク
- 依存ライブラリの脆弱性
- 認証なしで使われるリスク
- 外部公開時の想定外アクセス
ローカルで動いているものを、そのままWebサービスとして公開するのは危険だと感じました。
今回のアプリでは、APIキーは .env に置き、フロントエンドには出さない構成にしました。
しかし、それだけで安全とは言えません。
特に画像AI解析では、画像を外部APIへ送信します。
学校や保育園のプリントには、個人情報や地域情報が含まれる可能性があります。
このあたりをきちんと設計・理解できていない状態で公開するのは、リスクが大きすぎます。
今の時点での結論
今の時点では、このアプリは以下の使い方がベストだと感じています。
閉じた家庭内ネットワークで使う
↓
自分の家庭のプリントを整理する
↓
必要なTodoだけ家族に共有する
つまり、個人利用・家庭内利用です。
家庭内LANで起動し、スマホからアクセスして使う。
APIキーも自分のものを使う。
外部公開はしない。
この範囲なら、かなり現実的です。
逆に、以下はまだ早いと感じています。
- そのままGitHubで公開する
- Webサービスとして一般公開する
- 他人のプリントを扱う
- 収益化を前提に提供する
やるなら、コードレビュー、セキュリティレビュー、認証設計、ログ設計、データ保存設計、プライバシーポリシーなどが必要になります。
今回の学び
今回の一番大きな学びは、AIを使えば、短時間でかなり実用に近いものが作れるということです。
一方で、動くものができることと、安全に公開できることはまったく別だとも感じました。
これはかなり重要です。
動く
↓
便利
↓
公開できる
ではありません。
動く
↓
自分で理解できる
↓
リスクを説明できる
↓
安全に運用できる
↓
公開できる
だと思います。
特に、AIで生成したコードは、自分の理解を超えて進みます。
これは強みでもあり、怖さでもあります。
AIで作ると、実装速度は上がる。
ただし、理解の速度まで自動で上がるわけではありません。
まとめ
GW中、ChatGPTとCodexを使って、学校・保育園プリントから親がやるTodoを抽出するWebアプリを作りました。
子供が寝ている時間にCodexの5時間枠を2回ほぼ使い切るくらい、GW中に集中的に触りました。
厳密な作業時間ではありませんが、体感としては10時間前後、実装・修正・動作確認を回していました。
その程度の時間でも家庭内利用ならある程度実用性のあるものができました。
作り方は以下です。
ChatGPTで壁打ち
↓
Codex向けプロンプト作成
↓
Codexで実装
↓
動作確認
↓
詰まったらChatGPTに相談
↓
再度Codexへ依頼
このサイクルはかなり強力でした。
ただし、同時に限界やリスクも見えました。
- コードを完全に理解していない
- APIキー流出が怖い
- 個人情報を扱う
- 画像AI解析では外部APIへ送信する
- Web公開にはセキュリティ設計が必要
そのため、現時点では、閉じたネットワーク内での個人利用がベストだと感じています。
AIによって、個人でも短時間でかなり便利なものを作れるようになりました。
ただし、公開や収益化を考えるなら、「動いた」だけでは足りない。
安全に使えるか。
リスクを説明できるか。
自分で保守できるか。
ここまで含めて考える必要があると感じました。
家庭内プリント管理も、立派な運用。
そして、AIで作ったアプリを扱うこと自体も、また運用ですね。