この記事は Claude on SonicGarden の記事です。ソニックガーデンのプログラマが、Claude Codeの活用について書いています。#claude_on_sonicgarden
コードは書けるようになった。でも画面確認が追いつかない
Claude Codeを導入してから、コードを書く速度は格段に上がりました。機能の実装やリファクタリングを指示すれば、かなりの精度でコードが出てきます。
ところが、新たなボトルネックが生まれました。画面の確認です。
コードが速く書けるようになった分、「ちゃんと動いているか」「見た目は崩れていないか」を確認する頻度も増えます。スクリーンショットを撮ったり、デモ動画を録画したり。そしてUIが変わるたびに、それをやり直す。
最初はメンバーにデモ作成をお願いしていました。しかしそれも回らなくなってきました。実装のスピードに、目視確認のほうが追いつきません。
YAMLの台本からUIデモを生成する
ならばデモ作成も自動化すればいい。そう考えて作り始めたのが ui-demo というツールです。
仕組みはシンプルで、YAMLで「台本」を書き、Playwrightがその通りにブラウザを操作してスクリーンショットと動画を生成します。
- goto: http://myapp.test/login
- fill: { selector: "#email", value: "user@example.com" }
- click: { role: button, name: "ログイン" }
- screenshot: ログイン後の画面
ローカル環境限定（*.test、localhostのみ）にすることで、外部サイトに誤ってアクセスするリスクも排除しています。
「見せ方」を一工夫
台本通りに操作してスクリーンショットを撮るところまでは、Claude Codeに任せれば動くものができます。問題はその先でした。
画面遷移を録画するだけでは、見ている人には何をしているか伝わりません。「ここでログインしています」のような説明が欲しいし、どこをクリックしたのかも一目でわかるようにしたい。
この「どう見せるか」の部分は、Claude Codeに相談してみることにしました。
アノテーション ── DOMを差し込んでキャプションを重ねる
「動画にキャプションを乗せたい」と一言伝えたら、PlaywrightのJS実行で録画中の画面にDOMを差し込むというアプローチが返ってきました。
録画中の画面に、キャプション用のHTML要素を動的に追加する。すると録画映像にそのまま説明テキストが映り込みます。動画編集ソフトで後からテロップを入れる必要はありません。なるほど、と思いました。
台本側では annotation ステップとして書けるようにしました。
- goto: http://myapp.test/login
- annotation: ここでログインします
- fill: { selector: "#email", value: "user@example.com" }
- click: { role: button, name: "ログイン" }
操作ハイライト ── クリック対象を赤枠で囲む
もうひとつは、クリックや入力の対象要素を赤枠で強調表示する仕組みです。こちらも同じくDOM操作で実現しています。
操作の直前に対象セレクターへ赤枠を当てて、動作後に外す。見ている人が「今どこを操作しているか」一目でわかるようになります。
「こうしたい」と困りごとを投げるだけで、アプローチごと返ってくる。実装はもちろん、設計の発想までClaude Codeが出してくれました。
まだまだ悪戦苦闘中
正直なところ、まだ課題は多いです。
台本を作るには、画面のセレクター（どのボタンか、どの入力欄か）を調べる必要があります。これをagent-browserにauto modeで探索させているのですが、時間がかかります。デモの質もまだもう一息といったところ。
それでも、使えなくはない状態で動いています。コードはこちらに置いてあります。
Discussion