バグレポートジェネレーター

録画をすぐに対応可能なレポートへ変換

バグの画面録画を読み込みます。動画を再生し、重要な操作や現象が発生するたびにマークします。タイムスタンプが記録され、その瞬間の動画フレームがキャプチャされ、番号付きリストの手順として追加されます。

概要、期待される動作、そして実際に起こった動作を入力すれば、GitHub用のMarkdown、Jiraマークアップ、またはプレーンテキストとして全体をコピーできます。ブラウザや画面の環境情報も自動的に入力されます。

録画データが端末の外に送信されることはありません。ローカルファイルから再生され、デバイス上でフレームが描画されるため、未リリースのビルドや顧客アカウントに関わるバグでも安心です。

なぜこのレポート作成にAIを使用しないのか

スクリーン録画を見ているモデルは、見ているものを記述できます。しかし、あなたが見ることを期待したことは知ることができません。そして、それこそがバグ報告の半分であり、誰かがそれに基づいて行動できるかどうかを決定する部分です。

「確認をクリックしたら、請求書パネルが空だった」というのは観察です。それがバグであるかどうかは、そこに何が表示されるべきだったかに完全に依存しており、それを知っている唯一の人物はあなたです。動画から期待される動作を生成するツールは、推測をしてその推測を「発見」として提示するものであり、フィールドを空白にするよりも悪い結果を招きます。なぜなら、もっともらしい間違った期待は開発者を誤った道に導くからです。

したがって、ここでの分担は意図的です。このツールは、タイムスタンプ、フレーム、環境、書式設定、番号付けなど、正確に実行できる機械的な作業を行います。あなたは判断を提供します。それには約1分かかり、その結果として誰もあなたに問い合わせる必要のないレポートが完成します。

レポートが通常見落とす3つのこと

多くの薄いバグ報告を読んできましたが、同じ欠落が繰り返し見られ、その3つすべてが難しいことではなく機械的なものです。

タイムスタンプ。「添付動画を参照」と書かれたレポートは、読者にその瞬間を見つけるために4分間視聴させます。1:12に発生したと書かれたステップはそうではありません。

環境。ブラウザ、オペレーティングシステム、画面サイズ。誰もがそれを含めるべきだと知っていますが、ほとんど誰もそうしません。なぜなら、思考の途中で設定パネルを開く必要があるからです。ここではあなたのブラウザから読み取られ、既に記入された状態でレポートに表示されます。そして、あなたはそれを修正できます。

静止画。失敗の瞬間のフレームは、20件のイシューのリストでスキャンされるものです。動画から手作業でフレームを抜き出すのは非常に面倒なので、人々はそれをスキップします。そのため、あなたがマークする各ステップで自動的に行われます。

正確に何がキャプチャされるか

マークされた各ステップは、正確な再生時間と、その時点の動画からのJPEGフレームを、レポートを軽く保つために縮小して記録します。これらのフレームをダウンロードして、イシューに添付できます。

環境はブラウザから取得されます：その名前とバージョン、オペレーティングシステム、ピクセル比を含む画面サイズ、およびビューポートサイズ。現在のブラウザは以前よりも自己申告する情報が少ないため、一部が不明になることがありますが、すべてのフィールドはロックされておらず編集可能です。

ピクセルから何も推測されません。このツールは、画面からエラーテキストを読み取ろうとしたり、どの要素をクリックしたかを推測したりしません。なぜなら、それを不確実に行うことは、行わないことよりも悪いからです。

記入される構造

出力はバグ報告が定着している形式に従います。なぜなら、トラッカーやそれを読む人々がその形式を期待しているからです。もしバグ報告テンプレートを探していたなら、これは貼り付けて見つめるだけのテンプレートではなく、既に入力された状態で提供されるものです。

まず要約を1行で記述します。なぜなら、その1行が30件のイシューのリストの中で誰かがスキャンするものであり、あなたのイシューが今日開かれるかどうかを決定するからです。

次に、タイムコード付きの番号付きステップ、期待される動作、実際の動作、そして環境です。その順序は装飾ではありません。読者は、再現可能かどうかを確認するためにステップをチェックし、それが本当にバグであるかどうかを確認するために期待される動作と実際の動作のペアをチェックし、自分の環境で発生しているかどうかを確認するために環境をチェックします。これらのいずれかを埋もれさせると、往復のやり取りが発生します。

空のテンプレートができないことは、自分自身を埋めることであり、それが人々がテンプレートをスキップする原因となる部分です。ここでは、ステップ、タイムコード、フレーム、環境が入力された状態で提供され、ツールが本当に知り得ない3つのフィールドをあなたが記述します。

録画を始める前に

レポートの質は録画の質で決まります。特に重要な2つの習慣があります。

既知の状態から開始すること。セッションの途中から始まる録画では、それ以前に何が行われたかを閲覧者が推測しなければならず、再現手順としての価値が損なわれます。ログイン画面、開いたばかりの新規ページ、あるいは明確に定義された開始地点から記録を始めてください。

画面に共有すべきでない情報を残さないこと。URLバー内のトークン、顧客の氏名、別タブに表示された無関係なメール、開発者ツールのパネル内のAPIキーなどです。バグレポートはチーム外へ転送されたり、チャットに貼り付けられたりして多くの人の目に触れる可能性があります。画面録画には、その時画面に映っていたすべてが含まれます。本ツールが動画をアップロードすることはありませんが、生成されたレポートや画像フレームは送信先にそのまま届きます。

このツールが対応していないこと

課題（Issue）の直接起票は行いません。GitHubやJiraなどへの連携機能はありません。作成されたレポートをコピーし、所定の場所に貼り付ける形をとっています。これにより、他の人に見られる前に内容を自分で確認することができます。

ログ、ネットワークリクエスト、コンソール出力の取得は行いません。これらはブラウザの開発者ツール内で確認すべきものであり、一部のバグにおいては極めて重要です。コンソール画面を動画で撮影するのではなく、チームがすでに利用している安全な方法で別途添付してください。

また、原因の診断は行いません。根本的な原因、不具合のあるコンポーネント、または既存の課題との重複有無などを判定することはありません。誰かが対応作業に着手できる形式へエビデンスを整えること、それがこのツールの役割です。

まずバグを録画する場合

まだ不具合の画面キャプチャを行っていない場合は、画面録画ツールを使ってブラウザからタブ、ウィンドウ、または画面全体を録画できます。再現手順を口頭で説明したいバグの場合は、音声付きで録画すれば説明内容をエビデンスと一緒に残せます。

あわせて活用できる便利なツールもあります。レポートではなく個別の画像が必要な場合は、動画フレーム抽出ツールで一定間隔ごとにフレームを切り出せます。録画時間が長く、話した内容をテキスト化したい場合は、文字起こし生成ツールを使えばナレーションを検索可能なテキストに変換できます。

バグについて録画内容に質問する

このページでのチェック機能は端末上で動作し、アカウント作成も不要です。録画内で話された内容や表示された内容について回答を得たい場合は、ScreenAppにアップロードしてください。質問をクリックすると、その質問がセットされた状態でScreenAppが開きます。

ScreenAppではトランスクリプト内の瞬間をクリックすると、プレーヤーが録音のそのポイントにジャンプしますため、どのような回答でも録画と照らし合わせて確認することができます。

各プランでできること

このページにあるツールは無料で、今後もずっと無料です。アカウントは、その前後のステップで必要になります。