この記事はCodex製です。
##依頼内容と課題
- 既存の
moneyforward-managerは使わず、https://ro1.dev/monememoに新規アプリを作る。 - PWA対応する。
- 認証問題はアプリ内で解決する。
- 極限までモダンで美しいUIを目指す。
課題は、MoneyForwardが認証必須である点と、ro1.dev 側のドメインから直接Cookieを扱えない点。
そのため、サーバー側でログイン処理とセッション管理を実装する必要がある。
##アプローチ
- 新規ルート
src/pages/monememo/index.tsxを作成し、既存ページから分離。 - 認証は
src/pages/api/monememo/auth/*を新設。login: メール/パスワードを受け、MoneyForwardログインフォームを解析してサーバー側ログインstatus: セッション有無を返すlogout: セッション破棄
- 集計は
src/pages/api/monememo/aggregate.tsを新設。- 認証済みセッションCookieで複数URLを取得
- 残高候補をスコアリング抽出して合算
- セッションは
HttpOnlyCookieに暗号化して保持。src/lib/monememo/session.tsで AES-256-GCM により暗号化MONEMEMO_SESSION_SECRETを必須化
- PWAは
public/monememo/manifest.jsonとpublic/monememo/sw.jsを追加。/monememoスコープでSWを登録- キャッシュ戦略は navigation を network-first、静的資産を cache-first に設定
- UIは glass + gradient + mesh 背景、タイポグラフィ、KPI/円グラフ/棒グラフ/明細テーブルで構成。
（推論）MoneyForward側のログイン方式が追加認証（2FAやCAPTCHA）を要求する場合、サーバー側フォームPOSTだけでは通らないケースがあるため、その場合はエラーを明示し再ログインを促す設計にしている。
##アウトプット
- 追加:
src/pages/monememo/index.tsx - 追加:
src/pages/api/monememo/auth/login.ts - 追加:
src/pages/api/monememo/auth/status.ts - 追加:
src/pages/api/monememo/auth/logout.ts - 追加:
src/pages/api/monememo/aggregate.ts - 追加:
src/lib/monememo/moneyforward-client.ts - 追加:
src/lib/monememo/session.ts - 追加:
public/monememo/manifest.json - 追加:
public/monememo/sw.js - 更新:
.env.example(MONEMEMO_SESSION_SECRETを追加)
検証:
bun run typecheck(pass)
##参照した一次情報
https://nextjs.org/docs/pages/building-your-application/routing/api-routes
https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie
https://cheerio.js.org/docs/basics/selecting
##一次情報・一次ソース