よくある質問（FAQ）

アカウント登録・ログインについて

•Google または GitHub の OAuth でサインインできます。メールアドレスとパスワードの登録は不要です。
•同じメールアドレスに紐づく Google アカウントと GitHub アカウントの両方でログインできます（アカウントは自動的にリンクされます）。

プロジェクトの作成方法

•ダッシュボードの「新規プロジェクト」ボタンからプロジェクトを作成できます。
•プロジェクト名と URL 用のスラッグを設定してください。スラッグはプロジェクトの識別子として使用されます。

ウィジェットの埋め込み方法

•プロジェクトの設定画面に表示される埋め込みコードをコピーしてください。
•コピーした '<script>' タグをサイトの '<body>' 末尾に追加します。
•data-api-key 属性にはプロジェクト固有の API キーが設定されています。この値は変更しないでください。
•設定画面の「許可オリジン」にウィジェットを設置するサイトのオリジン（例: https://example.com）を追加してください。CORS 制御に使用されます。

GitHub 連携の設定方法

•プロジェクト設定画面の「GitHub 連携」セクションにある「GitHub App をインストール」ボタンをクリックしてください。
•GitHub の画面に遷移したら、Bugoon App をインストールし、Issue を作成したいリポジトリへのアクセスを許可してください。
•インストール完了後、自動的にダッシュボードに戻ります。「リポジトリ」欄に Issue 作成先のリポジトリ名を owner/repo 形式（例: myorg/my-app）で入力して保存してください。
•「GitHub ラベル」セクションで、自動作成される Issue に付与するラベルをカスタマイズできます。空欄にするとそのラベルはスキップされます。
•設定完了後、バグレポートが送信されると GitHub Issue が自動的に作成されます。トークンの期限管理は不要です。

メンバー招待について

•プロジェクトのオーナーは、設定画面の「メンバー管理」セクションからメールアドレスを入力してメンバーを招待できます。
•招待されたユーザーが既に Bugoon にアカウントを持っている場合は即座に参加できます。未登録の場合は、次回ログイン時に自動的にプロジェクトに参加します。
•オーナーはプロジェクトの設定変更・削除・メンバー管理が可能です。メンバーはバグレポートの閲覧・ステータス更新ができます。

セキュリティについて

•API キーはプロジェクトごとに一意に生成されます。設定画面で確認できますが、第三者に共有しないでください。
•GitHub 連携は GitHub App 方式を採用しており、ユーザーのトークンをサーバーに保存しません。GitHub App の認証情報はサーバー側で安全に管理されています。
•「許可オリジン」に登録されたドメインからのみウィジェットのリクエストが受け付けられます（CORS 制御）。不正なオリジンからの送信はブロックされます。

スクリーンショット方式について

•「自動（推奨）」モードでは、Bugoon Chrome 拡張がインストールされている場合は拡張経由でピクセルパーフェクトなスクリーンショットを撮影します。拡張がない場合は DOM 描画（html-to-image）にフォールバックします。
•「画面共有」モードでは、ブラウザの Screen Capture API を使用します。ダイアログで画面を選択する操作が必要ですが、CORS 画像・iframe・Canvas/WebGL など DOM 描画では撮れない要素も正確にキャプチャできます。
•スクリーンショット方式はプロジェクト設定画面の埋め込みコードセクションで選択できます。スクリプトタグの data-capture 属性で制御されます。
•大半のサイトでは「自動」で問題ありませんが、外部画像や埋め込みコンテンツが多いサイトでは「画面共有」モードをお試しください。

Chrome 拡張機能について

•Bugoon Screenshot 拡張をインストールすると、ウィジェットのスクリーンショットがブラウザのネイティブ API 経由でピクセルパーフェクトにキャプチャされます。
•拡張がなくてもウィジェットは DOM 描画（html-to-image）で動作します。拡張はスクリーンショット品質の向上のためのオプションです。
•Chrome ウェブストアからインストールできます: https://chromewebstore.google.com/detail/gbfcojmjpgijmdpccdmppnbagflgjphl
•拡張は activeTab と host_permissions のみを使用し、データの収集・送信は一切行いません。スクリーンショットはブラウザ内でウィジェットに渡されるだけです。

CSP（Content Security Policy）対応について

•サイトで CSP ヘッダーを設定している場合、Bugoon ウィジェットが正しく動作するよう以下のディレクティブを追加してください。
•script-src にウィジェット JS の配信元オリジン（例: https://bugoon.com ）を追加してください。
•connect-src にウィジェットの配信元オリジン（バグレポート送信 API）と https://firebasestorage.googleapis.com （スクリーンショットのアップロード先）を追加してください。
•style-src: 'unsafe-inline' を追加してください。ウィジェットは Shadow DOM 内でインラインスタイルを使用しますが、親サイトの DOM には影響しません。
•プロジェクト設定画面の「AI導入プロンプト」には CSP の修正手順も含まれているため、Claude Code や Cursor に渡すだけで CSP 設定も含めて自動で導入できます。

GitHubラベルの設定について

•プロジェクト設定画面の「GitHubラベル」セクションで、自動作成される GitHub Issue に付与するラベルをカスタマイズできます。
•「common」はすべての Issue に共通で付与されるラベルです。デフォルトは「bug」です。
•「severity:critical」「severity:major」「severity:minor」「severity:trivial」は、報告者がウィジェットで選択した深刻度に対応するラベルが1つ付与されます。
•「console_errors」はコンソールエラーが含まれるレポートに、「network_errors」はネットワークエラーが含まれるレポートに自動で付与されます。
•各ラベルの値を空欄にすると、そのラベルは Issue に付与されません。不要なラベルを無効化する場合に使用してください。
•ラベルは GitHub リポジトリに事前に作成しておく必要があります。存在しないラベルを指定した場合、Issue 作成時にラベルが付与されないことがあります。

Slack連携の設定方法

•プロジェクト設定画面の「Slack連携」セクションから、Webhook モードまたは Bot モードのいずれかを選択して設定できます。
•Webhook モードでは、Slack の Incoming Webhook URL を貼り付けるだけで設定完了です。バグレポートが作成されるたびに通知が届きます。
•Bot モードでは、Slack App を OAuth でインストールします。バグレポート作成時の通知に加え、ステータス変更や GitHub Issue 作成時にもスレッド返信で通知されます。
•Webhook URL の取得方法: Slack ワークスペースの「設定と管理」>「アプリを管理」から Incoming Webhooks を有効にし、通知先チャンネルを選択して URL をコピーしてください。
•Bot モードでは通知はスレッド形式で送信されるため、1つのバグレポートに関する更新がまとまり、チャンネルが整理された状態を保てます。
•連携はいつでも設定画面の「連携を解除」ボタンから解除できます。解除すると通知は停止しますが、既存のバグレポートデータには影響しません。

Notion連携の設定方法

•プロジェクト設定画面の「Notion連携」セクションから、OAuth モードまたは Token モードのいずれかを選択して設定できます。
•OAuth モードでは、「Notionに接続」ボタンをクリックすると Notion の認証画面に遷移します。認証完了後、アクセス可能なデータベースの一覧が表示されるので、同期先のデータベースを選択してください。
•Token モードでは、Notion の Internal Integration Token とデータベース ID を手入力します。Notion の「Settings & members」>「Connections」から Integration を作成し、トークンを取得してください。
•Token モードの場合、対象データベースの「...」メニュー >「Connections」から作成した Integration を接続してください。データベース ID は、データベースページの URL に含まれる32文字の英数字です。
•設定完了後、バグレポートが作成されると Notion データベースに自動的にページが追加されます。Bugoon はデータベースのプロパティ構造を自動検出し、一致するプロパティにのみデータを同期します。対応するプロパティ名と型は以下の通りです: タイトル（title型、自動検出）、Status/ステータス（status型 or select型）、Severity/重要度（select型）、Page URL/URL（url型）、Dashboard Link/Bugoon（url型）、Browser/ブラウザ（rich_text型）、OS（rich_text型）。これらのプロパティがデータベースに存在しない場合はスキップされるため、最低限タイトルプロパティがあれば動作します。
•ダッシュボードでバグレポートのステータスを変更すると、対応する Notion ページのステータスプロパティも自動的に更新されます。
•連携はいつでも設定画面の「連携を解除」ボタンから解除できます。解除すると自動同期は停止しますが、既存のバグレポートデータや Notion ページには影響しません。

MCP サーバー（AI連携）

•MCP サーバーを使うと、Claude Code や Cursor などの AI コーディングツールから直接バグ情報にアクセスできます。バグ一覧の取得、詳細確認、ステータス更新などをエディタから離れずに行えます。
•npm パッケージ名は @rubyjobs-jp/bugoon-mcp-server です。npx 経由で実行されるため、手動インストールは不要です。
•セットアップ手順: (1) プロジェクト設定画面でシークレットキーをコピーします。(2) お使いの IDE の設定ファイルに MCP サーバーの設定を追加します。

•Claude Code の場合: .claude/settings.json に以下の設定を追加してください。BUGOON_SECRET_KEY にはコピーしたシークレットキーを設定します。

{
  "mcpServers": {
    "bugoon": {
      "command": "npx",
      "args": ["-y", "@rubyjobs-jp/bugoon-mcp-server"],
      "env": {
        "BUGOON_SECRET_KEY": "YOUR_SECRET_KEY",
        "BUGOON_API_URL": "https://bugoon.com"
      }
    }
  }
}

•Cursor の場合: .cursor/mcp.json に以下の設定を追加してください。

{
  "mcpServers": {
    "bugoon": {
      "command": "npx",
      "args": ["-y", "@rubyjobs-jp/bugoon-mcp-server"],
      "env": {
        "BUGOON_SECRET_KEY": "YOUR_SECRET_KEY",
        "BUGOON_API_URL": "https://bugoon.com"
      }
    }
  }
}

•利用可能な機能: バグレポート一覧の取得、バグレポート詳細の取得、ステータスの更新、プロジェクト情報の取得など。AI がバグの内容を理解し、修正作業に活用できます。

•使用例: AI エージェントに以下のように指示できます。

# トリアージのバグ一覧を取得して、ブラウザで確認して、
# 問題があるものは未対応ステータスに変更して

# 未対応のバグを取得して、順番に修正して、
# 修正が終わったら解決済みステータスに変更して

# バグレポート #42 の詳細を教えて

# criticalのバグ一覧を見せて

•対応ツール: MCP（Model Context Protocol）に対応したすべてのツールで利用可能です。Claude Code、Cursor、その他 MCP 対応エディタ・ツールで動作します。