エージェントが shot-scraper video を活用して作業の動画デモを記録する機能
Simon Willison が開発した「shot-scraper video」は、AI エージェントが実行する作業を自動で動画デモとして記録・生成するための新機能であり、コードの動作証明と可視化を容易にする実用的なツールである。
キーポイント
自動化されたビデオデモ機能の導入
shot-scraper の最新バージョン（1.10）で追加された「video」コマンドにより、定義されたルーチンを実行し、Playwright を使用してその様子を自動的に動画として記録できるようになった。
AI エージェントの成果証明への応用
記事は、コーディングエージェントが生成したコードや機能の動作を「デモ」として提示することの重要性を強調し、本ツールがその課題解決策として位置づけられている。
YAML による柔軟なスクリプト定義
storyboard.yml ファイルを用いて、サーバー起動コマンド、URL、ビューポート設定などを記述することで、複雑な Web アプリケーションの動作フローを再現しやすくしている。
認証情報の安全な扱いと実装例
Cookie などの認証情報を JSON ファイルとして管理し、コマンドライン引数で指定する仕組みにより、開発環境やデモ作成におけるセキュリティと利便性を両立させている。
影響分析・編集コメントを表示
影響分析
このツールは、AI エージェントの開発サイクルにおいて「コードが動くこと」を視覚的に証明するプロセスを自動化し、開発者の検証負担を大幅に軽減します。特に、複雑な Web アプリケーションの機能追加やバグ修正時におけるデモ作成コストを下げ、チーム間での成果共有を効率化する重要なインフラとなり得ます。
編集コメント
AI エージェントの出力を人間が検証する際、動画デモはテキストログよりも直感的で強力な証拠となります。このツールの登場により、エージェント開発における「動作確認」のハードルが下がり、実装スピードと信頼性の向上に寄与すると期待されます。
shot-scraper video は、今日公開された shot-scraper 1.10 リリースで導入された新しいコマンドであり、Web アプリケーションに対して実行するルーチンを定義した storyboard.yml ファイルを受け取り、Playwright を使用してそのルーチンの動画を記録します。コーディングエージェントが自身の成果物のデモを作成することの重要性については以前にも記事にしましたが、これはそれを実現するための私の最新の試みです。
shot-scraper video を使用して作成された例動画がこちらで、現在開発中の Datasette への貼り付け CSV、TSV または JSON データから新しいテーブルを作成する機能 を実行しています:
この動画は、以下のコマンドを実行することで作成されました:
shot-scraper video datasette-bulk-insert-storyboard.yml \
--auth datasette-demo-auth.json --mp4
(この --auth JSON ファイルには Cookie が含まれており、ドキュメントの こちら に記載されている通りです。)
これが datasette-bulk-insert-storyboard.yml ファイルの内容です:
出力：/tmp/datasette-bulk-insert-demo.webm
サーバー:
- uv
- --directory
- /Users/simon/Dropbox/dev/datasette
- run
- datasette
- -p
- 6419
- --root
- --secret
- "1"
- /tmp/demo.db
URL: http://127.0.0.1:6419/demo/tasks
ビューポート:
幅：1280
高さ：720
cursor: true
wait_for: 'button[data-table-action="insert-row"]'
javascript: |
(() => {
let clipboardText = "";
Object.defineProperty(navigator, "clipboard", {
configurable: true,
get: () => ({
writeText: async (text) => {
clipboardText = String(text);
},
readText: async () => clipboardText,
}),
});
})();
scenes:
- name: 既存のテーブル行の一括挿入
do:
- pause: 0.8
- click: 'button[data-table-action="insert-row"]'
- wait_for: "#row-edit-dialog[open]"
- pause: 0.5
- click: ".row-edit-bulk-insert"
- wait_for: ".row-edit-bulk-textarea"
- pause: 0.5
- click: ".row-edit-copy-template"
- wait_for: "text=Copied"
- pause: 0.8
- fill:
into: ".row-edit-bulk-textarea"
text: |
title,owner,status,priority,notes
Prepare release video,Ana,doing,1,Recorded with shot-scraper
Check pasted CSV import,Ben,review,3,Previewed before inserting
Share the branch demo,Chen,queued,2,Bulk insert creates three rows
- pause: 0.8
- click: ".row-edit-save"
- wait_for: "text=Previewing 3 rows."
- pause: 1.2
- click: ".row-edit-save"
- wait_for: "text=3 rows inserted."
- pause: 1.0
- click: ".row-edit-cancel"
- wait_for: "text=Prepare release video"
- pause: 1.0
- name: 貼り付けた CSV からテーブルを作成
open: http://127.0.0.1:6419/demo
wait_for: 'details.actions-menu-links summary'
do:
- pause: 0.8
- click: 'details.actions-menu-links summary'
- click: 'button[data-database-action="create-table"]'
- wait_for: "#table-create-dialog[open]"
- pause: 0.5
- fill:
into: ".table-create-table-name"
text: "launch_metrics"
- click: ".table-create-from-data"
- wait_for: ".table-create-data-textarea"
- pause: 0.5
- fill:
into: ".table-create-data-textarea"
text: |
metric_id,name,score,recorded_on
m001,Activation rate,87.5,2026-06-29
m002,Retention check,72.25,2026-06-30
m003,CSV import health,95,2026-07-01
- pause: 0.8
- click: ".table-create-save"
- wait_for: "text=Previewing 3 rows."
- pause: 1.2
- click: ".table-create-save"
- wait_for_url: "**/demo/launch_metrics"
- wait_for: "text=Activation rate"
- pause: 1.2
video コマンドのドキュメントにはよりシンプルな例が含まれていますが、この投稿の目的のため、より包括的なものを選ぶことにしました。
そのデモ YAML ストーリーボードは、Codex Desktop で実行されている GPT-5.5 xhigh によって完全に構築されました。使用されたプロンプトは、以下の通りです（このブランチの私の ~/dev/datasette チェックアウト内で実行）:
このブランチの変更点をレビューしてください。
cd で ~/dev/shot-scraper に移動し、コマンド "uv run shot-scraper video --help" を実行してください。
次に、その新しい video コマンドを使用して、このブランチからの新機能のビデオデモを記録してください。これには、まず作成したデモデータベースに対してビデオを記録できるようにするために、「uv run datasette -p 6419 --root --secret 1 /tmp/demo.db」で開発サーバーを実行することも含まれます。
私がその機能をリリースした後では、プロンプトは "run uvx shot-scraper video --help" を実行するものに変更でき、同じ結果が得られるはずです。
コマンドの --help 出力に十分な詳細が含まれており、コーディングエージェントがそれを利用できるというこのパターンを私は非常に気に入っています。これは、SKILL.md ファイルをツール内に直接バンドルするような働きをするものです。私は showboat と rodney においても同じパターンを使用しました。
How I built this
shot-scraper video は実験的なプロトタイプから始まりました。shot-scraper は Playwright を基盤として構築されており、必要な主要機能は、Playwright がブラウザのセッションを記録し、目的のデモを作成するために十分な制御が可能であることでした。
私は数年前にこれを試しましたが、Playwright によって生成された動画には、テスト失敗のデバッグには有用ですが製品デモでは望ましくない追加のクロームが含まれていることがわかりました。
その問題は以前に修正されましたが、まだいくつかの小さな障害が残っていました。特に、記録メカニズムがブラウザによる最初の URL の読み込み前に起動したため、動画の冒頭に数枚の白いフレームが表示される問題がありました a few white frames at the start of the videos。
Playwright 1.59 では、動画記録に対するより細粒度の制御を提供する新しい screencast mechanism が追加されました。これは私が求めていたものに非常に近いものでしたが、生成される動画は幅が固定された 800px でした。
その問題を修正した landed PR fixing that を見つけましたが、まだリリースされていませんでした。そして昨日、playwright-python 1.61.0 でようやく実装されたため、ついに機能の実装を完了できるようになりました！
コード自体はすべて、Codex Desktop 内の GPT-5.5 xhigh が作成しました。ドキュメントの作成も依頼したところ、設計レビューのための非常に有用な枠組みが得られました。機能に関する多くの反復作業は、このドキュメントをレビューし、冗長性や矛盾、混乱の原因となる箇所を特定し、より良い設計を要求（または指示）することから生まれました。
YAML 形式自体は主にコーディングエージェントによって定義されました。私はそのエージェントに Pydantic を使用させ、形式の定義と検証の両方を行わせました。これは設計レビューを容易にするためです。
これは、コーディングエージェントのサポートがなければ、私がほぼ確実に着手しなかっただろう機能の素晴らしい例です。この 最初のイシュー は 2024 年 2 月に提出しましたが、他のすべてのプロジェクトの中で必要な時間を確保することに苦労しました。
Tags: projects, python, yaml, ai, datasette, playwright, shot-scraper, generative-ai, llms, pydantic, coding-agents, agentic-engineering
私のエージェントは、ショットスクリパー（shot-scraper）のビデオ機能を使用して、その作業のデモを記録するようになりました。これは、私が以前に紹介したショットスクリパーのスクリーンショット機能の拡張版です。
⟦CODE_0⟧
この新しい機能により、エージェントはブラウザ上で実行されるタスクの動画を作成できます。これには、ウェブページへのアクセス、フォームの入力、データの抽出などが含まれます。
⟦CODE_1⟧
ビデオデモは、エージェントがどのように作業を完了したかを視覚的に示すのに役立ちます。これは、複雑なプロセスを理解したり、エラーの原因を特定したりするのに非常に有用です。
この機能は、Python のライブラリである playwright を使用して実装されています。playwright は、ブラウザの自動化に特化した強力なツールです。
また、pydantic を使用して、ビデオファイルのメタデータを構造化しています。これにより、後でビデオを検索したり、整理したりすることが容易になります。
このアプローチは、コーディングエージェント（coding-agents）やアジェンティックエンジニアリング（agentic-engineering）の分野において、新しい可能性を開くものです。
⟦CODE_2⟧
生成 AI や大規模言語モデル（LLMs）を活用したプロジェクトでは、エージェントが実行した作業を可視化することが重要です。ビデオデモは、そのための優れた手段となります。
この機能は、Datasette などのデータ管理ツールとも連携しています。これにより、ビデオファイルと関連データを簡単に統合して管理できます。
⟦CODE_3⟧
今後のアップデートでは、より高度な編集機能や、複数のエージェントによる協調作業の記録機能も追加される予定です。
この技術は、開発者や研究者にとって、エージェントの動作を深く理解するための重要なツールとなるでしょう。
原文を表示
shot-scraper video is a new command introduced in today's shot-scraper 1.10 release which accepts a storyboard.yml file defining a routine to run against a web application and uses Playwright to record a video of that routine. I've written before about the importance of having coding agents produce demos of their work; this is my latest attempt at enabling them to do that.
Here's an example video created using shot-scraper video, exercising a still in development feature adding the ability to create new tables in Datasette from pasted CSV, TSV or JSON data:
That video was created by running this command:
shot-scraper video datasette-bulk-insert-storyboard.yml \
--auth datasette-demo-auth.json --mp4(That --auth JSON file contains a cookie, as described here in the documentation.)
Here's the datasette-bulk-insert-storyboard.yml file:
output: /tmp/datasette-bulk-insert-demo.webm
server:
- uv
- --directory
- /Users/simon/Dropbox/dev/datasette
- run
- datasette
- -p
- 6419
- --root
- --secret
- "1"
- /tmp/demo.db
url: http://127.0.0.1:6419/demo/tasks
viewport:
width: 1280
height: 720
cursor: true
wait_for: 'button[data-table-action="insert-row"]'
javascript: |
(() => {
let clipboardText = "";
Object.defineProperty(navigator, "clipboard", {
configurable: true,
get: () => ({
writeText: async (text) => {
clipboardText = String(text);
},
readText: async () => clipboardText,
}),
});
})();
scenes:
- name: Bulk insert existing table rows
do:
- pause: 0.8
- click: 'button[data-table-action="insert-row"]'
- wait_for: "#row-edit-dialog[open]"
- pause: 0.5
- click: ".row-edit-bulk-insert"
- wait_for: ".row-edit-bulk-textarea"
- pause: 0.5
- click: ".row-edit-copy-template"
- wait_for: "text=Copied"
- pause: 0.8
- fill:
into: ".row-edit-bulk-textarea"
text: |
title,owner,status,priority,notes
Prepare release video,Ana,doing,1,Recorded with shot-scraper
Check pasted CSV import,Ben,review,3,Previewed before inserting
Share the branch demo,Chen,queued,2,Bulk insert creates three rows
- pause: 0.8
- click: ".row-edit-save"
- wait_for: "text=Previewing 3 rows."
- pause: 1.2
- click: ".row-edit-save"
- wait_for: "text=3 rows inserted."
- pause: 1.0
- click: ".row-edit-cancel"
- wait_for: "text=Prepare release video"
- pause: 1.0
- name: Create a table from pasted CSV
open: http://127.0.0.1:6419/demo
wait_for: 'details.actions-menu-links summary'
do:
- pause: 0.8
- click: 'details.actions-menu-links summary'
- click: 'button[data-database-action="create-table"]'
- wait_for: "#table-create-dialog[open]"
- pause: 0.5
- fill:
into: ".table-create-table-name"
text: "launch_metrics"
- click: ".table-create-from-data"
- wait_for: ".table-create-data-textarea"
- pause: 0.5
- fill:
into: ".table-create-data-textarea"
text: |
metric_id,name,score,recorded_on
m001,Activation rate,87.5,2026-06-29
m002,Retention check,72.25,2026-06-30
m003,CSV import health,95,2026-07-01
- pause: 0.8
- click: ".table-create-save"
- wait_for: "text=Previewing 3 rows."
- pause: 1.2
- click: ".table-create-save"
- wait_for_url: "**/demo/launch_metrics"
- wait_for: "text=Activation rate"
- pause: 1.2The video command documentation includes simpler examples, but for the purpose of this post I thought I'd go with something more comprehensive.
That demo YAML storyboard was constructed entirely by GPT-5.5 xhigh running in Codex Desktop, using the following prompt run inside my ~/dev/datasette checkout of this branch:
Review the changes on this branch.
cd to ~/dev/shot-scraper and run the command "uv run shot-scraper video --help"
Now use that new video command to record a video demo of the new features from this branch, including running a "uv run datasette -p 6419 --root --secret 1 /tmp/demo.db" development server so you can record the video against a demo DB that you first create.
Now that I've released the feature the prompt could say "run uvx shot-scraper video --help" instead and it should achieve the same result.
I really like this pattern where the --help output for a command provides enough detail that a coding agent can use it - it works kind of like bundling a SKILL.md file directly inside the tool. I used the same pattern for showboat and rodney.
How I built this
shot-scraper video started as an experimental prototype. shot-scraper is built on top of Playwright, and the key feature it needed was for Playwright to be able to record video of browser sessions with enough control to create the desired demo.
I first tried this a few years ago and found that the Playwright-produced videos included additional chrome that was useful for debugging a test failure but unwanted for a product demo.
They fixed that a while ago, but there were still some minor blockers. In particular I was getting a few white frames at the start of the videos, since the recording mechanism kicked in before the first URL was loaded by the browser.
Playwright 1.59 added a new screencast mechanism providing much more finely grained control over video recording. This was very nearly what I needed, but the resulting videos were fixed at 800px wide.
I found a landed PR fixing that but it wasn't yet in a release. Then yesterday they shipped it in playwright-python 1.61.0 and I was finally unblocked to finish implementing the feature!
The code itself was all written by GPT-5.5 xhigh in Codex Desktop. I had it write the documentation as well which gave me a very useful frame for reviewing the design - much of the iteration on the feature came from reviewing that documentation, spotting things that were redundant, inconsistent or confusing, and requesting (or dictating) a better design.
The YAML format itself was mostly defined by the coding agent. I had it use Pydantic to both define and validate the format, partly to make the design easier to review.
This is a great example of the kind of feature that I almost certainly wouldn't have taken on without coding agent support. I filed the original issue in February 2024, and had difficulty finding the necessary time to solve this in amongst all of my other projects.
Tags: projects, python, yaml, ai, datasette, playwright, shot-scraper, generative-ai, llms, pydantic, coding-agents, agentic-engineering
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み