BugDrop

BugDropとは？

BugDropは、無料のオープンソースWebフィードバックウィジェットです。サイト上でユーザーから直接問題を収集し、自動的にGitHub Issueに変換します。フローティングの「Bug」ボタンを提供し、ユーザーがスクリーンショットをキャプチャ、問題箇所を注釈付け、デバッグ用のコンテキストを送信できます。

ウィジェットはGitHub Appとスクリプトタグ経由でGitHubリポジトリと連携します。フィードバック送信時、BugDropはユーザーのスクリーンショットとシステム情報を含む整形済みGitHub Issueを自動作成します。

主な機能

• サイト上のフローティングフィードバックボタン：ページ離脱なしで訪問者が問題を報告しやすくします。
• スクリーンショットキャプチャ（フルページまたは要素指定）：バグやUI問題の視覚証拠を保持します。
• 注釈ツール（描画、矢印、四角形）：送信者が問題発生箇所を正確に強調できます。
• フィードバックカテゴリと自動GitHubラベル（Bug、Feature、Question）：送信物を一貫したタグでGitHubに整理します。
• 自動システム情報収集：ブラウザ、OS、ビューポート、その他の詳細を記録し、トリアージを支援します。
• データ属性によるスタイル可能なウィジェットUI：フォント、カラー、ボーダー、シャドウ、角丸などの表示設定をデザインシステムに合わせカスタマイズ。
• プライバシー重視の処理：トラッキングなし、クッキーなし、URLはマスク。

BugDropの使い方

1. GitHub Marketplaceからリポジトリ向けGitHub Appをインストール（ソースは「bugdrop-in-app-feedback-to-github-issues」を記載）。
2. サイトにウィジェットスクリプトを追加し、data-repo属性をowner/repoに設定。
   • 例:

     <script src="https://bugdrop.neonwatty.workers.dev/widget.js" data-repo="owner/repo"></script>
     

3. ウィジェットが表示され、ユーザーがフィードバックを送信できるか確認。
4. （オプション）ドキュメントのdata-*属性でスタイルや動作を構成（テーマ、位置、ボタンテキスト/ラベル、カラー、ボーダー、シャドウなど）。

ユースケース

• Web UI問題の視覚バグレポート収集：ユーザーがフルページまたは対象スクリーンショットをキャプチャし、問題箇所を注釈。
• 多様な送信物のトリアージ：Bug、Feature、Questionとして分類し、対応ラベル付きでGitHubに到着。
• ユーザー環境問題のデバッグ：各GitHub Issueにブラウザ/OS/ビューポートとシステム情報を含め、再現を迅速化。
• 製品デザインへのウィジェット適合：データ属性でテーマやスタイルトークン（フォント、カラー、ボーダーラディウス、シャドウスタイル）を適用。
• 手動Issue作成より摩擦低減：ページ上でフィードバック送信、BugDropがスクリーンショット付きGitHub Issueを自動作成。

FAQ

BugDropはGitHub Issueを自動作成しますか？

はい。ウィジェットはフィードバックをGitHubリポジトリに送信し、スクリーンショットとシステム情報付きの整形GitHub Issueを作成します。

送信時にBugDropが含める情報は？

BugDropはスクリーンショット（フルページまたは要素指定）、注釈、ブラウザ/OSなどのシステム情報、ビューポート詳細をキャプチャします。

ウィジェットの外観や配置をカスタマイズできますか？

はい。data-*属性でテーマ（light/dark/auto）、位置（bottom-right/bottom-left）、フォント、カラー、ボーダー、角丸、シャドウなどのスタイルオプションをサポート。

トラッキングやクッキーは使いますか？

BugDropはプライバシー重視：トラッキングなし、クッキーなし、URLはマスク。

ウィジェットをリポジトリに接続する方法は？

リポジトリ向けGitHub Appをインストールし、サイトのスクリプトタグにdata-repo="owner/repo"属性を追加。

代替案

• チケット/Issueを作成する別のWebフィードバックウィジェット：類似ワークフロー（ページ上フィードバック収集）だが、異なるIssueトラッカーや送信形式を使用する場合あり。
• 手動スクリーンショットとフォーム依存の一般バグ報告ツール：スクリーンショットキャプチャとGitHub Issue自動作成の代わりに、フォーム入力やファイル添付を要求。
• GitHubネイティブIssue受付ワークフロー（例: IssueテンプレートやIssueフォーム）：GitHub内で完結するが、ページ埋め込みウィジェットからの報告を移行。
• カスタマーサポートチケットウィジェット：サイト埋め込みフィードバックを提供するが、送信物をサポートインBOXにルーティングしGitHub Issueとは異なる。