qiita初記事ですので緊張しているhaseです。今回はレシートOCRアプリが、一応形になったので進捗報告を兼ねて記事にしようと思います。
経緯
みなさん恋人との家計簿はどうやっていますか?僕は学生で財力がないので基本的に使った人が使った分を支払う仕組みを採用させてもらってます。(将来的に全費用を払って養えるくらいの財力が欲しい)
そこで家計簿をつけて後からエクセルに書き込んで精算をしています。エクセルには関数を事前に仕込んでおいて指定の場所に価格を書き込めば計算してくれるようにしています。ただこの時レシートの項目を確認して、「誰が使ったのか」、「誰が買ったのか」、「税はかかったのか」などを気にして入力するのが結構面倒くさい...
色々家計簿アプリを模索しましたが「誰が使ったのか」を考慮して計算してくれる物が見つかりませんでしたので自分で作ろうと思い立ちました。
要件
- レシートを読み込んで「日付」「商品名」「価格」を読み取れる
- 読み取った項目は手で修正できる(ocrが上手く行かない場合に備えて)
- DBのデータから過去に同じ商品を買った場合は項目を自動補完してくれる
- 読み取った項目をDBに保存する。
- DBから指定日付のデータをcsv形式でダウンロードできる
- ダウンロードしたcsvを自作のエクセルテンプレートに貼り付けられる
設計
- 基本的なバックエンド構築はaws amplify
- aws cognitoで認証
- lambda関数でDB操作関数を作りapi getawayでAPI化
- DBはdynamoDBを使用
- フロントエンドはTypeScriptのReact
awsの設計をイメージで書いてみました！(初めてですので間違ってたらご教授ください！)
##実装部分
とりあえず公式チュートリアルに従ってamplify環境を作る
https://aws.amazon.com/jp/amplify/
そこから自分流にアプリを改変していきます。
結論出来上がったものがこれ(住所とかバレそうな部分は隠してます...)
レシートのデータの中から、日付、商品名、価格を読み取っています。残りのデータはDBから過去のデータを検索して、昔同じ商品を買っていればその時の最頻値を自動補完するようにシステムを作っています。
ocr部分は基本的にこの方のを参考にさせていただきました。(python -> TypeScriptに変換するのがちょっと大変だった。)
https://qiita.com/shoku-pan/items/bf5645894803769edc72
これだけだと商品名と価格の区切り目が読み取れなかったので、読み取れるようにしたアルゴリズムは後日載せようかなと思います。
####アプリの一連の動きを写真にして記載します。
ログイン画面(aws cognitoの背景画像をそれっぽくしただけ)
「レシートアイテム追加」を押します。
レシートアイテムを追加するダイアログが開きます。
画像を入力して「OCR」ボタンを押すと...
読み取れてる!
さっそく「追加する」ボタンを押すとバリデーションアラート文が出現
項目を埋め直して再チャレンジすると...
これでよし！
実際に追加したデータをcsvダウンロードしてみる！
良い感じにcsvで読み取れてる！これを既存の家計簿エクセルにインポートします！
あれ、インポートしたらエクセルのサイズが勝手に変わった...しかもそのせいでデータがうまく表示できないところができちゃった...(改善が必要)
でも計算ロジックはうまく動いているっぽい。
ちなみにB59の青文字の金額が僕が受け取れる金額という意味です。この場合は僕は彼女から3241円もらえるということです。
補足ですがレシートの画像を読み込まなくても手入力でテーブルを増やして追加することもできます！
##今後の課題
- 商品名と価格を1行で読み取っているが、２行の場合のレシートも読み込めるようにする
- 機械学習で、特徴量(甘いもの、辛いもの)の分類を行い、新しい商品の使用者を予測する。
- レスポンシブにしてモバイル対応