本文へスキップ
REC オープンソース · MIT

フローを書けば、録画が届く。

コマンドひとつで Web アプリを録画し、動画、主要ステップのスクリーンショット、ランブックを返します。UAT、引き継ぎ、バグ報告、レビューが求めるエビデンスを、30 分の画面収録なしで。

あとはエージェントでこれを入力

/webapp-evidence:recording
対応環境
  • Claude Code
  • Cursor
  • Codex
  • Gemini CLI
  • Antigravity

UAT のために

受け入れ基準を入れれば、承認できるエビデンスが出てくる

AI で変更は速くなりました。でも動作の証明は速くなっていません。受け入れテストは今も、誰かが基準をひとつずつクリックし、手で録画しています。基準をフローとして書いてください。1 回のテイクで、どの基準も動画に映り、タイムスタンプが付き、ページのエラーはすべて記録されて返ってきます。

  1. 01

    基準をフローとして書く

    番号付きのステップを普段の言葉で、チームの言語のまま。MR や PR のリンクでも構いません。エージェントが差分を読み、フローを導き出します。

  2. 02

    1 回のテイクで全ステップを実行

    Chrome を見えるポインターで、視聴者が追える速さで操作します。エンドポイントを呼ぶステップはステータスを検証するので、誤った応答はエビデンスとして出荷されず、テイクが止まります。

  3. 03

    ランブックがそのまま報告書

    各ステップの動画内の時刻、実行したコマンドと終了コード、録画中に出たコンソールエラーや失敗したリクエストのすべて。

  4. 04

    承認するか、差し戻すか

    レビュアーはフローを再実行せず、各基準をタイムスタンプと照合します。修正後は「もう一度録画して」で新しいテイクを作り、古いテイクも横に残ります。

このページを UAT 報告書として読む

「使い方」の動画は、このページが紹介している skill でこのページ自身を録画したものです。基準を選ぶと、それを証明するランブックの行が示されます。

受け入れ基準

ランブック evd-tour-runbook.md
  1. ## Steps in the video
  2. 00:00 - 00:01 Hero — the page as it opens
  3. 00:01 - 00:03 Hero — the firefly answers the pointer
  4. 00:03 - 00:05 Hero — copy the command that starts a recording
  5. 00:05 - 00:17 Terminal — the SEO meta the page serves, read off its URL
  6. 00:17 - 00:24 UAT — the four steps light up under the pointer
  7. 00:24 - 00:41 UAT report — each criterion picks out the runbook lines that prove it
  8. 00:41 - 00:46 How it works — three steps and the recording they produce
  9. 00:46 - 00:51 Full-stack proof — the screen, the endpoint and the database
  10. 00:51 - 00:53 Vision — contact sheets of the take
  11. 00:53 - 00:59 Features — the cards warm as the pointer crosses them
  12. 00:59 - 01:07 Install — one panel per agent
  13. 01:07 - 01:11 Back to top — the firefly flies the reader up
  14. 01:11 - 01:28 Language menu — Tiếng Việt, 日本語, 简体中文 and back to English
  15. 01:28 - 01:34 Closing on Tiếng Việt
  16. ## Commands run in the terminal
  17. - 00:12 `curl -s https://evdrec.vercel.app/ | grep -oE '<title>[^<]*</title>|<meta[^>]*(name="description"|property="og:(title|url|image)")[^>]*>' | cut -c1-100` — exit 0
  18. ## Page errors recorded during the take
  19. - none

そのテイクのランブックから無編集で写しています。

使い方

3 ステップ、いつものエージェントの中で

  1. 01

    skill をインストール

    Claude Code、Cursor、Codex、Gemini CLI、Antigravity のどれでもコマンドひとつ。録画には Chrome、ffmpeg、Node が必要です。足りないものはエージェントが伝え、インストールを提案します。

  2. 02

    フローを書く

    ページと手順を書くか、何も書かなくても構いません。変更の直後なら、どの画面を触っていたかエージェントはもう知っています。

  3. 03

    エビデンスを受け取る

    mp4、番号付きスクリーンショット、ランブックがあなたのディスクに。チケット、MR、報告書への添付はあなたの手で。何もコミットされません。

webapp-evidence 自身が録画したこのページ。上の UAT 報告書が引用しているテイクです。

フルスタックのエビデンス

1 回のテイクで画面、エンドポイント、データベースを証明

画面録画が示すのはフルスタックの変更の半分だけです。同じテイクで、ブラウザが保持しているセッションのまま API を呼び、書き込まれた行をデータベースから読み返せます。

入力するもの
/webapp-evidence:recording Page: https://app.example.com/orders
Flow:
1. Create an order for SKU ABC, quantity 2
2. Call POST /api/orders and show it answering 201
3. Query the orders table and show the row that appeared
  1. 画面

    フォームは見えるポインターで入力・送信されます。視聴者が読める速さで。

  2. エンドポイント

    ページの上にターミナルパネルが開き、ブラウザの Cookie で curl が走ります。ステップがステータスを検証する様子も動画に残ります。

  3. データベース

    psql、mysql、rake タスクなど、自分で実行するものなら何でも。新しい行が、それを作った画面の横に映ります。

Cookie とトークンはファイル経由で curl に渡り、動画、スクリーンショット、ランブックのすべてでマスクされます。

テイクの確認

エージェントは動画を観られない。vision なら読める。

録画を数秒ごとのフレームに分け、各フレームに mm:ss を刻んだコンタクトシートに並べます。指摘は「00:14 でヘッダーが表に重なる」のように返り、ランブックと照合できます。

/webapp-evidence:vision evd-tour.mp4
このページのテイクのコンタクトシート: タイムスタンプ付きフレームのグリッド
コンタクトシート 01

機能

レビュアーが信頼できるエビデンス

  • 人が操作したように見える

    ポインターは移動し、タイピングには揺らぎがあり、スクロールは目的の場所で止まります。何も飛びません。

  • ただのファイルではなくランブック

    タイムライン、字幕、実行したコマンド、発生したページエラー、そして同じテイクをもう一度作るコマンド。

  • 秘密は映さない

    ぼかす、黒塗りにする、区間ごと切る。動画でもスクリーンショットでも。

  • マシンの外に何も出ない

    サービスもボットアカウントもありません。手元のエージェント CLI の中で、指定したサイトだけを相手に動きます。

  • ダイアログそのものが証拠なら

    ネイティブのドロップダウンや confirm ダイアログは既定で字幕に記録されます。それ自体がエビデンスなら、--screen でブラウザのウィンドウごと録画します。

  • 覚える構文はない

    どの言語で頼んでも、エージェントはその言語で答えます。別の言語の字幕、ゆっくりしたテイク — プロジェクトごとに記憶されます。

インストール

使っているエージェントを選ぶ

ひとつの skill、5 つのプラットフォーム。実行コマンドは入力する場所によって変わります。

Claude Code

インストール

claude plugin marketplace add TOMOSIA-VIETNAM/webapp-evidence
claude plugin install webapp-evidence@webapp-evidence

録画

/webapp-evidence:recording

動画を読み返す

/webapp-evidence:vision

Cursor

インストール

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

録画

/webapp-evidence-recording

動画を読み返す

/webapp-evidence-vision

Codex

インストール

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

録画

$webapp-evidence-recording

動画を読み返す

$webapp-evidence-vision

Gemini CLI

インストール

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

録画

/webapp-evidence-recording

動画を読み返す

/webapp-evidence-vision

Antigravity

インストール

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

録画

/webapp-evidence-recording

動画を読み返す

/webapp-evidence-vision

録画には Chrome、ffmpeg、Node が必要です。ワンライナーは使うプラットフォームを尋ね、どこに入ったかを伝えます。