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

image_generation_plan.extensions_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
2firebase_extensions_ts_index.mdfirebase_extensions_ts_index_concept_vs.png./picture/firebase_extensions_ts_index_concept_vs.pngTheme: Efficiency Comparison

Labels to Render:
- Extensions: "即導入"
- Self-made: "自作"

Visual Details:
1. Core Concept: Comparison of speed and effort.
2. Metaphor: Extensions as a pre-built rocket engine vs Self-made as assembling raw parts.
3. Action: Rocket launching immediately vs Person building gears.
4. Layout: Split screen comparison.		## 第1章：Extensionsってなに？
3firebase_extensions_ts_index.mdfirebase_extensions_ts_index_what_is_extension.png./picture/firebase_extensions_ts_index_what_is_extension.pngTheme: Extension Anatomy

Labels to Render:
- Extension: "拡張機能"
- Inside: "Cloud Functions"
- Config: "設定"

Visual Details:
1. Core Concept: Encapsulated logic.
2. Metaphor: A transparent box labeled "Extension" containing gears (Functions) and sliders (Config).
3. Action: User dropping the box into a project.
4. Layout: Central object focus.		* 読む📚：Extensions の基本
4firebase_extensions_ts_index.mdfirebase_extensions_ts_index_hub_search.png./picture/firebase_extensions_ts_index_hub_search.pngTheme: Discovery in Hub

Labels to Render:
- Categories: "画像・AI・メール"
- Selection: "選択"

Visual Details:
1. Core Concept: Finding the right tool.
2. Metaphor: A store shelf or digital marketplace interface.
3. Action: Hand picking a box labeled "Resize Images" or "AI".
4. Layout: Perspective view of options.		## 第2章：Extensions Hubの歩き方
5firebase_extensions_ts_index.mdfirebase_extensions_ts_index_resize_flow.png./picture/firebase_extensions_ts_index_resize_flow.pngTheme: Automation Flow

Labels to Render:
- Upload: "アップロード"
- Trigger: "検知"
- Output: "サムネイル生成"

Visual Details:
1. Core Concept: Event-driven architecture.
2. Metaphor: Conveyor belt processing.
3. Action: Large image enters, passes through a machine (Extension), small image comes out.
4. Layout: Flow from left to right.		## 第4章：まずは鉄板！画像リサイズ拡張
6firebase_extensions_ts_index.mdfirebase_extensions_ts_index_emulator_safety.png./picture/firebase_extensions_ts_index_emulator_safety.pngTheme: Safe Testing

Labels to Render:
- Local: "ローカル環境"
- Production: "本番環境"
- Barrier: "安全"

Visual Details:
1. Core Concept: Isolation.
2. Metaphor: A sandbox with a toy castle vs a real castle in the distance.
3. Action: Experimenting in the sandbox without affecting the real castle.
4. Layout: Distinct separation.		## 第8章：Extensions Emulator
7firebase_extensions_ts_index.mdfirebase_extensions_ts_index_react_ui.png./picture/firebase_extensions_ts_index_react_ui.pngTheme: UI Implementation

Labels to Render:
- UI: "画面"
- Original: "元画像"
- Thumb: "サムネ"

Visual Details:
1. Core Concept: Displaying results.
2. Metaphor: A smartphone screen showing a gallery.
3. Action: Loading the thumbnail quickly.
4. Layout: Interface mockup.		## 第11章：Resize Images実践
8firebase_extensions_ts_index.mdfirebase_extensions_ts_index_decision_flow.png./picture/firebase_extensions_ts_index_decision_flow.pngTheme: Decision Making

Labels to Render:
- Fits?: "要件に合う？"
- Yes: "Extensions"
- No: "Cloud Functions"

Visual Details:
1. Core Concept: Choosing the right path.
2. Metaphor: A flowchart or road fork.
3. Action: Path branching based on "Customization Needs".
4. Layout: Simple branching path.		## 第20章：自作 vs Extensions
9firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_concept_package.png./picture/firebase_extensions_ts_study_001_concept_package.pngTheme: Packaged Functionality

Labels to Render:
- Extension: "機能パック"
- Install: "インストール"
- App: "アプリ"

Visual Details:
1. Core Concept: Plug and Play.
2. Metaphor: A capsule toy or a game cartridge labeled "Extension" being plugged into a console (App).
3. Action: "Snap" connection.
4. Layout: Side view showing connection.		## 1) Extensionsをひとことで言うと？
10firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_auto_run.png./picture/firebase_extensions_ts_study_001_auto_run.pngTheme: Automatic Execution

Labels to Render:
- Trigger: "トリガー"
- Action: "自動実行"
- Cloud Functions: "裏側"

Visual Details:
1. Core Concept: Hidden logic running automatically.
2. Metaphor: An iceberg or a stage.
3. Action: User sees "Install" on top, below water/stage gears (Cloud Functions) start turning.
4. Layout: Cross-section view.		* その“自動実行”の正体は
11firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_three_parts.png./picture/firebase_extensions_ts_study_001_three_parts.pngTheme: Extension Components

Labels to Render:
- A: "機能"
- B: "パラメータ"
- C: "リソース"

Visual Details:
1. Core Concept: Composition.
2. Metaphor: A dissected machine or a bento box.
3. Action: Exploded view showing the three parts.
4. Layout: Triangle or exploded view.		## 2) “入れるだけで動く”の裏側を、3つに分解
12firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_hub_reading.png./picture/firebase_extensions_ts_study_001_hub_reading.pngTheme: Reading Documentation

Labels to Render:
- Check 1: "何をする？"
- Check 2: "設定"
- Check 3: "リソース"
- Check 4: "課金"

Visual Details:
1. Core Concept: Checklist.
2. Metaphor: A magnifying glass over a document.
3. Action: Identifying key points.
4. Layout: Focus on the document.		## 3) まずは“読める目”を作ろう
13firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_resize_example.png./picture/firebase_extensions_ts_study_001_resize_example.pngTheme: Resize Process

Labels to Render:
- Upload: "UP"
- Extension: "Resize"
- Save: "Save"
- Cost: "コスト"

Visual Details:
1. Core Concept: Input/Output and Cost.
2. Metaphor: A factory line processing boxes.
3. Action: Box enters, gets resized, leaves. Coin meter spins (Cost).
4. Layout: Linear flow.		## 5) 例：Resize Imagesを“読む”練習
14firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_selection_task.png./picture/firebase_extensions_ts_study_001_selection_task.pngTheme: Choosing an Extension

Labels to Render:
- Image: "画像"
- Mail: "メール"
- AI: "翻訳"
- Me: "自分"

Visual Details:
1. Core Concept: Decision.
2. Metaphor: A user looking at 3 doors or buttons.
3. Action: Hovering over one.
4. Layout: First-person view or over-the-shoulder.		## 6) ミニ課題
15firebase_extensions_ts_study_001.mdfirebase_extensions_ts_study_001_ai_help.png./picture/firebase_extensions_ts_study_001_ai_help.pngTheme: AI Support

Labels to Render:
- User: "質問"
- AI: "要約"
- Extension: "難解な説明"

Visual Details:
1. Core Concept: Simplification.
2. Metaphor: AI robot translating a complex scroll into a simple note.
3. Action: User hands scroll to AI, AI hands back note.
4. Layout: Interaction between characters.		## 8) AI活用コーナー
16firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_hub_store.png./picture/firebase_extensions_ts_study_002_hub_store.pngTheme: Extensions Hub

Labels to Render:
- Store: "Extensions Hub"
- Shelf: "機能カテゴリ"
- User: "探す人"

Visual Details:
1. Core Concept: Marketplace.
2. Metaphor: A digital store with shelves labeled "AI", "Image", "Mail".
3. Action: User browsing the shelves.
4. Layout: Perspective view of the store.		## 1) Extensions Hubってどんな場所？
17firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_search_flow.png./picture/firebase_extensions_ts_study_002_search_flow.pngTheme: Search Process

Labels to Render:
- Goal: "やりたいこと"
- Search: "検索"
- Check: "詳細確認"
- Decision: "Top3決定"

Visual Details:
1. Core Concept: Step-by-step filtering.
2. Metaphor: A funnel.
3. Action: Many ideas enter top, pass through search/check filters, 3 gold medals come out.
4. Layout: Vertical funnel.		## 2) Hubの「最短ルート」
18firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_keyword_strategy.png./picture/firebase_extensions_ts_study_002_keyword_strategy.pngTheme: Search Keywords

Labels to Render:
- Noun: "機能名 (Image)"
- Verb: "動作 (Resize)"
- Event: "イベント (Upload)"

Visual Details:
1. Core Concept: Combining terms.
2. Metaphor: Puzzle pieces fitting together.
3. Action: Connecting "Image" piece with "Resize" piece.
4. Layout: Puzzle assembly.		## 3) 検索のコツ
19firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_five_checks.png./picture/firebase_extensions_ts_study_002_five_checks.pngTheme: Safety Checks

Labels to Render:
- Purpose: "目的"
- Trigger: "トリガー"
- Dep: "依存"
- Bill: "課金"
- Perm: "権限"

Visual Details:
1. Core Concept: Validation.
2. Metaphor: A shield with 5 gems or a pentagon radar chart.
3. Action: Checking each point.
4. Layout: Radar chart or list with icons.		## 4) 詳細ページで必ず見る「5大チェック」
20firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_classification.png./picture/firebase_extensions_ts_study_002_classification.pngTheme: Organizing Findings

Labels to Render:
- Image: "画像"
- Mail: "メール"
- AI: "AI/翻訳"
- Box: "候補"

Visual Details:
1. Core Concept: Sorting.
2. Metaphor: Sorting mail or boxes into labeled bins.
3. Action: User placing a box into the "Image" bin.
4. Layout: Front view of bins.		## 5) ここで手を動かす
21firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_ai_tools.png./picture/firebase_extensions_ts_study_002_ai_tools.pngTheme: AI Assistance Tools

Labels to Render:
- Antigravity: "比較・計画"
- CLI: "調査・読解"
- Console: "運用・ログ"

Visual Details:
1. Core Concept: Different roles for AI.
2. Metaphor: Three robots with different hats (Architect, Detective, Mechanic).
3. Action: Each robot holding their tool.
4. Layout: Character lineup.		## 6) AIを使って“読むのを速くする”
22firebase_extensions_ts_study_002.mdfirebase_extensions_ts_study_002_partial_match.png./picture/firebase_extensions_ts_study_002_partial_match.pngTheme: Partial Solution

Labels to Render:
- Extension: "拡張 (80%)"
- Self: "自作 (20%)"
- Goal: "解決"

Visual Details:
1. Core Concept: Hybrid approach.
2. Metaphor: Completing a puzzle.
3. Action: Large piece (Extension) fills most, small piece (Self) fills the rest.
4. Layout: Pie chart or puzzle.		## 7) もしHubにドンピシャが無いときの考え方
23firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_landmine_check.png./picture/firebase_extensions_ts_study_003_landmine_check.pngTheme: Pre-install Safety

Labels to Render:
- Install: "インストール"
- Check: "5分チェック"
- Safe: "安全"
- Boom: "地雷"

Visual Details:
1. Core Concept: Avoiding danger.
2. Metaphor: A minefield detector.
3. Action: User scanning the "Install" button with a detector.
4. Layout: First-person view or side view.		## まず結論
24firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_four_entrances.png./picture/firebase_extensions_ts_study_003_four_entrances.pngTheme: Check Points

Labels to Render:
- Billing: "課金"
- Content: "中身"
- Perm: "権限"
- Test: "テスト"

Visual Details:
1. Core Concept: Key areas to review.
2. Metaphor: Four gates or doors to pass through.
3. Action: User holding a checklist at the gates.
4. Layout: Perspective view of gates.		## まず結論　ここだけ見れば事故が激減する✅
25firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_blaze_switch.png./picture/firebase_extensions_ts_study_003_blaze_switch.pngTheme: Blaze Plan

Labels to Render:
- Spark: "無料"
- Blaze: "従量"
- Switch: "請求ON"

Visual Details:
1. Core Concept: Enabling billing capability.
2. Metaphor: A large industrial switch labeled "Blaze".
3. Action: User hand ready to flip it, with a "Caution" sign.
4. Layout: Close-up of switch.		## 1) いきなり重要　Blaze 必須の意味💳🧨
26firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_reading_specs.png./picture/firebase_extensions_ts_study_003_reading_specs.pngTheme: Extension Manifest

Labels to Render:
- yaml: "extension.yaml"
- Trigger: "トリガー"
- Resource: "リソース"
- Param: "パラメータ"

Visual Details:
1. Core Concept: Understanding the blueprint.
2. Metaphor: A blueprint roll spread out.
3. Action: Highlighting key sections.
4. Layout: Top-down view of blueprint.		## 2) インストール前に読むべき場所はここ🔍🧩
27firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_billing_chain.png./picture/firebase_extensions_ts_study_003_billing_chain.pngTheme: Cost Accumulation

Labels to Render:
- Upload: "1枚UP"
- Resize: "生成x3"
- Storage: "保存x4"
- Cost: "課金"

Visual Details:
1. Core Concept: Multiplier effect.
2. Metaphor: Dominos falling or a snowball rolling.
3. Action: Small action (Upload) triggers larger effects.
4. Layout: Linear progression.		## 4) 課金の事故ポイントを“見える化”しよう💸👀
28firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_emulator_sandbox.png./picture/firebase_extensions_ts_study_003_emulator_sandbox.pngTheme: Safe Testing

Labels to Render:
- Local: "エミュレータ"
- Cloud: "本番"
- Wall: "防壁"

Visual Details:
1. Core Concept: Isolation.
2. Metaphor: Playing with a toy volcano in a glass box (Local) vs real volcano (Cloud).
3. Action: Smoke contained within the box.
4. Layout: Side comparison.		## 5) いきなり本番に入れない　安全な試し方🧪🧯
29firebase_extensions_ts_study_003.mdfirebase_extensions_ts_study_003_ai_mcp.png./picture/firebase_extensions_ts_study_003_ai_mcp.pngTheme: AI Assistance

Labels to Render:
- AI: "MCP"
- Firebase: "Firebase"
- Tools: "ツール"

Visual Details:
1. Core Concept: AI bridging tools.
2. Metaphor: A robot arm (MCP) connecting an AI brain to Firebase tools.
3. Action: Plugging a cable.
4. Layout: Schematic view.		## 6) AI を使ってチェックを秒速化しよう🤖⚡
30firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_auto_factory.png./picture/firebase_extensions_ts_study_004_auto_factory.pngTheme: Automated Resizing

Labels to Render:
- Input: "画像UP"
- Process: "自動生成"
- Output: "サムネイル"

Visual Details:
1. Core Concept: Automation.
2. Metaphor: A sleek factory machine.
3. Action: Raw photos entering, machine processing, multiple small photos exiting.
4. Layout: Isometric view.		## この章のゴール🏁✨
31firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_resize_logic.png./picture/firebase_extensions_ts_study_004_resize_logic.pngTheme: Aspect Ratio Preservation

Labels to Render:
- Box: "200x200 (枠)"
- Image: "画像 (横長)"
- Result: "200x150"

Visual Details:
1. Core Concept: Fit within box.
2. Metaphor: Putting a rectangular painting into a square frame without cutting.
3. Action: The painting shrinks to fit width, leaving empty space (or just fitting).
4. Layout: Diagrammatic.		## 2) 超重要：200x200 は「最大サイズ」だよ⚠️
32firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_system_flow.png./picture/firebase_extensions_ts_study_004_system_flow.pngTheme: Architecture Flow

Labels to Render:
- User: "ユーザー"
- Storage: "Storage"
- Ext: "拡張 (Resize)"
- App: "アプリ画面"

Visual Details:
1. Core Concept: Data flow.
2. Metaphor: Piping system.
3. Action: User drops ball (Image) into pipe, it goes through machine (Ext), and appears on screen (App).
4. Layout: Left to right flow.		## 3) 設計図を書く🗺️
33firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_path_separation.png./picture/firebase_extensions_ts_study_004_path_separation.pngTheme: Folder Structure

Labels to Render:
- Root: "/users/{uid}/"
- Original: "avatar/original.jpg"
- Thumbs: "thumbs/original_200.jpg"

Visual Details:
1. Core Concept: Organized storage.
2. Metaphor: File cabinet folders.
3. Action: Separating big document (Original) from small index card (Thumb) into different folders.
4. Layout: Tree structure.		## 4) “事故らない”パス設計🧯
34firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_loop_prevention.png./picture/firebase_extensions_ts_study_004_loop_prevention.pngTheme: Infinite Loop Safety

Labels to Render:
- Trigger: "検知"
- Output: "出力先"
- Guard: "除外設定 (Exclude)"
- Loop: "無限ループ"

Visual Details:
1. Core Concept: Stopping recursion.
2. Metaphor: A barrier blocking a feedback loop.
3. Action: Output going back to Input is blocked by a "Stop" sign (Exclude).
4. Layout: Circular flow with a break.		さらに、**無限増殖（サムネがサムネを呼ぶ地獄）**を避けるために
35firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_naming_rule.png./picture/firebase_extensions_ts_study_004_naming_rule.pngTheme: File Naming

Labels to Render:
- Base: "original.jpg"
- Suffix: "_200x200"
- Final: "original_200x200.jpg"

Visual Details:
1. Core Concept: String concatenation.
2. Metaphor: Building blocks.
3. Action: Connecting "Name" block with "Size" block.
4. Layout: Equation style.		## 5) 第4章で決めたい「命名ルール」案🪪✨
36firebase_extensions_ts_study_004.mdfirebase_extensions_ts_study_004_ai_filter.png./picture/firebase_extensions_ts_study_004_ai_filter.pngTheme: AI Moderation

Labels to Render:
- Input: "画像"
- AI: "AIチェック"
- Safe: "OK -> Resize"
- Block: "NG -> Placeholder"

Visual Details:
1. Core Concept: Intelligent filtering.
2. Metaphor: A security guard robot scanning photos.
3. Action: Robot lets a landscape pass, but stops a forbidden logo.
4. Layout: Gatekeeper checkpoint.		## 7) 2026っぽい強化ポイント
37firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_control_panel.png./picture/firebase_extensions_ts_study_005_control_panel.pngTheme: Configuration

Labels to Render:
- Safe: "安全"
- Cost: "コスト"
- Power: "高機能"

Visual Details:
1. Core Concept: Tuning.
2. Metaphor: A sound mixer or cockpit dashboard with sliders.
3. Action: User adjusting a "Cost" slider down and "Safety" slider up.
4. Layout: Control panel interface.		## 1) “パラメータ設計”ってなに？
38firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_logic_flow.png./picture/firebase_extensions_ts_study_005_logic_flow.pngTheme: Parameter Influence

Labels to Render:
- Trigger: "トリガー"
- Params: "パラメータ (脳)"
- Output: "出力"

Visual Details:
1. Core Concept: Central logic.
2. Metaphor: A machine with a brain (Params) in the middle.
3. Action: Input enters, Brain decides how to process based on settings, Output exits.
4. Layout: Flowchart with central focus.		「あとでコード書けば調整できるっしょ？」が通りにくい
39firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_scope_narrowing.png./picture/firebase_extensions_ts_study_005_scope_narrowing.pngTheme: Targeting

Labels to Render:
- Bucket: "バケット"
- Path: "パス指定"
- Target: "対象のみ"
- Ignore: "無視"

Visual Details:
1. Core Concept: Filtering.
2. Metaphor: A spotlight or sniper scope.
3. Action: Spotlight shines only on "Images/Users", leaving "Logs" in the dark.
4. Layout: Spotlight effect.		## ✅ 型A：範囲を絞る
40firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_multi_size.png./picture/firebase_extensions_ts_study_005_multi_size.pngTheme: Output Variety

Labels to Render:
- Input: "1枚"
- Config: "200, 400, 600"
- Output: "3枚生成"

Visual Details:
1. Core Concept: One-to-many.
2. Metaphor: A prism splitting light or a cloning machine.
3. Action: One big image enters, three smaller varied images exit.
4. Layout: Branching flow.		## 3-2. 生成サイズ（体験が変わる）
41firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_delete_switch.png./picture/firebase_extensions_ts_study_005_delete_switch.pngTheme: Risk Management

Labels to Render:
- Switch: "DELETE_ORIGINAL"
- False: "残す (安全)"
- True: "消す (危険)"

Visual Details:
1. Core Concept: Irreversible action.
2. Metaphor: A red button with a skull icon (True) vs a green shield button (False).
3. Action: User hesitating to press the red button.
4. Layout: Close-up of buttons.		## 3-4. 元画像を消すか（事故率MAX）
42firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_ai_knob.png./picture/firebase_extensions_ts_study_005_ai_knob.pngTheme: AI Sensitivity

Labels to Render:
- Knob: "AI Filter"
- Levels: "Off, Low, High"
- Shield: "防御力"

Visual Details:
1. Core Concept: Adjustment levels.
2. Metaphor: A volume knob labeled "Filter".
3. Action: Turning knob from Low to High, shield grows larger.
4. Layout: Knob interface.		## 4) AI（Gemini）を“拡張の中”に入れる
43firebase_extensions_ts_study_005.mdfirebase_extensions_ts_study_005_env_diff.png./picture/firebase_extensions_ts_study_005_env_diff.pngTheme: Environment Config

Labels to Render:
- Dev: "検証 (安全)"
- Prod: "本番 (機能)"
- Diff: "差分"

Visual Details:
1. Core Concept: Comparison.
2. Metaphor: Two blueprints side-by-side with highlighted differences.
3. Action: Highlighting "Delete: False" on Dev and "Delete: True" on Prod.
4. Layout: Split screen or table view.		## 5) 検証→本番で「変える？変えない？」を決める
44firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_console_shortcut.png./picture/firebase_extensions_ts_study_006_console_shortcut.pngTheme: Console Shortcut

Labels to Render:
- Console: "コンソール (GUI)"
- CLI: "コマンド (CLI)"
- Goal: "インストール"

Visual Details:
1. Core Concept: Easiest path.
2. Metaphor: A paved highway (Console) going straight to the goal vs a winding mountain path (CLI).
3. Action: User driving a car on the highway.
4. Layout: Path comparison.		## この章でできるようになること ✅🎯
45firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_prerequisites_gate.png./picture/firebase_extensions_ts_study_006_prerequisites_gate.pngTheme: Prerequisites Gate

Labels to Render:
- Role: "権限 (Owner)"
- Plan: "Blaze (従量)"
- Gate: "インストール"

Visual Details:
1. Core Concept: Access control.
2. Metaphor: A double-lock gate.
3. Action: Two keys (Role key, Plan key) opening the gate.
4. Layout: Front view of gate.		## 1) まず超重要：インストール条件をサクッと確認 🧾👀
46firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_install_flow.png./picture/firebase_extensions_ts_study_006_install_flow.pngTheme: Installation Flow

Labels to Render:
- Step 1: "選択"
- Step 2: "確認"
- Step 3: "設定"
- Step 4: "完了"

Visual Details:
1. Core Concept: Process steps.
2. Metaphor: Stepping stones or a progress bar.
3. Action: User character jumping from stone to stone.
4. Layout: Left to right flow.		## 2) Consoleでのインストール手順（王道ルート）🧭✨
47firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_unboxing_resources.png./picture/firebase_extensions_ts_study_006_unboxing_resources.pngTheme: Unboxing Resources

Labels to Render:
- Box: "Extension"
- Item 1: "Service Account"
- Item 2: "Secret"
- Item 3: "Function"

Visual Details:
1. Core Concept: Deployment artifacts.
2. Metaphor: Opening a delivery box.
3. Action: Items popping out of the open box.
4. Layout: Explosion view from box.		## 手順B：インストール画面で「増えるもの」を観察する 👀📌
48firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_safe_params.png./picture/firebase_extensions_ts_study_006_safe_params.pngTheme: Safe Parameters

Labels to Render:
- Scope: "限定 (uploads/)"
- Size: "小さめ (200px)"
- Test: "10枚"

Visual Details:
1. Core Concept: Minimizing risk.
2. Metaphor: A safety barrier or training wheels.
3. Action: User setting dials to "Safe" zone (green area).
4. Layout: Control panel close-up.		## 3) “安全寄り”パラメータの入れ方（事故らない作戦）🧯✨
49firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_dashboard_check.png./picture/firebase_extensions_ts_study_006_dashboard_check.pngTheme: Dashboard Check

Labels to Render:
- Card: "Instance"
- Button: "Manage"
- Check: "Logs / Health"

Visual Details:
1. Core Concept: Monitoring.
2. Metaphor: A doctor's clipboard or car dashboard.
3. Action: User checking items on the list.
4. Layout: UI mockup.		## 4) インストール後に“増えたもの”を棚卸しする 🧾🔍
50firebase_extensions_ts_study_006.mdfirebase_extensions_ts_study_006_storage_warning.png./picture/firebase_extensions_ts_study_006_storage_warning.pngTheme: Storage Warning

Labels to Render:
- Date: "2026-02-03"
- Plan: "Spark (無料)"
- Bucket: "Default Bucket"
- Status: "Access Denied"

Visual Details:
1. Core Concept: Policy change deadline.
2. Metaphor: A calendar with a lock on a bucket.
3. Action: A lock snapping shut on the date.
4. Layout: Calendar focus.		## おまけ注意⚠️（2026の地雷：デフォルトバケット）🪣💥
51firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_cli_evolution.png./picture/firebase_extensions_ts_study_007_cli_evolution.pngTheme: CLI Evolution

Labels to Render:
- Before: "手作業 (Console)"
- After: "コード管理 (CLI)"
- Result: "再現性"

Visual Details:
1. Core Concept: Shift from chaos to order.
2. Metaphor: A person juggling balls (Manual) vs a machine sorting balls (Automated).
3. Action: The machine producing consistent output.
4. Layout: Before/After split.		## まずゴール確認🏁✨（この章でできるようになること）
52firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_console_vs_cli_drift.png./picture/firebase_extensions_ts_study_007_console_vs_cli_drift.pngTheme: Drift Prevention

Labels to Render:
- Dev: "検証"
- Prod: "本番"
- Without CLI: "ズレる (Drift)"
- With CLI: "一致 (Sync)"

Visual Details:
1. Core Concept: Environment consistency.
2. Metaphor: Two parallel train tracks.
3. Action: Without CLI, tracks diverge. With CLI, tracks stay parallel.
4. Layout: Comparison.		## “CLIで入れる”って、何がうれしいの？🤔✨
53firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_command_toolbox.png./picture/firebase_extensions_ts_study_007_command_toolbox.pngTheme: Command Toolbox

Labels to Render:
- Install: "追加"
- Export: "書き出し"
- List: "一覧"
- Configure: "設定変更"

Visual Details:
1. Core Concept: Tool set.
2. Metaphor: A physical toolbox with labeled tools.
3. Action: Tools laid out ready for use.
4. Layout: Collection view.		## 読む📚：CLIで拡張を管理する「できること」一覧を掴む🧠
54firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_setup_pipeline.png./picture/firebase_extensions_ts_study_007_setup_pipeline.pngTheme: Setup Pipeline

Labels to Render:
- Node.js: "Runtime"
- npm: "Package Mgr"
- CLI: "firebase-tools"
- Ready: "OK!"

Visual Details:
1. Core Concept: Dependency chain.
2. Metaphor: Assembly line.
3. Action: Parts assembling into the final CLI tool.
4. Layout: Linear flow.		## 0) まずCLIが動く状態にする⚙️（Windowsでも迷いにくい版）
55firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_manifest_blueprint.png./picture/firebase_extensions_ts_study_007_manifest_blueprint.pngTheme: Manifest Blueprint

Labels to Render:
- File: "manifest.json"
- Content: "拡張ID + 設定"
- Role: "台本"

Visual Details:
1. Core Concept: Definition file.
2. Metaphor: A script or musical score.
3. Action: A conductor reading the score.
4. Layout: Focus on the document.		## 2) “manifest” に拡張を追加する🧩（＝手順がファイルになる✨）
56firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_env_separation.png./picture/firebase_extensions_ts_study_007_env_separation.pngTheme: Env Separation

Labels to Render:
- Manifest: "共通台本"
- Env Dev: ".env.dev"
- Env Prod: ".env.prod"
- Result: "環境別デプロイ"

Visual Details:
1. Core Concept: Configuration injection.
2. Metaphor: A stencil (Manifest) with different colored sprays (Env vars).
3. Action: Spraying Blue for Dev, Red for Prod through the same stencil.
4. Layout: Process flow.		## 3) 検証→本番に流すために、.env を分ける🧪➡️🏭
57firebase_extensions_ts_study_007.mdfirebase_extensions_ts_study_007_deploy_action.png./picture/firebase_extensions_ts_study_007_deploy_action.pngTheme: Deploy Action

Labels to Render:
- Local: "Manifest (台本)"
- Cloud: "Firebase (現実)"
- Action: "firebase deploy"

Visual Details:
1. Core Concept: Realization.
2. Metaphor: A projector projecting a film (Manifest) onto a screen (Cloud).
3. Action: The projection becoming real 3D objects.
4. Layout: Projection flow.		## 便利コマンドまとめ📌（覚えるのはこれだけでOK🙆‍♂️）
58firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_safety_barrier.png./picture/firebase_extensions_ts_study_008_safety_barrier.pngTheme: Safety Barrier

Labels to Render:
- Local: "Local Emulator"
- Production: "Production"
- Shield: "Safe"
- Monster: "Bugs / Cost"

Visual Details:
1. Core Concept: Risk mitigation.
2. Metaphor: A glass dome over a city (Local) protecting it from rain/monsters (Production risks).
3. Action: Bugs bouncing off the glass.
4. Layout: Side view.		## 1) Extensions Emulatorって、何がうれしいの？🧩➡️🧪
59firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_demo_project_safety.png./picture/firebase_extensions_ts_study_008_demo_project_safety.pngTheme: Demo Project Safety

Labels to Render:
- ID: "demo-project"
- Real: "Real Resources"
- Link: "No Connection"
- Safety: "Disconnect"

Visual Details:
1. Core Concept: Isolation.
2. Metaphor: Cutting the cord.
3. Action: Scissors cutting the wire between "demo-project" and "Cloud Bill".
4. Layout: Schematic.		## 2) まず「どのプロジェクトで回す？」を決める🎯
60firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_three_step_ladder.png./picture/firebase_extensions_ts_study_008_three_step_ladder.pngTheme: Three Step Ladder

Labels to Render:
- Step 1: "Setup"
- Step 2: "Install --local"
- Step 3: "Start"
- Goal: "Running"

Visual Details:
1. Core Concept: Progression.
2. Metaphor: Climbing a ladder.
3. Action: User character climbing up.
4. Layout: Vertical rise.		## 3) 今日のメイン手順：3ステップで動かす🚀
61firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_local_install_flow.png./picture/firebase_extensions_ts_study_008_local_install_flow.pngTheme: Local Install Flow

Labels to Render:
- Command: "ext:install --local"
- Target: "manifest.json"
- Not Target: "Cloud"

Visual Details:
1. Core Concept: Configuration storage.
2. Metaphor: Writing in a notebook (Manifest) instead of sending a letter (Cloud).
3. Action: Pen writing on paper.
4. Layout: Comparison.		## Step B：拡張を「ローカルの manifest」に追加する📦
62firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_observation_dashboard.png./picture/firebase_extensions_ts_study_008_observation_dashboard.pngTheme: Observation Dashboard

Labels to Render:
- Trigger: "Fire!"
- Output: "File Created"
- Size: "200x200"
- Error: "Handling"

Visual Details:
1. Core Concept: Monitoring metrics.
2. Metaphor: A cockpit with gauges.
3. Action: Needles pointing to green zones.
4. Layout: Control panel.		## 4) “Resize Images をローカルで試す”ときの観察ポイント👀📷➡️🖼️
63firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_automated_test_loop.png./picture/firebase_extensions_ts_study_008_automated_test_loop.pngTheme: Automated Test Loop

Labels to Render:
- Script: "test.sh"
- Database: "Seed Data"
- Verify: "Check"
- Clean: "Reset"

Visual Details:
1. Core Concept: Automation cycle.
2. Metaphor: A conveyor belt loop.
3. Action: Robot placing data, checking it, and sweeping it away.
4. Layout: Circular flow.		## 5) CIっぽく “自動で検証” したいとき🧪🤖
64firebase_extensions_ts_study_008.mdfirebase_extensions_ts_study_008_production_gap.png./picture/firebase_extensions_ts_study_008_production_gap.pngTheme: Production Gap

Labels to Render:
- Emulator: "Local"
- Production: "Cloud"
- Missing: "IAM / Triggers"
- Warning: "Difference"

Visual Details:
1. Core Concept: Limitation awareness.
2. Metaphor: A reflection in a mirror that is slightly missing details (like a ghost).
3. Action: User looking at mirror, noticing the missing badge (IAM).
4. Layout: Mirror reflection.		## 6) “本番と同じじゃない部分”だけは、ここで覚える🧠⚠️
65firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_xray_blueprint.png./picture/firebase_extensions_ts_study_009_xray_blueprint.pngTheme: X-Ray Blueprint

Labels to Render:
- Object: "Extension (Black Box)"
- Ray: "X-Ray"
- Inside: "extension.yaml"
- Revealed: "Logic / Roles"

Visual Details:
1. Core Concept: Transparency.
2. Metaphor: An X-Ray scanner.
3. Action: Scanning the box, showing the skeleton (YAML) inside.
4. Layout: Cross-section.		## 1) extension.yamlって何者？🧾🧩
66firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_treasure_map.png./picture/firebase_extensions_ts_study_009_treasure_map.pngTheme: Treasure Map

Labels to Render:
- Start: "Hub Page"
- Step 1: "Source Link"
- Step 2: "GitHub"
- Goal: "extension.yaml"

Visual Details:
1. Core Concept: Navigation.
2. Metaphor: A treasure map with dotted lines.
3. Action: Following the path to the scroll.
4. Layout: Path flow.		## 2) どこから extension.yaml を見るの？👀🔗
67firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_audit_star.png./picture/firebase_extensions_ts_study_009_audit_star.pngTheme: Audit Star

Labels to Render:
- 1: "Billing (Cost)"
- 2: "Roles (Security)"
- 3: "APIs (Connect)"
- 4: "Resources (Logic)"
- 5: "Params (Config)"

Visual Details:
1. Core Concept: Prioritized checklist.
2. Metaphor: A pentagon radar chart or a star.
3. Action: Highlighting point 1 (Billing) as the starting point.
4. Layout: Radial or list.		## 3) 読む順番はコレ！「3分監査」🕒🧠
68firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_yaml_annotation.png./picture/firebase_extensions_ts_study_009_yaml_annotation.pngTheme: YAML Annotation

Labels to Render:
- YAML: "apis: ... roles: ..."
- Billing: "billingRequired: true"
- Role: "storage.admin"
- Param: "inputPaths"

Visual Details:
1. Core Concept: Code reading.
2. Metaphor: A magnifying glass over code.
3. Action: Red pen circling key lines.
4. Layout: Code snippet focus.		## 4) 例：Resize Images の extension.yaml を“それっぽく読む”📷➡️🖼️
69firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_trigger_flow.png./picture/firebase_extensions_ts_study_009_trigger_flow.pngTheme: Trigger Flow

Labels to Render:
- Event: "finalize (Upload)"
- Trigger: "Function Start"
- Cost: "$$$"
- Log: "Output"

Visual Details:
1. Core Concept: Event-driven cost.
2. Metaphor: A domino effect.
3. Action: User uploads file -> Domino falls -> Machine runs -> Coin drops.
4. Layout: Linear chain.		## 🏗️ リソースチェック（いつ動く？）
70firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_ai_auditor.png./picture/firebase_extensions_ts_study_009_ai_auditor.pngTheme: AI Auditor

Labels to Render:
- Input: "YAML File"
- Agent: "Gemini CLI"
- Output: "Risk Report"
- Check: "OK / Warn"

Visual Details:
1. Core Concept: Automated review.
2. Metaphor: A robot accountant or inspector.
3. Action: Robot stamping "Approved" or "Warning" on a report.
4. Layout: Process interaction.		## 6) AI活用パート🤖✨：読む作業を「Antigravity × Gemini」で秒速化🛸💨
71firebase_extensions_ts_study_009.mdfirebase_extensions_ts_study_009_pitfalls_warning.png./picture/firebase_extensions_ts_study_009_pitfalls_warning.pngTheme: Pitfalls Warning

Labels to Render:
- Myth: "Free?"
- Reality: "Billing Required"
- Risk: "Admin Role"
- Trap: "Unknown Trigger"

Visual Details:
1. Core Concept: Misconceptions.
2. Metaphor: Warning signs on a path.
3. Action: User avoiding a trap door.
4. Layout: Hazard signs.		## 7) ありがちな勘違い＆事故ポイント😇🧯
72firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_transparent_box.png./picture/firebase_extensions_ts_study_010_transparent_box.pngTheme: Transparent Box

Labels to Render:
- Before: "Extension (Black Box)"
- After: "Visible Logic"
- Inside: "Functions / Events"

Visual Details:
1. Core Concept: Understanding internals.
2. Metaphor: A magician revealing the inside of a trick box.
3. Action: The front panel of a box fading away to show gears.
4. Layout: Before/After.		## 1) まずは超ざっくり全体像（これだけ覚えればOK）🧠✨
73firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_resource_sprawl.png./picture/firebase_extensions_ts_study_010_resource_sprawl.pngTheme: Resource Sprawl

Labels to Render:
- Center: "Extension"
- Satellite 1: "Cloud Functions"
- Satellite 2: "Cloud Scheduler"
- Satellite 3: "Cloud Tasks"
- Satellite 4: "Secret Manager"

Visual Details:
1. Core Concept: Automatic resource creation.
2. Metaphor: A solar system or a hub and spoke.
3. Action: The central extension node connecting to resource nodes.
4. Layout: Network diagram.		イメージはこんな感じ👇
74firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_naming_decoder.png./picture/firebase_extensions_ts_study_010_naming_decoder.pngTheme: Naming Decoder

Labels to Render:
- String: "ext-resize-onFinalize"
- Part 1: "Prefix (ext-)"
- Part 2: "Instance ID (resize)"
- Part 3: "Function Name (onFinalize)"

Visual Details:
1. Core Concept: String parsing.
2. Metaphor: A sentence diagram or dissection.
3. Action: Brackets grouping parts of the text with labels.
4. Layout: Text analysis.		## 2) “増えるもの”早見表（命名ルールが超重要）🧾🔍
75firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_console_map.png./picture/firebase_extensions_ts_study_010_console_map.pngTheme: Console Map

Labels to Render:
- Left: "Firebase Console"
- Right: "Google Cloud Console"
- Item 1: "Functions / Extensions"
- Item 2: "Scheduler / Secrets"

Visual Details:
1. Core Concept: Tool locations.
2. Metaphor: A map of two adjacent territories.
3. Action: Paths leading to specific buildings in each territory.
4. Layout: Split map.		## 3) 手を動かす前に：見る場所はこの2つだけ🧭👀
76firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_trigger_icons.png./picture/firebase_extensions_ts_study_010_trigger_icons.pngTheme: Trigger Icons

Labels to Render:
- Storage: "Upload"
- Firestore: "Write"
- Auth: "Create User"
- Scheduler: "Time"
- Target: "Function"

Visual Details:
1. Core Concept: Event sources.
2. Metaphor: Different pipes feeding into a main tank (Function).
3. Action: Icons flowing into the center.
4. Layout: Convergence.		## 4) “トリガー（合図）”の見つけ方➡️🧲
77firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_detective_route.png./picture/firebase_extensions_ts_study_010_detective_route.pngTheme: Detective Route

Labels to Render:
- Start: "Error!"
- Step 1: "Dashboard"
- Step 2: "Health"
- Step 3: "Logs"
- Step 4: "Resources"

Visual Details:
1. Core Concept: Investigation steps.
2. Metaphor: Footprints or a treasure hunt path.
3. Action: Detective character following the numbered path.
4. Layout: Winding path.		## 5) いちばん大事：トラブル時の“原因調査ルート”🧯🕵️
78firebase_extensions_ts_study_010.mdfirebase_extensions_ts_study_010_wiring_diagram.png./picture/firebase_extensions_ts_study_010_wiring_diagram.pngTheme: Wiring Diagram

Labels to Render:
- Input: "Image Upload"
- Trigger: "Event"
- Processor: "Extension Function"
- Output: "Thumbnail"

Visual Details:
1. Core Concept: Data flow.
2. Metaphor: An electrical circuit or assembly line.
3. Action: Electricity flowing from Input -> Trigger -> Processor -> Output.
4. Layout: Linear schematic.		## ミニ課題🎯：「トリガーはどこ？入力はどこ？」を矢印で描く➡️🖊️
79firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_resize_factory.png./picture/firebase_extensions_ts_study_011_resize_factory.pngTheme: Resize Factory

Labels to Render:
- Input: "Original (1000px)"
- Machine: "Extension"
- Output 1: "200x200"
- Output 2: "680x680"

Visual Details:
1. Core Concept: Automatic generation.
2. Metaphor: A manufacturing line.
3. Action: One large box enters, two smaller boxes exit.
4. Layout: Left to right flow.		## 1) まず“どう増えるか”を1分で理解🧠
80firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_settings_impact.png./picture/firebase_extensions_ts_study_011_settings_impact.pngTheme: Settings Impact

Labels to Render:
- Config: "RESIZED_IMAGES_PATH='thumbs'"
- Result: "Folder Structure"
- File: "thumbs/img_200x200.jpg"

Visual Details:
1. Core Concept: Configuration effect.
2. Metaphor: A blueprint creating a folder structure.
3. Action: Setting the variable creates the subfolder.
4. Layout: Cause and effect.		## 2) ここだけ確認すればOKな「拡張の設定」🎛️✅
81firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_react_flow.png./picture/firebase_extensions_ts_study_011_react_flow.pngTheme: React Flow

Labels to Render:
- User: "Upload"
- Storage: "Save"
- Ext: "Generate"
- App: "Wait & Show"

Visual Details:
1. Core Concept: Async workflow.
2. Metaphor: A circular interaction.
3. Action: Upload -> Cloud processing -> App polling -> Display.
4. Layout: Cycle or Flowchart.		## 3) Reactで「アップロード→URL取得→表示」🧑‍💻✨
82firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_path_logic.png./picture/firebase_extensions_ts_study_011_path_logic.pngTheme: Path Logic

Labels to Render:
- Original: "dir/file.jpg"
- Split: "dir" + "file" + ".jpg"
- Suffix: "_200x200"
- Join: "dir/thumbs/file_200x200.jpg"

Visual Details:
1. Core Concept: String manipulation.
2. Metaphor: Building blocks.
3. Action: Taking blocks apart and reassembling with new pieces.
4. Layout: Step-by-step assembly.		// AvatarUpload.tsx（例）
83firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_troubleshooting_signs.png./picture/firebase_extensions_ts_study_011_troubleshooting_signs.pngTheme: Troubleshooting Signs

Labels to Render:
- Error 1: "Path Mismatch"
- Error 2: "Size Wait"
- Error 3: "Infinite Loop"

Visual Details:
1. Core Concept: Common errors.
2. Metaphor: Traffic signs or warning hazards.
3. Action: User navigating around obstacles.
4. Layout: Collection of signs.		## 4) 「サムネが出ない！」ときのチェック🧯😵
84firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_ai_filter_scanner.png./picture/firebase_extensions_ts_study_011_ai_filter_scanner.pngTheme: AI Filter Scanner

Labels to Render:
- Input: "Image"
- Scanner: "AI Check"
- Safe: "Resize"
- Unsafe: "Block"

Visual Details:
1. Core Concept: Content moderation.
2. Metaphor: Airport security scanner.
3. Action: Safe bag passes, Unsafe bag rejected.
4. Layout: Gate mechanism.		## 5) おまけ：AIで“安全＆運用ラク”にする🤖✨
85firebase_extensions_ts_study_011.mdfirebase_extensions_ts_study_011_progressive_loading.png./picture/firebase_extensions_ts_study_011_progressive_loading.pngTheme: Progressive Loading

Labels to Render:
- Step 1: "Upload (0s)"
- Step 2: "Show 200px (1s)"
- Step 3: "Show 680px (3s)"
- User: "Fast!"

Visual Details:
1. Core Concept: Perceived performance.
2. Metaphor: A blurry picture becoming clear.
3. Action: Timeline of clarity improvement.
4. Layout: Timeline sequence.		## ミニ課題🎯
86firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_structure_flow.png./picture/firebase_extensions_ts_study_012_structure_flow.pngTheme: Extension Architecture Flow

Labels to Render:
- Instance: "拡張 (設定)"
- Function: "Functions (処理)"
- Log: "Logging (記録)"
- Task: "Tasks (裏仕事)"

Visual Details:
1. Core Concept: Data flow.
2. Metaphor: A pipeline or conveyor belt.
3. Action: Data flowing from Instance -> Function, then branching to Log and Task.
4. Layout: Left to right flow.		## 1) まずは前提の「構造」を1枚で理解 🧩🧠
87firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_console_filter.png./picture/firebase_extensions_ts_study_012_console_filter.pngTheme: Console Log Filtering

Labels to Render:
- Dashboard: "Functions Logs"
- Filter: "拡張のみ表示"
- List: "ログ一覧"

Visual Details:
1. Core Concept: Filtering information.
2. Metaphor: A funnel or filter icon over a list.
3. Action: Many logs entering, only "Extension" logs passing through.
4. Layout: Funnel diagram.		## A. Firebase Consoleで「拡張が作った Functions」だけに絞る 🧠🔎
88firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_failure_types.png./picture/firebase_extensions_ts_study_012_failure_types.pngTheme: Failure Types Classification

Labels to Render:
- Lock: "権限 (403)"
- Switch: "設定ミス"
- Box: "入力データ"
- Globe: "外部要因"

Visual Details:
1. Core Concept: Categorization.
2. Metaphor: Five labeled boxes or icons.
3. Action: Sorting errors into correct bins.
4. Layout: Row of icons.		## 3) 「失敗の型」ベスト5（初心者がハマる順）🧨➡️🛠️
89firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_retry_loop.png./picture/firebase_extensions_ts_study_012_retry_loop.pngTheme: Retry Logic Loop

Labels to Render:
- Error: "失敗"
- Retry On: "再試行 (Loop)"
- Retry Off: "終了 (Drop)"
- Bug: "バグ (無限ループ)"

Visual Details:
1. Core Concept: Control flow.
2. Metaphor: A circular path vs a dead end.
3. Action: "Retry On" leads back to start, "Retry Off" stops. "Bug" creates an infinite circle.
4. Layout: Flowchart.		## 4) リトライの考え方（ここが一番沼りやすい）🌀🧠
90firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_recovery_steps.png./picture/firebase_extensions_ts_study_012_recovery_steps.pngTheme: Recovery Steps

Labels to Render:
- Step 1: "止血 (影響範囲)"
- Step 2: "特定 (ログ確認)"
- Step 3: "復旧 (修正)"

Visual Details:
1. Core Concept: Process.
2. Metaphor: A staircase or 3-step guide.
3. Action: Character climbing the steps.
4. Layout: Ascending steps.		## 5) “復旧手順テンプレ”を作ろう（これが運用力）🧾🛠️
91firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_ui_states.png./picture/firebase_extensions_ts_study_012_ui_states.pngTheme: User Interface States

Labels to Render:
- Processing: "処理中..."
- Failure: "再試行ボタン"
- Success: "画像表示"

Visual Details:
1. Core Concept: UI Feedback.
2. Metaphor: Three smartphone screens.
3. Action: Transitioning from Spinner -> Error/Retry -> Image.
4. Layout: Side-by-side screens.		## 6) 失敗時のUI（ユーザーに見せるのは“安心感”🙂🫶）
92firebase_extensions_ts_study_012.mdfirebase_extensions_ts_study_012_ai_log_analysis.png./picture/firebase_extensions_ts_study_012_ai_log_analysis.pngTheme: AI Log Analysis

Labels to Render:
- Log: "難解なエラー"
- AI: "Gemini"
- Output: "翻訳・対策"

Visual Details:
1. Core Concept: Simplification.
2. Metaphor: A robot reading a complex code scroll and holding up a simple sign.
3. Action: Translation process.
4. Layout: Input -> Processing -> Output.		## 7) AIをガチで運用に混ぜる（2026の勝ちパターン）🤖⚡
93firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_billing_map.png./picture/firebase_extensions_ts_study_013_billing_map.pngTheme: Billing Source

Labels to Render:
- Extension: "無料 (枠)"
- Storage: "課金 (保存)"
- Function: "課金 (実行)"
- Bill: "請求書"

Visual Details:
1. Core Concept: Source of cost.
2. Metaphor: An X-Ray of an Extension box.
3. Action: Inside the free box, internal parts (Storage, Function) are connected to a coin meter.
4. Layout: Cross-section.		## まず結論：Extensions自体が課金されるんじゃない🙅‍♂️➡️ “裏で動くサービス”が課金される💸
94firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_storage_cost.png./picture/firebase_extensions_ts_study_013_storage_cost.pngTheme: Storage Cost Factors

Labels to Render:
- Capacity: "容量 (GB)"
- Operation: "操作 (回数)"
- Transfer: "転送 (配信)"

Visual Details:
1. Core Concept: Three cost drivers.
2. Metaphor: A bucket (Capacity), a hand putting things in (Operation), and a truck driving away (Transfer).
3. Action: All three connected to a price tag.
4. Layout: Three icons.		## ① Cloud Storage（保存＋操作＋配信）🪣📦🌍
95firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_functions_cost.png./picture/firebase_extensions_ts_study_013_functions_cost.pngTheme: Functions Cost Factors

Labels to Render:
- Count: "起動回数"
- Time: "実行時間 (CPU)"
- Log: "ログ量"

Visual Details:
1. Core Concept: Execution metrics.
2. Metaphor: A stopwatch (Time), a tally counter (Count), and a stack of paper (Logs).
3. Action: Meters running.
4. Layout: Dashboard view.		## ② Cloud Functions（画像処理の実行）⚙️🔥
96firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_trigger_scope.png./picture/firebase_extensions_ts_study_013_trigger_scope.pngTheme: Trigger Scope Efficiency

Labels to Render:
- Bad: "全監視 (無駄)"
- Good: "パス指定 (効率)"
- Cost: "請求額"

Visual Details:
1. Core Concept: Filtering triggers.
2. Metaphor: A wide net catching trash (Bad) vs a fishing rod catching one fish (Good).
3. Action: Wide net showing high cost, rod showing low cost.
4. Layout: Comparison.		## ④ “無駄な起動”がいちばん怖い😱（重要！）
97firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_ai_cost.png./picture/firebase_extensions_ts_study_013_ai_cost.pngTheme: AI Feature Cost

Labels to Render:
- Switch: "AI Mode: ON"
- Service: "Genkit / API"
- Cost: "追加料金"

Visual Details:
1. Core Concept: Optional cost.
2. Metaphor: A premium topping or add-on.
3. Action: Adding a "Brain" module to the machine, causing the coin meter to spin faster.
4. Layout: Add-on visualization.		## ⑤ （オプション）AI系機能をONにすると…🤖✨
98firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_calculation_example.png./picture/firebase_extensions_ts_study_013_calculation_example.pngTheme: Cost Calculation

Labels to Render:
- Unit: "2.4MB / 枚"
- Daily: "1.2GB / 日"
- Monthly: "35GB / 月"

Visual Details:
1. Core Concept: Multiplication.
2. Metaphor: Stacking blocks.
3. Action: 1 small block -> stack of blocks -> huge pile of blocks.
4. Layout: Growth progression.		## ステップ2：ざっくり容量を出す（例）📦
99firebase_extensions_ts_study_013.mdfirebase_extensions_ts_study_013_budget_alert.png./picture/firebase_extensions_ts_study_013_budget_alert.pngTheme: Budget Alert limit

Labels to Render:
- Alert: "通知 (Bell)"
- Stop: "停止 (Stop)"
- Reality: "止まらない (Run)"

Visual Details:
1. Core Concept: Alert limitation.
2. Metaphor: A bell ringing but the runner (Cost) keeps running past it.
3. Action: Unlike a wall (Stop), the bell just makes sound.
4. Layout: Action scene.		## ステップ3：コスト事故を防ぐ “安全装置” を入れる🧯🔔
100firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_deadline_calendar.png./picture/firebase_extensions_ts_study_014_deadline_calendar.pngTheme: Service Deadline

Labels to Render:
- Date: "2026-02-03"
- Plan: "Blaze (必須)"
- Spark: "停止 (402)"

Visual Details:
1. Core Concept: Deadline enforcement.
2. Metaphor: A calendar page being torn off or highlighted.
3. Action: "Spark" plan hitting a wall after the date.
4. Layout: Calendar focus.		## まず結論（超重要）✅
101firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_timeline_milestones.png./picture/firebase_extensions_ts_study_014_timeline_milestones.pngTheme: Storage Policy Timeline

Labels to Render:
- 2024: "新規作成 = Blaze"
- 2026: "全利用 = Blaze"
- Goal: "完全有料化"

Visual Details:
1. Core Concept: Chronological change.
2. Metaphor: A road map with two toll gates.
3. Action: Cars passing through 2024 gate (new cars pay) and 2026 gate (all cars pay).
4. Layout: Horizontal timeline.		## 何が変わったの？ざっくり年表🗓️✨
102firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_bucket_formats.png./picture/firebase_extensions_ts_study_014_bucket_formats.pngTheme: Bucket Name Formats

Labels to Render:
- Old: ".appspot.com"
- New: ".firebasestorage.app"
- Check: "Console"

Visual Details:
1. Core Concept: Identification.
2. Metaphor: Two different styles of buckets or ID badges.
3. Action: Magnifying glass inspecting the labels.
4. Layout: Comparison.		## 手を動かす①：自分の“バケット名”を確認しよう🪣🔍
103firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_action_matrix.png./picture/firebase_extensions_ts_study_014_action_matrix.pngTheme: Action Decision Tree

Labels to Render:
- Condition: "Spark?"
- Yes: "Upgrade to Blaze"
- No: "Set Budget Alert"

Visual Details:
1. Core Concept: Logic flow.
2. Metaphor: A flowchart with a diamond decision box.
3. Action: Path splitting based on "Spark" or "Blaze".
4. Layout: Flowchart.		## 1枚で判断！いま何をすべき？🧠🧩
104firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_dependency_break.png./picture/firebase_extensions_ts_study_014_dependency_break.pngTheme: Dependency Failure

Labels to Render:
- Storage: "Error 403"
- Extension: "Trigger Fail"
- User: "No Thumbnail"

Visual Details:
1. Core Concept: Chain reaction.
2. Metaphor: Dominos falling.
3. Action: Storage domino falls, knocking over Extension domino.
4. Layout: Linear chain.		## Extensions視点：ここが“止まりポイント”😱🧩➡️🧯
105firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_blaze_free_tier.png./picture/firebase_extensions_ts_study_014_blaze_free_tier.pngTheme: Free Tier in Paid Plan

Labels to Render:
- Plan: "Blaze"
- Zone: "Free Tier"
- Limit: "5GB"
- Cost: "$0"

Visual Details:
1. Core Concept: Safety zone.
2. Metaphor: A swimming pool with a shallow (free) end and deep (paid) end.
3. Action: User staying in the shallow end.
4. Layout: Cross-section or zone map.		## 2) *.appspot.com の“無償枠水準”を理解する🆓📦
106firebase_extensions_ts_study_014.mdfirebase_extensions_ts_study_014_ai_diagnosis.png./picture/firebase_extensions_ts_study_014_ai_diagnosis.pngTheme: AI Diagnosis

Labels to Render:
- User: "Error 402"
- AI: "Check Plan"
- Solution: "Upgrade"

Visual Details:
1. Core Concept: Problem solving.
2. Metaphor: A robot mechanic checking a car engine.
3. Action: Robot pointing to the "Fuel (Plan)" gauge.
4. Layout: Character interaction.		## AIで“確認と復旧”を加速する🤖⚡（Gemini活用）
107firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_service_account_identity.png./picture/firebase_extensions_ts_study_015_service_account_identity.pngTheme: Service Account Identity

Labels to Render:
- Extension: "Extension"
- ID Card: "Service Account"
- Role: "IAM Role"

Visual Details:
1. Core Concept: Identity assignment.
2. Metaphor: A robot (Extension) holding an ID card with a photo and chip.
3. Action: The chip (Role) defines what the robot can do.
4. Layout: Character focus.		## まず超重要：拡張は “専用のサービスアカウント” で動く🤖🔑
108firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_security_triangle.png./picture/firebase_extensions_ts_study_015_security_triangle.pngTheme: Security Triangle

Labels to Render:
- IAM: "権限 (Role)"
- Secret: "秘密情報 (Key)"
- Trigger: "入口 (Scope)"

Visual Details:
1. Core Concept: Three pillars of security.
2. Metaphor: A shield or triangle with icons at vertices.
3. Action: Each point glowing.
4. Layout: Geometric diagram.		## 1) セキュリティで見るべきポイントは3つだけ🧠🧩
109firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_pre_install_review.png./picture/firebase_extensions_ts_study_015_pre_install_review.pngTheme: Pre-install Review

Labels to Render:
- Document: "README"
- Check 1: "Too much permission?"
- Check 2: "Secret?"
- Tool: "Magnifying Glass"

Visual Details:
1. Core Concept: Inspection.
2. Metaphor: A detective checking a document.
3. Action: Highlighting "Admin Role" on the paper.
4. Layout: Focus on document.		## 2) 手順：インストール前の“秒速セキュリティレビュー”✅⚡
110firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_post_install_inspection.png./picture/firebase_extensions_ts_study_015_post_install_inspection.pngTheme: Post-install Inspection

Labels to Render:
- ID: "ext-instance-id"
- Status: "Active"
- Residue: "Ghost Data"

Visual Details:
1. Core Concept: Operational check.
2. Metaphor: A mechanic checking a machine's ID plate.
3. Action: Also noticing some "Ghost" items (residue) behind the machine.
4. Layout: Scene with depth.		## 3) 手順：インストール後の“安全点検”🧰🔍
111firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_secrets_vault.png./picture/firebase_extensions_ts_study_015_secrets_vault.pngTheme: Secrets Management

Labels to Render:
- Vault: "Secret Manager"
- Key: "API Key"
- Bad: "Git (.env)"

Visual Details:
1. Core Concept: Secure storage.
2. Metaphor: A strong vault vs a cardboard box (Git).
3. Action: Putting the key in the vault, not the box.
4. Layout: Comparison.		## 4) “Secrets（秘密情報）”の鉄則5つ🗝️🧱
112firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_ai_security_guard.png./picture/firebase_extensions_ts_study_015_ai_security_guard.pngTheme: AI Security Review

Labels to Render:
- AI: "Audit Agent"
- Input: "Permissions"
- Output: "Risk Report"

Visual Details:
1. Core Concept: Automated auditing.
2. Metaphor: A robotic security officer scanning a list.
3. Action: Stamping "Approved" or "Review Needed".
4. Layout: Interaction.		## 6) AI を“セキュリティ副操縦士”にする🛸🤖
113firebase_extensions_ts_study_015.mdfirebase_extensions_ts_study_015_audit_sheet.png./picture/firebase_extensions_ts_study_015_audit_sheet.pngTheme: Security Audit Sheet

Labels to Render:
- Sheet: "Audit Log"
- Row 1: "Roles"
- Row 2: "Secrets"
- Row 3: "Triggers"

Visual Details:
1. Core Concept: Documentation.
2. Metaphor: A clipboard with a checklist.
3. Action: A pen checking off items.
4. Layout: Close-up of sheet.		## ミニ課題🎯：あなたの“拡張セキュリティ審査シート”を1枚作ろう📝🛡️
114firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_update_ritual.png./picture/firebase_extensions_ts_study_016_update_ritual.pngTheme: Update Ritual

Labels to Render:
- User: "Button Click"
- Reality: "Ritual (Procedure)"
- Safe: "Success"

Visual Details:
1. Core Concept: Importance of procedure.
2. Metaphor: A user about to press a simple button, but behind it is a complex magical circle (the ritual).
3. Action: User pausing to read the instruction scroll.
4. Layout: Contrast between simple UI and complex reality.		## まず押さえる：更新で何が起きる？🤔💡
115firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_update_vs_reconfigure.png./picture/firebase_extensions_ts_study_016_update_vs_reconfigure.pngTheme: Update vs Reconfigure

Labels to Render:
- Update: "Engine Swap"
- Reconfigure: "Tuning"
- Car: "Extension"

Visual Details:
1. Core Concept: Depth of change.
2. Metaphor: Update = Replacing the engine block. Reconfigure = Adjusting dials on the dashboard.
3. Action: Mechanics working on the car.
4. Layout: Side-by-side comparison.		## ざっくり図：Update と Reconfigure の違い🪄
116firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_safety_steps.png./picture/firebase_extensions_ts_study_016_safety_steps.pngTheme: Safety Steps

Labels to Render:
- Step 1: "Read Diff"
- Step 2: "Staging"
- Step 3: "Prod (Off-peak)"

Visual Details:
1. Core Concept: Staged progression.
2. Metaphor: Three secure gates to pass through.
3. Action: User unlocking each gate sequentially.
4. Layout: Sequential flow.		## 更新を“儀式”にする：安全テンプレ（これだけやれば強い）🧾🛡️
117firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_compatibility_traps.png./picture/firebase_extensions_ts_study_016_compatibility_traps.pngTheme: Compatibility Traps

Labels to Render:
- Param: "Name Change"
- Format: "Output Change"
- Role: "New Permission"
- Trap: "Break"

Visual Details:
1. Core Concept: Hidden dangers.
2. Metaphor: Bear traps hidden in grass.
3. Action: User using a stick (Checklist) to find traps.
4. Layout: Path with obstacles.		## 「互換性」で事故りやすいポイント集⚠️（ここ当たると痛い）
118firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_config_asset.png./picture/firebase_extensions_ts_study_016_config_asset.pngTheme: Configuration as Asset

Labels to Render:
- Config: "manifest.json"
- Vault: "Git Repo"
- Asset: "Value"

Visual Details:
1. Core Concept: Version control.
2. Metaphor: Putting a valuable document (Config) into a secure vault (Git).
3. Action: Locking the vault.
4. Layout: Object focus.		## “バージョン管理”っぽくするコツ：設定をファイルで残す📁✨
119firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_ai_changelog.png./picture/firebase_extensions_ts_study_016_ai_changelog.pngTheme: AI Changelog Analysis

Labels to Render:
- Input: "Diff / Changelog"
- AI: "Analyzer"
- Output: "Risk List"

Visual Details:
1. Core Concept: Risk assessment.
2. Metaphor: A robot reading a long scroll of text and highlighting red sections.
3. Action: Robot handing a summary card to the user.
4. Layout: Process flow.		## AIを絡める：更新の“怖いところ”を速攻で洗い出す🤖🔎
120firebase_extensions_ts_study_016.mdfirebase_extensions_ts_study_016_checklist_pilot.png./picture/firebase_extensions_ts_study_016_checklist_pilot.pngTheme: Update Checklist

Labels to Render:
- Role: "Pilot"
- List: "Pre-flight Check"
- Status: "Ready"

Visual Details:
1. Core Concept: Standard procedure.
2. Metaphor: A pilot checking instruments before takeoff.
3. Action: Ticking boxes on a clipboard.
4. Layout: Cockpit view or character focus.		## 手を動かす🖐️：更新手順書テンプレを作ろう🧾✨
121firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_isolation_concept.png./picture/firebase_extensions_ts_study_017_isolation_concept.pngTheme: Environment Isolation

Labels to Render:
- Dev: "Verification (Safe)"
- Prod: "Production (Real)"
- Wall: "Barrier"

Visual Details:
1. Core Concept: Preventing contamination.
2. Metaphor: A glass wall separating a messy playground (Dev) from a clean room (Prod).
3. Action: Mud from Dev hitting the wall and sliding down, not touching Prod.
4. Layout: Split screen.		## まず30秒：環境分離って何？⏱️
122firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_separation_methods.png./picture/firebase_extensions_ts_study_017_separation_methods.pngTheme: Separation Methods Ranking

Labels to Render:
- Gold: "Separate Projects"
- Silver: "Multi-Instance"
- Bronze: "Config Switch"

Visual Details:
1. Core Concept: Best practices.
2. Metaphor: An Olympic podium.
3. Action: Gold medal winner holding two distinct boxes (Projects). Silver holding one box with a divider.
4. Layout: Podium view.		## 分離のやり方：おすすめ順（強い順）💪
123firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_manual_vs_manifest.png./picture/firebase_extensions_ts_study_017_manual_vs_manifest.pngTheme: Manual vs Manifest

Labels to Render:
- Manual: "Click & Hope"
- Manifest: "Code & Repeat"
- Result: "Stability"

Visual Details:
1. Core Concept: Reproducibility.
2. Metaphor: Building a house of cards (Manual) vs 3D printing a block (Manifest).
3. Action: The house of cards shaking, the block standing firm.
4. Layout: Comparison.		## 手を動かす🖐️：検証→本番へ“同じ拡張”を安全に運ぶ（CLI＋マニフェスト）🧩💻
124firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_manifest_file.png./picture/firebase_extensions_ts_study_017_manifest_file.pngTheme: Extensions Manifest

Labels to Render:
- File: "extensions.json"
- Content: "Version / Source"
- Tool: "CLI"

Visual Details:
1. Core Concept: Configuration as code.
2. Metaphor: A blueprint roll labeled "extensions.json".
3. Action: A CLI terminal printing the blueprint.
4. Layout: Object focus.		## ② 検証プロジェクトに拡張を“ローカルに書き出す形で”追加する📝
125firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_env_injection.png./picture/firebase_extensions_ts_study_017_env_injection.pngTheme: Environment Variable Injection

Labels to Render:
- Ext: "Extension Logic"
- Dev Env: "Test Values"
- Prod Env: "Real Values"

Visual Details:
1. Core Concept: Variable injection.
2. Metaphor: A machine (Extension) with a slot. Two different fuel tanks (Dev/Prod) can be plugged in.
3. Action: Plugging in the "Dev" tank.
4. Layout: Mechanical diagram.		## ④ env/secret を「共通」「devだけ」「prodだけ」に分ける📂🔐
126firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_dual_instance.png./picture/firebase_extensions_ts_study_017_dual_instance.pngTheme: Dual Instance Strategy

Labels to Render:
- Project: "Single Project"
- Inst 1: "resize-dev"
- Inst 2: "resize-prod"

Visual Details:
1. Core Concept: Co-existence.
2. Metaphor: Two separate fenced areas within one large land plot.
3. Action: Each area has its own small house (Extension).
4. Layout: Top-down map.		## 同一プロジェクトでの2インスタンス運用（小ワザ）🧩🧪🏭
127firebase_extensions_ts_study_017.mdfirebase_extensions_ts_study_017_ai_diff_check.png./picture/firebase_extensions_ts_study_017_ai_diff_check.pngTheme: AI Diff Check

Labels to Render:
- Doc 1: "Dev Config"
- Doc 2: "Prod Config"
- AI: "Diff Spotter"
- Alert: "Risk!"

Visual Details:
1. Core Concept: Automated comparison.
2. Metaphor: A robot comparing two papers.
3. Action: Robot pointing a laser at a line that is different.
4. Layout: Comparison.		## AIでラクする（Gemini CLI / コンソールAI）🤖✨
128docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_ai_types.png./picture/firebase_extensions_ts_study_018_ai_types.pngTheme: AI Extension Types

Labels to Render:
- Type A: "Translate (Stable)"
- Type B: "Gemini (Prompt)"
- Input: "Text"
- Output: "Result"

Visual Details:
1. Core Concept: Two processing paths.
2. Metaphor: Two distinct conveyor belts. A is straight (Text -> Text). B has a "Brain" box in the middle (Text -> Brain -> Summary).
3. Action: Goods moving along belts.
4. Layout: Parallel comparison.		## 1) まず超ざっくり：AI拡張には2タイプあるよ🧠✨
129docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_translate_flow.png./picture/firebase_extensions_ts_study_018_translate_flow.pngTheme: Translation Flow

Labels to Render:
- Firestore: "Input Doc"
- Extension: "Translate"
- Update: "Write Back"
- Lang: "en, ko"

Visual Details:
1. Core Concept: Automatic enrichment.
2. Metaphor: A document entering a machine and coming out with extra sticky notes attached.
3. Action: Machine stamping "Translation" on the paper.
4. Layout: Circular or linear flow.		## 2-1. どう動くの？（最短イメージ）👀
130docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_data_structure.png./picture/firebase_extensions_ts_study_018_data_structure.pngTheme: Data Structure

Labels to Render:
- Field: "text"
- Field: "translations"
- Key: "en: Hello"
- Key: "ko: Annyeong"

Visual Details:
1. Core Concept: JSON Hierarchy.
2. Metaphor: A file cabinet folder with a main paper (Text) and a sub-folder (Translations) containing language cards.
3. Action: Organized filing.
4. Layout: Object focus.		## 2-3. Firestoreのデータ設計（例）📚🧱
131docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_react_integration.png./picture/firebase_extensions_ts_study_018_react_integration.pngTheme: React Integration

Labels to Render:
- User: "Type"
- Firestore: "Save"
- Ext: "Listen & Update"
- UI: "Display"

Visual Details:
1. Core Concept: Async loop.
2. Metaphor: A relay race. User passes baton (Text) to Firestore. Ext grabs it, modifies it, passes back to UI.
3. Action: Smooth cycle.
4. Layout: Cycle diagram.		## 2-4. React 側：入力→保存→翻訳表示（最小サンプル）⚛️✨
132docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_multimodal_logic.png./picture/firebase_extensions_ts_study_018_multimodal_logic.pngTheme: Multimodal Logic

Labels to Render:
- Input: "Body"
- Template: "Prompt"
- AI: "Gemini"
- Output: "Summary"

Visual Details:
1. Core Concept: Transformation via Prompt.
2. Metaphor: Baking a cake. Ingredients (Input) + Recipe (Prompt) -> Oven (AI) -> Cake (Output).
3. Action: Mixing ingredients.
4. Layout: Process flow.		## 3-1. ありがちな使い方（例）📌
133docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_prompt_injection.png./picture/firebase_extensions_ts_study_018_prompt_injection.pngTheme: Prompt Injection

Labels to Render:
- User: "Malicious Input"
- AI: "Confused"
- Hidden: "Ignore Instruction"
- Result: "Leak"

Visual Details:
1. Core Concept: Hacking the logic.
2. Metaphor: A wolf in sheep's clothing entering the gate.
3. Action: The "Sheep" (Input) whispering a command to the Guard (AI).
4. Layout: Scene.		## 4) 超重要：AI入力はサニタイズ必須（プロンプトインジェクション対策）🧼🛡️
134docs/firebase_extensions_ts_study_018.mdfirebase_extensions_ts_study_018_defense_layers.png./picture/firebase_extensions_ts_study_018_defense_layers.pngTheme: Defense Layers

Labels to Render:
- Input: "Data"
- Layer 1: "Sanitize"
- Layer 2: "Length Limit"
- Layer 3: "Allow List"
- AI: "Safe AI"

Visual Details:
1. Core Concept: Multiple barriers.
2. Metaphor: Castle walls. Input must pass through moat, outer wall, and inner gate before reaching the King (AI).
3. Action: Arrows stopping at walls.
4. Layout: Perspective view of barriers.		## “初心者でもできる” 守りの10箇条🔟🛡️
135docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_three_ais.png./picture/firebase_extensions_ts_study_019_three_ais.pngTheme: Three AI Pillars

Labels to Render:
- Agent: "Antigravity (Planning)"
- CLI: "Gemini (Terminal)"
- Console: "Web (Ops)"

Visual Details:
1. Core Concept: Three different tools.
2. Metaphor: A command center with 3 stations. A Strategy Map (Agent), A Hacker Console (CLI), and a Monitor Wall (Console).
3. Action: Three operators working in sync.
4. Layout: Triptych or room view.		## 1) まず全体像：AIは“3か所”で効かせる🧠🧩
136docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_mcp_concept.png./picture/firebase_extensions_ts_study_019_mcp_concept.pngTheme: MCP Concept

Labels to Render:
- AI: "Agent"
- MCP: "Connector"
- Firebase: "Project Tools"
- Action: "Control"

Visual Details:
1. Core Concept: Interface standard.
2. Metaphor: A universal remote control (MCP) allowing the AI to operate a TV (Firebase).
3. Action: AI pressing a button.
4. Layout: Schematic.		## 2-2. Antigravity に Firebase MCP server を入れる🧩🛸
137docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_gemini_cli_react.png./picture/firebase_extensions_ts_study_019_gemini_cli_react.pngTheme: Gemini CLI Loop

Labels to Render:
- Think: "Plan"
- Act: "Command"
- Observe: "Result"
- Loop: "ReAct"

Visual Details:
1. Core Concept: Iterative problem solving.
2. Metaphor: A scientist loop. Hypothesize -> Experiment -> Analyze -> Repeat.
3. Action: Cycle arrows.
4. Layout: Circular flow.		## 2-3. Gemini CLI に Firebase 連携を入れる（推奨）🔌⌨️
138docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_parameter_generation.png./picture/firebase_extensions_ts_study_019_parameter_generation.pngTheme: Parameter Generation

Labels to Render:
- Input: "extension.yaml"
- Process: "AI Analysis"
- Output: "Parameter Table"

Visual Details:
1. Core Concept: Documentation automation.
2. Metaphor: A scanner turning a jumbled pile of blocks (YAML) into a neat catalog (Table).
3. Action: Sorting and listing.
4. Layout: Transformation flow.		## 3-1. パラメータ表をAIに作らせる📋✨（最優先）
139docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_error_handling_triage.png./picture/firebase_extensions_ts_study_019_error_handling_triage.pngTheme: Error Triage

Labels to Render:
- Step 1: "Translate (Console)"
- Step 2: "Fact Check (CLI)"
- Step 3: "Prevent (Doc)"
- Goal: "Solved"

Visual Details:
1. Core Concept: Systematic debugging.
2. Metaphor: Medical triage. 1. Diagnosis (Translate). 2. Lab Test (Fact Check). 3. Prescription (Prevent).
3. Action: Doctor checking patient.
4. Layout: Three-step progression.		## 3-2. エラー調査を“3段階”に分けてAIに振る🧯🔍
140docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_update_checklist.png./picture/firebase_extensions_ts_study_019_update_checklist.pngTheme: Update Checklist

Labels to Render:
- Source: "Release Notes"
- AI: "Drafter"
- Output: "Checklist"
- Check: "Human Review"

Visual Details:
1. Core Concept: AI-assisted preparation.
2. Metaphor: AI robot writing a draft on a clipboard, human putting a stamp of approval.
3. Action: Collaboration.
4. Layout: Interaction.		## 3-3. 更新前チェックリストをAIに下書きさせる🔁✅
141docs/firebase_extensions_ts_study_019.mdfirebase_extensions_ts_study_019_log_summarization.png./picture/firebase_extensions_ts_study_019_log_summarization.pngTheme: Log Summarization

Labels to Render:
- Logs: "Raw Errors"
- AI: "Summarizer"
- Firestore: "Incident Doc"
- Value: "Knowledge"

Visual Details:
1. Core Concept: Distilling wisdom.
2. Metaphor: Distilling perfume. Rose petals (Logs) -> Distiller (AI) -> Essence bottle (Firestore).
3. Action: Drops of essence falling.
4. Layout: Vertical process.		## 4) Firebase AIサービスも絡める：運用ログを“要約して保存”🧠📌
142docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_decision_costs.png./picture/firebase_extensions_ts_study_020_decision_costs.pngTheme: Three Costs Balance

Labels to Render:
- Dev: "Development"
- Ops: "Operation"
- Future: "Maintenance"
- Scale: "Balance"

Visual Details:
1. Core Concept: Weighing factors.
2. Metaphor: A three-pan balance scale (or just 3 weights on a seesaw).
3. Action: Balancing the weights.
4. Layout: Equilibrium.		## 0) まず結論：判断のコアは “3つのコスト” 💸🧠🧯
143docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_judgment_sheet.png./picture/firebase_extensions_ts_study_020_judgment_sheet.pngTheme: Judgment Sheet

Labels to Render:
- Col 1: "Aspect"
- Col 2: "Extension"
- Col 3: "Custom"
- Check: "Tick / Cross"

Visual Details:
1. Core Concept: Comparison matrix.
2. Metaphor: A scorecard or clipboard with two columns.
3. Action: Ticking boxes.
4. Layout: Table view.		## 1) 10分で作れる「判断シート」テンプレ⚖️🧾
144docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_install_checks.png./picture/firebase_extensions_ts_study_020_install_checks.pngTheme: Install Checkpoints

Labels to Render:
- API: "Enabled?"
- Resource: "Created?"
- Bill: "Blaze?"
- Access: "Granted?"

Visual Details:
1. Core Concept: Mandatory review items.
2. Metaphor: Four security checkpoints at an airport.
3. Action: Passing through each gate.
4. Layout: Linear path.		## 2) 判断のための「公式チェックポイント」3つ🔍🧩
145docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_decision_flowchart.png./picture/firebase_extensions_ts_study_020_decision_flowchart.pngTheme: Decision Flowchart

Labels to Render:
- Start: "Need Tweak?"
- Yes: "Custom"
- No: "Extension"
- Branch: "Recovery?"

Visual Details:
1. Core Concept: Logic tree.
2. Metaphor: A road fork sign.
3. Action: Choosing a path based on signs.
4. Layout: Branching path.		## 3) 迷ったら使う “二択フローチャート” 🧭⚖️
146docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_resize_comparison.png./picture/firebase_extensions_ts_study_020_resize_comparison.pngTheme: Resize Complexity

Labels to Render:
- Simple: "Extension (Resize Only)"
- Complex: "Custom (Detect Face + Watermark)"
- Comparison: "Scope"

Visual Details:
1. Core Concept: Complexity contrast.
2. Metaphor: A simple knife (Extension) vs a Swiss Army knife (Custom).
3. Action: Tools displayed side by side.
4. Layout: Comparison.		## 4) 具体例で腹落ち：Resize Images はどこまでExtensionsでいける？📷➡️🖼️
147docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_escape_route.png./picture/firebase_extensions_ts_study_020_escape_route.pngTheme: Escape Route Strategy

Labels to Render:
- App: "App Interface"
- Adapter: "Contract"
- Impl: "Extension / Custom"
- Switch: "Swap"

Visual Details:
1. Core Concept: Abstraction.
2. Metaphor: A plug socket (Interface). You can plug in a Lamp (Extension) or a Fan (Custom) without changing the wall (App).
3. Action: Swapping the plug.
4. Layout: Connector focus.		## 5) 「まずExtensions → 後で自作」へ逃げ道を作る🏃‍♂️💨
148docs/firebase_extensions_ts_study_020.mdfirebase_extensions_ts_study_020_manifest_export.png./picture/firebase_extensions_ts_study_020_manifest_export.pngTheme: Manifest Export

Labels to Render:
- Cloud: "Project Settings"
- CLI: "Export"
- File: "extensions.json"
- Goal: "Reproduce"

Visual Details:
1. Core Concept: Saving state.
2. Metaphor: Taking a snapshot of a cloud layout and printing a photo (Manifest).
3. Action: Camera clicking.
4. Layout: Capture process.		## 6) 再現性の切り札：Extensions manifest で「設定をコード化」📦🧾