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

「ここのスーパーの白菜はちょっと高いかな。他に安いところはないのかな？」そんな日常の小さな疑問から、スーパーごとの食材価格を手軽に比較できる Web アプリ「ぼちぼち」を開発しました。

ぼちぼち

『どこの食材が一番安い？』。そんな悩みを解決するサービス、ぼちぼちです。

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 に登録しました。もし興味があれば、ぜひフォローしてください。

silverbirder (@silverbirder.bsky.social)

ソフトウェアエンジニア / 関西 / ミスド,無印,スヌーピー,ドラクエ / ブログ https://silverbirder.github.io

bsky.app