scrawl について
scrawl は、Scrawl で記録された視覚的なバグ報告を扱うコーディングエージェント向けスキルです。フレームや音声、注釈、元メディアの確認方法と、CLI での拡大・調査・送信を案内します。
主な機能
- 01キャプチャバンドルとキーフレームの解析
- 02文字起こしと画面注釈の確認
- 03時刻やマークを指定した拡大
- 04キャプチャ情報とフレームの調査
- 05キャプチャの送信と動画の書き出し
活用シーン
- 01画面録画からソフトウェアの問題を調査
- 02文字起こしと画面表示の照合
- 03キーフレーム間の動きの確認
- 04OpenCode セッションへのキャプチャ送信
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ kitlangton/ scrawl --skill scrawlインストール後、Claude Code で/scrawlを入力して読み込まれたか確認します。
詳細
Scrawl のキャプチャ
Scrawl は、画面、音声、クリック、赤いインクでの書き込みを記録し、結果を .scrawl フォルダー(バンドル)にまとめます。問題を説明する代わりに、見せるために送られてくるので、キャプチャそのものがバグレポートです。回答する前によく確認し、キャプチャにすでに示されている内容を改めて説明するよう求めないでください。不明な点がある場合は、まず scrawl zoom でもっと詳しく確認してください。
貼り付けた内容の見方
[scrawl 0:33 · OpenCode “Settings” · /Users/me/Library/Application Support/scrawl/captures/scrawl-1792432139176.scrawl]
Open contact-sheet.png and frames/ in that folder before changing anything: the marks and words only make sense on the images, which can show more than the text does.
Cropped to: the activity in OpenCode (full frames in frames-full/)
- #1 (0:04) [clicked “New tab”] “Command T makes a new session, but here it should make a tab.”
- #2 (0:07) “No, it doesn't.”
- #3 (0:10) ⚑ “It says command shift B makes a new tab.”
- #4 (0:18) clicked (x 0.51, y 0.93)
- 1 行目には、記録の長さ、記録したアプリとウィンドウ、バンドルのパスが記載されています。
- 次の行では、まず画像を開くよう求めています。そのとおりにしてください。テキストには発言と操作しか記載されておらず、フレームにはマークや言及がなくても問題が示されていることがあります。
- 各
#N (M:SS)行はキーフレームです。角括弧内にその時点での操作が記載され、その後に画面に表示されていた間の発言が続きます。引用文のない行には、操作だけが記載されています。 ⚑は、その時点に意図的にフラグを付けたことを示します。⟨Name⟩は、アプリが新しい画面を検出したことを示します。·で始まる行は、アプリが記録したイベントまたは値です。- 冒頭付近に、任意の行として
For session:(Scrawl の送信先)、アプリのコンテキストを示すScreen:、Note:、Cropped to:が記載されることがあります。 - 座標はキャプチャ範囲内の割合で、原点は左上です(x 0.51 は中央より少し右です)。
回答では、「#3 (0:10)」のように同じ形式で時点に言及してください。そうすれば、相手はコンタクトシートで該当箇所を見つけられます。
バンドルの確認方法
- まず、バンドル内の
contact-sheet.pngを確認してください(すでに添付されていることもよくあります)。すべてのキーフレームが時間順に、左から右、上から下に並んでいます。各フレームの隅には、小さな白いチップに番号Nが表示されています(summary.mdの#Nに対応します)。 - 次に、対応する文字起こしの行を確認してください。音声認識では人名やコード用語を聞き間違えることがあるため、両者が食い違う場合は画面の内容を優先してください。
- キーフレームを原寸で確認する必要がある場合は、
frames/frame-NN.pngを開いてください(frame-03.pngは #3 です)。概要にCropped to:とある場合、切り抜き前の画面はframes-full/にあります。
描画の意味:
- 赤い線、円、下線、矢印は、その人が描いたマークで、問題箇所を示しています。同じ画面上に描かれたマークは、すべて 1 つのキーフレームに表示されます。複数のマークがある場合、テキストでは描画順に番号が付けられます(
✎① 0:06 …、✎② 0:09 …)。画像にはインクだけが表示されるため、どのインクか確認するにはscrawl zoom --markを使ってください。 - カーソルの周囲に表示される波紋はクリックまたはタップを示し、指の軌跡はスワイプを示します。
- 徐々に消えていく赤く光る軌跡はレーザーポインターです。跡を残さずに指し示すために使われます。
その他のファイル:scrawl.json は完全なマニフェストです(キーフレーム、形状とボックスを含む marks、events、時刻情報付きの transcript.words、アプリの context、autocrop)。recording.mp4 または recording.mov と audio.wav は元のメディアです。.media-pending ファイルは、別の Mac から動画をまだコピー中であることを示します。
Scrawl CLI
scrawl は Scrawl アプリ専用のバイナリです。command -v scrawl で何も見つからない場合は、/Applications/Scrawl.app/Contents/MacOS/scrawl(または ~/Applications 内の同じパス)を使い、Scrawl の Settings › Agents にある Install から PATH に追加できることを相手に伝えてください。これは Scrawl がインストールされた Mac でのみ動作します。それ以外の場所では、contact-sheet.png、frames/、scrawl.json を直接確認してください。すべてのコマンドにはバンドルのパスを指定します。多くのコマンドでは、最新のキャプチャを示す latest が既定値です。パスには通常 Application Support が含まれるため、引用符で囲んでください。
ある瞬間を詳しく見る
問題が動き(アニメーション、ジャンプ、ちらつき)に関するもの、キーフレームの間に起きるもの、またはマークが何を指しているのか分からない場合は、zoom を使います。
scrawl zoom <bundle> --at 0:21 # a time, M:SS or seconds
scrawl zoom <bundle> --at "the width changes" # or a phrase they said
scrawl zoom <bundle> --at 0:21 --span 1 --frames 16 --full
scrawl zoom <bundle> --mark 2 # the mark shown as ✎② in the text
scrawl zoom <bundle> --mark 1 --frame 4 # ✎① of keyframe #4, when several have a ✎①
その瞬間の前後のフレームを並べた PNG シートのパス、各コマの時刻、発話内容が出力されます。フィードバックに対応する前に PNG を開いて確認してください。--span は対象となる秒数(デフォルトは 2 秒で、その 4 分の 1 は対象の瞬間より前)、--frames はコマ数(デフォルトは 12)、--full は切り抜きではなく画面全体を表示するオプションです。コマにはシート内で #1 から番号が振られるため、その番号はキーフレーム番号ではありません。
--mark には、テキストに記載されたマーク番号または ID(m2)を指定します。シートはそのマークが描かれた時刻を中心に表示され、そのマークのインクだけが、描き始めから全体にわたって表示されます。scrawl inspect <bundle> --marks はすべてのマークを一覧表示します(#2 ✎② 0:09 marked (2 strokes) · m2:キーフレーム、番号、時刻、形状、描画された対象、ID)。--marks --json を指定すると、同じ内容が JSON で出力されます。
その他のコマンド
scrawl inspect <bundle> # summary.md, the text above
scrawl inspect <bundle> --json # scrawl.json
scrawl inspect <bundle> --marks # the marks, numbered as in the text [--json]
scrawl frames <bundle> --from 0:04 --to 0:06 [--fps 4] # plain PNGs of a range; prints their paths
scrawl send <bundle> --session ses_… # queue the capture into an OpenCode session
scrawl send <bundle> --clipboard # copy the summary text to the clipboard
scrawl export <bundle> [--out demo.mp4] [--zoom] [--crop auto|full|x,y,w,h] [--size 1920]
zoomとframesは<bundle>/zoom/に書き込みます。Scrawl がこれらのファイルを管理し、クリーンアップするため、バンドルの残りの部分には手を加えないでください。--sessionを指定せずにsendを実行すると、キャプチャの送信先として指定されたセッション(For session:の行)に送信されます。指定がない場合は、直近でアクティブだったセッションに送信されます。記録された送信先がある場合、--rerouteを指定しない限り、別の--sessionへの送信は拒否されます。送信先を変更する前に、相手に確認してください。exportは、インクとクリック音を映像に焼き込み、音声を同期させた.mp4ファイルを 1 つ出力します(デフォルトは~/Movies/Scrawl/<bundle>.mp4)。--zoomを指定すると、動きのある部分へ滑らかにズームインします。--no-ink、--no-clicks、--hevc、--fpsも使用できます。- 録画した動画と音声は、Settings で設定を変更していない限り、キャプチャから 7 日後にゴミ箱へ移動されます。その後は
zoom、frames、exportで動画を読み込めなくなりますが、frames/、コンタクトシート、scrawl.jsonは残ります。 scrawl <command> --helpですべてのフラグを確認できます。scrawl skillを実行すると、インストール済みのバージョンが認識しているこのガイドが表示されます。