手軽に安い食材を見つけられるアプリ「ぼちぼち」を開発
「ここのスーパーの白菜はちょっと高いかな。他に安いところはないのかな？」そんな日常の小さな疑問から、スーパーごとの食材価格を手軽に比較できる Web アプリ「ぼちぼち」を開発しました。
https://bochi-bochi.vercel.app
アプリの使い方
トップページから、スーパーを探すをクリックします。
次に、スーパーを探す手段を選びます。例えば、現在地から探すをクリックします。 現在地を公開したくないので、ここからは画像を割愛します。
近所のスーパーの一覧が Google Map で表示されます。 また、画面下部に食材が表示されます。表示された食材をクリックすると、どのスーパーで安く買えるかが一目瞭然になります。 表示される食材は、スーパーに食材が登録されている場合に限ります。
※ スーパーの食材は、一度だけ AI によるスクレイピングでデータ登録されます。
作った結果
私の妻はこのアプリを利用してから、「白菜はここのスーパーが安いね」「ひき肉はあそこのスーパーだね」と言って、満足しながら買い物を楽しんでいます。 買い物後のレシートを使って、食材の価格情報を簡単にアプリに登録する機能も備えています。 また、AI 技術を活用してスーパーの食材データを自動で収集・登録する仕組みを構築しています。 スーパーの検索・表示には Google Map を活用しており、無料枠をうまく使うことで、コストを抑えつつスーパーの情報を取得しています。
全ての食材が安いスーパー
しかしこのアプリを利用していたある日に、近所に「全ての食材が安いスーパー」ができました。 そのため、ほとんどの買い物をそこでするようになりました。 結果、アプリ自体の利用頻度は少なくなりました。(笑)
開発備忘録
OpenAI 話
OpenAI をシステムに組み込む際、全プロセスを一括で行うよりも、段階的に処理を分けることで精度が向上しました。 具体的には、レシート画像から構造化データを作成するプロセスにおいて、最初に OCR を用いて画像からテキストを抽出し、 その後抽出したテキストを OpenAI で分析する方法が効果的であることがわかりました。 また、指示をシンプルに保つことで、より高精度な結果を得られました。 例えば、「商品名が商品カテゴリに属するか否か」という明確な問いにすることで、分析の精度が向上しました。
使用した技術スタック
開発には以下の技術スタックを使用しました。
- Web フレームワーク
- Next.js
- API
- tRPC
- データベース
- PlanetScale
- Prisma
- UI
- @tremor/react
- 状態管理
- jotai
- 地図関連
- @vis.gl/react-google-maps
- Google Places API
- レシートデータ抽出
- Google Cloud Vision
- OpenAI
- スクレイピング
- Crawlee
- Cloud Run Jobs
- OpenAI
開発中、妻からの直接的なフィードバックを通じて、アプリの方向性を確認しながら進めることができ、これが非常に楽しい経験となりました。 UI/UX デザインについてはまだ改善の余地がありますが、現時点では個人利用を目的としているため、このまま使用を続ける予定です。
終わりに
最後に、私は最近 Bluesky に登録しました。もし興味があれば、ぜひフォローしてください。