家計簿は、記録することより「記録を続けること」のほうが難しいものです。

市販の家計簿アプリも試しましたが、自分が使うカードやPayPayの取り込み方、カテゴリーの分け方、確認したい情報の見せ方まで含めると、どうしても少しずつ合わない部分が出てきました。

そこで今回は、Google Apps ScriptとGoogleスプレッドシートを使い、自分の使い方に合わせた家計簿アプリを制作しました。

手入力だけでなく、カード利用通知メールやPayPayの決済スクリーンショットも、できるだけ手間をかけずに取り込めるようにしています。本記事では、完成した機能と、実装で特に工夫した点を紹介します。

※掲載画像は記事用のデモデータです。実際の家計簿データ、メールアドレス、利用店舗、利用金額は使用していません。

この記事で分かること

  • Google Apps Scriptで家計簿アプリを作る全体構成
  • Googleスプレッドシートをデータベースとして使う方法
  • Gmailのカード利用通知を家計簿へ取り込む流れ
  • PayPayのスクリーンショットをOCRで読み取る流れ
  • 初めての店舗を確認し、次回から自動分類する仕組み
  • 重複登録や画像の保管期間など、運用面での工夫

Google Apps Scriptで作った家計簿アプリの構成

今回の家計簿は、次のGoogleサービスを組み合わせています。

役割使用したもの
画面・処理Google Apps Script
家計簿データGoogleスプレッドシート
カード利用通知Gmail
PayPay画像の一時保管Google Drive
画像からの文字抽出Google Drive OCR
定期実行Apps Scriptの時間主導型トリガー

Google Apps Scriptは、Google Workspaceの各サービスをJavaScriptで連携・自動化できる環境です。スプレッドシートの読み書き、Gmail検索、Driveのファイル管理、時間指定の自動実行を1つのプロジェクトにまとめられるため、今回の構成と相性が良いと判断しました。

家計簿データはGoogleスプレッドシートへ集約しています。Googleの公式ドキュメントでも、Apps Scriptからスプレッドシートを作成・参照・変更できることが案内されています。

参考：Spreadsheet Service（Google公式）

ホーム画面からすぐに記帳できる

Google Apps Scriptで作った家計簿アプリのクイック入力画面
図1：支出・収入をホーム画面から直接登録できるクイック入力（デモデータ）

家計簿を続けやすくするため、ホーム画面には最初から入力欄を表示しました。

「＋ボタンを押す」「入力画面を開く」といった操作を挟まず、金額とカテゴリーを選んですぐ登録できます。店舗名やメモが必要なときだけ追加入力を開く設計です。

ホーム画面では、次の内容をまとめて確認できます。

  • 今月の収入・支出・収支
  • 月ごとの支出
  • カテゴリー別の金額と割合
  • カテゴリー内の取引明細
  • 最近の取引

月別の合計を見るだけでなく、「食費の中で何を買ったのか」までアプリ内で確認できるようにしました。

カード利用通知メールを自動で取り込む

カード利用のカテゴリーを確認する家計簿アプリ画面
図2：自動で分類できなかったカード利用をホーム画面で確認（デモデータ）

クレジットカードを利用すると届くGmailの通知メールから、次の情報を抽出します。

  • 利用日時
  • 店舗名・利用先
  • 利用金額
  • カードの種類
  • 元メールを識別するID

Gmailの検索と本文取得には、Apps ScriptのGmailサービスやAdvanced Gmail Serviceを使用できます。

参考：Advanced Gmail Service（Google公式）

メール形式はカード会社ごとに異なるため、すべてを同じ処理にはしていません。

店舗名が分かるカードは、過去に登録したカテゴリー判定ルールと照合します。一方、通知時点で「Mastercard加盟店」のように実際の店舗が分からないカードは、誤分類を避けるため毎回確認対象にしています。

自動化を優先しすぎず、判断材料が足りない取引だけ人が確認する構成です。

初めての店舗は確認し、次回から自動分類

初めて利用する店舗や、まだルールがない利用先は「未分類・要確認」としてホーム画面に表示します。

確認画面では、次の2つから選べます。

  1. 今回だけカテゴリーを設定する
  2. キーワードとカテゴリーの組み合わせを記憶する

たとえば、OCR全文に「ファミリーマート」が含まれている取引を「コンビニ」として記憶すると、次回から店舗の支店名が変わっても同じカテゴリーへ分類できます。

カテゴリー一覧に必要な項目がなければ、その場で新しいカテゴリーを作成できます。ルールをプログラムへ直接書き足すのではなく、利用者自身がアプリ上で育てられる形にしました。

PayPayはスクリーンショットをGoogle Drive OCRで処理

PayPayには、一般利用者の決済履歴を自作アプリから自由に取得する公開APIがないため、別の方法を採用しました。

現在の流れは次のとおりです。

  1. iPhoneでPayPayの支払い完了画面をスクリーンショット
  2. iPhoneから画像添付メールを送信
  3. 1日1回、Apps Scriptが対象メールを検索
  4. 添付画像をGoogle Driveの未処理フォルダへ保存
  5. Google Drive OCRで文字を抽出
  6. 店舗名・利用日時・金額を解析
  7. 家計簿へ登録し、必要なら「要確認」へ表示
  8. 画像を処理済みフォルダへ移動

Google Drive APIのfiles.createには、画像取り込み時のOCR言語を指定するocrLanguageが用意されています。

参考：Drive API files.create（Google公式）

iPhone標準OCRだけで処理したときは、金額の末尾やロゴ部分を誤認識するケースがありました。画像そのものを送ってDrive側でOCRする方式に変えたことで、元画像を基準に再解析できるようになり、トラブル時の確認もしやすくなりました。

月別・カテゴリー別の支出をアプリ内で確認

家計簿アプリの月別支出とカテゴリー別内訳
図3：月別の支出とカテゴリー別内訳（デモデータ）

月ごとの支出は、1月から12月まで一覧で表示します。選択中の月は色を変え、ほかの月と比較しやすくしています。

カテゴリー別の内訳では、金額と全体に占める割合を表示します。カテゴリーを開くと取引明細が展開され、店舗名・日付・金額を確認できます。記録後にカテゴリーを変更したり、不要な取引を論理削除したりすることも可能です。

1日1回の自動処理と実行結果の確認

GmailとPayPay画像の自動取込結果を表示する設定画面
図4：カードメールとPayPay画像をまとめて処理する自動取込画面（デモデータ）

カードメールとPayPay画像は、毎日1回まとめて処理します。Apps Scriptの時間主導型トリガーを使うと、PCを起動したままにしなくてもクラウド側で定期処理を実行できます。

参考：Installable Triggers（Google公式）

設定画面には、次の件数だけを表示します。

  • 検索したメール数
  • 新規登録数
  • 要確認数
  • 処理済み・対象外の数
  • 画像取込数
  • エラー数

実行ログへカードの店舗名や金額、メール本文を残さず、状態と件数だけで確認できるようにしています。

重複登録と画像管理で工夫したこと

自動取込では、正常に登録できることと同じくらい「二重に登録しないこと」が重要です。

カードメールとPayPayメールは、GmailのメッセージIDを保存し、処理済みかどうかを判定します。同じメールが検索に再度含まれても、家計簿へ二重登録されません。

PayPay画像はGoogle Drive内で、次の3フォルダに分けて管理します。

  • 01_未処理：これからOCRする画像
  • 02_処理済み：正常に読み取った画像
  • 03_読取エラー：内容を確認する必要がある画像

正常処理後の画像は一定期間後に自動削除し、長期間残し続けない設計です。フォルダとスプレッドシートは固定IDで参照し、アプリを利用できるGoogleアカウントも限定しています。

なお、Apps Scriptから非公開のGoogleデータへアクセスするには利用者の承認が必要です。必要な権限だけを使い、不要な外部公開を避けることが大切です。

参考：Authorization for Google Services（Google公式）

作って分かったこと

今回の制作で最も難しかったのは、画面そのものより、入力元ごとの差をどう吸収するかでした。

  • カード会社ごとにメール形式が違う
  • 店舗名が通知時点では分からないカードがある
  • PayPayはスクリーンショットのOCR精度に左右される
  • 同じ店舗でも支店名やOCR結果が少しずつ変わる

そのため、すべてを無理に自動化するのではなく、確実に判断できる取引は自動処理し、不明な取引だけ確認する方針にしています。

また、確認時に登録したキーワードを次回から使うことで、利用を続けるほど確認件数を減らせます。最初から完璧な分類ルールを作るのではなく、実際の利用データに合わせて育てていく設計です。

まとめ

Google Apps ScriptとGoogleスプレッドシートを組み合わせることで、次の入力を1つの家計簿へまとめられました。

  • ホーム画面からの手入力
  • Gmailに届くカード利用通知
  • PayPayの支払い完了スクリーンショット

市販サービスのような銀行・決済サービスとの直接連携ではありませんが、自分が使う支払い方法に合わせて処理を調整できるのが自作のメリットです。

今後は実際の運用を続けながら、OCRで読み取りにくい画面への対応、分類ルールの見直し、表示速度の改善などを進めていく予定です。

NAGI-WEB制作では、ホームページ制作だけでなく、今回のような小さなWebツールや業務の自動化も相談内容に応じて対応しています。「既存サービスでは少し合わない」「毎日の入力作業を減らしたい」といった内容があれば、サービス内容やお問い合わせページも参考にしてください。