メインコンテンツまでスキップ

image_generation_plan.prevention_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
2docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_01_concept.png./picture/firebase_abuse_prevention_ts_index_01_concept.pngTheme: App Protection Shield

Labels to Render:
- Shield: "App Check"
- Attackers: "Bots/Abuse"
- App: "Firebase App"

Visual Details:
1. Core Concept: Protecting the application from unauthorized access.
2. Metaphor: A glowing shield (App Check) deflecting jagged arrows (Bots) from a clean, central app icon.
3. Action: Arrows bouncing off the shield.
4. Layout: Central composition, strong contrast between safe inside and dangerous outside.		Before: ## この教材で作るミニアプリ（題材）🧩✨
3docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_02_architecture.png./picture/firebase_abuse_prevention_ts_index_02_architecture.pngTheme: Mini App Components

Labels to Render:
- Database: "Firestore (Memo)"
- Storage: "Storage (Image)"
- AI: "AI Logic (Gemini)"
- Security: "App Check"

Visual Details:
1. Core Concept: The components of the example application.
2. Metaphor: Three interconnected blocks (Firestore, Storage, AI) wrapped in a transparent security layer (App Check).
3. Action: Data flowing securely between components.
4. Layout: Isometric view or flat diagram showing integration.		Before: ## 全体アウトライン（章の流れ）🗺️
4docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_03_roadmap.png./picture/firebase_abuse_prevention_ts_index_03_roadmap.pngTheme: Course Roadmap

Labels to Render:
- Phase A: "Basic (Web)"
- Phase B: "Services (DB/AI)"
- Phase C: "Ops (Dev/CI)"
- Phase D: "Advanced (Bot)"

Visual Details:
1. Core Concept: The 4 phases of the course.
2. Metaphor: A winding path with 4 milestones, each representing a phase.
3. Action: Progression from basic setup to advanced techniques.
4. Layout: Left-to-right journey.		Before: ## 20章カリキュラム（読む→手を動かす→ミニ課題→チェック）📚🔥
5docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_04_recaptcha_comparison.png./picture/firebase_abuse_prevention_ts_index_04_recaptcha_comparison.pngTheme: reCAPTCHA Editions

Labels to Render:
- v3: "Score (0.0-1.0)"
- Enterprise: "Risk Analysis"
- Usage: "Simple vs Robust"

Visual Details:
1. Core Concept: Comparison between reCAPTCHA v3 and Enterprise.
2. Metaphor: A simple thermometer (v3) vs a complex control dashboard (Enterprise).
3. Action: Displaying the difference in depth and control.
4. Layout: Side-by-side comparison.		In Chapter 4
6docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_05_defense_layers.png./picture/firebase_abuse_prevention_ts_index_05_defense_layers.pngTheme: Two Layers of Defense

Labels to Render:
- Outer: "App Check (Device)"
- Inner: "Rules (User)"
- Core: "Firestore"

Visual Details:
1. Core Concept: Dual layer security.
2. Metaphor: Two concentric walls protecting a treasure (Firestore).
3. Action: Outer wall blocks bad devices, inner wall blocks unauthorized users.
4. Layout: Concentric circles or funnel.		In Chapter 8
7docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_06_ai_protection.png./picture/firebase_abuse_prevention_ts_index_06_ai_protection.pngTheme: Protecting AI Resources

Labels to Render:
- Shield: "App Check"
- Valve: "Rate Limit"
- AI: "AI Logic"

Visual Details:
1. Core Concept: Protecting expensive AI resources.
2. Metaphor: A robot (AI) protected by a shield (App Check) and a flow valve (Rate Limit).
3. Action: Ensuring only valid and limited requests reach the AI.
4. Layout: Flow diagram.		In Chapter 12
8docs/firebase_abuse_prevention_ts_index.mdfirebase_abuse_prevention_ts_index_07_dev_lifecycle.png./picture/firebase_abuse_prevention_ts_index_07_dev_lifecycle.pngTheme: App Check in Dev Ops

Labels to Render:
- Local: "Debug Token"
- CI: "CI Token"
- Prod: "Attestation"

Visual Details:
1. Core Concept: App Check integration across environments.
2. Metaphor: A continuous loop (Dev -> CI -> Prod) with specific keys for each stage.
3. Action: Smooth flow without blockages.
4. Layout: Cycle or pipeline.		In Chapter 14
9docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_01_id_card.png./picture/firebase_abuse_prevention_ts_study_001_01_id_card.pngTheme: App Identity Card

Labels to Render:
- Card: "App Check Token"
- Issuer: "Firebase"
- Holder: "Official App"

Visual Details:
1. Core Concept: App Check acts as an ID card for the app.
2. Metaphor: A digital ID card with a holographic chip being scanned by a gate.
3. Action: Scanning the card to grant access.
4. Layout: Close-up of the card and scanner.		After: ## 1) まず結論：App Check は「正規アプリの身分証」🎫✨
10docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_02_access_flow.png./picture/firebase_abuse_prevention_ts_study_001_02_access_flow.pngTheme: Verified vs Unverified Access

Labels to Render:
- Top Path: "Valid Token" -> "Access Granted"
- Bottom Path: "No Token" -> "Access Denied"
- Gate: "App Check"

Visual Details:
1. Core Concept: Filtering traffic based on tokens.
2. Metaphor: A fork in the road. Valid travellers pass the checkpoint, invalid ones are stopped.
3. Action: Green light for top path, red barrier for bottom.
4. Layout: Split composition showing both outcomes.		After: ざっくり図解すると👇
11docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_03_abuse_scenarios.png./picture/firebase_abuse_prevention_ts_study_001_03_abuse_scenarios.pngTheme: Three Abuse Vectors

Labels to Render:
- AI: "Bill Shock"
- Storage: "Junk Data"
- DB: "Data Leak"

Visual Details:
1. Core Concept: The three main risks (AI cost, Storage junk, DB leak).
2. Metaphor: Three warning signs or danger zones.
3. Action: Highlighting the impact (burning money, overflowing trash, leaking pipe).
4. Layout: Triptych (three panels).		After: ## 2) “何が起きるの？”：正規アプリ以外から叩かれるとツラいこと3つ😱💸
12docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_04_role_separation.png./picture/firebase_abuse_prevention_ts_study_001_04_role_separation.pngTheme: Auth vs Rules vs App Check

Labels to Render:
- Auth: "Who are you?"
- Rules: "What can you do?"
- App Check: "Which app is this?"

Visual Details:
1. Core Concept: Distinguishing the three security pillars.
2. Metaphor: Three different checkpoints. ID check (Auth), Badge check (App Check), Permission slip check (Rules).
3. Action: Sequential checks.
4. Layout: Three distinct icons or stations.		After: ## 3) App Checkは「Auth」や「Rules」と役割が違う🧩
13docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_05_phased_rollout.png./picture/firebase_abuse_prevention_ts_study_001_05_phased_rollout.pngTheme: Gradual Enforcement

Labels to Render:
- Step 1: "Monitor (Metrics)"
- Step 2: "Analyze"
- Step 3: "Enforce (Block)"

Visual Details:
1. Core Concept: Safe rollout strategy.
2. Metaphor: A dashboard with a slider moving from "Monitor" to "Enforce".
3. Action: The slider moving carefully.
4. Layout: Left-to-right progression.		After: ## 4) 段階導入が基本：「まずは“測る” → それから“拒否る”】【超重要】📈🎛️
14docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_06_code_snippet.png./picture/firebase_abuse_prevention_ts_study_001_06_code_snippet.pngTheme: Initialization Timing

Labels to Render:
- First: "Initialize App Check"
- Second: "Use Services"
- Wrong: "Too Late!"

Visual Details:
1. Core Concept: Order of operations is critical.
2. Metaphor: A puzzle piece fitting in the very first slot.
3. Action: Locking the security piece before opening the data box.
4. Layout: Timeline or sequence diagram.		After: ## 5) （雰囲気だけ先見せ）App Checkは “Firebase触る前に初期化” が鉄則🧿⚛️
15docs/firebase_abuse_prevention_ts_study_001.mdfirebase_abuse_prevention_ts_study_001_07_checklist.png./picture/firebase_abuse_prevention_ts_study_001_07_checklist.pngTheme: Chapter 1 Takeaways

Labels to Render:
- Concept: "App Identity"
- Strategy: "Monitor First"
- AI: "Rate Limits"

Visual Details:
1. Core Concept: Summary of key points.
2. Metaphor: A clipboard with 3 checked items.
3. Action: Ticking the boxes.
4. Layout: List format with icons.		After: ## ✅ チェック（この章のゴール達成判定）✅🙂
16docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_01_three_steps.png./picture/firebase_abuse_prevention_ts_study_002_01_three_steps.pngTheme: App Check Workflow

Labels to Render:
- 1. Prove: "App (Attest)"
- 2. Issue: "Firebase (Token)"
- 3. Access: "Resource (Check)"

Visual Details:
1. Core Concept: The handshake between App, Firebase, and Resource.
2. Metaphor: 1. Showing ID. 2. Getting a stamped ticket. 3. Showing ticket at the ride entrance.
3. Action: A sequential flow left to right.
4. Layout: Numbered steps with icons.		After: ## 1) App Check は何をしてる？（3ステップだけ）🧿
17docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_02_token_concept.png./picture/firebase_abuse_prevention_ts_study_002_02_token_concept.pngTheme: Entry Stamp

Labels to Render:
- Token: "App Check Token"
- Meaning: "Valid App"
- Not: "User Identity"

Visual Details:
1. Core Concept: Token proves app authenticity, not user identity.
2. Metaphor: A hand stamp at a club/event entrance. It shows you paid/entered correctly, but doesn't say your name.
3. Action: Stamping a hand.
4. Layout: Close up of the stamp.		After: ## 2) 「トークン」って結局なに？🪪
18docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_03_token_location.png./picture/firebase_abuse_prevention_ts_study_002_03_token_location.pngTheme: Token Transport

Labels to Render:
- Firebase SDK: "Automatic"
- Custom Backend: "Header: X-Firebase-AppCheck"
- Don't: "No Query Params"

Visual Details:
1. Core Concept: How the token travels.
2. Metaphor: A secure armored truck (Firebase SDK) vs a labeled envelope (Custom Header). Query params shown as a transparent bag (unsafe).
3. Action: Delivering the token.
4. Layout: Comparison of transport methods.		After: ## 3) トークンはどこに付くの？（Firebase内 / 自前バックエンド）📦
19docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_04_ttl_balance.png./picture/firebase_abuse_prevention_ts_study_002_04_ttl_balance.pngTheme: TTL Balance Scale

Labels to Render:
- Left: "Short TTL (Secure but Heavy)"
- Right: "Long TTL (Fast but Risky)"
- Fulcrum: "App Needs"

Visual Details:
1. Core Concept: Balancing security vs performance.
2. Metaphor: A weighing scale. One side has a heavy lock (Security), the other has a feather (Performance).
3. Action: Balancing the two.
4. Layout: Centered balance scale.		After: ## 4) TTL（有効期限）ってなに？⌛
20docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_05_phased_adoption.png./picture/firebase_abuse_prevention_ts_study_002_05_phased_adoption.pngTheme: Adoption Steps

Labels to Render:
- 1: "Install SDK"
- 2: "Monitor"
- 3: "Enforce"

Visual Details:
1. Core Concept: The safe path to enforcement.
2. Metaphor: Traffic lights. Green (Install), Yellow (Monitor), Red (Enforce/Stop Bad Traffic).
3. Action: Progressing through lights.
4. Layout: Vertical or horizontal traffic light sequence.		After: ## 5) 「段階導入」が超重要（いきなり強制しない）👀➡️🔒
21docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_06_limited_use_token.png./picture/firebase_abuse_prevention_ts_study_002_06_limited_use_token.pngTheme: One-Time Token

Labels to Render:
- Token: "Limited-Use"
- TTL: "5 Mins"
- Action: "Consume"

Visual Details:
1. Core Concept: A token that burns up after use.
2. Metaphor: A "Mission Impossible" message tape that self-destructs. Or a ticket that gets torn in half.
3. Action: The token disintegrating after use.
4. Layout: Dynamic action shot.		After: ## 6) ちょい先取り：Limited-use token（リプレイ耐性）♻️🚫
22docs/firebase_abuse_prevention_ts_study_002.mdfirebase_abuse_prevention_ts_study_002_07_ttl_experiment.png./picture/firebase_abuse_prevention_ts_study_002_07_ttl_experiment.pngTheme: TTL Strategy

Labels to Render:
- High Risk: "Short TTL"
- Low Risk: "Long TTL"
- Default: "1 Day"

Visual Details:
1. Core Concept: Deciding TTL based on risk.
2. Metaphor: A dial or thermostat setting. High heat (Risk) -> Low time. Low heat -> High time.
3. Action: Adjusting the dial.
4. Layout: Control panel interface.		After: ## 実験1：TTL方針メモを作る✍️（1枚でOK）
23docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_01_score_scale.png./picture/firebase_abuse_prevention_ts_study_003_01_score_scale.pngTheme: reCAPTCHA Score Scale

Labels to Render:
- 0.0: "Bot (Bad)"
- 0.5: "Threshold (Default)"
- 1.0: "Human (Good)"

Visual Details:
1. Core Concept: The score range of reCAPTCHA.
2. Metaphor: A gauge or thermometer ranging from Red (0.0) to Green (1.0).
3. Action: A needle pointing at 0.5.
4. Layout: Horizontal or circular gauge.		After: ## 1) まずイメージ：スコアとしきい値って何？🎛️
24docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_02_filtering.png./picture/firebase_abuse_prevention_ts_study_003_02_filtering.pngTheme: Threshold Filter

Labels to Render:
- High Score: "Pass"
- Low Score: "Block"
- Bar: "Threshold (0.5)"

Visual Details:
1. Core Concept: Requests below the threshold are blocked.
2. Metaphor: A high jump bar. High scorers clear it, low scorers hit the bar and fail.
3. Action: Jumping over or hitting the bar.
4. Layout: Side view of the jump.		After: Firebase App Check は、設定した **しきい値を“最低合格点”**として扱い、それ未満のスコアは拒否する（＝正規として認めない）よ、という仕様になってる🛡️ ([Firebase][1])
25docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_03_tradeoff.png./picture/firebase_abuse_prevention_ts_study_003_03_tradeoff.pngTheme: Threshold Trade-off

Labels to Render:
- High Threshold (0.9): "Secure but Strict"
- Low Threshold (0.1): "Easy but Risky"
- Balance: "UX vs Safety"

Visual Details:
1. Core Concept: The consequence of moving the threshold.
2. Metaphor: A slider. Moving it right locks the door tighter but makes the handle harder to turn. Moving it left opens the door wide.
3. Action: Adjusting the slider.
4. Layout: Comparative view of two states (0.9 vs 0.1).		After: ## 2) しきい値は “上げるほど安全” だけど “痛い”😇
26docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_04_default_setting.png./picture/firebase_abuse_prevention_ts_study_003_04_default_setting.pngTheme: Starting Point

Labels to Render:
- Start: "0.5 (Default)"
- Then: "Monitor"
- Finally: "Adjust"

Visual Details:
1. Core Concept: The recommended workflow.
2. Metaphor: A roadmap starting at a signpost "0.5".
3. Action: Looking at charts (Monitor) then moving the dial (Adjust).
4. Layout: Sequential steps.		After: ## 3) まずは 0.5 で始めるのが基本線👍（理由つき）
27docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_05_console_ui.png./picture/firebase_abuse_prevention_ts_study_003_05_console_ui.pngTheme: Firebase Console Setting

Labels to Render:
- Tab: "App Check"
- Section: "reCAPTCHA v3"
- Slider: "Risk Threshold"

Visual Details:
1. Core Concept: Where to find the setting.
2. Metaphor: A simplified UI mockup of the Firebase Console.
3. Action: Highlighting the specific slider.
4. Layout: UI mockup.		After: ## 4-1. しきい値の場所（Firebase Console）🔎
28docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_06_flow_diagram.png./picture/firebase_abuse_prevention_ts_study_003_06_flow_diagram.pngTheme: Verification Logic

Labels to Render:
- Input: "User Action"
- Process: "reCAPTCHA Score"
- Decision: "Score >= Threshold?"
- Yes: "OK"
- No: "NG"

Visual Details:
1. Core Concept: The logical flow of verification.
2. Metaphor: A flowchart. Diamond shape for decision.
3. Action: Flowing through the decision node.
4. Layout: Vertical flowchart.		After: ## 6) 図解っぽく：あなたがやってること（超重要）🧩
29docs/firebase_abuse_prevention_ts_study_003.mdfirebase_abuse_prevention_ts_study_003_07_ai_assistance.png./picture/firebase_abuse_prevention_ts_study_003_07_ai_assistance.pngTheme: AI Operations Assistant

Labels to Render:
- Human: "What threshold?"
- AI: "Start at 0.5"
- Task: "Write User Guide"

Visual Details:
1. Core Concept: AI helping with operational decisions.
2. Metaphor: A robot assistant handing a document (manual/guide) to a developer.
3. Action: Collaboration.
4. Layout: Two characters interacting.		After: ## 7) AI活用（Antigravity / Gemini）で“しきい値調整”をラクにする🤖🧠
30docs/firebase_abuse_prevention_ts_study_004.mdfirebase_abuse_prevention_ts_study_004_01_v3_vs_enterprise.png./picture/firebase_abuse_prevention_ts_study_004_01_v3_vs_enterprise.pngTheme: v3 vs Enterprise

Labels to Render:
- v3: "Simple (0.5 Default)"
- Enterprise: "Granular (0.1 Steps)"
- Cost: "10k Free -> Paid"

Visual Details:
1. Core Concept: Distinguishing features.
2. Metaphor: A starter kit (v3) vs a pro toolkit (Enterprise).
3. Action: Displaying the tools.
4. Layout: Side-by-side comparison.		After: ## 2) v3 と Enterprise の違い（超ざっくり）🔎✨
31docs/firebase_abuse_prevention_ts_study_004.mdfirebase_abuse_prevention_ts_study_004_02_decision_compass.png./picture/firebase_abuse_prevention_ts_study_004_02_decision_compass.pngTheme: Decision Compass

Labels to Render:
- North: "Robust Ops (Enterprise)"
- South: "Speed/Simple (v3)"
- Needle: "Your Needs"

Visual Details:
1. Core Concept: Choosing the right version.
2. Metaphor: A compass.
3. Action: Needle pointing based on "Needs".
4. Layout: Compass face.		After: ## 3) 「いつEnterpriseにする？」判断基準🧭🧿
32docs/firebase_abuse_prevention_ts_study_004.mdfirebase_abuse_prevention_ts_study_004_03_billing_gate.png./picture/firebase_abuse_prevention_ts_study_004_03_billing_gate.pngTheme: Billing Unlock

Labels to Render:
- Locked: "Limited Scores (0.1/0.9)"
- Key: "Billing Account"
- Unlocked: "Full Control (0.1 Steps)"

Visual Details:
1. Core Concept: Billing unlocks full features.
2. Metaphor: A locked gate. The "Billing" key opens it to reveal the full control panel.
3. Action: Unlocking.
4. Layout: Before/After or Key/Lock interaction.		After: ## 4) 超重要：Billingをつける前の「しきい値の制限」🧯
33docs/firebase_abuse_prevention_ts_study_004.mdfirebase_abuse_prevention_ts_study_004_04_setup_checklist.png./picture/firebase_abuse_prevention_ts_study_004_04_setup_checklist.pngTheme: Console Setup Steps

Labels to Render:
- 1: "Enable API"
- 2: "Create Key (Website)"
- 3: "NO Checkbox!"

Visual Details:
1. Core Concept: Key setup steps to avoid mistakes.
2. Metaphor: A checklist with a big red "X" over a checkbox UI element (to emphasize "No Checkbox").
3. Action: Marking the correct steps.
4. Layout: List with warning sign.		After: ## A. Console側（設定）🧰
34docs/firebase_abuse_prevention_ts_study_004.mdfirebase_abuse_prevention_ts_study_004_05_code_structure.png./picture/firebase_abuse_prevention_ts_study_004_05_code_structure.pngTheme: Code Structure

Labels to Render:
- File: "services/firebase.ts"
- Init: "initializeAppCheck"
- Option: "autoRefresh: true"

Visual Details:
1. Core Concept: Where and how to implement code.
2. Metaphor: A file folder structure showing the single file strategy.
3. Action: Highlighting the autoRefresh line.
4. Layout: Simplified code editor view.		After: ## B. アプリ側（コード）⚛️
35docs/firebase_abuse_prevention_ts_study_004.mdfirebase_abuse_prevention_ts_study_004_06_ai_integration.png./picture/firebase_abuse_prevention_ts_study_004_06_ai_integration.pngTheme: AI & Remote Config

Labels to Render:
- AI: "Model"
- Config: "Remote Config"
- Update: "No App Update"

Visual Details:
1. Core Concept: Changing AI settings dynamically.
2. Metaphor: A control tower sending a signal to a satellite (AI Model) to change course without recalling it (App Update).
3. Action: Wireless update.
4. Layout: Diagram.		After: ## おまけ：AIで判断と実装を速くする🚀🤖
36docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_01_concept.png./picture/firebase_abuse_prevention_ts_study_005_01_concept.pngTheme: App Check Pass

Labels to Render:
- App: "React App"
- Pass: "App Check"
- Gate: "Firebase"

Visual Details:
1. Core Concept: App Check acts as a pass/ticket.
2. Metaphor: A hand holding a ticket (App Check) to pass through a gate (Firebase).
3. Action: Presenting the ticket.
4. Layout: Side view of the gate.		## ざっくり図解っぽく 🧠🖼️
37docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_02_setup.png./picture/firebase_abuse_prevention_ts_study_005_02_setup.pngTheme: Setup Dependencies

Labels to Render:
- Box: "Project"
- Item 1: "firebase"
- Item 2: "vite"

Visual Details:
1. Core Concept: Installing necessary packages.
2. Metaphor: Putting items (packages) into a box (project).
3. Action: Dropping the 'firebase' package into the box.
4. Layout: Top-down view into the box.		## 手を動かす その1 依存関係を入れる 📦🖱️
38docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_03_structure.png./picture/firebase_abuse_prevention_ts_study_005_03_structure.pngTheme: Centralized Initialization

Labels to Render:
- File: "firebase.ts"
- Component 1: "App"
- Component 2: "App Check"

Visual Details:
1. Core Concept: Gathering initialization logic in one place.
2. Metaphor: A funnel or magnet pulling components into a single file.
3. Action: Components merging into the file.
4. Layout: Central composition.		## 手を動かす その3 Firebase 初期化を 1か所に集約する 📦🧠
39docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_04_init_flow.png./picture/firebase_abuse_prevention_ts_study_005_04_init_flow.pngTheme: Startup Sequence

Labels to Render:
- 1: "Load firebase.ts"
- 2: "Render App"
- Result: "Safe"

Visual Details:
1. Core Concept: Correct order of operations.
2. Metaphor: A relay race baton pass. First runner (firebase.ts) passes to second (App).
3. Action: Passing the baton.
4. Layout: Horizontal sequence.		## 手を動かす その4 React 側で “最初に” 読み込ませる 🚀⚛️
40docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_05_metrics.png./picture/firebase_abuse_prevention_ts_study_005_05_metrics.pngTheme: Metrics Overview

Labels to Render:
- Green: "Verified"
- Gray: "Outdated"
- Red: "Invalid"

Visual Details:
1. Core Concept: Visualizing the types of traffic.
2. Metaphor: A pie chart or bar graph showing mostly green (Verified).
3. Action: Static display of healthy metrics.
4. Layout: Chart view.		## 2) Firebase Console の App Check メトリクスを見る 📈
41docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_06_pitfalls.png./picture/firebase_abuse_prevention_ts_study_005_06_pitfalls.pngTheme: Troubleshooting

Labels to Render:
- Trap 1: "Double Init"
- Trap 2: "Order Wrong"
- Trap 3: "No Auto-Refresh"

Visual Details:
1. Core Concept: Identifying common mistakes.
2. Metaphor: Warning signs on a path.
3. Action: Highlighting the traps.
4. Layout: Path with obstacles.		## よくある詰まりポイント集 😵‍💫🧯
42docs/firebase_abuse_prevention_ts_study_005.mdfirebase_abuse_prevention_ts_study_005_07_ai_shield.png./picture/firebase_abuse_prevention_ts_study_005_07_ai_shield.pngTheme: Protecting AI

Labels to Render:
- Robot: "AI Logic"
- Shield: "App Check"
- Coin: "Cost"

Visual Details:
1. Core Concept: Preventing AI abuse to save money.
2. Metaphor: A shield protecting a robot from a rain of coins (costs).
3. Action: Shield deflecting the coins.
4. Layout: Protective stance.		## AI 機能と App Check を最初から結びつける 🤖🧿💸
43docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_01_migration.png./picture/firebase_abuse_prevention_ts_study_006_01_migration.pngTheme: Migration Path

Labels to Render:
- Start: "reCAPTCHA v3"
- Goal: "Enterprise"
- Path: "Easy Switch"

Visual Details:
1. Core Concept: Upgrading from v3 to Enterprise.
2. Metaphor: A bridge or path connecting two islands (v3 and Enterprise).
3. Action: Crossing the bridge.
4. Layout: Left-to-right flow.		## 1) まず理解：Enterprise って何が “移行向き” なの？🧠
44docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_02_factory.png./picture/firebase_abuse_prevention_ts_study_006_02_factory.pngTheme: Provider Factory

Labels to Render:
- Input: "Kind (v3/Ent)"
- Factory: "createProvider"
- Output: "Provider Instance"

Visual Details:
1. Core Concept: Generating the correct provider based on input.
2. Metaphor: A manufacturing machine (factory) taking a blueprint and outputting the correct part.
3. Action: Production line.
4. Layout: Process diagram.		## 2) 今日のゴール（できたら勝ち🏁）🎯
45docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_03_encapsulation.png./picture/firebase_abuse_prevention_ts_study_006_03_encapsulation.pngTheme: Encapsulation

Labels to Render:
- File: "appCheck.ts"
- Inside: "Logic"
- Outside: "Clean API"

Visual Details:
1. Core Concept: Hiding complexity inside a file.
2. Metaphor: A sealed box (capsule) with a clean interface on the outside.
3. Action: Sealing the box.
4. Layout: Internal view of the box vs external view.		## 5-1) App Check 初期化を1ファイルに封印する📦
46docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_04_switch.png./picture/firebase_abuse_prevention_ts_study_006_04_switch.pngTheme: Feature Switch

Labels to Render:
- Switch: "Env Var"
- Left: "v3"
- Right: "Enterprise"

Visual Details:
1. Core Concept: Toggling between two modes.
2. Metaphor: A large toggle switch or lever.
3. Action: Flipping the switch.
4. Layout: Close-up of the switch.		## 6) 切替スイッチの作り方（おすすめ順）🎛️
47docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_05_api_token.png./picture/firebase_abuse_prevention_ts_study_006_05_api_token.pngTheme: Secure API Call

Labels to Render:
- Header: "X-Firebase-AppCheck"
- Content: "Token"
- Target: "My API"

Visual Details:
1. Core Concept: Sending the token in the header.
2. Metaphor: An envelope (request) with a wax seal (token) stamped on it.
3. Action: Sending the letter.
4. Layout: Envelope details.		## 7) 手を動かす：Enterprise に差し替えて動作確認する🧪✨
48docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_06_refresh_trap.png./picture/firebase_abuse_prevention_ts_study_006_06_refresh_trap.pngTheme: Auto Refresh Trap

Labels to Render:
- Setting: "isTokenAutoRefresh"
- Default: "False (Trap)"
- Correct: "True (Safe)"

Visual Details:
1. Core Concept: The danger of forgetting auto-refresh.
2. Metaphor: A battery running out of power (expired token) vs a battery being charged (auto-refresh).
3. Action: Battery draining.
4. Layout: Comparison.		## 8) つまずきポイント（ここだけ注意⚠️）😵‍💫
49docs/firebase_abuse_prevention_ts_study_006.mdfirebase_abuse_prevention_ts_study_006_07_ai_audit.png./picture/firebase_abuse_prevention_ts_study_006_07_ai_audit.pngTheme: AI Code Audit

Labels to Render:
- AI: "Gemini CLI"
- Code: "Source"
- Result: "Bug Found"

Visual Details:
1. Core Concept: AI reviewing code for errors.
2. Metaphor: A robot detective examining code with a magnifying glass.
3. Action: Finding a bug.
4. Layout: Over-the-shoulder view.		## 9) AI活用：移行の“事故ポイント”を先に潰す🤖🛡️
50docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_01_safety_net.png./picture/firebase_abuse_prevention_ts_study_007_01_safety_net.pngTheme: Safety Net

Labels to Render:
- Top: "Enforcement"
- Net: "Metrics"
- Bottom: "User Accident"

Visual Details:
1. Core Concept: Metrics catching problems before they cause damage.
2. Metaphor: A trapeze artist (Enforcement) falling into a safety net (Metrics) above sharp spikes (Accidents).
3. Action: Falling safely.
4. Layout: Vertical composition.		## 1) まず超重要な前提：メトリクスは「強制ONの事故防止装置」🧯✨
51docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_02_console_nav.png./picture/firebase_abuse_prevention_ts_study_007_02_console_nav.pngTheme: Console Navigation

Labels to Render:
- Menu: "App Check"
- Sub: "Metrics"
- Product: "Firestore"

Visual Details:
1. Core Concept: Finding the metrics screen.
2. Metaphor: A simplified UI map with a "You Are Here" pin.
3. Action: Pointing to the Metrics tab.
4. Layout: UI mockup.		## 2) どこを見る？Firebase コンソールの App Check メトリクス画面👀
52docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_03_4_categories.png./picture/firebase_abuse_prevention_ts_study_007_03_4_categories.pngTheme: Four Metric Types

Labels to Render:
- 1: "Verified (OK)"
- 2: "Outdated (Old)"
- 3: "Unknown (Bad?)"
- 4: "Invalid (Fake)"

Visual Details:
1. Core Concept: Distinguishing traffic types.
2. Metaphor: Four buckets or bins with different symbols (Check, Clock, Question Mark, X).
3. Action: Sorting mail into bins.
4. Layout: Row of bins.		## 3) メトリクスの「4分類」を覚えよう（ここが心臓）🫀🧠
53docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_04_decision_guide.png./picture/firebase_abuse_prevention_ts_study_007_04_decision_guide.pngTheme: Decision Guide

Labels to Render:
- Condition: "Verified > 99%"
- Decision: "Enforce!"
- Else: "Wait"

Visual Details:
1. Core Concept: When to turn on enforcement.
2. Metaphor: A traffic light. Green light if Verified is high.
3. Action: Light changing to green.
4. Layout: Simple flowchart.		## 4) 「いつ強制ONできる？」判断の目安（公式のガイドライン）🧭
54docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_05_observation.png./picture/firebase_abuse_prevention_ts_study_007_05_observation.pngTheme: Generating Traffic

Labels to Render:
- User: "Action"
- App: "Request"
- Metrics: "Count Up"

Visual Details:
1. Core Concept: Creating traffic to populate metrics.
2. Metaphor: Pressing buttons on a control panel and seeing dials move.
3. Action: Pressing a button.
4. Layout: Interaction view.		## 5) 手を動かす：まずは“測る”用のリクエストを作る🧪👀
55docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_06_enforce_button.png./picture/firebase_abuse_prevention_ts_study_007_06_enforce_button.pngTheme: The Big Button

Labels to Render:
- Button: "Enforce"
- Warning: "Reject Unverified"
- Timer: "15 min"

Visual Details:
1. Core Concept: The final step of enforcement.
2. Metaphor: A protected red button (like a missile launch button) under a glass cover.
3. Action: Lifting the cover.
4. Layout: Close-up of button.		## 8) ここだけ先に知っておく：強制ONは“あとで”コンソールから3クリック🎛️
56docs/firebase_abuse_prevention_ts_study_007.mdfirebase_abuse_prevention_ts_study_007_07_antigravity.png./picture/firebase_abuse_prevention_ts_study_007_07_antigravity.pngTheme: Mission Control

Labels to Render:
- Screen: "Antigravity"
- Task: "Audit Metrics"
- AI: "Pilot"

Visual Details:
1. Core Concept: AI managing the monitoring task.
2. Metaphor: A futuristic cockpit or mission control screen with AI pilot.
3. Action: AI pointing at data.
4. Layout: Cockpit view.		## 9) AIで爆速：メトリクス監視を“作業化”しよう🤖🚀
57docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_01_two_shields.png./picture/firebase_abuse_prevention_ts_study_008_01_two_shields.pngTheme: Double Defense Layers

Labels to Render:
- Outer: "App Check (App)"
- Inner: "Rules (User)"
- Core: "Firestore"

Visual Details:
1. Core Concept: Two distinct layers of security.
2. Metaphor: A castle with an outer wall (App Check) and an inner keep (Rules) protecting the treasure (Firestore).
3. Action: Defending against different threats.
4. Layout: Concentric defense.		## 2) 役割分担を「一言で」覚える🧠✨
58docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_02_threats.png./picture/firebase_abuse_prevention_ts_study_008_02_threats.pngTheme: Firestore Threats

Labels to Render:
- Threat 1: "Mass Read"
- Threat 2: "Spam Write"
- Threat 3: "AI Abuse"

Visual Details:
1. Core Concept: Visualizing the risks.
2. Metaphor: Three monsters attacking a database icon.
3. Action: Attacking.
4. Layout: Three panels or cluster.		## 1) まず、何が怖いの？😱（Firestoreが狙われるパターン）
59docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_03_repo_pattern.png./picture/firebase_abuse_prevention_ts_study_008_03_repo_pattern.pngTheme: Centralized Access

Labels to Render:
- App: "Components"
- Funnel: "Repo"
- DB: "Firestore"

Visual Details:
1. Core Concept: All database access going through one point.
2. Metaphor: Multiple pipes feeding into a single large pipe (funnel) that connects to the tank (Firestore).
3. Action: Flow control.
4. Layout: Diagram.		## Step A：Firestoreアクセスを「窓口ファイル」に寄せる📦
60docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_04_lab_ui.png./picture/firebase_abuse_prevention_ts_study_008_04_lab_ui.pngTheme: Security Lab UI

Labels to Render:
- Title: "Security Lab"
- Btn 1: "Read"
- Btn 2: "Write"
- Log: "Result"

Visual Details:
1. Core Concept: A test interface for security.
2. Metaphor: A simple dashboard or control panel.
3. Action: User about to press a button.
4. Layout: UI mockup.		## Step B：「守り実験用」1画面を作る🧪🖥️
61docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_05_rules_logic.png./picture/firebase_abuse_prevention_ts_study_008_05_rules_logic.pngTheme: Rules Logic

Labels to Render:
- Input: "Request"
- Check: "Is Signed In?"
- Check: "Is Owner?"
- Output: "Allow/Deny"

Visual Details:
1. Core Concept: The decision process of security rules.
2. Metaphor: A gatekeeper checking credentials.
3. Action: Stamping "Approved" or "Denied".
4. Layout: Flowchart.		## 3) Firestore Rules を書く🧾（“誰が何できる”を固定する）
62docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_06_bypass.png./picture/firebase_abuse_prevention_ts_study_008_06_bypass.pngTheme: Admin SDK Bypass

Labels to Render:
- Wall: "Rules"
- User: "Client (Blocked)"
- Admin: "Server (Pass)"

Visual Details:
1. Core Concept: Admin SDK bypasses security rules.
2. Metaphor: A VIP entrance that bypasses the main security line.
3. Action: Admin walking through the VIP gate.
4. Layout: Comparison of two paths.		## 6) “サーバー側ライブラリで叩く”と、Rulesの守りをすり抜ける話（超重要）🚨
63docs/firebase_abuse_prevention_ts_study_008.mdfirebase_abuse_prevention_ts_study_008_07_ai_cost.png./picture/firebase_abuse_prevention_ts_study_008_07_ai_cost.pngTheme: AI Cost Control

Labels to Render:
- Input: "Requests"
- Filter: "App Check"
- Valve: "Rate Limit"
- Output: "Safe AI"

Visual Details:
1. Core Concept: Controlling flow to AI to prevent high costs.
2. Metaphor: A water pipe with a filter and a valve leading to a golden tank (AI).
3. Action: Regulating flow.
4. Layout: Flow diagram.		## 7) AIも絡めた“現実的な設計”🤖💸
64docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_01_storage_threats.png./picture/firebase_abuse_prevention_ts_study_009_01_storage_threats.pngTheme: Storage Threats

Labels to Render:
- Threat 1: "Large File"
- Threat 2: "Spam Upload"
- Threat 3: "Fake Ext"

Visual Details:
1. Core Concept: Risks to Cloud Storage.
2. Metaphor: A heavy weight (large file) breaking a shelf, and a trash can overflowing (spam).
3. Action: Overloading storage.
4. Layout: Disaster scene.		## 0) まず「なぜStorageが狙われるの？」😱💸
65docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_02_defense_layers.png./picture/firebase_abuse_prevention_ts_study_009_02_defense_layers.pngTheme: Storage Defense

Labels to Render:
- Layer 1: "App Check"
- Layer 2: "Auth"
- Layer 3: "Rules"

Visual Details:
1. Core Concept: Multiple security layers.
2. Metaphor: An onion or layered shield protecting a folder icon.
3. Action: Blocking arrows at different layers.
4. Layout: Layered cross-section.		## 1) 読む📖：守りのレイヤーを1枚絵で理解しよう🧠🗺️
66docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_03_upload_ui.png./picture/firebase_abuse_prevention_ts_study_009_03_upload_ui.pngTheme: Upload UI

Labels to Render:
- Step 1: "Pick File"
- Step 2: "Check Size"
- Step 3: "Upload"

Visual Details:
1. Core Concept: The user interaction flow.
2. Metaphor: A smartphone screen showing a file picker, a progress bar, and a success checkmark.
3. Action: Uploading.
4. Layout: UI Sequence.		## 2-2) React（TS）でアップロード + 進捗バー🚀
67docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_04_rules.png./picture/firebase_abuse_prevention_ts_study_009_04_rules.pngTheme: Rules Logic (Storage)

Labels to Render:
- Check: "Is Image?"
- Check: "Size < 2MB"
- Check: "Is Owner?"

Visual Details:
1. Core Concept: Validating file properties.
2. Metaphor: A scanner checking a package's weight and contents.
3. Action: Scanning.
4. Layout: Scanner view.		## 3) ここが本丸🧾：Storage Rules で “最低限の防波堤” を作る🛡️
68docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_05_enforcement.png./picture/firebase_abuse_prevention_ts_study_009_05_enforcement.pngTheme: Storage Enforcement

Labels to Render:
- Gate: "App Check"
- Action: "Enforce"
- Result: "Block Unverified"

Visual Details:
1. Core Concept: Turning on the gate for storage.
2. Metaphor: A padlock snapping shut on a cloud storage box.
3. Action: Locking.
4. Layout: Close-up of lock.		## 4) App Check を Cloud Storage に効かせる🧿📦
69docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_06_secure_download.png./picture/firebase_abuse_prevention_ts_study_009_06_secure_download.pngTheme: Secure Download

Labels to Render:
- Public: "URL (Shareable)"
- Private: "SDK (Blob)"
- Warning: "Don't Leak"

Visual Details:
1. Core Concept: The difference between a public URL and a direct SDK download.
2. Metaphor: A public billboard (URL) vs a private letter delivered by hand (SDK).
3. Action: Reading.
4. Layout: Comparison.		## 落とし穴A：getDownloadURL() を “アクセス制御” だと思う😇
70docs/firebase_abuse_prevention_ts_study_009.mdfirebase_abuse_prevention_ts_study_009_07_ai_alt.png./picture/firebase_abuse_prevention_ts_study_009_07_ai_alt.pngTheme: AI Alt Text Generation

Labels to Render:
- Input: "Image"
- Process: "AI Vision"
- Output: "Alt Text"

Visual Details:
1. Core Concept: AI analyzing an image to generate text.
2. Metaphor: A robot looking at a photo and typing on a typewriter.
3. Action: Typing.
4. Layout: Process flow.		## 7-1) 画像アップロード後に「説明文（alt）」をAIに作らせる📝🤖
71docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_01_defense_layers.png./picture/firebase_abuse_prevention_ts_study_010_01_defense_layers.pngTheme: Three Defense Layers

Labels to Render:
- Layer 1: "Auth (Who)"
- Layer 2: "App Check (What)"
- Core: "Callable (Action)"

Visual Details:
1. Core Concept: Three layers of security protecting the core function.
2. Metaphor: A castle keep (Callable) protected by an inner wall (App Check) and an outer moat/gate (Auth).
3. Action: Defending the keep.
4. Layout: Concentric or layered defense.		## 0) まずイメージを作ろう🧠🗺️
72docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_02_migration.png./picture/firebase_abuse_prevention_ts_study_010_02_migration.pngTheme: Moving Logic to Server

Labels to Render:
- Client: "Unsafe Logic"
- Move: "Migrate"
- Server: "Safe Callable"

Visual Details:
1. Core Concept: Moving sensitive code from client to server.
2. Metaphor: A moving truck transporting a box labeled "Logic" from a fragile house (Client) to a secure vault (Server).
3. Action: Transporting.
4. Layout: Left-to-right flow.		## 1) “守るべき処理”を Callable に寄せるコツ🧲✨
73docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_03_enforcement_mechanism.png./picture/firebase_abuse_prevention_ts_study_010_03_enforcement_mechanism.pngTheme: Enforcement Gate

Labels to Render:
- Request: "Token Missing"
- Gate: "enforceAppCheck: true"
- Action: "Reject"

Visual Details:
1. Core Concept: The enforceAppCheck setting acts as a strict gate.
2. Metaphor: A security guard (Gate) stopping a person without a badge (Request).
3. Action: Blocking access.
4. Layout: Gate interaction.		## 3) 実装（Node/TypeScript）：管理者用 Callable を1本作る🧑‍💼☎️
74docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_04_client_auto_token.png./picture/firebase_abuse_prevention_ts_study_010_04_client_auto_token.pngTheme: Automatic Token Attachment

Labels to Render:
- Code: "httpsCallable"
- SDK: "Auto-Attach"
- Packet: "Token + Data"

Visual Details:
1. Core Concept: The SDK automatically adds the token to the request.
2. Metaphor: A robot arm (SDK) stamping a package (Data) with a seal (Token) before shipping it.
3. Action: Stamping.
4. Layout: Process close-up.		## 4) React 側：呼び出すだけ（App Check は裏で勝手に付く）⚛️☎️
75docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_05_ai_protection.png./picture/firebase_abuse_prevention_ts_study_010_05_ai_protection.pngTheme: AI Fortress

Labels to Render:
- Guard 1: "App Check"
- Guard 2: "Auth (Admin)"
- Core: "AI Logic"

Visual Details:
1. Core Concept: protecting AI with multiple checks.
2. Metaphor: A futuristic AI core protected by two energy shields.
3. Action: Shields humming.
4. Layout: Central core with surrounding shields.		## 5) “AI整形”も Callable に寄せると強い🤖🧱
76docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_06_replay_teaser.png./picture/firebase_abuse_prevention_ts_study_010_06_replay_teaser.pngTheme: Anti-Replay Token

Labels to Render:
- Token: "One-Time Use"
- First: "OK"
- Second: "Blocked"

Visual Details:
1. Core Concept: A token that can only be used once.
2. Metaphor: A ticket that is torn upon entry. The second attempt with the torn ticket is rejected.
3. Action: Tearing the ticket.
4. Layout: Sequential view (Time 1 vs Time 2).		## 6) 予告：もっと強くするなら「リプレイ対策」♻️🚫
77docs/firebase_abuse_prevention_ts_study_010.mdfirebase_abuse_prevention_ts_study_010_07_ai_assist.png./picture/firebase_abuse_prevention_ts_study_010_07_ai_assist.pngTheme: AI Developer Assist

Labels to Render:
- Human: "Make it Secure"
- AI: "Generates Code"
- Result: "Secure Callable"

Visual Details:
1. Core Concept: AI helping to write secure code.
2. Metaphor: A developer shaking hands with a robot coder over a secure blueprint.
3. Action: Collaboration.
4. Layout: Side view.		## 7) Antigravity / Gemini で、この章を“爆速”に終わらせる🚀🤖
78docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_01_replay_concept.png./picture/firebase_abuse_prevention_ts_study_011_01_replay_concept.pngTheme: Replay Attack

Labels to Render:
- Attacker: "Stolen Token"
- Server: "API"
- Result: "Success x 100"

Visual Details:
1. Core Concept: A single token being used repeatedly.
2. Metaphor: An attacker using a photocopied ticket to enter a venue multiple times.
3. Action: Entering repeatedly.
4. Layout: Loop or multiple arrows.		## 0) まず「リプレイ」って何？😈📼
79docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_02_consume_mechanism.png./picture/firebase_abuse_prevention_ts_study_011_02_consume_mechanism.pngTheme: Token Consumption

Labels to Render:
- Client: "Limited Token"
- Server: "Verify & Consume"
- Reuse: "Denied"

Visual Details:
1. Core Concept: The token is destroyed upon use.
2. Metaphor: A ticket being punched or torn by a conductor. The torn ticket cannot be used again.
3. Action: Punching/Tearing.
4. Layout: Sequential steps.		## 1) Replay protection（β）の全体像🧠🧩
80docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_03_latency_tradeoff.png./picture/firebase_abuse_prevention_ts_study_011_03_latency_tradeoff.pngTheme: Security vs Speed

Labels to Render:
- Normal: "Fast (1 Trip)"
- Replay Protect: "Slower (2 Trips)"
- Cost: "Latency"

Visual Details:
1. Core Concept: Replay protection adds network overhead.
2. Metaphor: A direct flight (Normal) vs a flight with a layover/security check (Replay Protect).
3. Action: Comparison of travel time.
4. Layout: Two parallel paths.		## ✅ ③ 速度コストがある（追加の往復が増える）🐢
81docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_04_target_selection.png./picture/firebase_abuse_prevention_ts_study_011_04_target_selection.pngTheme: Selecting Targets

Labels to Render:
- High Risk: "AI / Admin (ON)"
- High Freq: "Chat / Like (OFF)"
- Goal: "Balance"

Visual Details:
1. Core Concept: Choosing where to apply protection.
2. Metaphor: Putting armor only on vital organs (Heart/Head) rather than the whole body to stay agile.
3. Action: Equipping armor.
4. Layout: Anatomy or list comparison.		## 3) このミニアプリだと「どこに入れる？」🎯🤖
82docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_05_server_code.png./picture/firebase_abuse_prevention_ts_study_011_05_server_code.pngTheme: Server Configuration

Labels to Render:
- File: "functions/index.ts"
- Flag: "consumeAppCheckToken: true"
- Effect: "One-Time Use"

Visual Details:
1. Core Concept: The code flag that enables consumption.
2. Metaphor: A switch or checkbox in the code being toggled ON.
3. Action: Toggling.
4. Layout: Code snippet focus.		## ✅ 4-1. Functions側：consumeAppCheckToken: true を付ける
83docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_06_client_code.png./picture/firebase_abuse_prevention_ts_study_011_06_client_code.pngTheme: Client Request

Labels to Render:
- Client: "Request"
- Option: "limitedUseAppCheckTokens: true"
- Token: "Special Token"

Visual Details:
1. Core Concept: Requesting a special one-time token.
2. Metaphor: A client asking for a "Gold Ticket" instead of a regular one.
3. Action: Handing over the special ticket.
4. Layout: Interaction view.		## ✅ 4-3. React側：Callable呼び出しで “limited-use” を要求する⚛️🧾
84docs/firebase_abuse_prevention_ts_study_011.mdfirebase_abuse_prevention_ts_study_011_07_full_defense.png./picture/firebase_abuse_prevention_ts_study_011_07_full_defense.pngTheme: Complete Defense

Labels to Render:
- Shield 1: "Replay Protect"
- Shield 2: "Auth"
- Shield 3: "Rate Limit"

Visual Details:
1. Core Concept: Combining multiple defenses for maximum security.
2. Metaphor: A warrior with a shield (Replay), armor (Auth), and a force field (Rate Limit).
3. Action: Standing strong.
4. Layout: Layered character equipment.		## 6) “AI機能”と絡めた現実の防御線🤖🛡️
85docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_01_ai_risk.png./picture/firebase_abuse_prevention_ts_study_012_01_ai_risk.pngTheme: AI Cost Risk

Labels to Render:
- Bot: "Spam Request"
- API: "Expensive Call"
- Wallet: "Burning"

Visual Details:
1. Core Concept: AI calls are expensive and vulnerable to bots.
2. Metaphor: A bot pouring fuel (requests) into a fire that is burning money (wallet).
3. Action: Burning.
4. Layout: Cause and effect.		## 1) まず腹落ち：AIは “お金が燃えやすいAPI” 🔥💸
86docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_02_proxy_verification.png./picture/firebase_abuse_prevention_ts_study_012_02_proxy_verification.pngTheme: AI Proxy Gate

Labels to Render:
- App: "Request + Token"
- Proxy: "AI Logic Gate"
- AI: "Gemini"

Visual Details:
1. Core Concept: Firebase AI Logic acts as a secure gate.
2. Metaphor: A secure checkpoint (Proxy) between the public road (App) and the VIP lounge (AI).
3. Action: Checking the token.
4. Layout: Flow diagram.		## 2) Firebase AI Logic で “守れるAI呼び出し” にする🛡️🤖
87docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_03_defense_tools.png./picture/firebase_abuse_prevention_ts_study_012_03_defense_tools.pngTheme: Three Tools

Labels to Render:
- 1: "App Check (ID)"
- 2: "Limited Token (Short TTL)"
- 3: "Quota (Rate Limit)"

Visual Details:
1. Core Concept: The three pillars of AI defense.
2. Metaphor: A toolkit containing a Badge (App Check), a Stopwatch (Limited Token), and a Traffic Light (Quota).
3. Action: Displaying tools.
4. Layout: Triptych or group.		## 3) 守りの基本セットは3つ🧰🧿
88docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_04_client_code.png./picture/firebase_abuse_prevention_ts_study_012_04_client_code.pngTheme: Secure Client Code

Labels to Render:
- Func: "getAI"
- Option: "useLimitedUseAppCheckTokens"
- Value: "True"

Visual Details:
1. Core Concept: Enabling limited use tokens in code.
2. Metaphor: A developer checking a box labeled "High Security" on a control panel.
3. Action: Activating.
4. Layout: Code focus.		## 4-1. まずは最小で “AI整形” 関数を作る🛠️
89docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_05_verification.png./picture/firebase_abuse_prevention_ts_study_012_05_verification.pngTheme: Verification Process

Labels to Render:
- Step 1: "Monitor Mode"
- Step 2: "Test OK"
- Step 3: "Enforce Mode"
- Step 4: "Attack Blocked"

Visual Details:
1. Core Concept: The steps to verify security.
2. Metaphor: A scientist testing a shield. First with low power, then full power, then throwing a rock at it.
3. Action: Testing.
4. Layout: Sequence.		## 5) ON/OFF比較で “守れてる感” を体感👀🧿
90docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_06_quota.png./picture/firebase_abuse_prevention_ts_study_012_06_quota.pngTheme: Rate Limiting

Labels to Render:
- Limit: "100 RPM"
- Traffic: "Requests"
- Error: "429 Quota Exceeded"

Visual Details:
1. Core Concept: Blocking traffic that exceeds the limit.
2. Metaphor: A turnstile that locks after a certain number of spins. Or a bucket overflowing.
3. Action: Blocking excess.
4. Layout: Traffic flow.		## 6) レート制限（Quota）で “破産しない” を作る💸🚦
91docs/firebase_abuse_prevention_ts_study_012.mdfirebase_abuse_prevention_ts_study_012_07_structured_output.png./picture/firebase_abuse_prevention_ts_study_012_07_structured_output.pngTheme: Structured JSON

Labels to Render:
- Input: "Messy Text"
- AI Schema: "JSON Structure"
- Output: "Clean Data"

Visual Details:
1. Core Concept: AI converting unstructured text to structured JSON.
2. Metaphor: A machine taking a pile of scrap metal and outputting perfectly formed gears.
3. Action: Transformation.
4. Layout: Process flow.		## 7) “構造化出力(JSON)” を使うと事故が減る🧾🤖
92docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_01_debug_workflow.png./picture/firebase_abuse_prevention_ts_study_013_01_debug_workflow.pngTheme: Debug Provider Flow

Labels to Render:
- Localhost: "Debug Token"
- Firebase: "Console (Allowlist)"
- Result: "Access Granted"

Visual Details:
1. Core Concept: The handshake between local dev and Firebase Console.
2. Metaphor: A developer showing a special VIP pass (Debug Token) to the bouncer (Firebase) who checks a guest list (Allowlist).
3. Action: Checking the list.
4. Layout: Flow diagram.		## 1) まず全体像を1枚で🧠🗺️
93docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_02_code_setup.png./picture/firebase_abuse_prevention_ts_study_013_02_code_setup.pngTheme: Conditional Logic

Labels to Render:
- Env: "DEV"
- Action: "Set Debug Token"
- Init: "App Check"

Visual Details:
1. Core Concept: Enabling debug mode only in development.
2. Metaphor: A railway switch. If the sign says "DEV", the train goes to the "Debug" track. If "PROD", it goes to "reCAPTCHA".
3. Action: Switching tracks.
4. Layout: Branching path.		## 2-1. App Check 初期化コードに「ローカル時だけ」デバッグONを足す🧿
94docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_03_browser_console.png./picture/firebase_abuse_prevention_ts_study_013_03_browser_console.pngTheme: Token Extraction

Labels to Render:
- Browser: "DevTools"
- Console: "AppCheck debug token"
- Token: "uuid-string"

Visual Details:
1. Core Concept: Finding the token in the browser console.
2. Metaphor: A magnifying glass highlighting a specific line of text in a code terminal.
3. Action: Copying.
4. Layout: Screen close-up.		## 2-2. ローカル起動して、ブラウザのConsoleで「デバッグトークン」を拾う👀🧪
95docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_04_console_registration.png./picture/firebase_abuse_prevention_ts_study_013_04_console_registration.pngTheme: Whitelisting

Labels to Render:
- Menu: "Manage debug tokens"
- Input: "Paste Token"
- Action: "Save"

Visual Details:
1. Core Concept: Registering the token in Firebase Console.
2. Metaphor: Writing a name on the VIP guest list.
3. Action: Writing/Saving.
4. Layout: UI mockup.		## 2-3. Firebase Console に登録（allowlist）する🔐🧿
96docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_05_verification.png./picture/firebase_abuse_prevention_ts_study_013_05_verification.pngTheme: Service Check

Labels to Render:
- Firestore: "OK"
- Storage: "OK"
- Functions: "OK"
- AI: "OK"

Visual Details:
1. Core Concept: Verifying access to all services.
2. Metaphor: A dashboard with four green lights turning on one by one.
3. Action: All systems go.
4. Layout: Dashboard view.		## 3) ここまで出来たら動作チェック🎯（Firestore/Storage/Functions/AI）
97docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_06_best_practices.png./picture/firebase_abuse_prevention_ts_study_013_06_best_practices.pngTheme: Security Rules

Labels to Render:
- Git: "No Token!"
- Leak: "Revoke!"
- Scope: "Local Only"

Visual Details:
1. Core Concept: Safety rules for debug tokens.
2. Metaphor: Warning signs. A "No Entry" sign on a Git logo. A "Reset" button for leaks.
3. Action: Enforcing rules.
4. Layout: Warning icons.		## 4) Debug Provider の“運用ルール”🔐（ミスると事故るやつ）
98docs/firebase_abuse_prevention_ts_study_013.mdfirebase_abuse_prevention_ts_study_013_07_ai_troubleshooting.png./picture/firebase_abuse_prevention_ts_study_013_07_ai_troubleshooting.pngTheme: AI Debugging

Labels to Render:
- Problem: "401 Error"
- AI: "Check Init Order"
- Solution: "Fix Code"

Visual Details:
1. Core Concept: AI diagnosing common setup errors.
2. Metaphor: A robot mechanic looking at an engine (code) and pointing to a loose wire (initialization order).
3. Action: Fixing.
4. Layout: Diagnostic view.		## 6) もっとラクする：Antigravity / Gemini CLI で“詰まり潰し”🤖🧰
99docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_01_ci_failure.png./picture/firebase_abuse_prevention_ts_study_014_01_ci_failure.pngTheme: CI vs App Check

Labels to Render:
- CI Runner: "No Browser / No Human"
- App Check: "Who are you?"
- Result: "Blocked (403)"

Visual Details:
1. Core Concept: CI cannot prove humanity like a real user.
2. Metaphor: A robot (CI) trying to solve a CAPTCHA and failing.
3. Action: Being blocked.
4. Layout: Problem illustration.		## まず結論：CIでは“Debug Provider + デバッグトークン”で通す🧪🧿
100docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_02_secrets.png./picture/firebase_abuse_prevention_ts_study_014_02_secrets.pngTheme: GitHub Secrets

Labels to Render:
- Repo: "Code (Public/Private)"
- Secrets: "Debug Token (Hidden)"
- Action: "Inject at Build"

Visual Details:
1. Core Concept: Storing tokens securely.
2. Metaphor: A safe box (Secrets) separate from the bookshelf (Repo). The builder takes the key from the safe only when needed.
3. Action: Unlocking the safe.
4. Layout: Secure storage.		## 2) GitHub Secrets に入れる🔐（絶対にリポジトリへコミットしない）
101docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_03_dynamic_import.png./picture/firebase_abuse_prevention_ts_study_014_03_dynamic_import.pngTheme: Order of Operations

Labels to Render:
- Step 1: "Set Debug Token"
- Step 2: "Import App Check"
- Step 3: "Init SDK"

Visual Details:
1. Core Concept: Setting the token global variable before the SDK loads.
2. Metaphor: Putting on a VIP badge (Token) before walking through the door (Import).
3. Action: Putting on badge.
4. Layout: Sequential steps.		## 3) フロント側：CIだけ Debug Provider をONにする（重要：読み込み順）⚛️🧿
102docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_04_workflow.png./picture/firebase_abuse_prevention_ts_study_014_04_workflow.pngTheme: CI Pipeline

Labels to Render:
- 1: "Checkout"
- 2: "Install (Node 24)"
- 3: "Build + Token"
- 4: "E2E Test"

Visual Details:
1. Core Concept: The steps of the CI job.
2. Metaphor: A factory conveyor belt. Parts are assembled, painted (Token injected), and then inspected (Tested).
3. Action: Moving along the belt.
4. Layout: Pipeline diagram.		## 4) CIワークフロー：Node 24 LTSでビルド→プレビュー→E2E🧪
103docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_05_e2e_scenario.png./picture/firebase_abuse_prevention_ts_study_014_05_e2e_scenario.pngTheme: Smoke Test

Labels to Render:
- Browser: "Headless"
- Action: "Click AI Button"
- Check: "Result Visible?"

Visual Details:
1. Core Concept: A simple test to verify the app works.
2. Metaphor: A robot finger pressing a button and checking for a green light.
3. Action: Testing.
4. Layout: Test execution.		## 5) Playwright側：App Checkが効いてる最低限の1本を作る🧪🧿🤖
104docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_06_ai_strategy.png./picture/firebase_abuse_prevention_ts_study_014_06_ai_strategy.pngTheme: PR vs Nightly

Labels to Render:
- PR: "Mock AI (Fast/Free)"
- Nightly: "Real AI (Deep/Cost)"
- Goal: "Save Money"

Visual Details:
1. Core Concept: Using mocks for frequent tests and real AI for infrequent ones.
2. Metaphor: Using a crash test dummy (Mock) for routine checks vs a real driver (Real AI) for the final run.
3. Action: Comparison.
4. Layout: Split view.		## おすすめ方針：PRでは“軽い確認”、重いのは夜間 or mainだけ🌙
105docs/firebase_abuse_prevention_ts_study_014.mdfirebase_abuse_prevention_ts_study_014_07_pitfalls.png./picture/firebase_abuse_prevention_ts_study_014_07_pitfalls.pngTheme: Security Leaks

Labels to Render:
- Log: "Console.log(Token)"
- Artifact: "Upload dist/"
- Risk: "Leak!"

Visual Details:
1. Core Concept: Ways tokens can leak in CI.
2. Metaphor: Water leaking from a pipe labeled "Logs" or a box labeled "Artifacts".
3. Action: Leaking.
4. Layout: Warning illustration.		## 落とし穴まとめ（ここだけ読んでも価値あるやつ）🕳️😇
106docs/firebase_abuse_prevention_ts_study_015.mdfirebase_abuse_prevention_ts_study_015_01_failure_types.png./picture/firebase_abuse_prevention_ts_study_015_01_failure_types.pngTheme: Three Failure Types

Labels to Render:
- Type A: "App Check (Token)"
- Type B: "Backend (Reject)"
- Type C: "AI (Rate Limit)"

Visual Details:
1. Core Concept: Classifying errors into three buckets.
2. Metaphor: Three different warning signs or roadblocks. 1. Broken Token (Type A). 2. Brick Wall (Type B). 3. Stopwatch/Hourglass (Type C).
3. Action: Sorting errors.
4. Layout: Three panels.		## 2) “通らない”は3種類に分けると勝てる🥊🧠
107docs/firebase_abuse_prevention_ts_study_015.mdfirebase_abuse_prevention_ts_study_015_02_ux_essentials.png./picture/firebase_abuse_prevention_ts_study_015_02_ux_essentials.pngTheme: UX Essentials

Labels to Render:
- 1: "What Happened?"
- 2: "What to do?"
- 3: "Action Button"

Visual Details:
1. Core Concept: The anatomy of a good error message.
2. Metaphor: A building block or recipe card with 3 distinct sections.
3. Action: Assembling the message.
4. Layout: Stacked blocks.		## 3) UXの鉄則：エラーは「次の一手」までセット🧭🙂
108docs/firebase_abuse_prevention_ts_study_015.mdfirebase_abuse_prevention_ts_study_015_03_normalize_flow.png./picture/firebase_abuse_prevention_ts_study_015_03_normalize_flow.pngTheme: Error Normalization Flow

Labels to Render:
- Input: "Raw Error (Messy)"
- Process: "normalizeError"
- Output: "UI Object (Clean)"

Visual Details:
1. Core Concept: Converting messy error data into a structured UI object.
2. Metaphor: A recycling machine taking jagged scrap metal and outputting smooth, uniform bricks.
3. Action: Processing.
4. Layout: Left-to-right flow.		## 4-1. エラー分類（normalize）を作る🗂️
109docs/firebase_abuse_prevention_ts_study_015.mdfirebase_abuse_prevention_ts_study_015_04_guarded_wrapper.png./picture/firebase_abuse_prevention_ts_study_015_04_guarded_wrapper.pngTheme: Guarded Action Wrapper

Labels to Render:
- Wrapper: "guardedAction"
- Inside: "API Call"
- Shield: "Error Handling"

Visual Details:
1. Core Concept: Wrapping risky code in a safety layer.
2. Metaphor: A bubble or force field wrapping a fragile object (API Call).
3. Action: Protecting.
4. Layout: Central composition.		## 4-2. “守られたアクション”ラッパを作る🛡️🔁
110docs/firebase_abuse_prevention_ts_study_015.mdfirebase_abuse_prevention_ts_study_015_05_ai_error_distinction.png./picture/firebase_abuse_prevention_ts_study_015_05_ai_error_distinction.pngTheme: AI Error Distinction

Labels to Render:
- App Check: "Block (Stop)"
- Rate Limit: "Wait (Pause)"
- User: "Reaction"

Visual Details:
1. Core Concept: Different reactions for different AI errors.
2. Metaphor: Traffic signals. Red Light (App Check) vs Yellow Blinking Light (Rate Limit).
3. Action: Signal changing.
4. Layout: Comparison.		## 6) AI機能は「App Check失敗」と「回数制限」を別扱いにする🤖🧿⏳
111docs/firebase_abuse_prevention_ts_study_015.mdfirebase_abuse_prevention_ts_study_015_06_testing_scenarios.png./picture/firebase_abuse_prevention_ts_study_015_06_testing_scenarios.pngTheme: Testing Scenarios

Labels to Render:
- Test 1: "No Init"
- Test 2: "Force Reject"
- Test 3: "Spam AI"

Visual Details:
1. Core Concept: Stress testing the UI.
2. Metaphor: A crash test dummy going through 3 different courses (missing part, blocked wall, traffic jam).
3. Action: Testing.
4. Layout: Three paths.		## 8) 手を動かす：失敗を“わざと起こして”UXを確認👀🧪
112docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_01_enforcement_switch.png./picture/firebase_abuse_prevention_ts_study_016_01_enforcement_switch.pngTheme: Enforcement Switch

Labels to Render:
- Switch: "Enforce"
- Action: "Click"
- Result: "Block Unverified"

Visual Details:
1. Core Concept: Flipping the switch to block bad traffic.
2. Metaphor: A big toggle switch turning from gray to red. A gate closing.
3. Action: Switching.
4. Layout: Close-up.		## 1) 「強制ON」するとどうなる？
113docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_02_metrics_buckets.png./picture/firebase_abuse_prevention_ts_study_016_02_metrics_buckets.pngTheme: Metrics Buckets

Labels to Render:
- Green: "Verified (Safe)"
- Yellow: "Outdated (Wait)"
- Gray: "Unknown (?)"
- Red: "Invalid (Bad)"

Visual Details:
1. Core Concept: Sorting traffic into 4 categories.
2. Metaphor: Four bins/buckets.
3. Action: Sorting.
4. Layout: Four distinct containers.		## 2) 強制ONの前に見るべき「メトリクス4分類」📊
114docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_03_phased_rollout.png./picture/firebase_abuse_prevention_ts_study_016_03_phased_rollout.pngTheme: Phased Rollout

Labels to Render:
- Step 1: "Observe"
- Step 2: "Firestore"
- Step 3: "Storage"
- Step 4: "AI Logic"

Visual Details:
1. Core Concept: Sequential activation.
2. Metaphor: A staircase or dominoes falling in order.
3. Action: Climbing/Progressing.
4. Layout: Stairs or timeline.		## 手を動かす🛠️：段階的に強制ONする“事故らない手順”🧯
115docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_04_firestore_switch.png./picture/firebase_abuse_prevention_ts_study_016_04_firestore_switch.pngTheme: Firestore Switch

Labels to Render:
- Service: "Firestore"
- Button: "Enforce"
- Wait: "15 min"

Visual Details:
1. Core Concept: The specific action for Firestore.
2. Metaphor: A control panel for a database vault.
3. Action: Pressing the button.
4. Layout: UI focus.		## Step 2：Firestore を強制ON（1つ目の本番スイッチ）🗃️🧿
116docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_05_ai_logic_gate.png./picture/firebase_abuse_prevention_ts_study_016_05_ai_logic_gate.pngTheme: AI Logic Gate

Labels to Render:
- Gate: "App Check"
- Proxy: "AI Logic"
- Core: "AI Model"

Visual Details:
1. Core Concept: AI Logic acting as a shield for the model.
2. Metaphor: A guard dog (App Check) in front of a gate (AI Logic) protecting the treasure (AI Model).
3. Action: Guarding.
4. Layout: Layered defense.		## Step 4：Firebase AI Logic を強制ON（コスト防衛ライン🤖💸）
117docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_06_rollback.png./picture/firebase_abuse_prevention_ts_study_016_06_rollback.pngTheme: Rollback Action

Labels to Render:
- Button: "Unenforce"
- Action: "Emergency Stop"
- Result: "Open Gate"

Visual Details:
1. Core Concept: Reverting the enforcement in an emergency.
2. Metaphor: Pulling a fire alarm handle or hitting a big "STOP" button.
3. Action: Emergency release.
4. Layout: High urgency.		4. 緊急ロールバック🧯
118docs/firebase_abuse_prevention_ts_study_016.mdfirebase_abuse_prevention_ts_study_016_07_mcp_arch.png./picture/firebase_abuse_prevention_ts_study_016_07_mcp_arch.pngTheme: MCP Architecture

Labels to Render:
- User: "Gemini CLI"
- Server: "Firebase MCP"
- Tool: "Antigravity"

Visual Details:
1. Core Concept: Integration of AI tools.
2. Metaphor: Connecting plugs or modules.
3. Action: Integration.
4. Layout: Network diagram.		## AI活用🤖：Antigravity / Gemini CLI で“手順書作り”を爆速にする🚀
119docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_01_language_tree.png./picture/firebase_abuse_prevention_ts_study_017_01_language_tree.pngTheme: Language Decision Tree

Labels to Render:
- Start: "Select Language"
- Node: "Standard (Safe)"
- Python: "Preview (Limited)"
- .NET: "Cloud Run (Portable)"

Visual Details:
1. Core Concept: A decision path for choosing a language.
2. Metaphor: A fork in the road with 3 paths. The Node path is wide and paved. Python is a trail. .NET leads to a different building (Cloud Run).
3. Action: Choosing a path.
4. Layout: Tree diagram.		## 1) まず結論：初心者が迷ったらこう！🧭
120docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_02_node_timeline.png./picture/firebase_abuse_prevention_ts_study_017_02_node_timeline.pngTheme: Node Version Timeline

Labels to Render:
- v18: "Deprecated (Stop)"
- v20: "End Soon (Caution)"
- v22: "Current (Go)"
- v24: "Next (Beta)"

Visual Details:
1. Core Concept: The lifecycle of Node versions.
2. Metaphor: A timeline with traffic lights. Red (18), Yellow (20), Green (22).
3. Action: Time progressing.
4. Layout: Horizontal timeline.		## 「Node 20 って今から選んでいいの？」問題😇
121docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_03_python_limits.png./picture/firebase_abuse_prevention_ts_study_017_03_python_limits.pngTheme: Python Limitations

Labels to Render:
- Logic: "OK"
- App Check: "Preview"
- Replay: "No Support"

Visual Details:
1. Core Concept: Highlighting what is missing in Python support.
2. Metaphor: A puzzle with a missing piece labeled "Replay Protection".
3. Action: Assembling puzzle.
4. Layout: Feature list.		## Python（Firebase Functions）
122docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_04_genkit_ecosystem.png./picture/firebase_abuse_prevention_ts_study_017_04_genkit_ecosystem.pngTheme: Genkit Ecosystem

Labels to Render:
- Node: "Full Support"
- Python: "Partial / No Deploy"
- Core: "Genkit"

Visual Details:
1. Core Concept: Node is the first-class citizen for Genkit on Firebase.
2. Metaphor: A strong bridge (Node) vs a rope bridge (Python) connecting to the Genkit island.
3. Action: Connecting.
4. Layout: Comparison.		## “AI系（Genkit）を Functions に載せたい”なら…
123docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_05_runtime_vs_sdk.png./picture/firebase_abuse_prevention_ts_study_017_05_runtime_vs_sdk.pngTheme: Runtime vs SDK

Labels to Render:
- Runtime: "Engine (Node 22)"
- SDK: "Tools (firebase-functions)"
- App: "Your Code"

Visual Details:
1. Core Concept: Distinguishing the execution environment from the libraries.
2. Metaphor: A car engine (Runtime) vs the dashboard/controls (SDK).
3. Action: Driving.
4. Layout: Layered diagram.		## 3) “読む”パート：バージョン迷子の正体🧠🌀
124docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_06_json_check.png./picture/firebase_abuse_prevention_ts_study_017_06_json_check.pngTheme: JSON Config Check

Labels to Render:
- File: "package.json"
- Field: "engines"
- Value: "node: 22"

Visual Details:
1. Core Concept: Checking the configuration file.
2. Metaphor: A magnifying glass focusing on the specific lines in a JSON file.
3. Action: Inspecting.
4. Layout: Code focus.		## ステップA：Node/TS（王道）で runtime を固定する✅
125docs/firebase_abuse_prevention_ts_study_017.mdfirebase_abuse_prevention_ts_study_017_07_mcp_scanner.png./picture/firebase_abuse_prevention_ts_study_017_07_mcp_scanner.pngTheme: MCP Scanner

Labels to Render:
- Scanner: "MCP Server"
- Target: "Repo"
- Result: "Node 18 Found!"

Visual Details:
1. Core Concept: AI tools scanning the code for outdated versions.
2. Metaphor: A robot scanning a barcode or document stack and flagging an issue.
3. Action: Scanning.
4. Layout: Diagnostic view.		## 5) 「AI導入済み」前提の時短ルート：Antigravity / Gemini CLI で“バージョン確認”を自動化🤖⚡
126docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_01_backend_arch.png./picture/firebase_abuse_prevention_ts_study_018_01_backend_arch.pngTheme: Custom Backend Architecture

Labels to Render:
- Client: "React App"
- Header: "X-Firebase-AppCheck"
- Backend: "Express / Cloud Run"
- Verifier: "Admin SDK"

Visual Details:
1. Core Concept: The journey of the App Check token to a custom backend.
2. Metaphor: A courier delivering a package with a secure seal (Token) to a warehouse (Backend) where a scanner (Admin SDK) checks it.
3. Action: Delivering and Scanning.
4. Layout: Flow diagram.		## しくみ（超ざっくり図）🗺️
127docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_02_header_vs_url.png./picture/firebase_abuse_prevention_ts_study_018_02_header_vs_url.pngTheme: Header vs URL

Labels to Render:
- Header: "Safe (Encrypted)"
- URL: "Unsafe (Logged)"
- Token: "Secret"

Visual Details:
1. Core Concept: Where to place the token safely.
2. Metaphor: A secure armored envelope (Header) vs a clear plastic bag (URL).
3. Action: Comparison.
4. Layout: Side-by-side.		## 1) フロント：ヘッダに載せる（URLに埋めない！）🚫🔗
128docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_03_react_header.png./picture/firebase_abuse_prevention_ts_study_018_03_react_header.pngTheme: React Header Code

Labels to Render:
- Func: "fetch()"
- Header: "X-Firebase-AppCheck"
- Value: "token"

Visual Details:
1. Core Concept: Adding the token to the request headers.
2. Metaphor: Stamping a document with an official seal before mailing it.
3. Action: Stamping.
4. Layout: Code concept.		## 手を動かす（React側）：トークンを付けて自前APIを叩く⚛️📮
129docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_04_middleware_gate.png./picture/firebase_abuse_prevention_ts_study_018_04_middleware_gate.pngTheme: Middleware Gate

Labels to Render:
- Req: "Incoming Request"
- Gate: "requireAppCheck"
- Check: "verifyToken()"
- Pass: "next()"

Visual Details:
1. Core Concept: Middleware filtering requests.
2. Metaphor: A security checkpoint. Passengers (Requests) show their ID (Token). If valid, the gate opens (next).
3. Action: Checking ID.
4. Layout: Flowchart.		## 手を動かす（Node/Express側）：ミドルウェアで検証する🧰🛡️
130docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_05_dual_keys.png./picture/firebase_abuse_prevention_ts_study_018_05_dual_keys.pngTheme: Dual Keys

Labels to Render:
- Key 1: "App Check (Device)"
- Key 2: "Auth (User)"
- Lock: "Secure API"

Visual Details:
1. Core Concept: Requiring both App identity and User identity.
2. Metaphor: A vault with two keyholes requiring two different keys to open.
3. Action: Unlocking with two keys.
4. Layout: Close-up of lock.		## さらに強く：Authも一緒に検証して「誰が叩いたか」まで確定🙋‍♂️🔐
131docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_06_consume_token.png./picture/firebase_abuse_prevention_ts_study_018_06_consume_token.pngTheme: Consume Token

Labels to Render:
- Token: "Limited Use"
- Server: "verify({ consume: true })"
- Result: "Burned"

Visual Details:
1. Core Concept: The token is used up and cannot be used again.
2. Metaphor: A ticket getting punched or a scroll burning up after reading.
3. Action: Consuming/Burning.
4. Layout: Process flow.		## 超重要APIだけ：リプレイ対策（使い回し攻撃）を潰す♻️🚫
132docs/firebase_abuse_prevention_ts_study_018.mdfirebase_abuse_prevention_ts_study_018_07_jwt_check.png./picture/firebase_abuse_prevention_ts_study_018_07_jwt_check.pngTheme: JWT Manual Check

Labels to Render:
- Input: "JWT String"
- Key: "JWKS (Public Key)"
- Check: "Signature / Exp / Aud"
- Output: "Valid / Invalid"

Visual Details:
1. Core Concept: Manually verifying the token structure and signature.
2. Metaphor: A detective examining a document with a magnifying glass and comparing it to a reference book (JWKS).
3. Action: verifying.
4. Layout: Analysis desk.		## ＋発展：.NET（公式Admin SDKが無い言語）で検証したい場合🧩🟣
133docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_01_ai_tools.png./picture/firebase_abuse_prevention_ts_study_019_01_ai_tools.pngTheme: AI Tools Triad

Labels to Render:
- Antigravity: "Agent IDE (Plan/Code)"
- Gemini CLI: "Terminal (Audit)"
- Studio: "Browser (Env)"

Visual Details:
1. Core Concept: The three AI tools and their roles.
2. Metaphor: A tool belt with 3 distinct tools. A multi-tool (Antigravity), a flashlight (Gemini CLI), and a workbench (Studio).
3. Action: Displaying tools.
4. Layout: Triptych.		## まず“AIの使い分け”だけ覚える 🧠🧰
134docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_02_ai_protection.png./picture/firebase_abuse_prevention_ts_study_019_02_ai_protection.pngTheme: AI Logic Protection

Labels to Render:
- Gate: "App Check"
- Valve: "Rate Limit (100 RPM)"
- Core: "AI Model"

Visual Details:
1. Core Concept: Dual layer protection for AI.
2. Metaphor: A secure facility. The outer gate (App Check) checks IDs. The inner turnstile (Rate Limit) controls flow speed.
3. Action: Filtering and regulating.
4. Layout: Layered defense.		## 2) 生成AIは“回数制限”が超重要 💸
135docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_03_model_retire.png./picture/firebase_abuse_prevention_ts_study_019_03_model_retire.pngTheme: Model Retirement

Labels to Render:
- Old: "Gemini 2.0 Flash"
- Date: "2026-03-31 (Retire)"
- New: "gemini-2.5-flash-lite"

Visual Details:
1. Core Concept: Replacing an old model before it expires.
2. Metaphor: A calendar with a circled date. An old battery being swapped for a new one.
3. Action: Swapping/Upgrading.
4. Layout: Timeline or swap.		## 3) モデルのretireに注意（これ超やりがち）⚠️
136docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_04_runtime_compat.png./picture/firebase_abuse_prevention_ts_study_019_04_runtime_compat.pngTheme: Runtime Compatibility

Labels to Render:
- Node 18: "Deprecated"
- Node 20/22: "Supported (Safe)"
- Node 24: "Active LTS (Verify)"

Visual Details:
1. Core Concept: Choosing the right Node version.
2. Metaphor: Three doors. One is boarded up (18). One is wide open and lit (20/22). One is new and shiny but has a "Check First" sign (24).
3. Action: Choosing a door.
4. Layout: Comparison.		## 4) Functionsのランタイムの現実（地味に詰まる）🧱
137docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_05_gemini_audit.png./picture/firebase_abuse_prevention_ts_study_019_05_gemini_audit.pngTheme: Gemini CLI Audit

Labels to Render:
- Input: "Repo Code"
- Tool: "gemini audit"
- Output: "Issues Found"

Visual Details:
1. Core Concept: Scanning code for vulnerabilities.
2. Metaphor: A terminal screen with a radar sweep animation detecting bugs.
3. Action: Scanning.
4. Layout: Terminal view.		## Step 1：Gemini CLIで“守り監査”を秒速で回す 💻🔎
138docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_06_antigravity_mission.png./picture/firebase_abuse_prevention_ts_study_019_06_antigravity_mission.pngTheme: Antigravity Mission

Labels to Render:
- Mission: "Secure App"
- Agent 1: "Plan"
- Agent 2: "Code"
- Agent 3: "Verify"

Visual Details:
1. Core Concept: Multiple agents working on a mission.
2. Metaphor: A mission control center with different screens or robots handling different tasks.
3. Action: Collaborating.
4. Layout: Network or hierarchy.		## Step 2：Antigravityで“守り実装ミッション”を組む 📋🤖🌐
139docs/firebase_abuse_prevention_ts_study_019.mdfirebase_abuse_prevention_ts_study_019_07_studio_env.png./picture/firebase_abuse_prevention_ts_study_019_07_studio_env.pngTheme: Studio Env Config

Labels to Render:
- File: ".idx/dev.nix"
- Config: "pkgs.nodejs_20"
- Result: "Consistent Env"

Visual Details:
1. Core Concept: Defining the environment with code.
2. Metaphor: A blueprint generating a workspace.
3. Action: Generation.
4. Layout: Code to Infrastructure.		## Step 3：Firebase Studioで“再現できる作業場”を固定する ☁️🧬
140docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_01_switch.png./picture/firebase_abuse_prevention_ts_study_020_01_switch.pngTheme: App Check Mode Switch

Labels to Render:
- Switch: "VITE_APPCHECK_MODE"
- Position 1: "OFF (Break)"
- Position 2: "Recaptcha (Prod)"
- Position 3: "Debug (Local)"

Visual Details:
1. Core Concept: One setting controlling three modes.
2. Metaphor: A 3-way toggle switch or lever.
3. Action: Selecting a mode.
4. Layout: Close-up of the control.		## Step 0：切り替えスイッチを作る🎛️（これが最終章の核）
141docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_02_debug_token.png./picture/firebase_abuse_prevention_ts_study_020_02_debug_token.pngTheme: Debug Token Flow

Labels to Render:
- Local: "Browser Console"
- Key: "Debug Token"
- Cloud: "Firebase Console"
- Action: "Safelist"

Visual Details:
1. Core Concept: Registering the local token to allow access.
2. Metaphor: Taking a key from a local safe and registering it at the main bank vault.
3. Action: Copy and paste flow.
4. Layout: Flow from Laptop to Cloud.		## Step 1：Debug token を登録して「ローカル救済ルート」を作る🧪🔐
142docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_03_functions_gate.png./picture/firebase_abuse_prevention_ts_study_020_03_functions_gate.pngTheme: Functions Gate

Labels to Render:
- Request: "No Token"
- Gate: "enforceAppCheck: true"
- Result: "Reject (401)"

Visual Details:
1. Core Concept: The enforcement setting blocks unverified requests.
2. Metaphor: A security gate that stays closed for anyone without a badge.
3. Action: Blocking entry.
4. Layout: Gate interaction.		## Step 2：Functions を“確実に落ちる場所”として用意する☎️💥
143docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_04_ai_protection.png./picture/firebase_abuse_prevention_ts_study_020_04_ai_protection.pngTheme: AI Cost Defense

Labels to Render:
- Threat: "Excessive Calls"
- Layer 1: "App Check"
- Layer 2: "Rate Limit (100 RPM)"
- Asset: "AI Logic"

Visual Details:
1. Core Concept: Protecting expensive AI resources.
2. Metaphor: A vault (AI) protected by a biometric scanner (App Check) and a turnstile (Rate Limit).
3. Action: Defense.
4. Layout: Layered security.		## Step 3：AI Logic の “コスト事故防止” を仕上げる🤖💸
144docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_05_test_matrix.png./picture/firebase_abuse_prevention_ts_study_020_05_test_matrix.pngTheme: Test Scenarios Matrix

Labels to Render:
- Col 1: "OFF (Broken)"
- Col 2: "Recaptcha (OK)"
- Col 3: "Debug (OK)"
- Rows: "Firestore / Storage / AI"

Visual Details:
1. Core Concept: Testing different modes against services.
2. Metaphor: A matrix or grid with checkmarks and red crosses indicating expected behavior.
3. Action: Verification.
4. Layout: Grid view.		## ここが本番：テストシナリオ表（3モード×4サービス）👀✅
145docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_06_runbook.png./picture/firebase_abuse_prevention_ts_study_020_06_runbook.pngTheme: Operational Runbook

Labels to Render:
- Title: "Runbook"
- Item 1: "Metrics Check"
- Item 2: "Debug Token Safelist"
- Item 3: "Rollback Plan"

Visual Details:
1. Core Concept: A finalized checklist for safe operation.
2. Metaphor: A clipboard with a ticked checklist and a pen.
3. Action: Checking off items.
4. Layout: List view.		## 最終成果物：運用手順書（Runbook）テンプレ🧾✅
146docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_07_ai_agents.png./picture/firebase_abuse_prevention_ts_study_020_07_ai_agents.pngTheme: AI Agent Team

Labels to Render:
- Agent 1: "Antigravity (Mission)"
- Agent 2: "Gemini CLI (Audit)"
- Agent 3: "Studio (Env)"

Visual Details:
1. Core Concept: Three AI tools working together.
2. Metaphor: A team of robots or futuristic agents in a command center.
3. Action: Collaboration.
4. Layout: Team composition.		## AIで“最終章”を爆速に仕上げる🚀🤖
828docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_01_switch.png./picture/firebase_abuse_prevention_ts_study_020_01_switch.pngTheme: App Check Mode Switch

Labels to Render:
- Switch: "VITE_APPCHECK_MODE"
- Position 1: "OFF (Break)"
- Position 2: "Recaptcha (Prod)"
- Position 3: "Debug (Local)"

Visual Details:
1. Core Concept: One setting controlling three modes.
2. Metaphor: A 3-way toggle switch or lever.
3. Action: Selecting a mode.
4. Layout: Close-up of the control.		## Step 0：切り替えスイッチを作る🎛️（これが最終章の核）
829docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_02_debug_token.png./picture/firebase_abuse_prevention_ts_study_020_02_debug_token.pngTheme: Debug Token Flow

Labels to Render:
- Local: "Browser Console"
- Key: "Debug Token"
- Cloud: "Firebase Console"
- Action: "Safelist"

Visual Details:
1. Core Concept: Registering the local token to allow access.
2. Metaphor: Taking a key from a local safe and registering it at the main bank vault.
3. Action: Copy and paste flow.
4. Layout: Flow from Laptop to Cloud.		## Step 1：Debug token を登録して「ローカル救済ルート」を作る🧪🔐
830docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_03_functions_gate.png./picture/firebase_abuse_prevention_ts_study_020_03_functions_gate.pngTheme: Functions Gate

Labels to Render:
- Request: "No Token"
- Gate: "enforceAppCheck: true"
- Result: "Reject (401)"

Visual Details:
1. Core Concept: The enforcement setting blocks unverified requests.
2. Metaphor: A security gate that stays closed for anyone without a badge.
3. Action: Blocking entry.
4. Layout: Gate interaction.		## Step 2：Functions を“確実に落ちる場所”として用意する☎️💥
831docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_04_ai_protection.png./picture/firebase_abuse_prevention_ts_study_020_04_ai_protection.pngTheme: AI Cost Defense

Labels to Render:
- Threat: "Excessive Calls"
- Layer 1: "App Check"
- Layer 2: "Rate Limit (100 RPM)"
- Asset: "AI Logic"

Visual Details:
1. Core Concept: Protecting expensive AI resources.
2. Metaphor: A vault (AI) protected by a biometric scanner (App Check) and a turnstile (Rate Limit).
3. Action: Defense.
4. Layout: Layered security.		## Step 3：AI Logic の “コスト事故防止” を仕上げる🤖💸
832docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_05_test_matrix.png./picture/firebase_abuse_prevention_ts_study_020_05_test_matrix.pngTheme: Test Scenarios Matrix

Labels to Render:
- Col 1: "OFF (Broken)"
- Col 2: "Recaptcha (OK)"
- Col 3: "Debug (OK)"
- Rows: "Firestore / Storage / AI"

Visual Details:
1. Core Concept: Testing different modes against services.
2. Metaphor: A matrix or grid with checkmarks and red crosses indicating expected behavior.
3. Action: Verification.
4. Layout: Grid view.		## ここが本番：テストシナリオ表（3モード×4サービス）👀✅
833docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_06_runbook.png./picture/firebase_abuse_prevention_ts_study_020_06_runbook.pngTheme: Operational Runbook

Labels to Render:
- Title: "Runbook"
- Item 1: "Metrics Check"
- Item 2: "Debug Token Safelist"
- Item 3: "Rollback Plan"

Visual Details:
1. Core Concept: A finalized checklist for safe operation.
2. Metaphor: A clipboard with a ticked checklist and a pen.
3. Action: Checking off items.
4. Layout: List view.		## 最終成果物：運用手順書（Runbook）テンプレ🧾✅
834docs/firebase_abuse_prevention_ts_study_020.mdfirebase_abuse_prevention_ts_study_020_07_ai_agents.png./picture/firebase_abuse_prevention_ts_study_020_07_ai_agents.pngTheme: AI Agent Team

Labels to Render:
- Agent 1: "Antigravity (Mission)"
- Agent 2: "Gemini CLI (Audit)"
- Agent 3: "Studio (Env)"

Visual Details:
1. Core Concept: Three AI tools working together.
2. Metaphor: A team of robots or futuristic agents in a command center.
3. Action: Collaboration.
4. Layout: Team composition.		## AIで“最終章”を爆速に仕上げる🚀🤖