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

プログラミング

2026.05.05

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

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

「この手間、最近のAIを使えば全部一発で終わるのではないか？」と思い立ち、開発したのがこのアプリである。現在は当ブログのサブドメインで稼働している。

⛽ FuelLens とは？

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

AI OCRによる自動入力 レシートとメーターの画像をAI（Google Gemini）が解析し、必要な給油情報を自動で抽出する。面倒な手入力の手間を省き、シームレスな記録を実現した。
燃費の自動計算 読み取った「走行距離」と「給油量」から、今回の燃費（km/L）を自動算出して記録する。
履歴とグラフの可視化 過去の履歴をリストで振り返れるだけでなく、チャートを用いて燃費の推移や支出を視覚的に把握できる。
クラウド同期でどこでも使える アカウント登録を行うことで、データはローカルだけでなくクラウドデータベースに保存される。スマートフォンで記録してPCで振り返るなど、マルチデバイスでの一元管理が可能である。（未ログインのお試し利用も可能）

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

Next.js (App Router) / React Reactのエコシステムをフル活用しつつ、ルーティングからサーバーサイド処理（API Routes）まで一つのフレームワークで完結させるため採用した。App Routerの直感的なディレクトリ構造の恩恵を大きく受けている。
Tailwind CSS (v4) ユーティリティファーストな設計により、CSSファイルを行き来することなく、コンポーネントを組むのと同じスピードでスタイリングが可能である。今回はより軽量かつ高速になった最新の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のペイロード上限に引っかかる。これを防ぐため、クライアントサイドで画像を素早く圧縮し、ユーザー体験の低下を防いでいる。