今回は、個人開発で新しくリリースしたWebアプリケーション「FuelLens（フューエルレンズ）」について紹介する。
ツーリングやドライブ先でガソリンスタンドに寄ったとき、満タン法での燃費の記録は意外と面倒である。筆者自身、愛車のCB250Rに給油するたびに、スマホのアプリを開き、レシートを見ながら給油量や金額を手入力し、さらに車体のメーターを確認して走行距離を打ち込んでいた。
「この手入力の手間、最近のAIを使えば全部一発で終わるのではないか？」と思い立ち、開発したのがこのアプリである。当ブログのサブドメインで、無料・広告なしで公開している。写真からの読み取りはGoogleアカウントかメールでのログインが要るが、手入力・履歴・統計はログインなしで使える。
公開から5か月で中身はかなり変わったので、2026年10月の時点の姿に書き直した。
⛽ FuelLens とは？
FuelLensは、車の給油時に「ガソリンスタンドのレシート」と「車のメーター」をスマホで撮影（またはアルバムからアップロード）するだけで、AIが自動的に給油量・走行距離・金額などを読み取り、燃費を計算して記録してくれるWebアプリケーションである。
✨ 主な特徴
- AIによる読み取り
- レシートとメーターが写った写真1枚を、AI（Google Gemini）が読んで、給油量・金額・区間距離を入力欄に入れてくれる
- 保存する前に確認の画面が出て、自信の無い項目は「要確認」として目立たせている
- AIは読み間違えるので、全部おまかせではなく、入力の下書きを作ってもらうという位置づけである
- 燃費と単価の自動計算
- 読み取った「走行距離」「給油量」「合計金額」から、今回の燃費（km/L）やガソリン単価（円/L）を自動算出して記録する
- 車とバイクの複数車両管理 & CSVエクスポート対応
- 「メインカーとセカンドバイク」のように、複数台の車両を切り替えて別々に管理できる
- 記録はCSVで書き出せるので、データはいつでも手元に残せる
- ログインすればクラウドで同期（手入力だけならログイン不要）
- ログインしていないときは、記録はブラウザの中にだけ保存され、サーバーには送られない
- ログインすると記録はクラウドに保存され、スマホで撮ってPCでグラフを見る、という使い方ができる
- ログイン前に入れた記録は、ログインしたときに自動でクラウドへ移る
2026年10月までに変わったこと
公開してから自分で使い続けて、困ったところを順に直してきた。
大きく変わったのは次の9つである。
- 見た目
- ログイン
- 登録不要の計算ツール
- 今月の燃費のシェア
- 部分給油・記録漏れ・オドメーター
- Fuelioからの引っ越し
- バックアップと復元
- アカウント削除とプライバシーポリシー
- 表示の速さ
見た目を作り直した
画面を、バイクの計器盤のような暗い色のデザインに作り直した。ホームの真ん中には、燃費を示す半円のメーターを置いている。
スマホでは画面の下にタブバー（ホーム・履歴・統計・設定）があり、真ん中のボタンからすぐに撮影できる。
統計の画面では、燃費の推移と、月ごとの給油代、単価の推移をまとめて見られる。
Googleアカウントかメールでログインできるようにした
写真からの読み取りは、ログインした人だけが使える。公開したときのログインは、認証サービス（Clerk）の開発用の環境のままだった。2026年10月13日に本番の環境へ切り替え、Googleアカウントか、メールに届くコードでログインできるようにした。
ログイン画面も日本語にした。ただ、メールで届く確認コードの文面は英語のままである（Clerkの無料プランでは文面を変えられない）。
登録不要の燃費計算ツールを置いた
走行距離と給油量を入れるだけで、満タン法の燃費が出るページを作った。支払った金額も入れると、1Lあたりの単価と、1kmあたりのガソリン代も出る。ログインも登録もいらない。
今月の燃費を画像でシェアできる
ホームと統計の画面に「今月の燃費をシェア」のボタンを付けた。今月の燃費を1枚の画像にして、Xに投稿したり、画像として保存したりできる。
画像はスマホの中で作っていて、サーバーには送らない。今月に計算できる給油が無いときは、直近30日のぶんで作る。
部分給油・記録漏れ・オドメーターに対応した
記録を続けていると、きれいな満タン給油ばかりにはならない。
満タンにしなかった回は「部分給油」にしておくと、次に満タンにしたときに距離と給油量を合計して燃費を出す。給油を記録し忘れたときは「前回の給油を記録し忘れた」を付けると、そこで計算を区切る。
トリップメーターの無い車は、オドメーターの値を入れれば、前回との差から区間距離を出す。
私のタクトの記録にも、94.71km/Lというありえない値が1件ある。
4年分の燃費の記録はタクトの実燃費の記事にまとめている。
Fuelioから引っ越せるようにした
燃費記録アプリ「Fuelio」のCSVを、そのまま取り込めるようにした。私の原付とバイクの記録も、もともとはFuelioに手で打ち込んでいたものだ。
FuelLens自身が書き出したCSVも取り込める。
バックアップと復元
設定の画面から、全車両・全記録を1つのJSONファイルに書き出せる。同じファイルから戻すこともできる。戻すときは足すだけで、今あるデータを消したり上書きしたりはしない。
アカウント削除とプライバシーポリシー
設定の画面から、アカウントを削除できるようにした。削除すると、クラウドに保存した車両と記録もまとめて消える。元には戻せない。
あわせてプライバシーポリシーと利用規約のページを置いた。撮った写真は読み取りのためにGoogleのGemini APIへ送るだけで、FuelLensのデータベースには保存しない。
表示が速くなった
トップページのLighthouse（モバイル）のパフォーマンスは、56から98になった（2026/10/14・本番・Lighthouse 12.8.2）。効いたのは2つだけである。
1つ目は、日本語のWebフォント（Noto Sans JP）をやめて、端末に入っているフォントにしたこと。1ページで30ファイル以上、約700KBのフォントを読み込んでいた。
2つ目は、トップページや計算ツールのような公開ページから、ログイン（Clerk）とデータベース（Supabase）の部品を外したこと。
凝った最適化をする前に、重いものを外すだけで足りた。
🛠 採用した技術スタックと選定理由
今回の開発では、モダンで開発体験（DX）に優れた技術を積極的に採用した。各技術の選定理由は以下の通りである。
フロントエンド・フレームワーク
- Next.js 16 (App Router) / React 19
- 2026年10月14日の時点の版は、Next.js 16.3.8、React 19.2.8である
- 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制御）を組みやすい点が決め手となった。
AI・画像処理
- Google Gemini API (@google/genai)
- このアプリの心臓部。強力なマルチモーダル処理能力を持つため、フォーマットがバラバラなレシート画像からも「どこが給油量で、どこが合計金額か」を高精度に読み取ってくれる。
- browser-image-compression
- スマホの高画質なカメラ画像をそのままバックエンドに送ると、通信量やAPIペイロード上限のボトルネックになる
- これを防ぐため、クライアントサイドで画像を素早くリサイズ・圧縮し、快適な動作速度を維持している
- いまは長辺1200px・0.8MB以下のJPEGにしてから送っている
UI・グラフ描画
- lucide-react
- クリーンで統一感のある美しいSVGアイコンセット。軽量でTailwindとの組み合わせも抜群。
- recharts
- React向けに作られたグラフ描画ライブラリ。コンポーネントベースで、給油履歴や燃費推移のチャートを直感的に実装できた。
🚀 最後に
「毎回の給油記録を、1秒でも短く、もっと手軽にしたい」という自分の不満から生まれたアプリである。手入力ならログインなしで触れるし、1回だけ計算したいなら計算ツールで足りる。
写真で記録したい人は、次の給油のときにレシートとメーターを並べて撮ってみてほしい。
コメント