← トップへ戻る

コミュニティ投稿 ·考察・分析 ·速報 ·AI要約未精査 ·AIによる読み解き

ウェブアプリケーションのデモ作成を容易にする新ツールとは？

shot-scraper videoは、Playwrightと連携してウェブアプリケーションの操作を動画で記録する新機能

元記事タイトル: エージェントによるウェブアプリケーションデモ動画作成ツール

Simon Willison's Weblog 2026年06月30日

個人の見解・体験を含む可能性があります。公式発表ではないため、仕様変更や正式な発表内容は必ず元情報も確認してください。

ANALYSIS 考察・分析 / Opinion

Field Note 読む前に確認

3行まとめ

shot-scraper 1.10で 'video' コマンドが追加された
このコマンドはPlaywrightを使用してウェブアプリケーションの操作を動画に録画可能
開発中の新機能のデモンストレーションやバグの再現に有用

こんな人に関係ある話

Pythonエンジニアウェブアプリケーション開発者テストエンジニア

信頼度メモ

Simon Willison's Weblog の記事（個人またはコミュニティの解釈を含む）

記事の読み解き Reading

元記事を材料に、要点、編集視点、良い点と懸念点を読みやすい順に整理しています。

Simon Willison氏は、shot-scraper 1.10リリースで導入された新機能 'shot-scraper video' を紹介しています。この機能は、Playwrightを使用してウェブアプリケーションの操作を動画に録画します。具体的には、Datasetteの新しいテーブル作成機能（CSVやJSONデータからのインポート）のデモを作成する例が示されています。

編集部コメント

shot-scraper videoは、ウェブアプリケーションのテストとデモ作成において重要な役割を果たす可能性があります。この機能により、開発者は迅速に操作手順や新機能の動作を視覚的に共有できます。

評価ポイント Assessment

良い点

shot-scraper videoはPlaywrightと連携してウェブアプリケーションの操作を動画で記録可能
開発中の新機能のデモンストレーションに有用
コードエージェントによる作業結果の可視化が容易になる

業界・社会への影響 Impact

このツールは、ウェブアプリケーションの開発者やテストエンジニアにとって非常に役立つ。特に新機能のデモンストレーションやバグの再現に効果的で、非技術的なステークホルダーとのコミュニケーションを円滑化します。

深堀り Deep Dive

前提知識

ウェブアプリケーションのデモ作成は、ユーザー体験の説明やトレーニング資料の作成に不可欠なタスクです。従来は手動での録画やスクリプト作成が主流でしたが、手間がかかる上、一貫性が欠如していました。近年では、Playwrightなどの自動テストツールが普及し、ユーザー操作を自動化する技術が進展しています。これにより、ウェブアプリケーションの操作を動画として自動生成するようなツールの開発が可能になり、効率的なデモ作成が期待されています。

何が新しいのか

shot-scraper 1.10リリースで導入された 'shot-scraper video' 機能は、Playwrightを用いてウェブアプリケーションの操作を動画に自動録画する点が画期的です。この機能により、ユーザーが手動でスクリプトを書く必要がなく、アプリケーションの操作を自動的に動画化できます。特に、Datasetteの新しいテーブル作成機能（CSVやJSONデータからのインポート）のデモ作成を容易にし、開発者やユーザーにとっての教育・説明ツールとしての価値が高まります。

用語解説

shot-scraper ウェブアプリケーションの操作を自動録画するツール。Playwrightを基盤としており、デモ動画作成に特化している。

Playwright ウェブアプリケーションの自動テストや操作を可能にするオープンソースのツール。ブラウザの操作をシミュレートできる。

Datasette データベースの内容をウェブ上で簡単に公開・視覚化できるツール。CSVやJSONデータのインポートにも対応している。

参照元 Sources

元記事と、深堀りで参照した情報源です。コミュニティ投稿やプレプリントでは、ここから根拠を確認できます。

エージェントによるウェブアプリケーションデモ動画作成ツール

Simon Willison's Weblog

https://simonwillison.net/2026/Jun/30/shot-scraper-video/#atom-everything

have - Weblio 英和・和英辞典 https://ejje.weblio.jp/content/have used in analysis

方法 Chat-Generate AI Short Videos with Lovart — From Script to Visual Storyboard | AI Design Guide by Lovart https://www.lovart.ai/ja/blog/how-to-chat-generate-ai-short-videos-lovart?srsltid=AfmBOoqPzb7Fn2ZFxAy9P9Jv7mFaSR_zPqoW7bZfDynXcn3gMKRQzusd used in analysis

「持つ」だけではない！動詞「have」の多数ある用法を徹底解説 | DMM英会話ブログ https://eikaiwa.dmm.com/blog/learning-english/have-usage/

この記事の見取り図

読む前に確認
記事の読み解き
深堀り
参照元
AI要約について
関連記事

キーワード

shot-scraper Playwright Datasette web application testing video demonstration

AI要約について

本記事の要約・分類・読み解きにはAIを使用しています。内容確認に努めていますが、誤訳・解釈違い・元記事更新の反映漏れを含む可能性があります。重要な判断を行う場合は、必ず元記事もご確認ください。

速報について — 速報は追加調査や本文抽出の結果で内容が更新される場合があります。初期要約には誤りや不足が含まれる可能性があります。

記事データ

Source	コミュニティ投稿
Category	考察・分析
Status	速報
出典	Simon Willison's Weblog
公開日	2026-06-30

元記事の説明文

<a href="https://shot-scraper.datasette.io/en/stable/video.html">shot-scraper video</a> is a new command introduced in today's <a href="https://github.com/simonw/shot-scraper/releases/tag/1.10">shot-scraper 1.10</a> release which accepts a <code>storyboard.yml</code> 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 <a href="https://simonwillison.net/2026/Feb/10/showboat-and-rodney/#proving-code-actually-works">having coding agents produce demos</a> of their work; this is my latest attempt at enabling them to do that. Here's an example video created using <code>shot-scraper video</code>, exercising a <a href="https://github.com/simonw/datasette/pull/2813">still in development</a> feature adding the ability to create new tables in Datasette from pasted CSV, TSV or JSON data: <div style="margin-bottom: 0.4em;"> <video controls="controls" loop="loop" poster="https://static.simonwillison.net/static/2026/datasette-bulk-insert-demo.jpg" preload="none" style="width: 100%; height: auto;"> <source src="https://static.simonwillison.net/static/2026/datasette-bulk-insert-demo.mp4" type="video/mp4" /> </video> </div> That video was created <a href="https://simonwillison.net/atom/everything/">by running this command</a>: <div class="highlight highlight-source-shell"><pre>shot-scraper video datasette-bulk-insert-storyboard.yml \ --auth datasette-demo-auth.json --mp4</pre></div> (That <code>--auth</code> JSON file <a href="https://gist.github.com/simonw/287b26aff53fcb72942b19f5b69d7e5c">contains a cookie</a>, as <a href="https://shot-scraper.datasette.io/en/stable/authentication.html">described here</a> in the documentation.) Here's the <code>datasette-bulk-insert-storyboard.yml</code> file: <div class="highlight highlight-source-yaml"><pre>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.2</pre></div> The <a href="https://shot-scraper.datasette.io/en/stable/video.html">video command documentation</a> 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 <code>~/dev/datasette</code> checkout of <a href="https://github.com/simonw/datasette/commits/b759ea548606bc9bf9a4bf0e33e2d57ead7e0ab8/">this branch</a>: <blockquote> <code>Review the changes on this branch.</code> <code>cd to ~/dev/shot-scraper and run the command "uv run shot-scraper video --help"</code> <code>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.</code> </blockquote> Now that I've released the feature the prompt could say "<code>run uvx shot-scraper video --help</code>" instead and it should achieve the same result. I really like this pattern where the <code>--help</code> output for a command provides enough detail that a coding agent can use it - it works kind of like bundling a <code>SKILL.md</code> file directly inside the tool. I used the same pattern for <a href="https://simonwillison.net/2026/Feb/10/showboat-and-rodney/">showboat and rodney</a>. <h4 id="how-i-built-this">How I built this</h4> <code>shot-scraper video</code> started as an experimental prototype. <code>shot-scraper</code> is built on top of <a href="https://playwright.dev/">Playwright</a>, 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 href="https://github.com/simonw/shot-scraper/pull/194/changes/c2f3b3a52ba84f2adcf3ad6da4d39c2570328584#issuecomment-4724459369">a few white frames at the start of the videos</a>, since the recording mechanism kicked in before the first URL was loaded by the browser. Playwright 1.59 added a new <a href="https://playwright.dev/python/docs/api/class-screencast">screencast mechanism</a> 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 <a href="https://github.com/microsoft/playwright/pull/41183">landed PR fixing that</a> but it wasn't yet in a release. Then yesterday they shipped it in <a href="https://github.com/microsoft/playwright-python/releases/tag/v1.61.0">playwright-python 1.61.0</a> 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 <a href="https://github.com/simonw/shot-scraper/blob/1.10/shot_scraper/video.py#L24">use Pydantic</a> 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 <a href="https://github.com/simonw/shot-scraper/issues/142">original issue</a> in February 2024, and had difficulty finding the necessary time to solve this in amongst all of my other projects. Tags: <a href="https://simonwillison.net/tags/projects">projects</a>, <a href="https://simonwillison.net/tags/python">python</a>, <a href="https://simonwillison.net/tags/yaml">yaml</a>, <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/datasette">datasette</a>, <a href="https://simonwillison.net/tags/playwright">playwright</a>, <a href="https://simonwillison.net/tags/shot-scraper">shot-scraper</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/pydantic">pydantic</a>, <a href="https://simonwillison.net/tags/coding-agents">coding-agents</a>, <a href="https://simonwillison.net/tags/agentic-engineering">agentic-engineering</a>