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ファイルは次のとおりです。

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

videoコマンドのドキュメントにはよりシンプルな例も載っていますが、この記事ではより包括的な例を紹介することにしました。

このデモ用のYAMLストーリーボードは、Codex Desktop上で動作するGPT-5.5 xhighによって完全に作成されたもので、このブランチをチェックアウトした~/dev/datasette内で次のプロンプトを実行して生成しました。

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.

この機能をリリースしたので、プロンプトは代わりに「run uvx shot-scraper video --help」とすれば同じ結果が得られるはずです。

コマンドの--help出力が、コーディングエージェントがそのまま使えるほど詳細であるというパターンがとても気に入っています。ツールの中にSKILL.mdファイルを直接バンドルしているようなものです。同じパターンをshowboat and rodneyでも使いました。

どのように作ったか

shot-scraper videoは実験的なプロトタイプとして始まりました。shot-scraperはPlaywrightの上に構築されており、必要だった重要な機能は、Playwrightがブラウザセッションの動画を、求めるデモを作成するのに十分な制御をもって記録できることでした。

数年前に初めて試したときは、Playwrightが生成する動画に、テストの失敗のデバッグには役立つものの、プロダクトのデモには不要な余計なブラウザのフレームが含まれていることが分かりました。

それはしばらく前に修正されましたが、まだいくつか小さな問題が残っていました。特に、ブラウザが最初のURLを読み込む前に録画機構が作動してしまうため、動画の冒頭に数フレームの白い画面が入ってしまうという問題がありました。

Playwright 1.59では、動画録画をよりきめ細かく制御できる新しいscreencast機構が追加されました。これはほぼ求めていたものでしたが、生成される動画の幅が800pxに固定されてしまうという問題がありました。

それを修正するマージ済みのPRを見つけましたが、まだリリースには含まれていませんでした。そして昨日、それがplaywright-python 1.61.0でリリースされ、ようやくこの機能の実装を完了できるようになりました！

コード自体はすべてCodex Desktop上のGPT-5.5 xhighが書きました。ドキュメントも書かせたのですが、これが設計をレビューする上で非常に有用な枠組みになりました。機能のイテレーションの多くは、そのドキュメントをレビューし、冗長だったり一貫性がなかったり分かりにくい部分を見つけ、より良い設計をリクエスト（あるいは指示）することから生まれました。

YAMLフォーマット自体も、ほとんどがコーディングエージェントによって定義されました。設計をレビューしやすくするため、Pydanticを使ってフォーマットの定義と検証の両方を行うようにさせました。

これは、コーディングエージェントのサポートがなければ、ほぼ確実に取り組まなかったであろう機能の好例です。最初のissueは2024年2月に立てたのですが、他の多くのプロジェクトの合間にこれを解決する時間を見つけるのが困難でした。