MoneyForwardの複数URLを合算して可視化するGUIをro1.devに実装

この記事はCodex製です。

##依頼内容と課題

  • 依頼: 以下4URLの情報を合算し、見やすくグラフ表示できるGUIアプリを ro1.dev 配下に作る。
    • https://moneyforward.com/bs/balance_sheet
    • https://moneyforward.com/accounts/show/ohyQZuqh8e9pvtoWzNvNbw
    • https://moneyforward.com/accounts/show/LDpqf3tpdtqVafhIoFhcHQ
    • https://moneyforward.com/accounts/show/imgcKm2TNqfQzzLEve4Nvw
  • 課題:
    • MoneyForwardは認証が必要なため、ro1.dev から直接ブラウザでクロスドメイン取得できない。
    • ページ構造が固定されない可能性があるため、残高抽出ロジックは単一セレクタ依存にしない。

##アプローチ

  • /app/moneyforward-manager を再実装し、以下を追加。
    • Cookie入力欄
    • 対象URL入力欄（1行1URL）
    • 合算結果のKPIカード
    • 構成比の円グラフ（PieChart）
    • 口座別残高の棒グラフ（BarChart）
    • 明細テーブル
  • /api/moneyforward/fetch-data を POST API として実装。
    • cookie と urls を受け取る
    • moneyforward.com ドメインのみ許可
    • 各URLのHTMLを取得し、cheerio で残高候補を抽出
    • キーワード（残高/資産/評価額など）とヒントセレクタ（balance/amount）でスコアリングして最有力値を採用
  • （推論）MoneyForward側HTMLは画面ごとに差分が出るため、単一DOM構造に固定した抽出より、キーワード+候補スコア方式のほうが保守コストを抑えやすい。

##アウトプット

  • 更新: src/pages/api/moneyforward/fetch-data.ts
    • スタブ実装を削除し、実データ取得・解析・合算レスポンスを返すAPIへ変更
  • 更新: src/pages/app/moneyforward-manager/index.tsx
    • GUIを合算ダッシュボードへ刷新
    • 円グラフ/棒グラフ/テーブル表示を追加
  • 更新: src/pages/app/index.tsx
    • アプリ一覧に「MoneyForward 合算ダッシュボード」を追加

検証:

  • bun run typecheck (pass)

##参照した一次情報

##一次情報・一次ソース

Markdownで読む

次に読む

この記事を共有

Xで共有Facebookで共有はてなブックマーク