SnappySnag 公式ドキュメント
SnappySnag は、Flutter アプリ向けのビジュアルバグ報告＆AI自動修正提案 SDK です。端末シェイクやボタンタップでスクショを即座にキャプチャし、画面上にピン留め（1〜5箇所）して指摘を送信。Webダッシュボード上で Gemini AI がコード修正ガイドと、Cursor、Windsurf、Claude、Copilot などあらゆるAIエージェントにそのまま貼り付け可能な修正プロンプトを自動生成します。
マルチピン指摘
画像を汚さないベクター座標保存。1枚のスクショで最大5箇所の課題を個別メモ付きで報告。
AIエージェント自動修正
UIウィジェットツリー情報とスクショを照合し、CursorやClaude等にそのまま渡せる修正プロンプトを自動生成。
3段階安全ロール
👑 オーナー / 💻 開発メンバー / 🧪 テスター。テスターはAIクレジットを消費できない安心設計。
クイックスタート (3ステップで完了)
わずか数分で既存のFlutterアプリに導入できます。
パッケージの追加
flutter pub add snappy_snagAPIキーの取得
SnappySnag ダッシュボード（https://snappysnag.com/dashboard）でプロジェクトを作成し、APIキー（例: snag_live_...）を取得します。
main.dart に初期化コードを追加
main() 関数で初期化し、MaterialApp に navigatorKey と builder を設定します。
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:snappy_snag/snappy_snag.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
// 1. SDKの初期化（本番・テスト問わずこの1行で安全に動作）
SnappySnag().initialize(
apiKey: 'snag_live_your_api_key_here',
showTriggerButton: true, // フローティングボタンを表示
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
// 2. SnappySnagのナビゲーターキーを設定
navigatorKey: SnappySnag.defaultNavigatorKey,
// 3. builder で SnappySnagOverlay をラップ
builder: (context, child) => SnappySnagOverlay(
child: child ?? const SizedBox.shrink(),
),
home: const MyHomePage(),
);
}
}ツールの分類・役割と併用について
SnappySnag は既存のクラッシュ監視ツールと競合するものではなく、それぞれの目的や収集対象に応じて柔軟に組み合わせてご利用いただけます。
| カテゴリー / 観点 | SnappySnag (AI × Visual) | クラッシュ・エラー監視ツール | 従来型フィードバックツール |
|---|---|---|---|
| 主な目的・収集対象 | UIの崩れ・仕様の違和感・人間の改善フィードバック | アプリ強制終了・未捕捉例外のスタックトレース | 全般的な問い合わせ・スクショ添付 |
| AIコーディング連携 | Cursor / Claude 向けプロンプト自動生成 | ✕ エラーログのみ（プロンプト生成なし） | △ 要約テキストのみ |
| ピン留め指摘 (Annotations) | 最大5箇所・ベクター座標非破壊保存 | ✕ なし（クラッシュ時自動送信） | △ 画面全体への手書き落書き・矢印 |
| Flutter UI 構造解析 | 最大10階層Widget自動収集 ＋ PII自動マスク | ✕ なし | △ ネイティブView階層のみ（Flutter非特化） |
| 併用について | - | ○ 問題なく併用可能（独立して動作） | ○ 用途に合わせて選択可能 |
マルチポイントピン留め機能
従来のバグ報告ツールでは、画像に直接落書きして元のUIが隠れてしまったり、複数の修正箇所を伝えるのに何枚もスクショを撮る必要がありました。SnappySnag では、画面タップで最大5箇所にナンバリングされたピン（①〜⑤）を配置し、それぞれのピンに個別の修正要望を記録できます。
ピンの座標は画像そのものを書き換えるのではなく、パーセンテージ（x, y 比率）のベクター情報としてDBに保存されます。そのため、ダッシュボード側では元画像を劣化なく高精細に確認でき、ピンの表示/非表示も自由に切り替えられます。
3段階ロール & AIクレジット安全ガード
受託開発や社内外のテスターが混在するチームでも安全に運用できるよう、厳格な権限分離を導入しています。
オーナー (Owner)
- プロジェクト全設定 & メンバー管理
- ピン有効 / 除外トリアージ
- AI自動修正の再生成 & クレジット消費
開発メンバー (Developer)
- 全指摘ピン・チケットの閲覧・技術精査
- ピン有効 / 除外トリアージ操作
- AI自動修正の実行・エージェントプロンプト取得
テスター (Tester)
- アプリからの新規バグ・フィードバック送信
- 採用されたピン指摘の閲覧
- 🛡️ AIクレジットは消費不可（安全ガード）
設定オプション一覧 (API Reference)
| Option | Type | Default | Description |
|---|---|---|---|
| apiKey | String | Required | 管理画面で発行されるプロジェクトAPIキー |
| mode | SnappySnagMode | user | 運用モード。user（一般ユーザー用シンプル画面）または dev（開発QA向け重複警告/既存指摘表示） |
| showTriggerButton | bool | false | 画面上のフローティングキャプチャボタンを表示するか |
| enabled | bool | true | マスター停止フラグ。falseでオーバーレイやセンサーリスナーを完全無効化 |
| user | SnappySnagUser? | null | ログインユーザー/テスターの識別情報（email, id, name） |
| packageName | String? | null | バンドルIDロック。指定したアプリID以外の不正API通信をブロック |
| enableWidgetTree | bool | true | UIツリー階層の自動収集（パスワード等は自動マスク処理） |
| enableLogging | bool | false | コンソールへの詳細デバッグログ出力（デフォルトはクリーン抑制） |
本番アプリ・検証時の運用スタイル
SnappySnag は「本番アプリでの一般ユーザーフィードバック収集」と「開発・QA検証時のデバッグ利用」のどちらの運用にも柔軟に対応しています。
何もしなくても本番ビルドでそのまま動作します。常駐ボタンはデフォルト非表示、Releaseモードでは自動的に一般ユーザー用画面（社内チケットや警告は完全非表示）に切り替わります。設定画面に「ご意見・不具合を送信」などのボタンを設置し、手動で呼び出す運用が可能です。
// 設定やヘルプメニューから呼び出し:
ListTile(
leading: const Icon(Icons.feedback_outlined),
title: const Text('ご意見・不具合を報告'),
onTap: () => SnappySnag.startFeedbackMode(context: context),
)「受託案件や厳格な方針により本番ストア公開アプリではSDKを1ミリも動かしたくない」という場合は、enabled に停止条件を渡します。最も手軽なのは !kReleaseMode、TestFlightのみ動かしたい場合は --dart-define を併用します。
// パターン1: リリースビルドで完全自動停止（コード1行）
SnappySnag().initialize(
apiKey: 'YOUR_API_KEY',
enabled: !kReleaseMode,
);
// パターン2: TestFlightのみ有効化したい場合
// flutter build ipa --dart-define=ENABLE_SNAPPY_SNAG=true
const bool isTestFlight = bool.fromEnvironment('ENABLE_SNAPPY_SNAG', defaultValue: false);
SnappySnag().initialize(
apiKey: 'YOUR_API_KEY',
enabled: isTestFlight,
);Slack / Discord リアルタイム通知連携
ユーザーやテスターからフィードバックが届いた際、普段お使いの Slack または Discord チャンネルへ即座にカード通知を送信できます。通知カード内のリンクから該当チケットへ直接アクセス可能です。
- Slackの「Incoming Webhook」アプリからWebhook URLを発行
- プロジェクト設定 > 通知連携 タブでURLを入力
- 「Slackにテスト送信」で疎通確認（テスト成功時に設定は自動保存）
- Discordのチャンネル設定 > 連携サービス > ウェブフックでURLを作成
- プロジェクト設定 > 通知連携 タブでURLを入力
- 「Discordにテスト送信」で疎通確認（テスト成功時に設定は自動保存）
セキュリティ ＆ 言語自動連動
登録された Webhook URL は AES-256-GCM で強力に暗号化保存されます。また、通知の見出しやラベル言語は「プロジェクト設定 > 一般 > プロジェクト言語（日本語 / English）」に連動して自動で切り替わります。
よくある質問 (FAQ)
導入前後の疑問や、他社ツールとの併用、本番運用の安全性についてまとめています。
Q.Sentry や Firebase Crashlytics との違いは何ですか？併用できますか？
はい、問題なく併用可能です。Sentry や Firebase Crashlytics はアプリがクラッシュ・強制終了した時のログやスタックトレースを収集するツールです。一方、SnappySnag は『クラッシュしないUIの崩れ・デザインズレ・文言修正・操作感の違和感』を人間が画面上にピン留めし、Gemini AI や Cursor 等のコーディングAIを使って素早く直すためのツールです。お互いの役割が異なり技術的な干渉もないため、目的に応じて組み合わせてご利用いただけます。
Q.App Store や Google Play の本番一般公開アプリに入れても安全ですか？
はい、安全です。本番（Release）ビルドでは社内向けチケットや重複警告が自動的に完全に非表示になり、常駐ボタンもデフォルト非表示です。設定メニューの『ご意見・不具合を送信』ボタンから SnappySnag.startFeedbackMode(context) を呼び出すことで、一般ユーザー向けのクリーンな問い合わせ窓口として安心して運用いただけます。
Q.生成されたプロンプトはどのコーディングAI（AIエージェント）で利用できますか？
Cursor、Windsurf、Claude（Artifacts/Projects）、GitHub Copilot、ChatGPT など、Markdown形式のプロンプトを受け付けるあらゆるAIツールでそのままご利用いただけます。
Q.無料プランの解析クレジットを使い切った場合はどうなりますか？
無料クレジットを使い切った後でも、スクショキャプチャ、ピン留め、フィードバック送信、GitHub Issue連携はすべて無制限で利用可能です。また、ご自身の Gemini API キー（BYOK）を設定することで、追加費用なしでAI自動解析を無制限に継続できます。
Q.ユーザーのパスワードや個人情報（PII）は安全に保護されますか？
はい。SnappySnag は画面解析時、パスワード入力欄や個人情報フィールドを自動的に難読化・マスク処理（PII Redaction）してAIへ送信します。また、キャプチャ時にユーザー自身がお絵描きツール（モザイク・塗りつぶし）でセンシティブ情報を隠すことも可能です。