スマホで薬を撮るだけ！服用登録アプリを作ってみた（OCR × AI）

薬の飲み忘れ防止アプリを作ってみました。

単なるリマインダーではなく、「薬を撮影するだけで登録できる」というのが特徴です。

服薬アプリ

■ 作った理由

普段、薬をもらったときに

• 手入力が面倒
• 用法用量が分かりづらい
• 飲み忘れる

という問題がありました。

特に高齢者や忙しい人には、

???? 「登録の手間」が一番の障壁

だと感じました。

■ アプリの特徴

このアプリは次の流れで動きます。

1. 「お薬を撮る」ボタンを押す
2. カメラで薬の説明書を撮影
3. 「AI解析入力」ボタンを押す
4. OCRで文字を抽出 ＋ 個人情報の除去
5. AIで薬情報を解析
6. 入力フォームに自動セット

■ 技術構成

今回の構成はこんな感じです。

• フロント：React + TypeScript + Vite（PWA）
• バックエンド：Spring Boot
• OCR：PaddleOCR（Docker）
• AI解析：OpenAI API

■ 技術的なポイント

① OCRはオンプレで実行

個人情報を扱うため、

???? OCRはサーバ内で完結

その後、

???? 個人情報を除去してからAIへ送信

という構成にしました。

② AIで「構造化」する

OCRはただのテキストなので、そのままでは使えません。

そこでAIに以下を抽出させています：

• お薬名
• 量（例：1錠）
• タイミング（食後など）
• 期間
• メモ

③ スマホ最適化

PWAとして作っているので、

• カメラ起動
• 画像縮小（1600px）
• オフライン対応（予定）

なども対応しています。

■ 実装で苦労した点

OCR精度問題

最初はかなり誤認識しました。

対策として：

• 画像の前処理（コントラスト調整）
• OCRパラメータ調整
• AIで補正

でかなり改善しました。

API連携

OCR → AI → フォーム反映 の流れを

???? 1つのAPIでまとめた

ことでフロントがシンプルになりました。

■ 今後やりたいこと

• 薬の辞書連携（正式名称補正）
• 音声入力
• 家族共有
• スマホ用にネイティブアプリ化

※pwaのため、通知は不安定です。

 まとめ

今回作ったアプリは、

???? 「入力の手間をゼロにする」

ことを目標にしています。

AIとOCRを組み合わせることで、

???? “撮るだけで登録”

が実現できました。

■ おわりに

まだ改善の余地はありますが、

かなり実用レベルにはなりました。

もし興味があれば、使ってみてください。