【個人開発】レシートとメーターを撮るだけ！AIが自動計算する燃費管理アプリ「FuelLens」を作った話

今回は、個人開発で新しくリリースしたWebアプリケーション「FuelLens（フューエルレンズ）」について紹介する。

ツーリングやドライブ先でガソリンスタンドに寄ったとき、満タン法での燃費の記録は意外と面倒である。筆者自身、愛車のCB250Rに給油するたびに、スマホのアプリを開き、レシートを見ながら給油量や金額を手入力し、さらに車体のメーターを確認して走行距離を打ち込んでいた。

「この手入力の手間、最近のAIを使えば全部一発で終わるのではないか？」と思い立ち、開発したのがこのアプリである。現在は当ブログのサブドメインにて、ログイン・会員登録不要ですぐに試せる状態で公開している。

＼FuelLensを今すぐ試してみる／

⛽ FuelLens とは？

FuelLensは、車の給油時に「ガソリンスタンドのレシート」と「車のメーター」をスマホで撮影（またはアルバムからアップロード）するだけで、AIが自動的に給油量・走行距離・金額などを読み取り、燃費を計算して記録してくれるWebアプリケーションである。

AI OCRによる完全自動入力（手入力ゼロ）
- レシートとメーターの画像をAI（Google Gemini）が解析し、必要な給油情報を高精度に抽出する。面倒な手入力の手間を完全に排除し、給油直後のシームレスな記録を実現した。
燃費と単価の自動計算
- 読み取った「走行距離」「給油量」「合計金額」から、今回の燃費（km/L）やガソリン単価（円/L）を自動算出して記録する。
車とバイクの複数車両管理 & CSVエクスポート対応
- 「メインカーとセカンドバイク」のように、複数台の車両をタブで切り替えて別々に管理できる。また、記録したデータはワンタップで文字化け防止済みのCSVファイルとして出力可能なため、大切なデータを確実に手元に残すことができる。
クラウド同期でどこでも使える（お試し利用も可）
- 未ログイン状態でもブラウザのローカル保存ですぐに利用可能。さらに無料のアカウント登録を行えばクラウドデータベースと同期され、スマホでスキャンしてPCの大画面でグラフ（燃費推移や支出）を振り返るなど、マルチデバイスでの一元管理が可能になる。

今回の開発では、モダンで開発体験（DX）に優れた技術を積極的に採用した。各技術の選定理由は以下の通りである。

Next.js (App Router) / React
- Reactのエコシステムをフル活用しつつ、ルーティングからバックエンド処理（API Routes）まで一つのフレームワークで完結させるため採用。App Routerの直感的なディレクトリ構造の恩恵を大きく受けている。
Tailwind CSS (v4)
- ユーティリティファーストな設計により、コンポーネントを組むのと同じスピードで直感的なスタイリングが可能。今回はより軽量かつ高速になった最新のv4を導入した。

Clerk (@clerk/nextjs)
- 認証周りを迅速かつ安全に実装するための最適解。Next.jsとの親和性が非常に高く、コンポーネントを配置するだけでリッチなログイン体験を構築できるため、初期開発のスピードが劇的に向上した。
Supabase (@supabase/supabase-js)
- バックエンドとして採用したオープンソースのBaaS。PostgreSQLの堅牢性を持ちながら、フロントエンドからREST API感覚でデータ操作が可能。ClerkのJWT連携を活用したセキュアな構成（RLS制御）を組みやすい点が決め手となった。

Google Gemini API (@google/genai)
- このアプリの心臓部。強力なマルチモーダル処理能力を持つため、フォーマットがバラバラなレシート画像からも「どこが給油量で、どこが合計金額か」を高精度に読み取ってくれる。
browser-image-compression
- スマホの高画質なカメラ画像をそのままバックエンドに送ると、通信量やAPIペイロード上限のボトルネックになる。これを防ぐため、クライアントサイドで画像を素早くリサイズ・圧縮し、快適な動作速度を維持している。