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

image_generation_plan.hosting_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
621docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_01_goal.png./picture/firebase_hosting_ts_index_01_goal.pngTheme: Deployment Pipeline Goal

Labels to Render:
- PR: "Pull Request"
- Preview: "Preview URL"
- Merge: "Merge to Main"
- Live: "Live URL"

Visual Details:
1. Core Concept: The flow from development to production.
2. Metaphor: A clean conveyor belt or pipeline.
3. Action: Code moving from PR -> Preview -> Merge -> Live.
4. Layout: Left-to-right flow.		## このカテゴリで作る完成イメージ🎯
622docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_02_ecosystem.png./picture/firebase_hosting_ts_index_02_ecosystem.pngTheme: Service Ecosystem

Labels to Render:
- Core: "Hosting"
- Helper: "GitHub Actions"
- Brain: "AI Logic"
- Tool: "Genkit"

Visual Details:
1. Core Concept: How the services interconnect.
2. Metaphor: A constellation or network diagram.
3. Action: Services connecting to the central Hosting node.
4. Layout: Network diagram.		## 使う主要サービス🧩
623docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_03_part_a.png./picture/firebase_hosting_ts_index_03_part_a.pngTheme: Static Hosting Concept

Labels to Render:
- Local: "My PC"
- Cloud: "Hosting"
- World: "Public URL"

Visual Details:
1. Core Concept: Simple static file hosting.
2. Metaphor: Uploading a box (PC) to a cloud, which beams it to the world.
3. Action: Uploading/Beaming.
4. Layout: Vertical ascent.		## Part A：まず “公開できた！” を作る🚀
624docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_04_part_b.png./picture/firebase_hosting_ts_index_04_part_b.pngTheme: CI/CD Robot

Labels to Render:
- Robot: "GitHub Actions"
- Task: "Build & Deploy"
- Target: "Preview / Live"

Visual Details:
1. Core Concept: Automation of deployment.
2. Metaphor: A robot worker taking code, building it, and placing it on the correct shelf (Preview or Live).
3. Action: Automating.
4. Layout: Process flow.		## Part B：CI/CDで “PRプレビュー→本番” を回す🤖🔁
625docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_05_part_c.png./picture/firebase_hosting_ts_index_05_part_c.pngTheme: Quality Shield

Labels to Render:
- Shield: "HTTPS / Cache"
- Domain: "Custom Domain"
- Site: "My App"

Visual Details:
1. Core Concept: Enhancing security and performance.
2. Metaphor: A golden shield protecting the application website.
3. Action: Protecting.
4. Layout: Central composition.		## Part C：公開品質を上げる（HTTPS・キャッシュ・ドメイン）🌐🛡️
626docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_06_part_d.png./picture/firebase_hosting_ts_index_06_part_d.pngTheme: App Hosting Dynamic

Labels to Render:
- Static: "Hosting"
- Dynamic: "App Hosting (SSR)"
- Server: "Backend Logic"

Visual Details:
1. Core Concept: Adding dynamic capabilities.
2. Metaphor: A static billboard (Hosting) vs an interactive screen (App Hosting).
3. Action: Comparison.
4. Layout: Side-by-side.		## Part D：App Hostingで“動的Web”も運用する🧩🚀
627docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_07_part_e.png./picture/firebase_hosting_ts_index_07_part_e.pngTheme: AI Ops Team

Labels to Render:
- Agent 1: "Deploy Helper"
- Agent 2: "Monitor"
- Human: "Manager"

Visual Details:
1. Core Concept: AI assisting with operations.
2. Metaphor: A human manager flanked by two AI robots handling tasks.
3. Action: Collaboration.
4. Layout: Team shot.		## Part E：AIで“リリース体験”を実務っぽくする🤖🔥
628docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_01_public_concept.png./picture/firebase_hosting_ts_study_001_01_public_concept.pngTheme: Public Hosting Concept

Labels to Render:
- Source: "Code (Local)"
- Cloud: "Firebase Hosting"
- User: "World Wide"

Visual Details:
1. Core Concept: Deploying local code to the cloud for global access.
2. Metaphor: A rocket launching from a laptop to a cloud, which then rains down access to users around the globe.
3. Action: Launching/Broadcasting.
4. Layout: Bottom-up flow.		## 1) そもそも「公開」って何？🌐
629docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_02_hosting_use_case.png./picture/firebase_hosting_ts_study_001_02_hosting_use_case.pngTheme: Hosting for SPA

Labels to Render:
- File: "index.html"
- Asset: "JS / CSS"
- User: "Browser"

Visual Details:
1. Core Concept: Serving static files.
2. Metaphor: A waiter (Hosting) simply handing a menu (File) to a customer (Browser).
3. Action: Serving.
4. Layout: Simple interaction.		## ✅ Hosting が向いてる（基本、ReactのSPAはこっち）⚡
630docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_03_app_hosting_use_case.png./picture/firebase_hosting_ts_study_001_03_app_hosting_use_case.pngTheme: App Hosting for SSR

Labels to Render:
- Server: "Node.js (SSR)"
- Action: "Generate HTML"
- User: "Browser"

Visual Details:
1. Core Concept: Dynamic content generation.
2. Metaphor: A chef (App Hosting) cooking a meal (HTML) on demand for a customer (Browser).
3. Action: Cooking/Generating.
4. Layout: Process flow.		## ✅ App Hosting が向いてる（SSR/フルスタック寄り）🚀
631docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_04_comparison.png./picture/firebase_hosting_ts_study_001_04_comparison.pngTheme: Hosting vs App Hosting

Labels to Render:
- Hosting: "Static (Fast)"
- App Hosting: "Dynamic (Smart)"
- Use Case: "SPA vs SSR"

Visual Details:
1. Core Concept: Comparison of strengths.
2. Metaphor: A sports car (Hosting/Speed) vs a multi-purpose truck (App Hosting/Power).
3. Action: Racing/Hauling.
4. Layout: Side-by-side.		## 3) Hosting と App Hosting を「一枚で」比較🧾✨
632docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_05_decision_tree.png./picture/firebase_hosting_ts_study_001_05_decision_tree.pngTheme: Selection Flowchart

Labels to Render:
- Start: "Need SSR?"
- Yes: "App Hosting"
- No: "Hosting"
- Question: "Static Files?"

Visual Details:
1. Core Concept: A simple decision path.
2. Metaphor: A fork in the road.
3. Action: Choosing a path.
4. Layout: Flowchart.		## 4) 仕分けの超シンプル診断（これだけで8割当たる）🎯
633docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_06_ai_helper.png./picture/firebase_hosting_ts_study_001_06_ai_helper.pngTheme: AI Decision Helper

Labels to Render:
- User: "Which one?"
- AI: "Analyze Code"
- Result: "Hosting!"

Visual Details:
1. Core Concept: AI analyzing the project to recommend a service.
2. Metaphor: A robot detective inspecting the code blueprint.
3. Action: Inspecting/Recommending.
4. Layout: Interaction.		## 6) AIで「仕分け」を爆速にする🤖⚡（ここが2026っぽい）
634docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_07_build_check.png./picture/firebase_hosting_ts_study_001_07_build_check.pngTheme: Build Folder Check

Labels to Render:
- Folder: "dist/"
- File: "index.html"
- Check: "Static Files Found"

Visual Details:
1. Core Concept: Verifying the build output.
2. Metaphor: Opening a box (dist folder) and finding a document (index.html).
3. Action: Checking.
4. Layout: Box interior.		## 7) 手を動かす🛠️：自分のアプリを“仕分け”してみよう
635docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_01_process_overview.png./picture/firebase_hosting_ts_study_002_01_process_overview.pngTheme: Hosting Deployment Flow

Labels to Render:
- Local: "PC (Box)"
- Transport: "CLI (Truck)"
- Destination: "Cloud (Firebase)"

Visual Details:
1. Core Concept: Moving code from local to cloud.
2. Metaphor: A delivery truck (CLI) carrying a box (Code) from a house (PC) to an island (Cloud).
3. Action: Transporting.
4. Layout: Left-to-right journey.		## 1) まず “全体像” を頭に入れる🧠🗺️
636docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_02_node_selection.png./picture/firebase_hosting_ts_study_002_02_node_selection.pngTheme: Node.js Version Selection

Labels to Render:
- v18: "Stop (Old)"
- v24: "Go (LTS)"
- v25: "Caution (New)"

Visual Details:
1. Core Concept: Choosing the correct Node version.
2. Metaphor: A traffic light or lane selection.
3. Action: Choosing the middle/green lane (v24).
4. Layout: Comparison.		## Step C：Node.js を入れる（CLIの土台）🟩
637docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_03_cli_install.png./picture/firebase_hosting_ts_study_002_03_cli_install.pngTheme: Firebase CLI Install

Labels to Render:
- Command: "npm i -g firebase-tools"
- Tool: "Firebase Hammer"
- Status: "Ready"

Visual Details:
1. Core Concept: Installing the main tool.
2. Metaphor: A developer equipping a specialized hammer or wrench labeled 'Firebase'.
3. Action: Equipping.
4. Layout: Tool acquisition.		## Step D：Firebase CLI をインストールする🧰
638docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_04_init_wizard.png./picture/firebase_hosting_ts_study_002_04_init_wizard.pngTheme: Init Wizard

Labels to Render:
- CLI: "firebase init"
- Q1: "Project?"
- Q2: "Public dir?"
- Q3: "SPA?"

Visual Details:
1. Core Concept: The interactive setup process.
2. Metaphor: A wizard character asking 3 questions to generate a scroll (config file).
3. Action: Answering.
4. Layout: Interactive dialogue.		## Step F：Hosting を初期化する（ここが本章のメイン！）🧱✨
639docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_05_public_folder.png./picture/firebase_hosting_ts_study_002_05_public_folder.pngTheme: Public Directory Concept

Labels to Render:
- Folder: "public/"
- Content: "HTML / CSS"
- Action: "Upload"

Visual Details:
1. Core Concept: The specific folder that gets uploaded.
2. Metaphor: A designated tray or box where items must be placed to be shipped.
3. Action: Placing items in the box.
4. Layout: Box focus.		## 3) public ディレクトリって何？📦（ここが超重要）
640docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_06_mcp_server.png./picture/firebase_hosting_ts_study_002_06_mcp_server.pngTheme: Firebase MCP Server

Labels to Render:
- AI: "Gemini Agent"
- Tool: "Firebase Tool"
- MCP: "Connector"

Visual Details:
1. Core Concept: AI accessing Firebase via MCP.
2. Metaphor: A robot (AI) plugging a connector (MCP) into a socket (Firebase) to control it.
3. Action: Connecting.
4. Layout: Connection flow.		## 4-2) Antigravity / Gemini CLI から Firebase を“会話で操作しやすくする”🧩
641docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_07_troubleshooting.png./picture/firebase_hosting_ts_study_002_07_troubleshooting.pngTheme: Common Errors

Labels to Render:
- Error 1: "Node Mismatch"
- Error 2: "Login Fail"
- Error 3: "Wrong Project"
- Fix: "Check Config"

Visual Details:
1. Core Concept: Identifying common blockers.
2. Metaphor: Three warning signs on the road. 1. Version conflict. 2. Locked door. 3. Wrong map.
3. Action: Identifying.
4. Layout: Warning cluster.		## 7) よくある詰まりポイント🧯（速攻で抜けるやつ）
642docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_01_build_deploy_flow.png./picture/firebase_hosting_ts_study_003_01_build_deploy_flow.pngTheme: Build and Deploy Flow

Labels to Render:
- Code: "Source"
- Build: "Vite"
- Artifact: "dist/"
- Deploy: "CLI"
- Cloud: "Hosting"

Visual Details:
1. Core Concept: Transformation from code to cloud.
2. Metaphor: A manufacturing line. Raw materials (Source) -> Machine (Vite) -> Product (dist) -> Truck (CLI) -> Store (Cloud).
3. Action: Manufacturing/Shipping.
4. Layout: Left-to-right process.		## 1) 読む📚：手動デプロイって何をしてるの？🤔
643docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_02_dist_folder.png./picture/firebase_hosting_ts_study_003_02_dist_folder.pngTheme: Dist Folder Content

Labels to Render:
- Folder: "dist/"
- File 1: "index.html"
- File 2: "assets/index.js"
- Status: "Ready to Ship"

Visual Details:
1. Core Concept: The contents of the build folder.
2. Metaphor: An open shipping box containing the essential files.
3. Action: Packing.
4. Layout: Box contents.		## Step 2：ビルドして dist/ を作る📦✨
644docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_03_vite_init.png./picture/firebase_hosting_ts_study_003_03_vite_init.pngTheme: Init Question for Vite

Labels to Render:
- Question: "What is your public directory?"
- Answer: "dist"
- Result: "Config Updated"

Visual Details:
1. Core Concept: Configuring the correct folder.
2. Metaphor: A user typing 'dist' into a terminal prompt.
3. Action: Typing.
4. Layout: Terminal view.		## Step 3：Hostingの初期化（第2章で済ならスキップ）🧱
645docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_04_json_config.png./picture/firebase_hosting_ts_study_003_04_json_config.pngTheme: Firebase JSON Structure

Labels to Render:
- File: "firebase.json"
- Field: "hosting"
- Key: "public: 'dist'"

Visual Details:
1. Core Concept: The configuration mapping.
2. Metaphor: A blueprint highlighting the crucial line public: 'dist'.
3. Action: Highlighting.
4. Layout: Document focus.		## Step 4：firebase.json を確認（大事ポイント）🧾👀
646docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_05_deploy_success.png./picture/firebase_hosting_ts_study_003_05_deploy_success.pngTheme: Deploy Success Screen

Labels to Render:
- Terminal: "Deploy complete!"
- URL: "https://my-app.web.app"
- Action: "Click to Open"

Visual Details:
1. Core Concept: Successful deployment result.
2. Metaphor: A terminal screen with green text and a clickable link.
3. Action: Success notification.
4. Layout: Screen capture style.		## Step 5：いよいよ手動デプロイ！🚀🌐
647docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_06_edit_cycle.png./picture/firebase_hosting_ts_study_003_06_edit_cycle.pngTheme: Deployment Cycle

Labels to Render:
- 1: "Edit Code"
- 2: "Build (npm run build)"
- 3: "Deploy (firebase deploy)"
- 4: "Verify (Browser)"

Visual Details:
1. Core Concept: The iterative process.
2. Metaphor: A circular cycle showing the 4 steps.
3. Action: Cycling.
4. Layout: Circular diagram.		## Step 6：更新→再ビルド→再デプロイ（“公開更新”を体に覚えさせる）🔁🔥
648docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_07_public_error.png./picture/firebase_hosting_ts_study_003_07_public_error.pngTheme: Wrong Public Folder Error

Labels to Render:
- Config: "public: 'public' (Wrong)"
- Build: "dist/ (Ignored)"
- Result: "Default Page"

Visual Details:
1. Core Concept: Mismatch between config and build output.
2. Metaphor: A truck picking up an empty box (public) while the full box (dist) is left behind.
3. Action: Mistake.
4. Layout: Error scenario.		## 5) つまずき救急箱🧯（よくあるやつだけ！）
649docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_01_blueprint_concept.png./picture/firebase_hosting_ts_study_004_01_blueprint_concept.pngTheme: firebase.json Blueprint

Labels to Render:
- Doc: "firebase.json"
- Project: "My App"
- Role: "Controller"

Visual Details:
1. Core Concept: The central configuration file.
2. Metaphor: A blueprint or control panel that dictates how the project behaves.
3. Action: Controlling.
4. Layout: Central document.		## 1) firebase.json って何者？🧐
650docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_02_public_mapping.png./picture/firebase_hosting_ts_study_004_02_public_mapping.pngTheme: Public Folder Mapping

Labels to Render:
- Config: "public: 'dist'"
- Folder: "dist/"
- Arrow: "Deploy"
- Cloud: "Hosting"

Visual Details:
1. Core Concept: Mapping the local folder to the cloud destination.
2. Metaphor: A tunnel connecting the local 'dist' folder to the cloud.
3. Action: Transferring.
4. Layout: Connection flow.		## 2) public は「デプロイするフォルダ」📦➡️🌐
651docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_03_ignore_block.png./picture/firebase_hosting_ts_study_004_03_ignore_block.pngTheme: Ignore Mechanism

Labels to Render:
- Allowed: "index.html"
- Ignored: "node_modules/"
- Barrier: "ignore: [...]"

Visual Details:
1. Core Concept: Blocking unwanted files.
2. Metaphor: A security gate allowing the HTML file to pass but stopping the heavy 'node_modules' box.
3. Action: Blocking.
4. Layout: Gatekeeper.		## 3) ignore は「デプロイしないもの」🧹🛑
652docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_04_filtering_logic.png./picture/firebase_hosting_ts_study_004_04_filtering_logic.pngTheme: Deploy Filter

Labels to Render:
- Green: "Public (HTML/JS)"
- Red: "Private (.env/Git)"
- Action: "Sort"

Visual Details:
1. Core Concept: Distinguishing public vs private files.
2. Metaphor: Sorting mail into 'Send' (Green) and 'Shred/Keep' (Red) bins.
3. Action: Sorting.
4. Layout: Sorting bins.		## 4) 「出すもの／無視するもの」判断の超シンプル基準 🧠✨
653docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_05_dist_finder.png./picture/firebase_hosting_ts_study_004_05_dist_finder.pngTheme: Finding Build Artifacts

Labels to Render:
- Command: "npm run build"
- Search: "Where is it?"
- Found: "dist/"

Visual Details:
1. Core Concept: Identifying the output folder.
2. Metaphor: A magnifying glass finding a folder labeled 'dist' among other folders.
3. Action: Searching/Finding.
4. Layout: Folder search.		## Step 1：ビルド成果物フォルダを確認する 👀📁
654docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_06_checklist.png./picture/firebase_hosting_ts_study_004_06_checklist.pngTheme: Pre-deploy Checklist

Labels to Render:
- Check 1: "Folder Exists"
- Check 2: "index.html inside"
- Check 3: "No Secrets"

Visual Details:
1. Core Concept: Final verification before deploy.
2. Metaphor: A clipboard with 3 checked items and a 'Ready' stamp.
3. Action: Checking.
4. Layout: Checklist.		## Step 3：デプロイ前のセルフチェック ✅🧪
655docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_07_ai_audit.png./picture/firebase_hosting_ts_study_004_07_ai_audit.pngTheme: AI Configuration Audit

Labels to Render:
- File: "firebase.json"
- Agent: "Gemini"
- Result: "Looks Good!"

Visual Details:
1. Core Concept: AI reviewing the configuration.
2. Metaphor: A robot scanning the JSON file with a green laser.
3. Action: Scanning/Approving.
4. Layout: Scan view.		## 1) Firebase MCP server を使うと「設定の確認」が速い 🧩⚡
656docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_01_404_problem.png./picture/firebase_hosting_ts_study_005_01_404_problem.pngTheme: The SPA 404 Problem

Labels to Render:
- User: "Request /about"
- Server: "No about.html?"
- Result: "404 Not Found"

Visual Details:
1. Core Concept: Server looks for a physical file matching the URL.
2. Metaphor: A postman asking for a specific room number at a hotel, but the front desk (Server) says "We don't have that room" because they only know the lobby (index.html).
3. Action: Confusion/Rejection.
4. Layout: Interaction between User and Server.		## 1) まず何が起きてるの？😵‍💫
657docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_02_rewrite_solution.png./picture/firebase_hosting_ts_study_005_02_rewrite_solution.pngTheme: The Rewrite Solution

Labels to Render:
- Request: "/about"
- Hosting: "Serve index.html"
- Browser: "Router handles /about"

Visual Details:
1. Core Concept: Server always serves the main entry point regardless of the path.
2. Metaphor: A magician pulling the same rabbit (index.html) out of different hats (/about, /contact).
3. Action: Serving content.
4. Layout: One-to-many mapping.		## 2) 解決方針はこれ！✅「全部 index.html に書き換えて返す」
658docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_03_redirect_vs_rewrite.png./picture/firebase_hosting_ts_study_005_03_redirect_vs_rewrite.pngTheme: Redirect vs Rewrite

Labels to Render:
- Redirect: "Go There -> New Request"
- Rewrite: "Stay Here -> Same Content"
- User: "Browser"

Visual Details:
1. Core Concept: The difference in browser behavior.
2. Metaphor: Redirect is a signpost pointing away. Rewrite is a facade change without moving.
3. Action: Comparison.
4. Layout: Side-by-side.		## 3) redirect と rewrite の違い（ここ超大事）⚠️
659docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_04_config_catch_all.png./picture/firebase_hosting_ts_study_005_04_config_catch_all.pngTheme: Catch-All Configuration

Labels to Render:
- Source: "** (Everything)"
- Destination: "/index.html"
- File: "firebase.json"

Visual Details:
1. Core Concept: The configuration syntax.
2. Metaphor: A funnel catching all water droplets (**) and directing them into a single pipe (index.html).
3. Action: Funneling.
4. Layout: Diagram.		## 4) 実装：firebase.json に rewrites を追加しよう🛠️
660docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_05_rule_order.png./picture/firebase_hosting_ts_study_005_05_rule_order.pngTheme: Rule Priority

Labels to Render:
- Rule 1: "Specific (/api)"
- Rule 2: "Catch-All (**)"
- Request: "/api/users"
- Match: "Rule 1 Wins"

Visual Details:
1. Core Concept: Top-down evaluation.
2. Metaphor: A ball falling through a pachinko machine. It hits the first pin (Rule 1) and stops.
3. Action: Falling/Stopping.
4. Layout: Vertical flow.		## 罠2：APIや特殊パスまでSPAに吸い込まれる😵
661docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_06_deployment_flow.png./picture/firebase_hosting_ts_study_005_06_deployment_flow.pngTheme: Hosting Deploy Command

Labels to Render:
- Command: "firebase deploy --only hosting"
- Target: "Hosting Only"
- Others: "Functions (Skipped)"

Visual Details:
1. Core Concept: Selective deployment.
2. Metaphor: A sniper scope targeting only one specific building (Hosting) in a city (Firebase Project).
3. Action: Targeting.
4. Layout: Focus view.		## 6) 本番へ反映（Hostingだけデプロイ）🚢
662docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_07_ai_review.png./picture/firebase_hosting_ts_study_005_07_ai_review.pngTheme: AI Configuration Review

Labels to Render:
- File: "firebase.json"
- AI: "Gemini / Antigravity"
- Check: "SPA Rules OK"

Visual Details:
1. Core Concept: AI validating the setup.
2. Metaphor: A robot inspector stamping "Approved" on a document.
3. Action: Approving.
4. Layout: Document review.		## B) Antigravity / Gemini CLI × Firebase MCP server で“設定レビュー”🧩
663docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_01_preview_concept.png./picture/firebase_hosting_ts_study_006_01_preview_concept.pngTheme: Preview Channel Concept

Labels to Render:
- Live: "Main Stage (Public)"
- Preview: "Rehearsal Room (Invite)"
- User: "Developer"

Visual Details:
1. Core Concept: A safe space to test before going live.
2. Metaphor: A theater. The main stage is lit up for the audience. A side door leads to a rehearsal room where the dev team is testing.
3. Action: Peeking.
4. Layout: Side-by-side comparison.		## まず理解：Preview Channelってなに？🤔🧠
664docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_02_url_structure.png./picture/firebase_hosting_ts_study_006_02_url_structure.pngTheme: Preview URL Anatomy

Labels to Render:
- Project: "my-project"
- Channel: "pr-123"
- Hash: "Random Hash"
- Domain: ".web.app"

Visual Details:
1. Core Concept: Breaking down the complex URL.
2. Metaphor: A key with different notches. The Hash notch makes it unique and hard to guess.
3. Action: Analyzing.
4. Layout: Horizontal breakdown.		* preview URL は ランダムハッシュ入りで推測されにくいけど、
665docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_03_deploy_command.png./picture/firebase_hosting_ts_study_006_03_deploy_command.pngTheme: Deploy Command Breakdown

Labels to Render:
- Command: "firebase hosting:channel:deploy"
- ID: "pr-123"
- Expiry: "--expires 7d"

Visual Details:
1. Core Concept: The anatomy of the CLI command.
2. Metaphor: A recipe card showing ingredients (Command, ID, Expiry).
3. Action: Cooking/Deploying.
4. Layout: Text focus with annotations.		## 2) preview チャンネルへデプロイする🚀🔎
666docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_04_update_cycle.png./picture/firebase_hosting_ts_study_006_04_update_cycle.pngTheme: Update Cycle

Labels to Render:
- Step 1: "Edit Code"
- Step 2: "Build"
- Step 3: "Deploy (Same ID)"
- Result: "URL Updated"

Visual Details:
1. Core Concept: Iterative development on the same URL.
2. Metaphor: A painter adding layers to the same canvas. The canvas ID stays the same, but the picture changes.
3. Action: Painting/Updating.
4. Layout: Circular cycle.		## 4) ちょい修正して「同じURL」に上書きする🔁✨
667docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_05_management_commands.png./picture/firebase_hosting_ts_study_006_05_management_commands.pngTheme: Channel Management Commands

Labels to Render:
- List: "See All"
- Open: "View Site"
- Delete: "Remove"

Visual Details:
1. Core Concept: The three main management actions.
2. Metaphor: A remote control with buttons: List (Menu), Open (Play), Delete (Trash).
3. Action: Controlling.
4. Layout: Button interface.		## チャンネル管理（覚えると運用っぽくなる）🧹📋
668docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_06_shared_backend.png./picture/firebase_hosting_ts_study_006_06_shared_backend.pngTheme: Shared Backend Risk

Labels to Render:
- Live App: "Production"
- Preview App: "Testing"
- Database: "Real Firestore (Shared!)"
- Warning: "Delete affects both!"

Visual Details:
1. Core Concept: Multiple frontends touching the same backend.
2. Metaphor: Two pipes (Live/Preview) feeding into the same water tank (DB). If poison (bad data) enters via Preview pipe, the tank gets contaminated.
3. Action: Contamination risk.
4. Layout: Convergence diagram.		## ❶ 「プレビューで動かしたら、DBの中身が変わった！」💥
669docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_07_ai_helper.png./picture/firebase_hosting_ts_study_006_07_ai_helper.pngTheme: AI CLI Assistant

Labels to Render:
- User: "Create preview for 3 days"
- AI: "firebase hosting:channel:deploy pr-1 --expires 3d"
- Tool: "Gemini CLI"

Visual Details:
1. Core Concept: AI translating intent to command.
2. Metaphor: A translator robot. User speaks natural language, Robot outputs CLI command.
3. Action: Translating.
4. Layout: Interaction.		## 1) Firebase MCP server を入れると、AIからFirebase操作がやりやすい🧩
670docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_01_automation_concept.png./picture/firebase_hosting_ts_study_007_01_automation_concept.pngTheme: PR Preview Automation

Labels to Render:
- User: "Create PR"
- Action: "Auto Deploy"
- Result: "Comment URL"
- Channel: "Preview Channel"

Visual Details:
1. Core Concept: The automated workflow triggered by a PR.
2. Metaphor: A user dropping a letter (PR) into a chute. A machine (Actions) instantly builds a model house (Preview) and prints a ticket (URL) for the user.
3. Action: Manufacturing.
4. Layout: Cycle or linear flow.		## 2) 仕組みを超ざっくり理解しよ🧠🗺️
671docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_02_cli_wizard.png./picture/firebase_hosting_ts_study_007_02_cli_wizard.pngTheme: CLI Setup Wizard

Labels to Render:
- CLI: "firebase init hosting:github"
- Step 1: "Auth GitHub"
- Step 2: "Create Secrets"
- Step 3: "Write YAML"

Visual Details:
1. Core Concept: The CLI handling complex setup tasks automatically.
2. Metaphor: A wizard character casting spells to create keys (Secrets) and scrolls (YAML).
3. Action: Casting spells.
4. Layout: Sequential steps.		## 3-2. リポジトリ直下で GitHub連携セットアップ🤝
672docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_03_pr_comment.png./picture/firebase_hosting_ts_study_007_03_pr_comment.pngTheme: PR Comment UI

Labels to Render:
- Bot: "github-actions"
- Message: "Deploy preview ready!"
- Button: "Visit Preview"
- Context: "Pull Request #42"

Visual Details:
1. Core Concept: What the user sees on GitHub.
2. Metaphor: A clean UI mockup of a GitHub PR comment section.
3. Action: Notification.
4. Layout: UI Mockup.		## 3-4. PRを作って“プレビューURLが生える”のを確認👀🔗
673docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_04_update_flow.png./picture/firebase_hosting_ts_study_007_04_update_flow.pngTheme: Persistent URL on Update

Labels to Render:
- Commit 1: "Deploy -> URL A"
- Commit 2: "Deploy -> URL A"
- URL: "Same (Persistent)"
- Content: "Updated"

Visual Details:
1. Core Concept: The URL does not change when new commits are added to the PR.
2. Metaphor: Renovating a house. The address plate stays the same, but the furniture inside changes.
3. Action: Renovation.
4. Layout: Timeline.		さらにPRに追コミットすると、同じURLが更新されます🔁✨ ([Firebase][1])
674docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_05_yaml_anatomy.png./picture/firebase_hosting_ts_study_007_05_yaml_anatomy.pngTheme: YAML Config Anatomy

Labels to Render:
- File: ".github/workflows/..."
- Secret: "firebaseServiceAccount"
- Token: "repoToken"
- Action: "Deploy"

Visual Details:
1. Core Concept: Highlighting the critical parts of the configuration.
2. Metaphor: An anatomy chart of a robot (YAML), pointing to its heart (Secret) and voice box (Token).
3. Action: Analysis.
4. Layout: Annotated Code.		## 4) 生成されるYAMLの中身（最低限だけ読む）👀🧾
675docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_06_fork_issue.png./picture/firebase_hosting_ts_study_007_06_fork_issue.pngTheme: Fork Secret Limitation

Labels to Render:
- Fork Repo: "Contributor"
- Main Repo: "Maintainer"
- Secret: "Missing Key ❌"
- Action: "Deploy Failed"

Visual Details:
1. Core Concept: Why forks cannot deploy (no access to secrets).
2. Metaphor: A visitor (Fork) trying to open a door in the Main house but realizing they don't have the key (Secret).
3. Action: Access Denied.
4. Layout: Problem illustration.		## 5-2. forkからのPRだとプレビューが動かない🧊
676docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_07_ai_fix.png./picture/firebase_hosting_ts_study_007_07_ai_fix.pngTheme: AI Debugging Workflow

Labels to Render:
- Error: "Action Failed"
- User: "Ask Gemini"
- Gemini: "Check Token Permission"
- Fix: "Workflow OK"

Visual Details:
1. Core Concept: Using AI to diagnose CI/CD failures.
2. Metaphor: A mechanic (AI) looking at a smoking engine (Error) and handing a wrench (Fix) to the driver.
3. Action: Fixing.
4. Layout: Interaction flow.		## 6) AIで爆速にする🤖⚡（Antigravity / Gemini CLI を“ちゃんと使う”）
677docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_01_pipeline_concept.png./picture/firebase_hosting_ts_study_008_01_pipeline_concept.pngTheme: CI/CD Pipeline Concept

Labels to Render:
- PR: "Preview (Temp)"
- Merge: "Live (Permanent)"
- Trigger: "Push to Main"

Visual Details:
1. Core Concept: Two distinct deployment paths based on git actions.
2. Metaphor: A railway switch. PR train goes to a side track (Preview). Merge train goes to the main line (Live).
3. Action: Switching tracks.
4. Layout: Forking path.		## 1) まずイメージをつかもう🧠🔁
678docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_02_trigger_config.png./picture/firebase_hosting_ts_study_008_02_trigger_config.pngTheme: Action Trigger Logic

Labels to Render:
- Code: "on: push branches: [main]"
- Event: "Merge PR"
- Result: "Action Runs"

Visual Details:
1. Core Concept: Code configuration defining when to run.
2. Metaphor: A mousetrap or trigger mechanism. The 'Merge' event snaps the trigger, launching the 'Action'.
3. Action: Triggering.
4. Layout: Cause and effect.		## Step 0：まずは「本番デプロイ用ワークフロー」があるか確認👀
679docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_03_node_version.png./picture/firebase_hosting_ts_study_008_03_node_version.pngTheme: Node.js Version Policy

Labels to Render:
- 2026: "GitHub Actions -> Node 24"
- Config: "node-version: 24"
- Goal: "Stability"

Visual Details:
1. Core Concept: Aligning with platform standards.
2. Metaphor: Synchronizing watches. The developer sets their config to match the GitHub server clock.
3. Action: Syncing.
4. Layout: Timeline or matching.		## Step 1：CIの Node.js は「24 LTS」を基準にしよう🟩
680docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_04_secrets_vault.png./picture/firebase_hosting_ts_study_008_04_secrets_vault.pngTheme: Secrets Management

Labels to Render:
- Key: "FIREBASE_SERVICE_ACCOUNT"
- Vault: "GitHub Secrets"
- Action: "Inject Securely"

Visual Details:
1. Core Concept: Secure storage of credentials.
2. Metaphor: Inserting a glowing key into a heavy steel vault labeled 'GitHub Secrets'.
3. Action: Locking/Securing.
4. Layout: Security focus.		## Step 3：Secrets（鍵）が入ってるか確認🔐
681docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_05_merge_deploy.png./picture/firebase_hosting_ts_study_008_05_merge_deploy.pngTheme: Merge to Deploy Flow

Labels to Render:
- Step 1: "Merge PR"
- Step 2: "Actions Runner"
- Step 3: "Firebase Live"
- Outcome: "World Updated"

Visual Details:
1. Core Concept: The sequence of events from merge to live.
2. Metaphor: A domino effect. Tipping the 'Merge' domino knocks over 'Actions', which hits 'Firebase', lighting up the 'World'.
3. Action: Chain reaction.
4. Layout: Sequential flow.		## Step 4：実際に「PR→マージ→本番更新」を回す🔁🚢
682docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_06_visual_diff.png./picture/firebase_hosting_ts_study_008_06_visual_diff.pngTheme: Visual Verification

Labels to Render:
- Before: "Version 1.0"
- After: "Version 2.0"
- Check: "Updated!"

Visual Details:
1. Core Concept: Confirming the deployment by seeing the change.
2. Metaphor: A spot-the-difference puzzle or a 'Before & After' makeover reveal.
3. Action: Revealing.
4. Layout: Split screen.		## いちばん確実なのは「見た目でわかる差分」を入れる👀
683docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_07_monorepo_filter.png./picture/firebase_hosting_ts_study_008_07_monorepo_filter.pngTheme: Monorepo Path Filter

Labels to Render:
- Change A: "docs/readme.md -> Ignore"
- Change B: "web/src/App.tsx -> Deploy"
- Filter: "paths: web/**"

Visual Details:
1. Core Concept: Selective triggering based on file path.
2. Metaphor: A sorting machine. 'Docs' box goes to the 'Ignore' bin. 'Web' box goes to the 'Deploy' bin.
3. Action: Sorting.
4. Layout: Flowchart.		## ❌ 「モノレポで関係ない変更でも毎回デプロイされる」
684docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_01_two_keys.png./picture/firebase_hosting_ts_study_009_01_two_keys.pngTheme: Two Types of Keys

Labels to Render:
- GitHub: "Secrets (Encrypted)"
- Firebase: "Service Account (IAM)"
- Connection: "Action uses Secret"

Visual Details:
1. Core Concept: The two security mechanisms working together.
2. Metaphor: A safe box (GitHub) holding a key. A robot (Firebase) that is activated by that key.
3. Action: Unlocking.
4. Layout: Connected systems.		## まず全体像🗺️（CI/CDの“鍵”は2種類ある）
685docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_02_secret_flow.png./picture/firebase_hosting_ts_study_009_02_secret_flow.pngTheme: Secret Storage Flow

Labels to Render:
- 1: "CLI (Create Key)"
- 2: "Encrypt"
- 3: "GitHub Secrets (Store)"
- Result: "Safe"

Visual Details:
1. Core Concept: The journey of the key from creation to storage.
2. Metaphor: A minting machine creating a coin (Key), wrapping it in a secure capsule (Encrypt), and depositing it in a bank (GitHub).
3. Action: Depositing.
4. Layout: Flow diagram.		## 読むパート📚：今回の「秘密の箱」は何が入ってる？
686docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_03_github_ui_mock.png./picture/firebase_hosting_ts_study_009_03_github_ui_mock.pngTheme: GitHub Secrets UI

Labels to Render:
- Section: "Repository secrets"
- Item: "FIREBASE_SERVICE_ACCOUNT"
- Value: "****** (Hidden)"

Visual Details:
1. Core Concept: What the user sees in the browser.
2. Metaphor: A clean UI mockup of the GitHub Settings page.
3. Action: Listing secrets.
4. Layout: UI Mockup.		## 1) GitHubのSecretsが“存在するか”確認👀
687docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_04_least_privilege.png./picture/firebase_hosting_ts_study_009_04_least_privilege.pngTheme: Least Privilege Principle

Labels to Render:
- Admin: "Master Key (Too much)"
- Hosting: "Room Key (Just right)"
- Service Account: "Robot"

Visual Details:
1. Core Concept: Giving only necessary permissions.
2. Metaphor: A janitor with a huge ring of keys (Admin) vs a guest with a single card key (Least Privilege). The robot holds the single card.
3. Action: Accessing room.
4. Layout: Comparison.		## 3) サービスアカウントの権限（IAM）を“必要最小限”に寄せる✂️
688docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_05_pr_target_risk.png./picture/firebase_hosting_ts_study_009_05_pr_target_risk.pngTheme: PR Target Risk

Labels to Render:
- Event: "pull_request_target"
- Actor: "Malicious PR"
- Target: "Secrets"
- Result: "Leak!"

Visual Details:
1. Core Concept: The security hole created by pull_request_target.
2. Metaphor: A thief (Malicious PR) wearing a 'Staff' badge (pull_request_target) to trick the guard and enter the vault (Secrets).
3. Action: Stealing.
4. Layout: Threat scenario.		## 事故①：PR（特にfork）からSecretsが漏れる😱
689docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_06_key_rotation.png./picture/firebase_hosting_ts_study_009_06_key_rotation.pngTheme: Key Rotation Cycle

Labels to Render:
- Step 1: "Generate New Key"
- Step 2: "Update GitHub"
- Step 3: "Revoke Old Key"
- Status: "Secure Again"

Visual Details:
1. Core Concept: The process of replacing a compromised key.
2. Metaphor: Changing the locks on a door. Installing a new lock and throwing away the old key.
3. Action: Replacing.
4. Layout: Circular cycle.		## 漏れた時の回復手順🧯（これだけ覚えとけば勝てる）
690docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_07_ai_audit.png./picture/firebase_hosting_ts_study_009_07_ai_audit.pngTheme: AI Security Audit

Labels to Render:
- Input: "Workflow YAML"
- AI: "Analysis"
- Output: "Risk: High (Echo Secret)"

Visual Details:
1. Core Concept: AI identifying security flaws.
2. Metaphor: A scanner passing over a document. It beeps red at a specific line (echo ${{ secrets... }}).
3. Action: Scanning/Alerting.
4. Layout: Scan process.		## 2) Antigravity / Gemini CLI × Firebase MCP server で“点検を自動化”🧩
691docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_01_failure_types.png./picture/firebase_hosting_ts_study_010_01_failure_types.pngTheme: Troubleshooting Categories

Labels to Render:
- Category 1: "Build Fail (Code)"
- Category 2: "Deploy Fail (Auth/Config)"
- Category 3: "Runtime Fail (Behavior)"

Visual Details:
1. Core Concept: Categorizing errors.
2. Metaphor: Three distinct buckets or lanes.
3. Action: Sorting errors into bins.
4. Layout: 3-column split.		## 読む📚：トラブル対応は「3段ロケット」で勝てる🚀🚀🚀
692docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_02_red_line_check.png./picture/firebase_hosting_ts_study_010_02_red_line_check.pngTheme: Finding the Error Source

Labels to Render:
- UI: "GitHub Actions Log"
- Step: "Run Build ❌"
- Focus: "First Red Line"

Visual Details:
1. Core Concept: Locating the root cause.
2. Metaphor: A magnifying glass focusing on the first red 'X' in a list of green checks.
3. Action: Identifying.
4. Layout: UI Analysis.		## ① Actionsの「赤い行」を1個だけ探す🔴👀
693docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_03_build_vs_deploy.png./picture/firebase_hosting_ts_study_010_03_build_vs_deploy.pngTheme: Build vs Deploy Logic

Labels to Render:
- Command A: "npm run build"
- Result A: "Build Error 🏗️"
- Command B: "firebase deploy"
- Result B: "Deploy Error 🚀"

Visual Details:
1. Core Concept: Distinguishing error types by command.
2. Metaphor: A fork in the road. One path is 'Construction' (Build), the other is 'Launch' (Deploy).
3. Action: Branching.
4. Layout: Decision Tree.		## ② “ビルド” か “デプロイ” かを決める⚖️
694docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_04_config_locations.png./picture/firebase_hosting_ts_study_010_04_config_locations.pngTheme: Configuration Map

Labels to Render:
- Workflow: "Steps (.yml)"
- Secrets: "Keys (GitHub)"
- Firebaserc: "Target (Project ID)"

Visual Details:
1. Core Concept: The triad of configuration.
2. Metaphor: A treasure map with three key landmarks marked.
3. Action: Mapping.
4. Layout: Triangle or Map.		## 1) “デプロイ先” の情報を押さえる（どこへ出してる？）🗺️
695docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_05_project_id_check.png./picture/firebase_hosting_ts_study_010_05_project_id_check.pngTheme: Missing Project ID

Labels to Render:
- Scenario A: ".firebaserc Found ✅"
- Scenario B: "projectId arg Found ✅"
- Scenario C: "Neither ❌ -> Error"

Visual Details:
1. Core Concept: Requirement for Project ID.
2. Metaphor: An ID card checkpoint. The runner checks for the ID card (Project ID) in two pockets (.firebaserc or args).
3. Action: Checking ID.
4. Layout: Flowchart.		## 2) “プロジェクト指定ミス” を最速で見抜く🎯🧠
696docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_06_preview_expiry.png./picture/firebase_hosting_ts_study_010_06_preview_expiry.pngTheme: Preview Channel Lifecycle

Labels to Render:
- Default: "7 Days"
- Action: "Expire / 404"
- Extended: "30 Days (Max)"

Visual Details:
1. Core Concept: Time-limited existence.
2. Metaphor: An hourglass running out. One hourglass is small (7 days), one is large (30 days).
3. Action: Time running out.
4. Layout: Comparison.		## 3) Preview の期限が短すぎ問題（7日デフォ）⏳🧨
697docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_07_fork_secrets_block.png./picture/firebase_hosting_ts_study_010_07_fork_secrets_block.pngTheme: Fork PR Security Block

Labels to Render:
- Source: "Forked Repo"
- Barrier: "Security Wall"
- Target: "Main Repo Secrets"
- Result: "Access Denied"

Visual Details:
1. Core Concept: Security restriction on forks.
2. Metaphor: A visitor (Fork) trying to enter a secure vault, but the security gate (GitHub Actions) blocks them.
3. Action: Blocking.
4. Layout: Block diagram.		## エラー1：Secrets が見つからない／空っぽ🔐❌
698docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_01_domain_benefits.png./picture/firebase_hosting_ts_study_011_01_domain_benefits.pngTheme: Custom Domain Value

Labels to Render:
- Generic: "web.app (Free)"
- Custom: "your-brand.com (Pro)"
- Feature: "Auto SSL 🔒"

Visual Details:
1. Core Concept: Professionalism and trust.
2. Metaphor: A storefront. One is a temporary stall (generic), the other is a permanent shop with a proper sign (custom).
3. Action: Upgrading.
4. Layout: Comparison.		## 1) まず “何が嬉しい？” を腹落ちさせよう 😆🎯
699docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_02_dns_concepts.png./picture/firebase_hosting_ts_study_011_02_dns_concepts.pngTheme: DNS Terminology

Labels to Render:
- Apex: "example.com"
- Sub: "www.example.com"
- TXT: "ID Card (Verify)"
- A-Record: "Compass (IP Address)"

Visual Details:
1. Core Concept: Explaining DNS parts.
2. Metaphor: An ID card for TXT, a compass for A-Record.
3. Action: Identifying.
4. Layout: Infographic.		## 2) ここだけ用語を押さえる🧠📌（超重要）
700docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_03_setup_flow.png./picture/firebase_hosting_ts_study_011_03_setup_flow.pngTheme: Quick Setup Steps

Labels to Render:
- Step 1: "Add Domain"
- Step 2: "Add TXT (Verify)"
- Step 3: "Add A (Point)"
- Step 4: "SSL Live ✨"

Visual Details:
1. Core Concept: The sequential process.
2. Metaphor: Stepping stones across a river.
3. Action: Progressing.
4. Layout: Timeline/Steps.		## 3) 作業の全体像（これだけ覚えればOK）🗺️✨
701docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_04_redirect_strategy.png./picture/firebase_hosting_ts_study_011_04_redirect_strategy.pngTheme: URL Unification

Labels to Render:
- Input A: "example.com"
- Input B: "www.example.com"
- Redirect: "301 Redirect"
- Goal: "One Destination"

Visual Details:
1. Core Concept: Consolidating traffic.
2. Metaphor: Two streams merging into one river.
3. Action: Merging.
4. Layout: Y-shape flow.		## Step 1：コンソールでカスタムドメイン追加🖱️
702docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_05_propagation_wait.png./picture/firebase_hosting_ts_study_011_05_propagation_wait.pngTheme: DNS Propagation

Labels to Render:
- Action: "Update DNS"
- Status: "Pending..."
- Time: "Max 24h"
- Result: "Connected ✅"

Visual Details:
1. Core Concept: The waiting period.
2. Metaphor: Baking a cake. You put it in the oven (Update DNS) and have to wait (Pending) before it's ready.
3. Action: Waiting.
4. Layout: Time process.		## Step 4：証明書が発行されるまで待つ🔒⏳
703docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_06_advanced_setup.png./picture/firebase_hosting_ts_study_011_06_advanced_setup.pngTheme: Zero Downtime Migration

Labels to Render:
- Phase 1: "Verify (TXT) 🪪"
- Phase 2: "Issue Cert 🔒"
- Phase 3: "Switch DNS (A) 🧭"
- Result: "No Outage"

Visual Details:
1. Core Concept: Safe migration.
2. Metaphor: Building a bridge parallel to the old one before switching traffic.
3. Action: Constructing then switching.
4. Layout: Parallel tracks.		## 5) 手を動かす：Advanced Setup（“止めずに移行したい”人向け）🧯🧩
704docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_07_troubleshooting.png./picture/firebase_hosting_ts_study_011_07_troubleshooting.pngTheme: Domain Troubleshooting

Labels to Render:
- Status: "Needs Setup" -> "Check Host/Value"
- Status: "Pending" -> "Wait / Check CAA"
- Error: "Not Secure" -> "Old Records?"

Visual Details:
1. Core Concept: Diagnosing issues based on status.
2. Metaphor: A doctor diagnosing based on symptoms (Status).
3. Action: Diagnosing.
4. Layout: Flowchart.		## 7) ありがちトラブル集（ここが8割）🧯😵
705docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_01_cache_layers.png./picture/firebase_hosting_ts_study_012_01_cache_layers.pngTheme: Two Layers of Cache

Labels to Render:
- Layer 1: "Browser (Local) 💻"
- Layer 2: "CDN (Global) 🌍"
- Source: "Origin (Firebase) 🔥"
- Action: "Re-deploy clears CDN"

Visual Details:
1. Core Concept: Where data lives.
2. Metaphor: A 2-story building. Ground floor is the Origin, 1st floor is CDN, 2nd floor is Browser.
3. Action: Fetching data.
4. Layout: Vertical stack.		## 1) キャッシュって何が起きてるの？（2階建てで考える）🏢🏢
706docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_02_header_values.png./picture/firebase_hosting_ts_study_012_02_header_values.pngTheme: Cache-Control Cheatsheet

Labels to Render:
- Public: "Everyone Cache 🟢"
- Private: "Browser Only 🟡"
- No-Cache: "Ask First (Revalidate) 🔁"
- Max-Age: "Timer ⏱️"

Visual Details:
1. Core Concept: Different rules for caching.
2. Metaphor: Traffic signs. Public is Green light, Private is 'Residents Only', No-Cache is 'Stop & Check', Max-Age is a Parking Meter.
3. Action: Controlling flow.
4. Layout: Grid/Icons.		## 2) Cache-Control をざっくり理解しよう📦
707docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_03_broken_cache_flow.png./picture/firebase_hosting_ts_study_012_03_broken_cache_flow.pngTheme: The Stale HTML Problem

Labels to Render:
- Step 1: "Old HTML (Cached)"
- Step 2: "Request: app.v1.js"
- Server: "Only has app.v2.js"
- Result: "404 Error 💥"

Visual Details:
1. Core Concept: Version mismatch causing errors.
2. Metaphor: A treasure map (HTML) pointing to a buried chest (JS). But the chest has been moved, so the map leads to an empty hole.
3. Action: Digging and failing.
4. Layout: Sequence/Story.		## 3) React + Hosting の「壊れない定番」ルール🍣✨
708docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_04_safe_strategy.png./picture/firebase_hosting_ts_study_012_04_safe_strategy.pngTheme: Safe Caching Strategy

Labels to Render:
- HTML: "Short Life (Revalidate)"
- Assets (Hash): "Long Life (Immutable)"
- Goal: "Fast & Fresh"

Visual Details:
1. Core Concept: Differentiating content types.
2. Metaphor: Fresh produce (HTML) needs to be checked daily. Canned goods (Assets) last for years.
3. Action: Sorting.
4. Layout: Split comparison.		## 4) firebase.json でキャッシュを設定する🧾🛠️
709docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_05_json_cascade.png./picture/firebase_hosting_ts_study_012_05_json_cascade.pngTheme: Configuration Cascade

Labels to Render:
- Rule 1: "Global (**): No-Cache"
- Rule 2: "Assets (*.js, *.css): Long Cache"
- Logic: "Last Match Wins"
- Result: "Correct Mix"

Visual Details:
1. Core Concept: Order of operations.
2. Metaphor: Painting layers. First paint everything grey (No-Cache). Then paint specific spots gold (Long Cache).
3. Action: Layering.
4. Layout: Flow/Layering.		## 4-1) まずはコピペでOKな“鉄板セット”🥇
710docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_06_verify_headers.png./picture/firebase_hosting_ts_study_012_06_verify_headers.pngTheme: Verifying with DevTools

Labels to Render:
- Tool: "Chrome DevTools"
- Tab: "Network"
- Target: "Cache-Control: public..."
- Action: "Confirm ✅"

Visual Details:
1. Core Concept: Inspection.
2. Metaphor: Using a microscope to read the label on a package.
3. Action: Inspecting.
4. Layout: UI Close-up.		## 手順①：いまのヘッダーを確認する（変更前）🧪
711docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_07_404_trap.png./picture/firebase_hosting_ts_study_012_07_404_trap.pngTheme: The 404 Cache Trap

Labels to Render:
- Event: "404 Occurs"
- CDN: "Caches 404 (10 mins)"
- Fix: "Deploy Fix"
- User: "Still sees 404 (Wait...)"

Visual Details:
1. Core Concept: Negative caching.
2. Metaphor: A "Closed" sign put up by the shopkeeper (CDN). Even if the owner opens the store inside, the sign stays up for 10 minutes.
3. Action: Waiting.
4. Layout: Timeline.		## 事故②：404 がしばらく直らない😵
712docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_01_redirect_vs_rewrite.png./picture/firebase_hosting_ts_study_013_01_redirect_vs_rewrite.pngTheme: Redirect vs Rewrite

Labels to Render:
- Redirect: "URL Changes 🔀"
- Rewrite: "URL Stays 🪄"
- User: "Sees Change" / "Sees Same"

Visual Details:
1. Core Concept: The user experience difference.
2. Metaphor: Redirect is a signpost pointing to a new house. Rewrite is a facade; the door says "Shop" but inside it's a "Factory".
3. Action: Navigating.
4. Layout: Comparison.		## まずは超ざっくり：redirect と rewrite の違い🧠✨
713docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_02_priority_order.png./picture/firebase_hosting_ts_study_013_02_priority_order.pngTheme: Hosting Priority Logic

Labels to Render:
- 1: "Reserved Namespace"
- 2: "Redirects 🔀"
- 3: "Static Files 📄"
- 4: "Rewrites 🪄"
- 5: "404 🚫"

Visual Details:
1. Core Concept: Processing hierarchy.
2. Metaphor: A sieve or filter stack. Water (Request) passes through layers.
3. Action: Filtering.
4. Layout: Vertical Stack.		## 最重要：Hostingの「優先順位」🚦（ここだけ暗記でOK）
714docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_03_recommended_order.png./picture/firebase_hosting_ts_study_013_03_recommended_order.pngTheme: Safe Configuration Template

Labels to Render:
- Top: "Normalization (Redirects)"
- Middle: "Exceptions (API Rewrites)"
- Bottom: "Catch-All (SPA Rewrite)"

Visual Details:
1. Core Concept: Best practice structure.
2. Metaphor: Building a house foundation. First level, second level, roof.
3. Action: Structuring.
4. Layout: Block Diagram.		## ルール設計のコツ：事故らない並べ方テンプレ🧰✨
715docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_04_redirect_301.png./picture/firebase_hosting_ts_study_013_04_redirect_301.pngTheme: 301 Redirect

Labels to Render:
- Old: "/old-page"
- Sign: "Moved Permanently (301)"
- New: "/new-page"
- SEO: "Juice Transferred 🥤"

Visual Details:
1. Core Concept: Permanent relocation.
2. Metaphor: A moving truck or a detour sign.
3. Action: Moving.
4. Layout: Directional Flow.		## 1) redirect を追加：/old → /new（移転）🔀
716docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_05_api_rewrite.png./picture/firebase_hosting_ts_study_013_05_api_rewrite.pngTheme: API Bypass Strategy

Labels to Render:
- Request: "/api/user"
- Rule: "Rewrites -> Function"
- SPA: "Ignored (Safety)"
- Destination: "Cloud Functions ⚡"

Visual Details:
1. Core Concept: Routing specific traffic away from SPA.
2. Metaphor: An express lane on a highway. Regular traffic (SPA) goes one way, API traffic takes the express exit.
3. Action: Diverting.
4. Layout: Split Flow.		## 2) rewrite を追加：/api/** は SPA に飲ませない🧯
717docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_06_spa_catch_all.png./picture/firebase_hosting_ts_study_013_06_spa_catch_all.pngTheme: The SPA Catch-All

Labels to Render:
- Rule: "source: **"
- Target: "/index.html"
- Effect: "Handles 404s as Routes"
- Metaphor: "The Net"

Visual Details:
1. Core Concept: Handling unknown routes in SPA.
2. Metaphor: A safety net at the bottom of the priority stack catching everything that falls through.
3. Action: Catching.
4. Layout: Bottom Anchor.		## 3) SPAの最終キャッチ：最後に ** → /index.html 🧹✨
718docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_07_verification.png./picture/firebase_hosting_ts_study_013_07_verification.pngTheme: Local Verification

Labels to Render:
- Tool: "Emulator Suite"
- Test 1: "/old -> Redirect?"
- Test 2: "/api -> Function?"
- Test 3: "/unknown -> SPA?"

Visual Details:
1. Core Concept: Testing the rules.
2. Metaphor: A checklist with green ticks.
3. Action: Checking.
4. Layout: Checklist.		## ローカルで確認する（いきなり本番に出さない）🧪
719docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_01_environment_patterns.png./picture/firebase_hosting_ts_study_014_01_environment_patterns.pngTheme: Environment Patterns

Labels to Render:
- Pattern A: "2 Projects (Safe) 🛡️"
- Pattern B: "1 Project (Risky) ⚠️"
- Resource: "Database / Auth"
- Isolation: "Total Separation"

Visual Details:
1. Core Concept: Isolation levels.
2. Metaphor: Two separate houses (Pattern A) vs One house with a thin partition (Pattern B).
3. Action: Housing.
4. Layout: Comparison.		## ✅ パターンA：プロジェクトを分ける（staging/prod） ←いちばん安全🛡️
720docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_02_git_workflow.png./picture/firebase_hosting_ts_study_014_02_git_workflow.pngTheme: Git Flow to Environments

Labels to Render:
- Branch: "develop" -> "Staging Env 🌿"
- Branch: "main" -> "Production Env 🚢"
- Action: "Auto Deploy 🤖"

Visual Details:
1. Core Concept: Mapping code branches to infrastructure.
2. Metaphor: Two assembly lines. One leads to a test track, the other to the showroom.
3. Action: Flowing.
4. Layout: Parallel Flow.		## 0) ゴール設定🎯
721docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_03_cli_aliases.png./picture/firebase_hosting_ts_study_014_03_cli_aliases.pngTheme: CLI Aliases

Labels to Render:
- Command: "firebase use staging"
- Active: "staging (Selected) ✅"
- Inactive: "prod (Safe) 🔒"
- Config: ".firebaserc"

Visual Details:
1. Core Concept: Switching context safely.
2. Metaphor: A toggle switch or a railway track changer.
3. Action: Switching.
4. Layout: Control Panel.		## 2) ローカル（Windows）でCLIに「別名」を登録する🏷️💻
722docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_04_pipeline_staging.png./picture/firebase_hosting_ts_study_014_04_pipeline_staging.pngTheme: Staging Pipeline

Labels to Render:
- Trigger: "Push to develop"
- Job: "Build (Node 24) 🏗️"
- Deploy: "Target: myapp-stg"
- Result: "Live on Staging ✨"

Visual Details:
1. Core Concept: CI/CD process.
2. Metaphor: A conveyor belt processing a box (Code) and delivering it to a green platform (Staging).
3. Action: Delivering.
4. Layout: Timeline/Process.		## ✅ staging用（develop → stagingへ自動デプロイ）🌿🤖
723docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_05_secrets_separation.png./picture/firebase_hosting_ts_study_014_05_secrets_separation.pngTheme: Secrets Separation

Labels to Render:
- Vault A: "Staging Secrets"
- Vault B: "Prod Secrets"
- Action: "No Mixing 🚫"
- Key: "Service Account"

Visual Details:
1. Core Concept: Security isolation.
2. Metaphor: Two distinct safes with different combinations.
3. Action: Securing.
4. Layout: Side-by-side.		## 4) Secrets（鍵）を環境ごとに分ける🔐🧰
724docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_06_deploy_targets.png./picture/firebase_hosting_ts_study_014_06_deploy_targets.pngTheme: Deploy Targets

Labels to Render:
- Project: "One Project"
- Target 1: "hosting:staging"
- Target 2: "hosting:prod"
- Command: "--only hosting:target"

Visual Details:
1. Core Concept: Targeting specific resources.
2. Metaphor: A sniper scope or an archer aiming at specific targets within a range.
3. Action: Targeting.
4. Layout: Target/Scope.		## 2) deploy target を割り当てる🏷️
725docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_07_release_check.png./picture/firebase_hosting_ts_study_014_07_release_check.pngTheme: AI Release Check

Labels to Render:
- Input: "Release Candidate"
- AI: "Reviewing..."
- Check 1: "Config OK ✅"
- Check 2: "Tests Passed ✅"

Visual Details:
1. Core Concept: Automated verification.
2. Metaphor: A robotic auditor checking boxes on a clipboard.
3. Action: Auditing.
4. Layout: Checklist.		## 3) “リリース前チェック”をAIでテンプレ化：Firebase AI Logic / Genkit🧰🤖
726docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_01_overview.png./picture/firebase_hosting_ts_study_015_01_overview.pngTheme: App Hosting Workflow

Labels to Render:
- Code: "Source Code"
- GitHub: "GitHub"
- Build: "App Hosting (Build)"
- Cloud: "SSR App"

Visual Details:
1. Core Concept: From code to running app.
2. Metaphor: A continuous pipeline. Code enters GitHub, flows to App Hosting for building, and emerges as a live SSR App.
3. Action: Flowing.
4. Layout: Left-to-right process.		## 1) App Hostingって何者？🤔🚀
727docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_02_comparison.png./picture/firebase_hosting_ts_study_015_02_comparison.pngTheme: Hosting vs App Hosting

Labels to Render:
- Hosting: "Static (SPA)"
- App Hosting: "Dynamic (SSR)"
- Hosting Icon: "Lightning (Fast)"
- App Hosting Icon: "Server (Powerful)"

Visual Details:
1. Core Concept: Comparing static vs dynamic hosting.
2. Metaphor: A bicycle (light/fast) vs a delivery truck (powerful/heavy). Or simply two distinct server icons.
3. Action: Comparison.
4. Layout: Side-by-side.		## 2) Hosting と App Hosting の違い（超ざっくり）🔍🌐
728docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_03_config.png./picture/firebase_hosting_ts_study_015_03_config.pngTheme: apphosting.yaml Structure

Labels to Render:
- File: "apphosting.yaml"
- Section 1: "env (Environment)"
- Section 2: "run (CPU/Memory)"
- Section 3: "secrets (API Key)"

Visual Details:
1. Core Concept: Configuration file controlling the environment.
2. Metaphor: A control panel built from code blocks.
3. Action: Configuring.
4. Layout: Document structure.		## (3) apphosting.yaml で “設定をコード化”できる🧩📄
729docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_04_emulator.png./picture/firebase_hosting_ts_study_015_04_emulator.pngTheme: App Hosting Emulator

Labels to Render:
- Local: "My PC"
- Tool: "Emulator"
- Cloud: "Real App Hosting"
- Mirror: "Same Behavior"

Visual Details:
1. Core Concept: Local environment mirroring production.
2. Metaphor: A mirror reflecting the cloud setup onto a local laptop.
3. Action: Reflection.
4. Layout: Reflection view.		## (4) ローカルでも “App Hostingっぽく”動かせる🏠🧪
730docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_05_decision_flow.png./picture/firebase_hosting_ts_study_015_05_decision_flow.pngTheme: Decision Flowchart

Labels to Render:
- Start: "Need SSR?"
- Yes: "App Hosting"
- No: "Hosting"
- Framework: "Next.js / Angular?"

Visual Details:
1. Core Concept: Choosing the right service.
2. Metaphor: A flowchart path.
3. Action: Decision making.
4. Layout: Vertical flow.		## 4) いつ App Hosting を選ぶ？判断チェック✅🧠
731docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_06_billing.png./picture/firebase_hosting_ts_study_015_06_billing.pngTheme: Blaze Plan Warning

Labels to Render:
- Plan: "Blaze (Pay-as-you-go)"
- Required: "App Hosting"
- Free: "Spark (Not Supported)"
- Warning: "Check Limits"

Visual Details:
1. Core Concept: Blaze plan requirement.
2. Metaphor: A toll gate that only accepts the "Blaze" pass.
3. Action: Gating.
4. Layout: Gatekeeper.		## 5) 課金まわりの“超重要ポイント”💰⚠️
732docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_07_ai_integration.png./picture/firebase_hosting_ts_study_015_07_ai_integration.pngTheme: AI MCP Assistant

Labels to Render:
- User: "Ask Question"
- MCP: "Firebase MCP"
- AI: "Gemini"
- Result: "Answer"

Visual Details:
1. Core Concept: AI helping via MCP.
2. Metaphor: A robot assistant using a special tool (MCP) to access Firebase knowledge.
3. Action: Assisting.
4. Layout: Interaction.		## (A) MCPで “調べもの”を高速化する🧩⚡
733docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_01_pipeline.png./picture/firebase_hosting_ts_study_016_01_pipeline.pngTheme: App Hosting Architecture

Labels to Render:
- Input: "Git Commit"
- Build: "Cloud Build"
- Run: "Cloud Run"
- Cache: "Cloud CDN"

Visual Details:
1. Core Concept: From commit to cached content.
2. Metaphor: A manufacturing line. Raw material (Commit) -> Factory (Build) -> Engine (Run) -> Storefront (CDN).
3. Action: Manufacturing.
4. Layout: Left-to-right flow.		## 1) まず“どう動いてるか”を1枚で🗺️
734docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_02_checklist.png./picture/firebase_hosting_ts_study_016_02_checklist.pngTheme: Pre-flight Checklist

Labels to Render:
- Item 1: "Blaze Plan"
- Item 2: "Next.js / Angular"
- Item 3: "Node.js v20+"
- Result: "Ready to Launch"

Visual Details:
1. Core Concept: Essential requirements before starting.
2. Metaphor: A pilot checking a flight manual before takeoff.
3. Action: Checking.
4. Layout: Checklist.		## 2) 先にチェック✅（ここで詰まると後がしんどい）
735docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_03_git_setup.png./picture/firebase_hosting_ts_study_016_03_git_setup.pngTheme: Git Initialization

Labels to Render:
- Terminal: "PowerShell"
- Command: "git push origin main"
- GitHub: "Repo Created"
- Action: "Sync"

Visual Details:
1. Core Concept: Setting up the repository.
2. Metaphor: Connecting a local laptop (PowerShell) to a cloud repository (GitHub) via a cable (Git).
3. Action: Connecting/Syncing.
4. Layout: Connection diagram.		## 4) 手を動かす🛠️：GitHub にリポジトリを用意する（Windows）
736docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_04_console_flow.png./picture/firebase_hosting_ts_study_016_04_console_flow.pngTheme: Console Creation Flow

Labels to Render:
- Step 1: "Get Started"
- Step 2: "Connect GitHub"
- Step 3: "Select Repo"
- Step 4: "Deploy"

Visual Details:
1. Core Concept: The setup wizard steps.
2. Metaphor: A 4-step progress bar or wizard UI.
3. Action: Progressing.
4. Layout: Horizontal steps.		## 5-1. バックエンド作成の流れ（超重要）🧠
737docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_05_region_map.png./picture/firebase_hosting_ts_study_016_05_region_map.pngTheme: Region Selection

Labels to Render:
- Map: "Asia"
- Pin 1: "Taiwan (asia-east1)"
- Pin 2: "Singapore (asia-southeast1)"
- User: "Japan"

Visual Details:
1. Core Concept: Selecting a nearby region for speed.
2. Metaphor: A map highlighting the recommended Asia regions relative to Japan.
3. Action: Pinning.
4. Layout: Map view.		## 5-2. リージョンはどう選ぶ？🌏
738docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_06_repo_trouble.png./picture/firebase_hosting_ts_study_016_06_repo_trouble.pngTheme: Repository Not Found

Labels to Render:
- Dropdown: "No Repo..."
- Action: "Refresh List"
- Link: "Grant Access (GitHub)"
- Fix: "Permissions"

Visual Details:
1. Core Concept: Troubleshooting missing repositories.
2. Metaphor: A user searching a list, finding it empty, and pressing a 'Refresh' button or unlocking a 'Permission' lock.
3. Action: Troubleshooting.
4. Layout: UI interaction.		## 7-1. 「リポジトリが一覧に出ない」😇
739docs/firebase_hosting_ts_study_016.mdfirebase_hosting_ts_study_016_07_ai_debug.png./picture/firebase_hosting_ts_study_016_07_ai_debug.pngTheme: AI Debugging Assistant

Labels to Render:
- Input: "Build Failed Log"
- AI: "Gemini Analysis"
- Output: "Fix Node Version"
- Tool: "MCP"

Visual Details:
1. Core Concept: AI analyzing a log to find the root cause.
2. Metaphor: A robot detective examining a scroll (log) and pointing out the error.
3. Action: Debugging.
4. Layout: Interaction.		## 9-3. “会話”で解決するためのプロンプト例💬
740docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_01_anatomy.png./picture/firebase_hosting_ts_study_017_01_anatomy.pngTheme: apphosting.yaml Anatomy

Labels to Render:
- File: "apphosting.yaml"
- Part 1: "env (Variables)"
- Part 2: "runConfig (CPU/Mem)"
- Part 3: "secrets (Keys)"

Visual Details:
1. Core Concept: The structure of the configuration file.
2. Metaphor: An anatomy chart or blueprint of a document, highlighting the three main sections.
3. Action: Structuring.
4. Layout: Document layout.		## 1) apphosting.yaml って何者？📄🤔
741docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_02_availability.png./picture/firebase_hosting_ts_study_017_02_availability.pngTheme: Variable Availability

Labels to Render:
- Build Phase: "BUILD (Blue)"
- Run Phase: "RUNTIME (Green)"
- Var 1: "API_URL (Both)"
- Var 2: "BUILD_TOOL (Build Only)"

Visual Details:
1. Core Concept: Controlling when variables are accessible.
2. Metaphor: Two zones (Build Zone, Run Zone). Some boxes (variables) exist in both, some only in one.
3. Action: Filtering.
4. Layout: Venn diagram or Zones.		## 3) “ビルド時”と“実行時”を分ける✂️🧠
742docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_03_public_vs_secret.png./picture/firebase_hosting_ts_study_017_03_public_vs_secret.pngTheme: Public vs Secret Variables

Labels to Render:
- Browser: "NEXT_PUBLIC_ (Visible)"
- Server: "Secret Key (Hidden)"
- Barrier: "Security Wall"

Visual Details:
1. Core Concept: Preventing secrets from leaking to the client.
2. Metaphor: A glass window (Browser) where NEXT_PUBLIC_ items are visible. A solid steel safe (Server) where secrets are hidden.
3. Action: Separating.
4. Layout: Inside vs Outside.		## 4) ブラウザに出していい？ NEXT_PUBLIC_ の考え方🌍🕵️‍♀️
743docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_04_secret_ref.png./picture/firebase_hosting_ts_study_017_04_secret_ref.pngTheme: Secret Manager Reference

Labels to Render:
- YAML: "secret: myKey"
- Manager: "Secret Manager"
- Value: "Actual Key (Encrypted)"
- Action: "Inject at Runtime"

Visual Details:
1. Core Concept: Configuring the link to the secret.
2. Metaphor: A tag in the YAML file connected by a string to a vault in the cloud.
3. Action: Referencing.
4. Layout: Connection diagram.		## 5) 秘密は Cloud Secret Manager 参照にする🗝️🔐
744docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_05_file_priority.png./picture/firebase_hosting_ts_study_017_05_file_priority.pngTheme: Configuration Overrides

Labels to Render:
- Base: "apphosting.yaml (Default)"
- Override: "apphosting.production.yaml"
- Result: "Merged Config"
- Env: "Production"

Visual Details:
1. Core Concept: Environment-specific files overriding defaults.
2. Metaphor: Stacking layers. The 'Production' layer is placed on top of the 'Default' layer, modifying specific spots.
3. Action: Stacking/Overriding.
4. Layout: Layered stack.		## 6) 環境（staging / production）でファイルを分ける🏗️🧩
745docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_06_vpc_tunnel.png./picture/firebase_hosting_ts_study_017_06_vpc_tunnel.pngTheme: VPC Access

Labels to Render:
- App: "App Hosting"
- Tunnel: "VPC Connector"
- Private: "Cloud SQL / Internal API"
- Public: "Internet (Blocked)"

Visual Details:
1. Core Concept: Secure connection to private resources.
2. Metaphor: A secure tunnel connecting the App Hosting island to a private fortress (VPC), bypassing the open ocean (Internet).
3. Action: Tunneling.
4. Layout: Network diagram.		## 7) VPC接続：DBや社内APIに“内側”から繋ぐ🌉🛡️
746docs/firebase_hosting_ts_study_017.mdfirebase_hosting_ts_study_017_07_ai_config.png./picture/firebase_hosting_ts_study_017_07_ai_config.pngTheme: AI Config Generator

Labels to Render:
- User: "Need Staging Config"
- AI: "Generating YAML..."
- Output: "apphosting.staging.yaml"
- Tool: "Gemini CLI"

Visual Details:
1. Core Concept: AI writing the configuration file.
2. Metaphor: A robot drafting a blueprint based on user instructions.
3. Action: Drafting.
4. Layout: Interaction flow.		## 9) AIを混ぜる：Antigravity / Gemini CLI で“設定作業”を短縮🤖⚡
747docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_01_rollout_flow.png./picture/firebase_hosting_ts_study_018_01_rollout_flow.pngTheme: Rollout Process

Labels to Render:
- Trigger: "Git Push"
- Step 1: "Build (Cloud Build)"
- Step 2: "Deploy (Cloud Run)"
- Result: "Live App"

Visual Details:
1. Core Concept: The sequence of events in a rollout.
2. Metaphor: A relay race. The runner (Git Push) passes the baton to the Builder, who passes it to the Deployer, who crosses the finish line (Live).
3. Action: Running/Passing.
4. Layout: Left-to-right flow.		## 1) まず “ロールアウト” って何？🤔🚀
748docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_02_auto_switch.png./picture/firebase_hosting_ts_study_018_02_auto_switch.pngTheme: Automatic Rollout Switch

Labels to Render:
- Switch: "Automatic Rollouts"
- State: "OFF (Manual Only)"
- Reason: "Safety Check"

Visual Details:
1. Core Concept: Disabling automatic deployment.
2. Metaphor: A safety switch or breaker being turned off to stop the machinery.
3. Action: Switching off.
4. Layout: Close-up of switch.		## 2) “自動ロールアウトを止めたい” のはどんな時？🧠🛑
749docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_03_settings_ui.png./picture/firebase_hosting_ts_study_018_03_settings_ui.pngTheme: Deployment Settings UI

Labels to Render:
- Tab: "Deployment settings"
- Section: "Automatic rollouts"
- Toggle: "Enabled / Disabled"
- Branch: "Live branch: main"

Visual Details:
1. Core Concept: Where to find the setting.
2. Metaphor: A clean UI mockup of the settings panel.
3. Action: Displaying settings.
4. Layout: UI Focus.		## 4-1. いまの設定を確認する👀
750docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_04_manual_ui.png./picture/firebase_hosting_ts_study_018_04_manual_ui.pngTheme: Manual Rollout Creation

Labels to Render:
- Button: "Create Rollout"
- Input: "Select Branch (main)"
- Input: "Select Commit (Latest)"
- Action: "Deploy"

Visual Details:
1. Core Concept: Manually triggering a build.
2. Metaphor: A launch control panel. Selecting the target and pressing the "Launch" button.
3. Action: Launching.
4. Layout: Modal or Form.		## 5-1. コンソールから手動ロールアウト（いちばん簡単）🖱️
751docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_05_dashboard.png./picture/firebase_hosting_ts_study_018_05_dashboard.pngTheme: Rollout Dashboard

Labels to Render:
- Row 1: "Success ✅ (v2.0)"
- Row 2: "Failed ❌ (v2.1)"
- Row 3: "Building 🔄 (v2.2)"
- Link: "View Logs"

Visual Details:
1. Core Concept: Monitoring the status of multiple rollouts.
2. Metaphor: A flight arrival/departure board showing status.
3. Action: Listing statuses.
4. Layout: List view.		## 6) ロールアウトの見張り方👀🧭（不安を減らすコツ）
752docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_06_rollback.png./picture/firebase_hosting_ts_study_018_06_rollback.pngTheme: Instant Rollback

Labels to Render:
- Current: "Broken Build 💥"
- Previous: "Stable Build ✅"
- Action: "Rollback Button"
- Result: "Restored Instantly"

Visual Details:
1. Core Concept: Quickly reverting to a working state.
2. Metaphor: A time machine or rewind button. The app reverts from the broken state to the stable state.
3. Action: Rewinding.
4. Layout: Transformation or Flow.		## 7-1. Instant rollback（ビルドし直さずに即戻す）⚡
753docs/firebase_hosting_ts_study_018.mdfirebase_hosting_ts_study_018_07_ai_ops.png./picture/firebase_hosting_ts_study_018_07_ai_ops.pngTheme: AI Operations Assistant

Labels to Render:
- Log: "Error Log"
- AI: "Gemini"
- Analysis: "Cause: Config Mismatch"
- Solution: "Fix apphosting.yaml"

Visual Details:
1. Core Concept: AI diagnosing operational issues.
2. Metaphor: A robot mechanic analyzing a diagnostic screen and offering a wrench (solution).
3. Action: Diagnosing/Solving.
4. Layout: Interaction.		## 8-4. AIに投げると強い “運用系プロンプト” 例📝🤖
754docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_01_server_tasks.png./picture/firebase_hosting_ts_study_019_01_server_tasks.pngTheme: Backend Tasks

Labels to Render:
- Task 1: "Email 📩"
- Task 2: "DB Update 🔐"
- Task 3: "Webhook 🔔"
- Task 4: "AI Process 🤖"

Visual Details:
1. Core Concept: Examples of tasks requiring a backend.
2. Metaphor: A server rack with different modules performing specific jobs.
3. Action: Processing.
4. Layout: Grid of icons.		## 1) そもそも「サーバー処理」って何？🤔💡
755docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_02_decision_tree.png./picture/firebase_hosting_ts_study_019_02_decision_tree.pngTheme: Functions vs Cloud Run Decision

Labels to Render:
- Start: "Need Backend?"
- Q1: "Firebase Event?" -> Yes: "Functions"
- Q2: "Custom Runtime?" -> Yes: "Cloud Run"
- Q3: "Simple API?" -> Yes: "Functions"

Visual Details:
1. Core Concept: Choosing the right platform.
2. Metaphor: A flowchart directing traffic to either the "Functions" tower or the "Cloud Run" factory.
3. Action: Routing.
4. Layout: Flowchart.		## 2) 結論：どう選ぶ？（3秒で決める）⚡🧩
756docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_03_rewrite_arch.png./picture/firebase_hosting_ts_study_019_03_rewrite_arch.pngTheme: Hosting Rewrites

Labels to Render:
- User: "Request /api"
- Hosting: "Proxy"
- Function: "Execute API"
- URL: "Same Domain"

Visual Details:
1. Core Concept: Hosting forwarding API requests to Functions internally.
2. Metaphor: A front desk (Hosting) receiving a letter for the back office (Function) and handing it over without the customer leaving the building.
3. Action: Handing over.
4. Layout: Internal flow.		## 3) Hosting から “同じドメインで” Functions に繋げる（超重要）🔁🌐
757docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_04_functions_init.png./picture/firebase_hosting_ts_study_019_04_functions_init.pngTheme: Functions Initialization

Labels to Render:
- Command: "firebase init functions"
- Option: "TypeScript"
- Result: "functions/ folder"

Visual Details:
1. Core Concept: Setting up the environment.
2. Metaphor: A wizard creating a new workspace labeled 'functions' with a TS logo.
3. Action: Creation.
4. Layout: Setup visual.		## 4-1. Functions を追加する（初期化）🧱
758docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_05_rewrite_config.png./picture/firebase_hosting_ts_study_019_05_rewrite_config.pngTheme: Rewrite JSON Config

Labels to Render:
- Source: "/api/**"
- Target: "function: apiHello"
- File: "firebase.json"

Visual Details:
1. Core Concept: Configuration mapping.
2. Metaphor: A signpost in the code saying "All API traffic this way -> apiHello".
3. Action: Directing.
4. Layout: Code snippet representation.		## 4-4. Hosting の /api/** を Functions に rewrite する🔁
759docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_06_cloud_run_runtimes.png./picture/firebase_hosting_ts_study_019_06_cloud_run_runtimes.pngTheme: Cloud Run Flexibility

Labels to Render:
- Icon 1: ".NET 8"
- Icon 2: "Python 3.13"
- Icon 3: "Node.js (Custom)"
- Feature: "Any Container"

Visual Details:
1. Core Concept: Support for various languages and runtimes.
2. Metaphor: A shipping container (Cloud Run) that can hold crates from different countries (Languages).
3. Action: Containment.
4. Layout: Group of logos.		## 5) じゃあ Cloud Run はいつ使う？（わかりやすい例）🟦🔥
760docs/firebase_hosting_ts_study_019.mdfirebase_hosting_ts_study_019_07_ai_tools_map.png./picture/firebase_hosting_ts_study_019_07_ai_tools_map.pngTheme: AI Tools Ecosystem

Labels to Render:
- Client: "AI Logic (Direct)"
- Server: "Genkit (Flow)"
- Dev: "Gemini CLI (Ops)"
- Center: "Firebase"

Visual Details:
1. Core Concept: Where each AI tool fits in the architecture.
2. Metaphor: A map of a city. Residential area (Client/AI Logic), Industrial zone (Server/Genkit), and City Hall (Dev/Gemini).
3. Action: Mapping.
4. Layout: Map view.		## 6) AI を絡めると “サーバー置き場” が一気に決まる🤖🧠
761docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_01_runbook_shield.png./picture/firebase_hosting_ts_study_020_01_runbook_shield.pngTheme: Runbook Shield

Labels to Render:
- Item: "Runbook"
- Shield: "Safety"
- Threat: "Future Panic"
- User: "Developer"

Visual Details:
1. Core Concept: A documentation file acting as a shield.
2. Metaphor: A glowing scroll (Runbook) creating a force field around a developer.
3. Action: Blocking chaos/panic.
4. Layout: Protective stance.		## 1) “手順書”は、最強の自動化😇
762docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_02_pr_guard.png./picture/firebase_hosting_ts_study_020_02_pr_guard.pngTheme: PR Guard Robot

Labels to Render:
- Guard: "GitHub Actions"
- Gate: "PR Check"
- Monster: "Bug"
- Goal: "Production"

Visual Details:
1. Core Concept: Automated checks stopping bugs before merge.
2. Metaphor: A robot guard standing at a gate (PR) stopping a bug monster from entering the city (Production).
3. Action: Blocking.
4. Layout: Gatekeeper scene.		## 2) “自動チェック”は、PRで落とすのが正義⚖️
763docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_03_ai_tools_map.png./picture/firebase_hosting_ts_study_020_03_ai_tools_map.pngTheme: AI Tools Ecosystem Map

Labels to Render:
- Console: "Gemini in Firebase"
- CLI: "MCP / Gemini CLI"
- App: "AI Logic"
- Flow: "Genkit"

Visual Details:
1. Core Concept: Where each AI tool fits.
2. Metaphor: A map of a workspace. Console on the monitor, CLI on the terminal, App in the phone, Flow on the whiteboard.
3. Action: Mapping.
4. Layout: 4-quadrant map.		## 3) AIは「コードを書く」より「詰まり＆漏れ」を潰すのが強い🔥
764docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_04_runbook_anatomy.png./picture/firebase_hosting_ts_study_020_04_runbook_anatomy.pngTheme: Runbook Sections

Labels to Render:
- Section 1: "Pre-Check"
- Section 2: "Deploy"
- Section 3: "Rollback"
- Section 4: "Emergency"

Visual Details:
1. Core Concept: The essential parts of a Runbook.
2. Metaphor: An anatomy chart of a document, highlighting 4 key body parts.
3. Action: Structuring.
4. Layout: Document breakdown.		## 1-2) AIに“下書き”を作らせるプロンプト例🤖🧾
765docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_05_pr_checklist.png./picture/firebase_hosting_ts_study_020_05_pr_checklist.pngTheme: PR Checklist

Labels to Render:
- Item 1: "Preview URL OK"
- Item 2: "No 404"
- Item 3: "Images OK"
- Action: "Merge"

Visual Details:
1. Core Concept: Verifying items before merging.
2. Metaphor: A clipboard with checkboxes being ticked off by a pen.
3. Action: Checking.
4. Layout: Checklist focus.		## 3) GitHub Actionsに「自動チェック（Preflight）」を足す🤖✅
766docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_06_preflight_flow.png./picture/firebase_hosting_ts_study_020_06_preflight_flow.pngTheme: Preflight Workflow

Labels to Render:
- Step 1: "npm ci"
- Step 2: "Lint"
- Step 3: "Test"
- Step 4: "Build"

Visual Details:
1. Core Concept: The sequence of CI checks.
2. Metaphor: An obstacle course. The runner (Code) must clear hurdles (Lint, Test) and climb a wall (Build) to finish.
3. Action: Clearing obstacles.
4. Layout: Linear progression.		## 3-2) YAML例（イメージ）🧩
767docs/firebase_hosting_ts_study_020.mdfirebase_hosting_ts_study_020_07_release_note_gen.png./picture/firebase_hosting_ts_study_020_07_release_note_gen.pngTheme: Release Note Generator

Labels to Render:
- Input: "Bullet Points"
- AI: "AI Logic"
- Output: "Release Note"

Visual Details:
1. Core Concept: AI transforming rough notes into a polished document.
2. Metaphor: A machine taking raw scraps of paper (Bullets) and printing a clean newspaper (Release Note).
3. Action: Publishing.
4. Layout: Transformation flow.		## 5-2) 実務っぽくする小ワザ🧠✨
977docs/firebase_hosting_ts_index.mdfirebase_hosting_ts_index_08_chapter_flow.png./picture/firebase_hosting_ts_index_08_chapter_flow.pngTheme: Chapter Flow Map

Labels to Render:
- Part 1: "Publish (Ch 1-5) 🚀"
- Part 2: "CI/CD (Ch 6-10) 🤖"
- Part 3: "Quality (Ch 11-14) 🛡️"
- Part 4: "App Hosting (Ch 15-18) 🧩"
- Part 5: "AI/Ops (Ch 19-20) 🧠"

Visual Details:
1. Core Concept: The progression of the 20 chapters.
2. Metaphor: A winding road map with 5 milestones.
3. Action: Progression.
4. Layout: Map view.		After: ## 章の流れのイメージ（超ざっくり）🗺️
978docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_08_cost.png./picture/firebase_hosting_ts_study_001_08_cost.pngTheme: Hosting Cost

Labels to Render:
- Hosting: "Free Tier (Generous) 🎁"
- SSR: "Cloud Run (Paid) 💸"
- Balance: "Start Small"

Visual Details:
1. Core Concept: Hosting is mostly free, SSR costs money.
2. Metaphor: A free gift box (Hosting) vs a coin slot (SSR).
3. Action: Comparison.
4. Layout: Side-by-side.		After: ## 5) 「コスト/課金」の超入門（怖がらない版）💰😌
979docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_09_assignment.png./picture/firebase_hosting_ts_study_001_09_assignment.pngTheme: Assignment Note

Labels to Render:
- App Type: "SPA"
- Choice: "Hosting"
- Reason: "Fast & Free"

Visual Details:
1. Core Concept: Documenting the decision.
2. Metaphor: A sticky note on a monitor.
3. Action: Writing.
4. Layout: Close-up.		After: ## 8) ミニ課題🎒：「今回はHostingにする理由」を一言で！
980docs/firebase_hosting_ts_study_001.mdfirebase_hosting_ts_study_001_10_check.png./picture/firebase_hosting_ts_study_001_10_check.pngTheme: Final Check

Labels to Render:
- Item 1: "Hosting Strength ⚡"
- Item 2: "App Hosting Strength 🚀"
- Item 3: "My Choice 🧠"

Visual Details:
1. Core Concept: Confirming understanding.
2. Metaphor: A student checking off answers on a test.
3. Action: Checking.
4. Layout: Checklist.		After: ## 9) チェック✅（合格ライン）
981docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_08_login.png./picture/firebase_hosting_ts_study_002_08_login.pngTheme: Login

Labels to Render:
- Command: "firebase login"
- Browser: "Google Auth"
- Success: "Logged In! 🔑"

Visual Details:
1. Core Concept: CLI login opening browser.
2. Metaphor: A key unlocking a browser.
3. Action: Unlocking.
4. Layout: Split screen (CLI/Browser).		After: ## Step E：Firebase にログインする🔑
982docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_09_first_deploy.png./picture/firebase_hosting_ts_study_002_09_first_deploy.pngTheme: First Deploy

Labels to Render:
- Command: "firebase deploy"
- Box: "Public Folder"
- Cloud: "Hosting"
- URL: "https://..."

Visual Details:
1. Core Concept: firebase deploy command and URL result.
2. Metaphor: A package being shipped to a cloud island.
3. Action: Shipping.
4. Layout: Flow.		After: ## Step G：初回デプロイして “URLで見れる” を体験する🌐🚀
983docs/firebase_hosting_ts_study_002.mdfirebase_hosting_ts_study_002_10_assignment.png./picture/firebase_hosting_ts_study_002_10_assignment.pngTheme: Assignment

Labels to Render:
- Q1: "What is public?"
- Q2: "What is firebase.json?"

Visual Details:
1. Core Concept: 2 questions to answer.
2. Metaphor: A notepad with 2 items.
3. Action: Writing.
4. Layout: List.		After: ## 5) ミニ課題✍️🎒
984docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_08_log.png./picture/firebase_hosting_ts_study_003_08_log.pngTheme: Deploy Log

Labels to Render:
- Date: "Today"
- Action: "Changed H1"
- Result: "Deployed 🚀"

Visual Details:
1. Core Concept: Writing down the deploy history.
2. Metaphor: A diary or logbook.
3. Action: Writing.
4. Layout: Open book.		After: ## 3) ミニ課題📝：公開URLを“自分の資産”にする💎
985docs/firebase_hosting_ts_study_003.mdfirebase_hosting_ts_study_003_09_ai_tools.png./picture/firebase_hosting_ts_study_003_09_ai_tools.pngTheme: AI Tools

Labels to Render:
- Tool 1: "Gemini CLI"
- Tool 2: "Antigravity"
- Connection: "MCP Server"

Visual Details:
1. Core Concept: Gemini CLI and Antigravity.
2. Metaphor: Two robots shaking hands.
3. Action: Connecting.
4. Layout: Connection.		After: ## C) Gemini CLI と Google Antigravityの使い分け🧠✨
986docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_08_edit_json.png./picture/firebase_hosting_ts_study_004_08_edit_json.pngTheme: Editing JSON

Labels to Render:
- Code: "public: 'dist'"
- Action: "Edit"
- Tool: "Editor"

Visual Details:
1. Core Concept: Changing "public" to "dist".
2. Metaphor: A pencil editing a line of code.
3. Action: Editing.
4. Layout: Close-up.		After: ## Step 2： の を合わせる 🔧🎯
987docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_09_assignment.png./picture/firebase_hosting_ts_study_004_09_assignment.pngTheme: Assignment

Labels to Render:
- Task 1: "Memo Folder"
- Task 2: "Set public"
- Task 3: "Why ignore?"

Visual Details:
1. Core Concept: 3 tasks.
2. Metaphor: A task list.
3. Action: Checking off.
4. Layout: List.		After: ## ミニ課題 ✍️😺
988docs/firebase_hosting_ts_study_004.mdfirebase_hosting_ts_study_004_10_check.png./picture/firebase_hosting_ts_study_004_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Public OK"
- Check 2: "Ignore OK"
- Check 3: "Not Scary"

Visual Details:
1. Core Concept: 3 checks.
2. Metaphor: A stamp saying "Approved".
3. Action: Stamping.
4. Layout: Stamp.		After: ## チェック ✅🎉
989docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_08_emulator.png./picture/firebase_hosting_ts_study_005_08_emulator.pngTheme: Hosting Emulator

Labels to Render:
- Screen: "localhost:5000"
- URL: "/about"
- Action: "F5 (Reload)"
- Result: "OK (No 404)"

Visual Details:
1. Core Concept: Testing localhost.
2. Metaphor: A laptop with "localhost:5000" on screen.
3. Action: Reloading.
4. Layout: Laptop view.		After: ## 5) ローカルで確認（いきなり本番に出さない！）🧪
990docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_09_assignment.png./picture/firebase_hosting_ts_study_005_09_assignment.pngTheme: Mini Assignment

Labels to Render:
- Step 1: "Create Route"
- Step 2: "Add Rewrites"
- Step 3: "Test Local"
- Step 4: "Deploy"

Visual Details:
1. Core Concept: 4 steps.
2. Metaphor: A numbered list.
3. Action: Progression.
4. Layout: Steps.		After: ## 9) ミニ課題🎯（5〜15分）
991docs/firebase_hosting_ts_study_005.mdfirebase_hosting_ts_study_005_10_checklist.png./picture/firebase_hosting_ts_study_005_10_checklist.pngTheme: Checklist

Labels to Render:
- Check 1: "URL OK"
- Check 2: "Reload OK"
- Check 3: "Assets OK"
- Check 4: "Catch-all Last"

Visual Details:
1. Core Concept: 5 checks.
2. Metaphor: A checklist board.
3. Action: Checking.
4. Layout: Board.		After: ## 10) チェックリスト✅
992docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_08_open.png./picture/firebase_hosting_ts_study_006_08_open.pngTheme: Open Channel

Labels to Render:
- Command: "channel:open"
- Result: "URL Copied"
- Action: "Open Browser"

Visual Details:
1. Core Concept: Command returning URL.
2. Metaphor: A key opening a door.
3. Action: Opening.
4. Layout: Doorway.		After: ## 3) すぐブラウザで開く👀🧭
993docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_09_assignment.png./picture/firebase_hosting_ts_study_006_09_assignment.pngTheme: Mini Assignment

Labels to Render:
- Channel 1: "pr-1 (1d)"
- Channel 2: "try-cache (12h)"
- Action: "Create & List"

Visual Details:
1. Core Concept: 2 channels created.
2. Metaphor: Two parallel tracks.
3. Action: Creating.
4. Layout: Tracks.		After: ## ミニ課題（10〜15分）🧩📝
994docs/firebase_hosting_ts_study_006.mdfirebase_hosting_ts_study_006_10_check.png./picture/firebase_hosting_ts_study_006_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Temp URL"
- Check 2: "Public"
- Check 3: "Commands"
- Check 4: "Expires"

Visual Details:
1. Core Concept: 5 points.
2. Metaphor: A 5-star rating or checklist.
3. Action: Rating.
4. Layout: Stars.		After: ## チェック✅（言えたら勝ち🏆）
995docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_08_git_push.png./picture/firebase_hosting_ts_study_007_08_git_push.pngTheme: Git Push

Labels to Render:
- Command: "git push origin setup"
- Action: "Upload"
- Result: "Branch Created 🌿"

Visual Details:
1. Core Concept: Pushing the setup branch.
2. Metaphor: A push button or uploading arrow.
3. Action: Pushing.
4. Layout: Action flow.		After: ## 3-3. 生成されたworkflowをコミットしてpush🧾➡️📤
996docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_09_assignment.png./picture/firebase_hosting_ts_study_007_09_assignment.pngTheme: Assignment

Labels to Render:
- Task 1: "Change Text"
- Task 2: "Make PR"
- Task 3: "Check URL"

Visual Details:
1. Core Concept: PR preview task.
2. Metaphor: A task card.
3. Action: Checking off.
4. Layout: Card.		After: ## ミニ課題A：PRプレビューを1回通す🔁
997docs/firebase_hosting_ts_study_007.mdfirebase_hosting_ts_study_007_10_check.png./picture/firebase_hosting_ts_study_007_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Auto Preview"
- Check 2: "Comment URL"
- Check 3: "Update URL"
- Check 4: "Real Backend"

Visual Details:
1. Core Concept: 4 items checked.
2. Metaphor: A checklist.
3. Action: Checking.
4. Layout: List.		After: ## 8) チェック✅（できたら次章へGO🚢）
998docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_08_yaml_code.png./picture/firebase_hosting_ts_study_008_08_yaml_code.pngTheme: YAML Code

Labels to Render:
- Event: "on: push (main)"
- Step: "deploy_live"
- Secret: "SERVICE_ACCOUNT"

Visual Details:
1. Core Concept: The deployment workflow file.
2. Metaphor: A scroll of code.
3. Action: Reading.
4. Layout: Scroll view.		After: ## Step 2：本番デプロイ用 workflow（例）📄
999docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_09_assignment.png./picture/firebase_hosting_ts_study_008_09_assignment.pngTheme: Assignment

Labels to Render:
- Before: "App v1"
- After: "App v2"
- Proof: "Screenshot 📸"

Visual Details:
1. Core Concept: Evidence screenshot.
2. Metaphor: A photo being pinned to a board.
3. Action: Pinning.
4. Layout: Pinboard.		After: ## 課題：PR→マージ→本番反映を“証拠付き”で完了しよう📸✅
1000docs/firebase_hosting_ts_study_008.mdfirebase_hosting_ts_study_008_10_check.png./picture/firebase_hosting_ts_study_008_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Preview OK"
- Check 2: "Action Run"
- Check 3: "Live Updated"
- Check 4: "Secrets Safe"

Visual Details:
1. Core Concept: 5 items checked.
2. Metaphor: A 5-star review.
3. Action: Rating.
4. Layout: Stars.		After: ## 7) チェック✅（できたら合格！）
1001docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_09_assignment.png./picture/firebase_hosting_ts_study_009_09_assignment.pngTheme: Assignment

Labels to Render:
- Bucket 1: "Secret (Service Account)"
- Bucket 2: "Public (Project ID)"
- Action: "Sort"

Visual Details:
1. Core Concept: Sorting keys into buckets.
2. Metaphor: Two buckets: "Secret" and "Public".
3. Action: Sorting.
4. Layout: Buckets.		After: ## ミニ課題✍️：「漏れたらヤバい／別にOK」を仕分けしよう🧠
1002docs/firebase_hosting_ts_study_009.mdfirebase_hosting_ts_study_009_10_check.png./picture/firebase_hosting_ts_study_009_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Find Secret"
- Check 2: "IAM Role"
- Check 3: "Fork Risk"
- Check 4: "Rotation"

Visual Details:
1. Core Concept: 4 items.
2. Metaphor: A vault being locked securely.
3. Action: Locking.
4. Layout: Vault.		After: ## 最終チェック✅（この章の合格ライン）
1003docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_08_permission_fix.png./picture/firebase_hosting_ts_study_010_08_permission_fix.pngTheme: Permission Fix

Labels to Render:
- Setting: "Workflow permissions"
- Switch: "Read and write"
- Result: "PR Comment OK 💬"

Visual Details:
1. Core Concept: Enabling "Read and write".
2. Metaphor: Turning a switch from "Read" to "Read/Write".
3. Action: Switching.
4. Layout: UI Setting.		After: ## エラー2：（PRコメントできない等）🧷❌
1004docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_09_node_mismatch.png./picture/firebase_hosting_ts_study_010_09_node_mismatch.pngTheme: Node Mismatch

Labels to Render:
- CI: "Node 24 (LTS)"
- Local: "Node 18 (Old)"
- Result: "Build Fail 💥"

Visual Details:
1. Core Concept: CI vs Local.
2. Metaphor: Two gears not meshing.
3. Action: Jamming.
4. Layout: Comparison.		After: ## エラー5：Node/依存関係が合わずビルドが死ぬ🏗️💥
1005docs/firebase_hosting_ts_study_010.mdfirebase_hosting_ts_study_010_10_assignment.png./picture/firebase_hosting_ts_study_010_10_assignment.pngTheme: Assignment

Labels to Render:
- Step 1: "Break (Type Error)"
- Step 2: "Fail (Red)"
- Step 3: "Fix (Green)"

Visual Details:
1. Core Concept: Break and Fix.
2. Metaphor: Breaking a vase and gluing it back.
3. Action: Repairing.
4. Layout: Sequence.		After: ## お題：TypeScriptエラーを1個入れて、CIを落として、直して復旧する😈
1006docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_08_dns_txt.png./picture/firebase_hosting_ts_study_011_08_dns_txt.pngTheme: DNS TXT Record

Labels to Render:
- Type: "TXT"
- Value: "google-site-verification..."
- Purpose: "Ownership 🪪"

Visual Details:
1. Core Concept: Adding a TXT record.
2. Metaphor: Showing ID to a guard.
3. Action: Verifying.
4. Layout: ID check.		After: ## Step 2：TXT（所有確認）をDNSへ入れる🪪
1007docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_09_dns_a.png./picture/firebase_hosting_ts_study_011_09_dns_a.pngTheme: DNS A Record

Labels to Render:
- Type: "A"
- Value: "199.36.158.100"
- Purpose: "Destination 🧭"

Visual Details:
1. Core Concept: Adding A records.
2. Metaphor: Pointing a signpost.
3. Action: Pointing.
4. Layout: Signpost.		After: ## Step 3：A/AAAA（行き先）をDNSへ入れる🧭
1008docs/firebase_hosting_ts_study_011.mdfirebase_hosting_ts_study_011_10_assignment.png./picture/firebase_hosting_ts_study_011_10_assignment.pngTheme: Assignment

Labels to Render:
- Choice 1: "Apex Main (redirect www)"
- Choice 2: "WWW Main (redirect Apex)"
- Action: "Choose One"

Visual Details:
1. Core Concept: Decision on redirects.
2. Metaphor: A fork in the road with a sign.
3. Action: Choosing.
4. Layout: Fork.		After: ## ミニ課題A：URLの“正”を決める🔁
1009docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_08_assignment.png./picture/firebase_hosting_ts_study_012_08_assignment.pngTheme: Assignment Questions

Labels to Render:
- Q1: "HTML Cache?"
- Q2: "Hash Assets?"
- Q3: "no-cache vs no-store"

Visual Details:
1. Core Concept: 3 questions.
2. Metaphor: A quiz sheet.
3. Action: Asking.
4. Layout: List.		After: ## 6) ミニ課題✍️🎯（10分）
1010docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_09_check.png./picture/firebase_hosting_ts_study_012_09_check.pngTheme: Final Check

Labels to Render:
- Check 1: "no-cache HTML"
- Check 2: "Long Cache Assets"
- Check 3: "Update Works"
- Check 4: "No White Screen"

Visual Details:
1. Core Concept: 4 items.
2. Metaphor: A checklist.
3. Action: Checking.
4. Layout: List.		After: ## 7) チェック✅（できたら勝ち！）
1011docs/firebase_hosting_ts_study_012.mdfirebase_hosting_ts_study_012_10_ai_review.png./picture/firebase_hosting_ts_study_012_10_ai_review.pngTheme: AI Config Review

Labels to Render:
- Input: "firebase.json"
- AI: "Review Cache"
- Output: "Safe ✅"

Visual Details:
1. Core Concept: AI reviewing firebase.json.
2. Metaphor: A robot reading a scroll.
3. Action: Reviewing.
4. Layout: Interaction.		After: ## 9-1) Gemini CLI で「firebase.json のキャッシュ設計」をレビューしてもらう🧠
1012docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_08_ai_debug.png./picture/firebase_hosting_ts_study_013_08_ai_debug.pngTheme: AI Debugging

Labels to Render:
- Error: "Unexpected Redirect"
- AI: "Check Priority"
- Solution: "Move Rewrite Down ⬇️"

Visual Details:
1. Core Concept: Asking AI why redirect fails.
2. Metaphor: A detective analyzing a road sign.
3. Action: Solving.
4. Layout: Analysis.		After: ## 1) コンソールのAIに「なぜ効かない？」を聞く🧯
1013docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_09_assignment.png./picture/firebase_hosting_ts_study_013_09_assignment.pngTheme: URL Design Note

Labels to Render:
- URL 1: "/news (301)"
- URL 2: "/help (rewrite)"
- URL 3: "/profile (SPA)"

Visual Details:
1. Core Concept: Planning 3 URLs.
2. Metaphor: A roadmap draft.
3. Action: Planning.
4. Layout: Map.		After: ## ミニ課題🎒✨（10〜15分）
1014docs/firebase_hosting_ts_study_013.mdfirebase_hosting_ts_study_013_10_check.png./picture/firebase_hosting_ts_study_013_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Priority Order"
- Check 2: "First Win"
- Check 3: "SPA Last"
- Check 4: "API First"

Visual Details:
1. Core Concept: 5 items checked.
2. Metaphor: A checklist.
3. Action: Checking.
4. Layout: List.		After: ## チェック✅（ここまでできたら合格！）
1015docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_08_json_array.png./picture/firebase_hosting_ts_study_014_08_json_array.pngTheme: Multi-target JSON

Labels to Render:
- Target: "staging"
- Target: "prod"
- Structure: "Array []"

Visual Details:
1. Core Concept: Array configuration.
2. Metaphor: A train schedule with multiple destinations.
3. Action: Scheduling.
4. Layout: Schedule.		After: ## 3) を “配列” で書く🧾
1016docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_09_assignment.png./picture/firebase_hosting_ts_study_014_09_assignment.pngTheme: Assignment

Labels to Render:
- Branch: "develop -> Staging"
- Branch: "main -> Prod"
- Rule: "No direct push"

Visual Details:
1. Core Concept: Branch strategy.
2. Metaphor: A tree with labeled branches.
3. Action: Branching.
4. Layout: Tree.		After: ## ミニ課題🎒✨（15〜30分）
1017docs/firebase_hosting_ts_study_014.mdfirebase_hosting_ts_study_014_10_check.png./picture/firebase_hosting_ts_study_014_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Env vs Preview"
- Check 2: "Auto Deploy"
- Check 3: "Safe Preview"
- Check 4: "Separate Secrets"

Visual Details:
1. Core Concept: 5 items checked.
2. Metaphor: A safety inspector's clipboard.
3. Action: Checking.
4. Layout: Clipboard.		After: ## チェック✅（できたら勝ち！🏆）
1018docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_08_sorting_sheet.png./picture/firebase_hosting_ts_study_015_08_sorting_sheet.pngTheme: Sorting Sheet

Labels to Render:
- Question 1: "SPA or SSR?"
- Question 2: "SEO?"
- Question 3: "Server Logic?"

Visual Details:
1. Core Concept: A worksheet for decision making.
2. Metaphor: A clipboard with questions.
3. Action: Assessing.
4. Layout: Sheet.		After: ## やること：自分のアプリを“仕分け”する🗂️
1019docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_09_assignment.png./picture/firebase_hosting_ts_study_015_09_assignment.pngTheme: Assignment

Labels to Render:
- Decision: "App Hosting"
- Reason 1: "SSR"
- Reason 2: "Secrets"

Visual Details:
1. Core Concept: 3-line reason.
2. Metaphor: A sticky note with text.
3. Action: Posting.
4. Layout: Sticky note.		After: ## 8) ミニ課題🎯✍️
1020docs/firebase_hosting_ts_study_015.mdfirebase_hosting_ts_study_015_10_check.png./picture/firebase_hosting_ts_study_015_10_check.pngTheme: Final Check

Labels to Render:
- Check 1: "Difference Clear"
- Check 2: "SSR = App Hosting"
- Check 3: "Config YAML"
- Check 4: "Cost Aware"

Visual Details:
1. Core Concept: 4 items checked.
2. Metaphor: A checklist.
3. Action: Checking.
4. Layout: List.		After: ## 9) チェック（理解できた？）✅🧠