Gemini API×LIFFで作る！画像認識を活用したAIレシート解析ミニアプリ開発

経費精算業務において、レシートを一枚ずつ目視で確認し、手作業でシステムへ入力する作業は非常に煩雑です。この手間を解消するため、日常的に利用するLINE上で動作するミニアプリ（LIFF）と、強力な画像認識能力を持つGoogleのAI「Gemini」を組み合わせることで、スマートフォンのカメラでレシートを撮影するだけで瞬時にデータを自動抽出する仕組みが構築できます。

なぜLIFFとGemini APIの組み合わせが有効なのか

LINEヤフー株式会社が提供する「LINE Front-end Framework（LIFF）」は、LINEアプリ内でシームレスに動作するウェブアプリケーションを開発するためのプラットフォームです。ユーザーは新たなアプリをインストールする必要がなく、使い慣れたトークルームからすぐにカメラを起動して操作できるため、業務効率化ツールのUIとして非常に優れています。

一方、Googleが提供するGeminiは、テキストだけでなく画像や音声など複数の情報を同時に処理できるマルチモーダルAIです。従来のOCR（光学文字認識）技術では、レシートのフォーマットが店舗によって異なるため、項目の特定（どこが店名で、どこが合計金額か）が困難でした。しかし、GeminiのAPIを活用すれば、「画像から店名、日付、合計金額をJSONで抽出してください」という自然言語の指示だけで、高精度なデータの構造化が実現できます。

アプリケーションの全体構成

本システムは、大きく分けてフロントエンド（LIFFアプリ）、バックエンドサーバー、そしてGemini APIの3つの要素で構成されます。

1. LIFFアプリ（フロントエンド） HTMLの <input type="file" accept="image/*" capture="environment"> を用いて、スマートフォン標準のカメラを起動しレシートを撮影します。取得した画像をBase64形式などに変換し、バックエンドへ送信します。
2. バックエンドサーバー（Node.jsなど） LIFFアプリからのリクエストを受け取り、Gemini API用のSDKを利用して画像を解析させます。APIキーの秘匿性を保つため、APIへのリクエストは必ずサーバー側から行います。
3. Gemini API プロンプトに従って画像を解析し、JSON形式で結果をバックエンドへ返却します。バックエンドはこれをフロントエンドに返し、画面上に抽出結果を表示します。

実装サンプル：Gemini APIによるレシート解析

ここでは、バックエンド（Node.js / TypeScript）において、受け取ったレシート画像をGemini APIに渡し、JSON形式で解析結果を取得する実装例を紹介します。フロントエンド側はLIFF v2系を利用して初期化（liff.init()）を行い、取得した画像データをサーバーへ送る前提となります。

import { GoogleGenerativeAI } from "@google/generative-ai";
 
// Gemini APIのクライアント初期化
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
 
/**
 * レシート画像をGeminiで解析する関数
 * @param base64Image クライアントから送信されたBase64形式の画像データ
 * @param mimeType 画像のMIMEタイプ (例: "image/jpeg")
 */
async function analyzeReceipt(base64Image: string, mimeType: string) {
  // 画像処理に優れたモデルを選択
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
 
  const prompt = `
    添付されたレシートの画像を解析し、以下の情報を抽出してJSON形式で出力してください。
    - storeName: 店名
    - date: 日付 (YYYY-MM-DD形式)
    - totalAmount: 合計金額 (数値のみ)
    - items: 購入した商品の配列（name: 商品名, price: 価格）
    JSON以外の説明文は一切含めないでください。
  `;
 
  const imagePart = {
    inlineData: {
      data: base64Image,
      mimeType: mimeType,
    },
  };
 
  try {
    const result = await model.generateContent([prompt, imagePart]);
    const response = await result.response;
    const text = response.text();
    
    // Markdownのコードブロック（```json ... ```）が含まれる場合のクレンジング
    const jsonString = text.replace(/```json\n?|```/g, "").trim();
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("Gemini APIの解析中にエラーが発生しました:", error);
    throw error;
  }
}

このように、プロンプトで出力フォーマットを厳密に指定することで、後続のデータベース保存や経費精算システムへの連携が非常にスムーズになります。

開発時のよくあるハマりどころと注意点

実際にミニアプリとして実装・運用するにあたり、いくつかの注意点が存在します。

1. LIFFの初期化エラー

LIFFアプリを起動した際、画面が真っ白になったり、ユーザー情報が取得できなかったりするケースがあります。公式ドキュメントによれば、liff.init() の実行時に渡すLIFF IDが間違っている、あるいはLINE Developersコンソールで設定したエンドポイントURLと実際のURLが一致していないことが主な原因とされています。開発中にローカル環境のURL（ngrokのURLなど）を変更した際は、必ずコンソールの設定も見直す必要があります。

2. 画像のサイズ超過と通信負荷

最近のスマートフォンのカメラで撮影した画像は数MBに達することがあり、そのまま送信するとバックエンドのペイロード制限（Expressの標準設定など）に引っかかることがあります。LIFF側（ブラウザ側）でCanvas APIなどを活用し、送信前に適切なサイズへのリサイズや圧縮を行うことで、通信の安定性が向上すると考えられます。

3. AIのハルシネーション（幻覚）対策

Geminiは非常に高性能なAIですが、レシートの印字がかすれている場合や、複雑な割引金額の記載がある場合、推測を含めた誤った金額を抽出してしまう可能性もあると考えられます。そのため、AIの出力結果を最初から確定データとするのではなく、LIFFの画面上に解析結果をフォームとして表示し、ユーザー自身が最終確認・修正できるUI設計にすることが実運用において重要です。

まとめ

LIFFを利用した手軽でシームレスなUXと、Gemini APIによる高度な画像解析を組み合わせることで、実用的でユーザーフレンドリーなレシート解析ミニアプリが実現できます。LINEヤフー株式会社が提供するエコシステム内で完結するため、社内向けの経費精算ツールや、一般向けの家計簿アプリなど、さまざまな課題解決へ応用してみてください。