デプロイ済み Web アプリの表示内容を、ブラウザ操作なしで Claude が読む

課題

「アプリの画面を開いて数値を確認してください」と user に頼むと、往復が1回増えるだけで得られる情報は変わらない。 同じデータは多くの場合、Claude 側から2経路で読める。読み取りは自分で行い、user には判断だけを残す。

前提（アプリ側の設計）

• 画面が表示している取得結果を、localStorage ではなく DB のスナップショット表（例: snapshots(id text primary key, payload jsonb, fetched_at timestamptz)）に保存していること。
• 画面が叩く API が、セッション Cookie 認証で動いていること。
• この2つがあれば、以下の2経路が使える。

経路1: DB を直接読む（最速・0.2秒）

GET {SUPABASE_URL}/rest/v1/snapshots?id=eq.<key>&select=payload,fetched_at
Headers: apikey: <ANON_OR_SERVICE_KEY>
         Authorization: Bearer <ANON_OR_SERVICE_KEY>

• payload に画面と同じ JSON が入っている。fetched_at を「取得日時」として報告に添える。
• 書き込み権限は不要。読み取り専用キーで足りる。
• 注意: 画面が ?refresh=1 のときだけ再取得する設計なら、DB の値は「最後に誰かが更新した時点」のもの。鮮度が要るなら経路2。

経路2: ログイン済みの API を叩く（最新値を取得）

Playwright の storageState（E2E テストが保存したログイン状態）を使う。

const { request } = require('@playwright/test');
const ctx = await request.newContext({
  baseURL: 'https://<your-app>.vercel.app',
  storageState: 'e2e/.auth/user.json',
});
const res = await ctx.get('/api/<endpoint>?refresh=1');
const json = await res.json();   // { result, fetchedAt, fetchedBy, cached }

• 認証は Cookie なので、storageState を渡すだけで通る。トークン再発行は不要。
• refresh=1 を付けるとサーバー側が外部 API を叩き直す。付けないとキャッシュが返る（高速）。

ハマりどころ（実測）

1. 素の fetch は 200 でログイン画面の HTML を返す。認証エラーにならないので、JSON パースで初めて気づく。 → res.headers()['content-type'] が text/html なら未認証と判定する。
2. デプロイ直後は古いビルドが応答する。Vercel のデプロイ完了を待つか、レスポンスの fetchedAt が新しいことを確認する。
3. E2E のログイン状態が切れていると 302 でログインへ飛ぶ。res.status() と最終 URL を必ず確認する。

報告の型

• 数値・一覧・判定は本文に転記する（スクリーンショットや URL だけを渡さない）。
• 取得日時と取得経路を1行添える（例: 「2026-10-21 03:11 取得 / Supabase snapshots 直読み」）。
• URL は「user が操作したくなったとき用」に添えるだけにする。
• 前回取得時との差分があれば、聞かれる前に報告へ載せる。

検証

• 経路1と経路2の主要な数値が一致することを read-back する。一致しなければ鮮度差（キャッシュ）を疑い、fetched_at を比べる。