Zenn
👛

Gemini CLIを使ってPayPay履歴をAIが仕分けるアプリを作ってみた

に公開
React
PayPay
Gemini API
Gemini CLI
idea

はじめに

※本記事は一部Geminiによって書いてもらっています。

こんにちは！今回は、PayPayの利用履歴CSVをアップロードするだけで、AIが自動で支出を分類し、家計収支を可視化できるWebアプリケーションをGemini CLIを用いて試作的に開発しました。このアプリについてと、開発でどのようなステップを踏んだのかをご紹介いたします。

GitHubリンク

以下がGitHubリンクになっています。Gemini CLIのための"要件定義書.md"などのmdファイルも残してあります。

https://github.com/mugi0227/paypay-history-app

試すにはgit cloneをして、.envに自身のgoogle api keyを入力する必要があります。

開発の背景

PayPayは非常に便利な決済サービスですが、API制限がきつく家計簿アプリと連携できませんでした。しかし、利用履歴を家計簿に手動で入力するのは手間がかかります。特に、何にいくら使ったのかを正確に把握するためには、一つ一つの支出を分類する作業が避けられません。この手作業をAIの力で自動化し、簡単に家計管理をできるようにしたいと考えました。

開発のステップ

開発をGemini CLIにお願いする際に気を付けていたことはおおむね以下の2つです。

  • 開発するアプリの仕様をできるだけ具体的に規定すること
  • 不具合でGemini CLIが落ちてしまってもcontextを失わないように、mdファイルに記録を残させること

以上を実現するために、以下のようなステップを踏んでいます。

  1. まず最初にチャットアプリのGeminiの方にこういうアプリが作りたいので要件定義書を書いて、という風にお願いして要件定義をしてもらいました。その結果+少し手直ししたのが以下リンクのmdファイルになっています。
    https://github.com/mugi0227/paypay-history-app/blob/master/要件定義書.md
  2. 次に、Gemini CLIを立ち上げ、"要件定義書.md"をもとにGEMINI.mdを作成し、アプリを開発してくださいとお願いしました。
  3. あとは基本的に待つだけです。出来たものを起動しますと、まあまあいい感じのたたき台ができています。ここで、気になった点を列挙し、「以上を要件定義書.mdに追記して修正して」とお願いしました。そのため"要件定義書.md"には追記部分があります。
  4. 適宜、「これまでの進捗をprogress.mdに記載して」とお願いしながら、3.を繰り返し、完成しました。

所要時間はなんだかんだで大体1時間だったでしょうか。ちょっと長い気もしますねｗ

アプリケーションの概要

ここからはアプリの内容について、Geminiに説明してもらいます。
このアプリケーションは、クライアントサイドで完結するWebアプリとして設計されています。ユーザーはPayPayからダウンロードしたCSVファイルをアップロードするだけで、以下のプロセスが自動で実行されます。

  1. CSV解析: アップロードされたCSVデータがブラウザ内で解析されます。
  2. AIによる費目分類: 各支出項目がGoogle Gemini APIに送信され、AIが最適な費目を推測・分類します。
  3. 結果の表示と編集: AIが分類した結果が一覧で表示され、もしAIの分類が意図と異なる場合は、ユーザー自身で簡単に修正できます。
  4. 集計レポート: 最終的なデータに基づいて、費目ごとの合計金額が自動で集計され、レポートとして表示されます。このレポートはクリップボードにコピーしたり、CSVとしてダウンロードしたりすることも可能です。

技術スタック

このプロジェクトでは、以下の技術を採用しました。

  • フロントエンド: React
    • ユーザーインターフェースの構築に、宣言的でコンポーネントベースのReactを採用しました。
  • スタイリング: Tailwind CSS
    • ユーティリティファーストのCSSフレームワークであるTailwind CSSを使用し、迅速かつ効率的なUIデザインを実現しました。
  • CSV解析: PapaParse
    • ブラウザ上でのCSV解析には、高速で堅牢なPapaParseライブラリを利用しました。
  • AI連携: Google AI JavaScript SDK (Gemini)
    • 支出の自動分類には、Googleの強力なAIモデルであるGeminiをJavaScript SDK経由で利用しています。

アーキテクチャ図

図の解説

この図は、アプリケーションの構造とデータの流れを示しています。

  1. エントリーポイント:

    • ブラウザはpublic/index.htmlを読み込みます。
    • src/index.jsがReactアプリケーションを起動し、メインコンポーネントであるApp.jsを呼び出します。

  2. メインコンポーネント (App.js):

    • アプリケーション全体の親コンポーネントです。
    • FileUpload.js、TransactionTable.js、SummaryReport.jsといった子コンポーネントを管理します。
    • 取引データやAIによる分類結果などの状態（State）を一元管理する役割を担います。

  3. UIコンポーネント (src/components/):

    • FileUpload.js: ユーザーがCSVファイルをアップロードするためのUIです。
    • TransactionTable.js: AIによって分類された取引データを表形式で表示し、ユーザーが手動で修正できるようにします。
    • SummaryReport.js: 最終的なデータを集計し、レポートとして表示します。

  4. API連携 (src/gemini.js):

    • GoogleのGemini APIと通信するためのロジックがここに記述されます。App.jsから呼び出され、取引データの費目分類をAIに依頼します。

  5. データの流れ:

    1. ユーザーがFileUpload.jsでCSVファイルをアップロードします。
    2. App.jsがファイルを受け取り、gemini.js経由でGemini APIに送信して費目を分類させます。
    3. 分類結果を受け取ったApp.jsは、そのデータをTransactionTable.jsに渡して表示します。
    4. ユーザーがテーブルでデータを編集すると、その変更がApp.jsに通知されます。
    5. App.jsは最終的なデータをSummaryReport.jsに渡し、集計レポートを表示させます。

アプリケーションの主な機能

1. CSVアップロード画面

直感的なドラッグ＆ドロップ、またはファイル選択でPayPayの利用履歴CSVを読み込めます。

2. データ処理とAI自動分類

アップロードされたCSVは即座にクライアントサイドで解析され、各取引データがGemini APIに送られます。Geminiは取引内容から最適な費目（例: 食費、交通費、娯楽費など）を推測し、分類結果を返します。

3. 結果確認・編集画面

AIが分類した結果は、見やすいテーブル形式で表示されます。もしAIの分類が期待と異なる場合でも、ユーザーはテーブル上で直接費目を手動で修正できます。これにより、AIの精度に依存しすぎず、ユーザーの意図を反映した家計簿を作成できます。

4. 集計レポート

分類が完了したデータは、費目ごとに合計金額が算出され、サマリーレポートとして表示されます。このレポートは、家計の全体像を把握するのに役立ちます。さらに、レポートデータをクリップボードにコピーしたり、CSVファイルとしてダウンロードしたりする機能も備わっています。

おわりに

こういうのが欲しいな～とおもったら手軽に作れる時代が本当に来たなと感じています。
AI駆動開発にはリスクもありますが、間違いなく夢が広がっているので、うまく使って今後もいろいろ楽しいことをしたいなと思います！

Discussion