Claude Code に画面を見せる(Playwright スクリーンショット)
一言まとめ
Playwright をビューポート固定(例: Pixel 9a 411×914 / DPR 2.625)で走らせ、画面ごとに直接遷移できるテスト ID と IndexedDB 等に初期データを流すシードヘルパーを用意する。`pnpm test:visual --name=<画面>` でレンダー → スクショ保存 → Claude が画像を読む、の 1 サイクルにする。シードは合成せず実データ 1 本を使う。
目次 5 sections
調査時点: 2026-08。スマホ向け PWA の開発で、Claude Code が自分の変更を目で確かめるために組んだ仕組み。
Claude Code は、コードやファイルを操作する Anthropic の AI 開発支援ツール。Playwright はブラウザをプログラムから操作する自動化ツールで、画面のスクリーンショットも取れる。
構成
| 要素 | 内容 |
|---|---|
| ビューポート | 実機 1 台に固定(例: Pixel 9a、411×914、devicePixelRatio 2.625)。毎回同じ条件で撮るので差分が見やすい |
| 直接遷移 | 画面ごとにテスト ID か URL(ハッシュルート)で直接開けるようにする。操作を辿らなくてよい |
| シードヘルパー | IndexedDB などのクライアント側ストレージに初期データを流す。空状態の確認用に「項目 0 件」「セッション 0 件」も別に用意する |
| コマンド | pnpm test:visual --name=<画面> でレンダー → tmp/ にスクショ保存 → Claude が Read で画像を読む |
| 外部 API | /api/* をモックに差し替える。SDK をブラウザで読み込む設計だと SDK の偽物が要るので、サーバ中継にしておくとモックが短い |
シードは実データ 1 本
表示パターンごとに合成データを作らず、実際の記録 1 本(例: 3 日間の旅行、46 件)をシードにする。
- 1 セッションで、単発 / 範囲時刻、外部 API 由来の場所 / 手入力 / 場所なし、日付区切り 3 日分、長いメモと短いメモが全部揃う。
- ケースごとにフィクスチャを分けると、実際には隣り合わないカードの組み合わせを見ることになり、リズムや余白の判断ができない。
- 合成データは長さが揃いすぎる。2 文字のメモと 6 行の長文が同じ画面に並ぶのは実データだから起きる。
- 書き出しサイズの実測(URL 長の閾値検証など)にもそのまま使える。
外部サービスの実 ID(place_id など)はシードに持ち込まず、プレースホルダ(seed-place-01)を入れる。「ID の有無で表示を出し分ける」確認はプレースホルダで足りる。座標は実機で確かめるまで null のままにし、嘘の値を置かない。
モックアップとの突き合わせ
デザインツールで起こしたモックを「視覚的な正」と決めたら、モックの実測値(色・寸法)でデザイントークンを全面的に上書きし、以後は目分量で変えない。モックと仕様が食い違う点は 1 つずつ裁定して docs/MOCKUP.md のような 1 ファイルに残す。モックのバンドル本体はリポジトリに入れず、数値だけ写す。
関連
更新履歴
- 2026-08-29: 初版(ローカル調査ノート)
- 2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加