スマホでレシートを撮影して家計簿へ自動入力する機能を作ろうとしている

自作しているお金管理アプリに、スマートフォンでレシートを撮影して、支出情報を自動入力する機能を追加した。

Codexにレシート撮影したら支出登録される機能を作成してもらった

Codexとのやりとり

Codexに、

スマートフォンからレシートを撮影し、画像から支出情報を抽出して、既存の入出金登録フォームへ自動入力できる機能を追加してください。

と依頼した。

UIの様子

「入出金 → 新しく登録」に「レシートから入力」というエリアが追加された。

スマホからMacのローカル環境を開けた

次にやりたかったのは、実際にiPhoneでレシートを撮影して試すこと。

Macとスマホを同じWi-Fiにつないだ

既存の動いているサーバーを削除した

スマホのブラウザに打ち込むURL

Mac上では、

127.0.0.1:3001

でアプリを動かしている。

ただし、127.0.0.1はその端末自身を意味するため、そのままではiPhoneからMacのRailsアプリへアクセスできない。

そこでRailsを、

0.0.0.0:3001

で待ち受けるようにして起動した。

MacとiPhoneを同じWi-Fiに接続して、

192.168.110.104:3001

へアクセス。

これでスマホから、自分のMacで動いているMoneyAppを開くことができた。

最初の実機テストは「読み取りに失敗」

実際のバローのレシートをスマホから選択してみた。

画像自体はきちんとプレビューされた。

ただ、その下に表示されたのは、

読み取りに失敗しました。通信環境を確認するか、明るい場所で撮り直してください。手入力も利用できます。

というメッセージ。

AIを組み込むとうまくいきますか？

ここで、

AIを組み込むとうまくいきますか？

と考えた。

画像を理解できるAIを使えば、傾いたレシートや複雑なレイアウトでも読み取りやすくなる。

ただし、AIを使うとなると、

• APIキー
• 従量課金
• 外部サービスへの画像送信

なども発生する。

今回の仕組みは、レシート画像を外部に送信せず、端末内でOCRする設計だった。

なので、いきなりAIを追加するのではなく、まず現在のOCRがなぜ失敗しているのかを調べることにした。

原因はOCRライブラリの読み込み方だった

調査してもらうと、最初のエラーの原因が判明した。

OCRライブラリの読み込み方法のミスだった。

修正後、OCRエンジンそのものでは日付や金額を抽出できることが確認できた。

読み取りが時間内に完了しなかった

同じレシートを使って、もう一度iPhoneから試した。

今度は前回と明らかに挙動が違った。

画像を選択すると、

読み取り中… 0%

と表示された。

OCR処理そのものは動き始めている。

読み取り中… 39%

まで進んだ。

最初の「即エラー」からは一歩前進した。

ただし、しばらく待っても39%付近から進まない。

最終的に、

読み取りが時間内に完了しませんでした。
通信環境や画像を確認して再度お試しください。

というメッセージが表示された。

自宅のWi-Fiが原因か？

今回のスマホ実機テストでは、最終的な読み取りにはまだ成功していない。

ただ、最初と2回目では問題が違う。

最初は、

OCRライブラリ自体が正しく動いていなかった。

修正後は、

OCRは起動し、0% → 39%まで処理が進んだものの、スマホ上では時間内に終了しなかった。

という状態になった。

「読み取りに失敗した」という一つの現象でも、原因は毎回同じとは限らない。

自宅のWi-Fiの通信環境が途切れるタイミングがあることが原因かもしれない。（この問題は以前から継続している）