手軽に安い食材を見つけられるアプリ「ぼちぼち」を開発

「ここのスーパーの白菜はちょっと高いかな。他に安いところはないのかな？」そんな日常の小さな疑問から、スーパーごとの食材価格を手軽に比較できる 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 に登録しました。もし興味があれば、ぜひフォローしてください。

https://bsky.app/profile/silverbirder.bsky.social

役立ったら、☕でサポートしてね！