家族用クレカのダッシュボードを作って、妻のスマホでも見れるようにした話
バイブコーディングで作ったダッシュボードを、妻とも共有したくなった
前回の記事で、請求書ツールを作るときに初めて「要件定義書」と「設計書」を先に用意してから実装した話を書きました。次に同じやり方を試したのが、今回紹介するクレカダッシュボードです。
きっかけは家族用クレカの支出を見える化したいと思ったことです。最初は自分用に、なんとなくClaude Codeに話しかけながら思いつきベースでツールを作りました。いわゆる「バイブコーディング」というやつです。クレカのCSV明細を読み込んで、AIに「これは食費」「これは交通費」みたいに自動で仕分けしてもらい、グラフにして眺められるダッシュボードです。パソコン上で動かす分にはこれで十分満足していました。
使っているうちに、ふと「これ、妻にも見せられたら便利じゃないか」と思うようになりました。夫婦で支出を共有できれば、家計の話をするときもお互い同じ画面を見ながら話せます。
「自分のパソコンの中でしか見られない」という壁
当たり前ですが、ひとつ大きな問題が残っていました。このツール、自分のノートパソコンの中でしか動かないんです。CSVファイルを手元のフォルダに置いて、バッチファイルをダブルクリックして、ブラウザでlocalhostを開く。この一連の作業を全部自分のPCでやる必要があったので、妻がスマホでちょっと確認する、なんてことができませんでした。
そこで、このダッシュボードをクラウドに移行して、家族それぞれのPCやスマホからいつでも見られるようにしよう、と思い立ちました。今回もいきなりコードを書き始めるのではなく、前回覚えたやり方で、まずチャット上のClaudeと会話しながら要件定義書と設計書を作ってから着手することにしました。
無料の範囲でクラウドに乗せる
設計の段階で決めていたのは、「運用コストを月額0円に抑える」という制約でした。個人のクレカ管理アプリに毎月お金をかけたくはありません。
そこで選んだのが、データを保存しておく場所には「Neon」という無料で使えるクラウドのデータベースサービス、アプリ自体を動かす場所には「Render」という無料プランのあるクラウドサービスでした。画面(見た目の部分)と裏側の処理を1つにまとめて、同じ場所から配信する作りにしたのもポイントです。ここは設計の段階でClaude Codeと相談しながら決めた部分で、理由は大きく2つありました。1つは、無料枠のサービス数を1つに抑えられること。もう1つは、画面側と処理側を別々の場所から配信すると発生する「CORS」というブラウザ側のセキュリティ制約への対応が不要になることです。
認証は、家族だけが見られればいいので、IDとパスワードを1組だけ使うシンプルな仕組みにしています。夫婦それぞれのアカウントを分ける必要はなかったので、ここは思い切って簡単な作りにしました。
「動いたはずなのに動かない」を乗り越えた
実装の途中で、地味だけど厄介な問題が出てきました。
CSVの列がずれる問題です。クレカの明細CSVには「当月請求額」という列があるんですが、これは分割払いやリボ払いが1件もない月には、そもそもその列自体が出力されないことがわかりました。列の位置を決め打ちで読み込んでいたので、そういう月だけ金額が0円として記録されてしまっていたんです。過去データを移行したあとにデータベースの中身を確認して発覚し、該当する月のデータを消してから、列の位置を都度探す方式に直して入れ直しました。
過去データの移行で、AI課金を6件で済ませた
実装しながら気づいたことがあります。このツールの自動分類は、明細1件ごとにAI(Claude)に問い合わせる仕組みになっていました。過去の明細をまとめてクラウドに移行するとなると、何百件分もいきなりAIに問い合わせることになり、費用が気になり始めました。
そこで、まずはキーワード辞書(お店の名前とカテゴリをあらかじめ紐づけておいた対応表)で機械的に分類できるものはそれで済ませて、辞書に引っかからなかったものだけAIに問い合わせる、という2段構えにしました。実際にやってみると、対象の240件のうち234件はキーワード辞書だけで分類でき、AIに問い合わせたのは6件だけで済みました。
家族のクレカ管理として、無事に動き出した
こうして、ローカルのフォルダの中でしか動かなかったクレカダッシュボードは、無料のクラウドサービスの上で動く、家族みんなが見られるアプリになりました。今後、このツールを妻と使って、改善点が出たら改良していきたいと考えています。
前回の請求書ツールで学んだ「要件定義をしてから作る」というやり方を、今回のクラウド移行でも試してみました。
次は、このシリーズでもう少し毛色の違う話――要件定義書や設計書を作る「型」自体を、Claude Codeのスキルとして自作していった話を書く予定です。お楽しみに。
