はじめに
記事を開いていただきありがとうございます！
現在私は GitHub Copilot を活用しながら、業務効率化のためのWebアプリ開発に取り組んでいます。
前回の記事はこちら
【アプリ開発】経費申請の手入力を減らしたい新人が、OCRに挑戦してみたら8割自動化できた
※本記事は上記で紹介したアプリのアップデート編になります！
本記事では、OCR精度の向上と申請フローの見直しに取り組み、「人でも読みづらい激長レシート」を一瞬でフォーム入力できるアプリに進化させた話を紹介します！
※動画もあるのでぜひ最後までご覧ください！
目次
改善の背景と今回のテーマ
前回までは、OCRによって経費申請を約8割まで自動化できていましたが、
実際に動かしてみると、現場で使うにはまだまだ改善の余地があることを実感しました。
- OCRの誤読
- フォームへの反映ズレ
- 差し戻し時の混乱
など、実際に運用するには厳しい部分が見えてきました。
そこで今回は、
- AIにOCR結果を“読み直してもらうアプローチ
- 申請フローのUI・UX改善
の2点にフォーカスして改善を行いました！
Cloud Vision API × GeminiでOCRを読み直す
前回の構成では、OCR処理からフォームへの反映を次のように行っていました！
OCR.space API + ブラウザ前処理（トリミング / 二値化） → 正規表現で金額・日付・店舗候補を抽出
この方法でも約8割は自動化できましたが、フォーマットの揺れに弱く、店舗名や金額の誤読が発生することも多くありました。
そこで今回は、精度と柔軟性を重視して Cloud Vision API × Gemini API の組み合わせに切り替えました。
- Cloud Vision API が「画像から文字を抽出」
- Gemini API が「結果を文脈的に理解して再構成」
という二段構えのアプローチになります！
AIが読み直したらこうなった！
以前はうまく読めなかった激長レシートを、AIにもう一度読ませてみました。
実際の動作は動画でどうぞ
【実際にアップロードした画像】
Vision × Gemini の組み合わせで、曖昧な文字列でも正しい店名・金額・日付が文脈的に補完され、人が確認するレベルに近い精度で整形されたデータがフォームに自動入力できるようになりました！
これにより、フォーマットの違うレシートでも正しく解析できるようになり、「どんなレシートでも読める」実用レベルに近づきました！
申請フローの改善とUIの整理
OCRの精度が安定してきたことで、
今度は「人が操作しやすい流れ」に注目しました。
以前は、申請後のフローはほとんど未実装でした。
そこで今回のアップデートでは...
- 管理者画面を新設し、ステータス変更を可能に
- 差し戻し理由を必須化
- 差し戻し時の申請編集画面を追加
- 申請履歴の自動更新
- 一覧画面でのフィルター検索に対応
こんな機能を追加してみました。
実際の動作は動画でどうぞ
機能追加により申請から精算までの流れがスムーズになりました！
最後に
Geminiを組み合わせたことで、少しずつ使えるアプリに近づいているのを実感しています！AIをどう活かすかを考えることが本当に大切だと感じました！
このアプリを先輩にお見せしたところ、
「画像のバリデーションチェック」や「管理者ログアウト時のポップアップ」など、
細かい部分も詰めていけるといいね、というフィードバックをいただきました。
こうした改善も引き続き進めながら、これからもアップデートを続けていきます！
最後まで読んでいただき、ありがとうございました！