image_generation_plan.performance_ts

ID	File Name	Proposed Image Filename	Relative Link Path	Prompt	Insertion Point
2	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_four_tools.png	./picture/firebase_analytics_performance_ts_index_four_tools.png	Theme: The Four Pillars of App Growth Labels to Render: - Analytics: "計測" - Remote Config: "遠隔操作" - A/B Testing: "実験" - Performance: "速度" Visual Details: 1. Core Concept: Four distinct tools working together to grow an app. 2. Metaphor: Four puzzle pieces or pillars supporting a growing plant (the app). 3. Action: Arrows connecting them in a cycle. 4. Layout: 2x2 grid or circular arrangement.	## このカテゴリの完成イメージ 🧩🏁
3	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_north_star.png	./picture/firebase_analytics_performance_ts_index_north_star.png	Theme: North Star Metric Labels to Render: - North Star: "北極星指標" - App Success: "アプリの成功" Visual Details: 1. Core Concept: A single guiding metric. 2. Metaphor: A bright star in the sky guiding a ship (the app). 3. Action: The ship sailing towards the star. 4. Layout: Central composition with the star at the top.	## 第1章：なぜ計測するの？「北極星」づくり🌟📌
4	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_funnel.png	./picture/firebase_analytics_performance_ts_index_funnel.png	Theme: Conversion Funnel Labels to Render: - Login: "ログイン" - Create: "作成" - Save: "保存" - Drop-off: "離脱" Visual Details: 1. Core Concept: Users dropping off at each step. 2. Metaphor: A funnel shape where many enter and fewer leave. 3. Action: Users (dots) flowing through, some falling out. 4. Layout: Vertical funnel shape.	## 第6章：ファネル（どこで離脱？）の発想🚪➡️🏁
5	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_feature_flag.png	./picture/firebase_analytics_performance_ts_index_feature_flag.png	Theme: Feature Flag Toggling Labels to Render: - Remote Config: "Remote Config" - Feature A: "機能A" - ON: "ON" - OFF: "OFF" Visual Details: 1. Core Concept: Controlling app features remotely. 2. Metaphor: A control panel with toggle switches. 3. Action: A hand flipping a switch. 4. Layout: Close-up of a switch.	## 第8章：Remote Configの全体像（機能フラグ）🎛️🚦
6	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_ab_testing.png	./picture/firebase_analytics_performance_ts_index_ab_testing.png	Theme: A/B Testing Comparison Labels to Render: - Plan A: "案A" - Plan B: "案B" - Better: "勝ち" Visual Details: 1. Core Concept: Comparing two variations. 2. Metaphor: A balance scale weighing two options. 3. Action: One side (Plan B) tipping the scale or showing a checkmark. 4. Layout: Balanced composition.	## 第13章：A/Bテストの基本（仮説→実験→判断）🧪⚖️
7	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_perf_mon.png	./picture/firebase_analytics_performance_ts_index_perf_mon.png	Theme: Speed Monitoring Labels to Render: - Loading: "読み込み" - Fast: "速い" - Slow: "遅い" Visual Details: 1. Core Concept: Measuring app speed. 2. Metaphor: A speedometer or dashboard gauge. 3. Action: The needle moving from red (slow) to green (fast). 4. Layout: Central gauge.	## 第17章：Performance Monitoring導入（遅いを“見える化”）⚡👀
8	docs/firebase_analytics_performance_ts_index.md	firebase_analytics_performance_ts_index_improvement_cycle.png	./picture/firebase_analytics_performance_ts_index_improvement_cycle.png	Theme: Continuous Improvement Cycle Labels to Render: - Hypothesis: "仮説" - Change: "変更" - Measure: "計測" - Judge: "判断" Visual Details: 1. Core Concept: Iterative improvement. 2. Metaphor: A circular arrow cycle. 3. Action: Flowing from one step to the next.4. Layout: Circular flow.	## 第20章：改善サイクル完成（AIも使って回す）🔁🤖🏁
9	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_blind_dev.png	./picture/firebase_analytics_performance_ts_study_001_blind_dev.png	Theme: Blind Development Labels to Render: - App: "アプリ" - User: "ユーザー" - Issue: "問題" Visual Details: 1. Core Concept: Developing without feedback is like flying blind. 2. Metaphor: A developer wearing a blindfold while coding, unaware of a user tripping over a rock nearby. 3. Action: The developer is typing happily, while the user is struggling. 4. Layout: Split composition showing dev and user.	## 1) 「作って終わり」だと起きがちな悲劇🥲📉
10	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_north_star.png	./picture/firebase_analytics_performance_ts_study_001_north_star.png	Theme: North Star Metric Definition Labels to Render: - North Star: "北極星" - Value: "価値" - Growth: "成長" Visual Details: 1. Core Concept: The ultimate measure of success. 2. Metaphor: A bright star shining above a mountain peak. 3. Action: Climbers (team) looking up at the star. 4. Layout: Upward perspective.	## ✅ 北極星（North Star）
11	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_kpi_steps.png	./picture/firebase_analytics_performance_ts_study_001_kpi_steps.png	Theme: KPIs as Steps Labels to Render: - KPI 1: "中間目標1" - KPI 2: "中間目標2" - North Star: "北極星" Visual Details: 1. Core Concept: KPIs lead to the main goal. 2. Metaphor: A staircase or stepping stones leading to the star. 3. Action: An arrow pointing up the steps. 4. Layout: Diagonal ascent.	## ✅ KPI
12	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_guardrails.png	./picture/firebase_analytics_performance_ts_study_001_guardrails.png	Theme: Guardrails for Safety Labels to Render: - Speed: "速度" - Error: "エラー" - Safety: "安全" Visual Details: 1. Core Concept: Preventing negative metrics while growing. 2. Metaphor: Guardrails on a winding mountain road. 3. Action: A car (app) driving safely thanks to the rails. 4. Layout: Curvy road view.	## ✅ ガードレール（悪化したらダメな指標）🚧
13	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_success_definition.png	./picture/firebase_analytics_performance_ts_study_001_success_definition.png	Theme: Defining Success Labels to Render: - Success: "成功" - Metric: "数値" - Clear: "明確" Visual Details: 1. Core Concept: Turning vague ideas into concrete numbers. 2. Metaphor: A fuzzy thought bubble transforming into a sharp, clear chart or equation. 3. Action: Transformation arrow. 4. Layout: Left to right flow.	## 3) 「成功」を1行で定義しよう✍️🌟（手を動かす）
14	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_ai_control.png	./picture/firebase_analytics_performance_ts_study_001_ai_control.png	Theme: AI Control Panel Labels to Render: - AI Model: "AIモデル" - Cost: "コスト" - Limit: "制限" - Remote Config: "Remote Config" Visual Details: 1. Core Concept: Managing AI behavior remotely. 2. Metaphor: A sophisticated control panel connected to a robot (AI). 3. Action: Adjusting sliders to keep the robot in check. 4. Layout: Tech-focused composition.	## 5) AI機能があるアプリは「制御できる設計」が命🎛️🤖🛡️
15	docs/firebase_analytics_performance_ts_study_001.md	firebase_analytics_performance_ts_study_001_gemini_brainstorm.png	./picture/firebase_analytics_performance_ts_study_001_gemini_brainstorm.png	Theme: Brainstorming with Gemini Labels to Render: - User: "自分" - Gemini: "Gemini" - Ideas: "アイデア" Visual Details: 1. Core Concept: AI assisting in defining metrics. 2. Metaphor: A human and a robot having a conversation, with lightbulbs appearing. 3. Action: Exchanging speech bubbles. 4. Layout: Side-by-side interaction.	## 6) Gemini活用コーナー🧠✨（超おすすめ）
16	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_overview.png	./picture/firebase_analytics_performance_ts_study_002_overview.png	Theme: Firebase Analytics Components Labels to Render: - Firebase Project: "Firebaseプロジェクト" - GA4 Property: "GA4プロパティ" - Data Stream: "データストリーム" Visual Details: 1. Core Concept: The relationship between the three main components. 2. Metaphor: A house (Firebase) connected to a warehouse (GA4) via a gate (Stream). 3. Action: Data flowing from house to warehouse. 4. Layout: Left to right flow.	## この章でできるようになること ✅🎯
17	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_data_flow.png	./picture/firebase_analytics_performance_ts_study_002_data_flow.png	Theme: Data Flow to GA4 Labels to Render: - App: "アプリ" - Event: "イベント" - GA4: "GA4" Visual Details: 1. Core Concept: Events travelling from the app to the analysis tool. 2. Metaphor: An envelope (event) being mailed from a house (app) to a large sorting center (GA4). 3. Action: The envelope moving along a path. 4. Layout: Linear flow.	## まずは全体図 🗺️✨（ここが今日のメイン）
18	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_three_terms.png	./picture/firebase_analytics_performance_ts_study_002_three_terms.png	Theme: Three Key Analytics Terms Labels to Render: - Base: "拠点" - Warehouse: "倉庫" - Gate: "入口" Visual Details: 1. Core Concept: Visual mnemonics for the terms. 2. Metaphor: Icons representing each term: House (Project), Building (Property), Gate (Stream). 3. Action: Static icons with labels. 4. Layout: Horizontal arrangement.	## 用語を3つだけ覚えよう 🧠📚（超ざっくりでOK）
19	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_enable_analytics.png	./picture/firebase_analytics_performance_ts_study_002_enable_analytics.png	Theme: Enabling Analytics Labels to Render: - Console: "コンソール" - Switch: "スイッチ" - ON: "有効" Visual Details: 1. Core Concept: Turning on the feature. 2. Metaphor: A hand flipping a large switch to the "ON" position. 3. Action: The switch glowing or sparking. 4. Layout: Close-up of the switch.	## 1) まず「Analyticsが有効になってる？」を確認 ✅
20	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_event_types.png	./picture/firebase_analytics_performance_ts_study_002_event_types.png	Theme: Event Types Labels to Render: - Auto: "自動" - Custom: "カスタム" - Log: "ログ" Visual Details: 1. Core Concept: Two types of events being logged. 2. Metaphor: A robot (Auto) automatically stacking boxes, while a human (Custom) manually places one. 3. Action: Stacking boxes. 4. Layout: Side-by-side comparison.	## 「既定イベント」ってなに？ 🤔📥（まずはこれが届けば勝ち！）
21	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_debugview.png	./picture/firebase_analytics_performance_ts_study_002_debugview.png	Theme: DebugView Real-time Labels to Render: - Regular: "通常" - DebugView: "DebugView" - Fast: "即時" Visual Details: 1. Core Concept: Real-time feedback for debugging. 2. Metaphor: A slow snail mail (Regular) vs a lightning fast rocket (DebugView). 3. Action: The rocket zooming past the snail. 4. Layout: Race comparison.	## “今すぐ見たい！”なら DebugView が最強 🕵️‍♂️⚡
22	docs/firebase_analytics_performance_ts_study_002.md	firebase_analytics_performance_ts_study_002_ai_troubleshoot.png	./picture/firebase_analytics_performance_ts_study_002_ai_troubleshoot.png	Theme: AI Troubleshooting Labels to Render: - Problem: "？" - AI: "AI" - Solution: "！" Visual Details: 1. Core Concept: AI solving a problem. 2. Metaphor: A tangled knot (Problem) being untied by a robotic hand (AI). 3. Action: The knot loosening. 4. Layout: Transformation.	## AIで爆速に理解＆切り分け 🤖⚡（ここ、今どきの勝ち筋）
23	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_naming_rules.png	./picture/firebase_analytics_performance_ts_study_003_naming_rules.png	Theme: Analytics Naming Rules Labels to Render: - Case Sensitive: "大文字小文字区別" - No Space: "スペース禁止" - Limit: "40文字以内" Visual Details: 1. Core Concept: Strict formatting rules for event names. 2. Metaphor: A referee or strict teacher holding up rule cards. 3. Action: Pointing to a correct vs incorrect example. 4. Layout: Comparison.	## 1) まず最初に知っておく “現実ルール” 📏😇
24	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_naming_convention.png	./picture/firebase_analytics_performance_ts_study_003_naming_convention.png	Theme: Naming Convention Labels to Render: - Verb: "動詞" - Object: "目的語" - Event: "イベント名" Visual Details: 1. Core Concept: Combining two parts to make a clear name. 2. Metaphor: Two puzzle pieces (Verb and Object) clicking together to form the Event Name. 3. Action: Snap/Connection. 4. Layout: Left to right.	## コツA：基本は「動詞_目的語」🗣️➡️🎯
25	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_event_granularity.png	./picture/firebase_analytics_performance_ts_study_003_event_granularity.png	Theme: Event Granularity Labels to Render: - Too Detailed: "細かすぎ" - Just Right: "丁度いい" - Useless: "ゴミ" Visual Details: 1. Core Concept: The pitfall of tracking every mouse movement. 2. Metaphor: A mountain of tiny useless pebbles (Too Detailed) vs a few valuable gold nuggets (Just Right). 3. Action: A person sifting through the pile. 4. Layout: Comparison.	## 3) 粒度の設計コツ “細かすぎ問題” を回避 🧠🔍
26	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_parameter_grouping.png	./picture/firebase_analytics_performance_ts_study_003_parameter_grouping.png	Theme: Grouping with Parameters Labels to Render: - Event: "イベント" - Parameter: "パラメータ" - Variations: "バリエーション" Visual Details: 1. Core Concept: One event with multiple outcomes. 2. Metaphor: A single tree trunk (Event) with multiple branches (Parameters/Variations). 3. Action: Leaves growing on branches. 4. Layout: Tree structure.	## ステップ3：分岐は “イベント名” ではなく “パラメータ” に寄せる 🎛️
27	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_high_cardinality.png	./picture/firebase_analytics_performance_ts_study_003_high_cardinality.png	Theme: High Cardinality Danger Labels to Render: - Infinite: "無限" - Error: "エラー" - Other: "(other)" Visual Details: 1. Core Concept: Too many unique values breaking the report. 2. Metaphor: An overflowing bucket or a graph exploding into chaos. 3. Action: Data spilling out. 4. Layout: Chaos vs Order.	## コツB：値が無限に増えるパラメータは避ける♾️🙅‍♂️
28	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_event_table.png	./picture/firebase_analytics_performance_ts_study_003_event_table.png	Theme: Event Design Table Labels to Render: - Name: "名前" - Timing: "タイミング" - Purpose: "目的" - Params: "パラメータ" Visual Details: 1. Core Concept: Organizing event design. 2. Metaphor: A clean, organized clipboard or blueprint. 3. Action: A pen checking off items. 4. Layout: Table view.	## 5-1 イベント表テンプレ 📋✨
29	docs/firebase_analytics_performance_ts_study_003.md	firebase_analytics_performance_ts_study_003_ai_review.png	./picture/firebase_analytics_performance_ts_study_003_ai_review.png	Theme: AI Design Review Labels to Render: - Draft: "下書き" - AI: "AI" - Polished: "完成" Visual Details: 1. Core Concept: AI improving the design. 2. Metaphor: A rough sketch (Draft) being scanned by a robot (AI) and outputting a masterpiece (Polished). 3. Action: Scanning/Transforming. 4. Layout: Transformation flow.	## 7) AIでイベント表を一瞬で良くする 🤖⚡
30	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_goal.png	./picture/firebase_analytics_performance_ts_study_004_goal.png	Theme: React Event Sending Labels to Render: - React App: "Reactアプリ" - Click: "クリック" - Event: "イベント送信" - Analytics: "Analytics" Visual Details: 1. Core Concept: User action in React triggering a data transmission. 2. Metaphor: A user clicking a button in a React UI, which fires a signal (rocket/paper plane) to a cloud (Analytics). 3. Action: Click -> Send. 4. Layout: Left to right flow.	## この章のゴール🏁✨
31	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_naming_rules.png	./picture/firebase_analytics_performance_ts_study_004_naming_rules.png	Theme: Naming Rules Checklist Labels to Render: - Lowercase: "小文字" - Underscore: "アンダースコア" - No Prefix: "プレフィックス禁止" Visual Details: 1. Core Concept: Visual checklist of rules. 2. Metaphor: A clipboard with checked items, next to correct and incorrect examples. 3. Action: Checking off items. 4. Layout: List view.	## 2) イベント名のルール（地味だけど超重要）🧷
32	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_safe_init.png	./picture/firebase_analytics_performance_ts_study_004_safe_init.png	Theme: Safe Initialization Labels to Render: - Browser: "ブラウザ" - Server: "サーバー" - Safe: "安全" - Crash: "クラッシュ" Visual Details: 1. Core Concept: Preventing crashes on the server side. 2. Metaphor: A security guard (isSupported) allowing the browser to pass but stopping the server from accessing the Analytics box. 3. Action: Guard stopping the server. 4. Layout: Comparison.	## 手順1：Analyticsを“安全に初期化”する（ブラウザだけ）🌐
33	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_track_function.png	./picture/firebase_analytics_performance_ts_study_004_track_function.png	Theme: Track Function Flow Labels to Render: - Component: "コンポーネント" - Track: "track()" - LogEvent: "logEvent" Visual Details: 1. Core Concept: Code execution flow. 2. Metaphor: A relay race. Component passes baton to track(), which passes to logEvent(). 3. Action: Passing the baton. 4. Layout: Linear sequence.	## 手順2：ボタン押下で track() を呼ぶ🖱️📤
34	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_ai_tracking.png	./picture/firebase_analytics_performance_ts_study_004_ai_tracking.png	Theme: Tracking AI Labels to Render: - User: "ユーザー" - AI Button: "AIボタン" - Event: "イベント" Visual Details: 1. Core Concept: Capturing interactions with AI features. 2. Metaphor: A user pressing a glowing robot button, generating a data spark. 3. Action: Pressing button. 4. Layout: Focus on interaction.	## 手順3：AIボタン（Firebase AI Logic）にもイベントを付ける🤖📣
35	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_debugview_flow.png	./picture/firebase_analytics_performance_ts_study_004_debugview_flow.png	Theme: DebugView Workflow Labels to Render: - Chrome Ext: "拡張機能" - Reload: "リロード" - Console: "コンソール" - Check: "確認" Visual Details: 1. Core Concept: Steps to use DebugView. 2. Metaphor: A numbered path: Install extension -> Reload -> Check Console. 3. Action: Flowing through steps. 4. Layout: Step-by-step path.	## 確認：DebugViewで“今飛んでる”を目で見る👀🧪
36	docs/firebase_analytics_performance_ts_study_004.md	firebase_analytics_performance_ts_study_004_pitfalls.png	./picture/firebase_analytics_performance_ts_study_004_pitfalls.png	Theme: Common Pitfalls Labels to Render: - Typos: "タイプミス" - Too Many: "作りすぎ" - PII: "個人情報" Visual Details: 1. Core Concept: Traps to avoid. 2. Metaphor: A character dodging traps (holes, spikes) labeled with the pitfalls. 3. Action: Dodging/Jumping. 4. Layout: Obstacle course.	## よくある詰まりポイント集🧯😇
37	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_user_properties.png	./picture/firebase_analytics_performance_ts_study_005_user_properties.png	Theme: User Properties Concept Labels to Render: - User: "ユーザー" - Plan: "プラン:Pro" - Role: "役割:Admin" Visual Details: 1. Core Concept: Attaching attributes to a user. 2. Metaphor: A user avatar with sticky notes or tags attached to them. 3. Action: Sticking a tag. 4. Layout: Character focus.	## 1) ユーザープロパティって何？🏷️🙂
38	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_cardinality.png	./picture/firebase_analytics_performance_ts_study_005_cardinality.png	Theme: Low Cardinality Rule Labels to Render: - Good: "良い例" - Bad: "悪い例" - Few: "少数" - Many: "バラバラ" Visual Details: 1. Core Concept: Grouping users into broad categories vs individual tracking. 2. Metaphor: Sorting users into 3 neat buckets (Good) vs a messy pile of unique items (Bad). 3. Action: Sorting. 4. Layout: Comparison.	## ✅ コツA：値は「種類が少ない」ものにする
39	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_no_pii.png	./picture/firebase_analytics_performance_ts_study_005_no_pii.png	Theme: No PII Warning Labels to Render: - Email: "メアド" - Name: "氏名" - Analytics: "Analytics" - Stop: "禁止" Visual Details: 1. Core Concept: Privacy protection. 2. Metaphor: A shredder or a barrier stopping personal documents from entering the Analytics box. 3. Action: Stopping/Blocking. 4. Layout: Warning style.	## ✅ コツB：個人情報は絶対に送らない🛑
40	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_register_definition.png	./picture/firebase_analytics_performance_ts_study_005_register_definition.png	Theme: Custom Definition Registration Labels to Render: - Console: "コンソール" - Register: "登録" - Property: "プロパティ" Visual Details: 1. Core Concept: The necessary step of registering properties in the console. 2. Metaphor: A registration form or a guest book being signed before entering the party (Report). 3. Action: Signing/Registering. 4. Layout: UI-like.	## 3) 手を動かす①：Console側で「登録」する🖱️🧾
41	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_set_user_props.png	./picture/firebase_analytics_performance_ts_study_005_set_user_props.png	Theme: Coding User Properties Labels to Render: - Code: "コード" - setUserProperties: "setUserProperties" - Tags: "タグ付け" Visual Details: 1. Core Concept: The function call that applies the tags. 2. Metaphor: A developer typing code that generates tags floating towards the user. 3. Action: Coding/Tagging. 4. Layout: Code to Visual flow.	## 4) 手を動かす②：Reactで user properties を付ける🧑‍💻🏷️
42	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_debug_props.png	./picture/firebase_analytics_performance_ts_study_005_debug_props.png	Theme: Debugging User Properties Labels to Render: - DebugView: "DebugView" - User: "ユーザー" - Current Props: "現在のプロパティ" Visual Details: 1. Core Concept: Verifying properties in real-time. 2. Metaphor: A magnifying glass inspecting the tags on a user in the DebugView screen. 3. Action: Inspecting. 4. Layout: Screen inspection.	## 5) 手を動かす③：DebugViewで「本当に付いたか」見る🧯👀
43	docs/firebase_analytics_performance_ts_study_005.md	firebase_analytics_performance_ts_study_005_ai_design.png	./picture/firebase_analytics_performance_ts_study_005_ai_design.png	Theme: AI Property Design Labels to Render: - App: "アプリ" - AI: "AI" - Proposal: "提案" Visual Details: 1. Core Concept: AI suggesting optimal properties. 2. Metaphor: AI analyzing the app and presenting a list of suggested tags. 3. Action: Presenting/Suggesting. 4. Layout: Interaction.	## 8) AIで“設計”を一気に楽にする🤖🪄
44	docs/firebase_analytics_performance_ts_study_006.md	firebase_analytics_performance_ts_study_006_funnel_concept.png	./picture/firebase_analytics_performance_ts_study_006_funnel_concept.png	Theme: Funnel Visualization Labels to Render: - Users: "ユーザー" - Drop-off: "離脱" - Goal: "ゴール" Visual Details: 1. Core Concept: Visualizing the user journey where many enter but fewer finish. 2. Metaphor: A classic funnel shape. 3. Action: Many dots (users) entering the top wide part, some falling out the sides, and a few exiting the narrow bottom. 4. Layout: Central funnel composition.	## 1) ファネルってなに？🧠📉
45	docs/firebase_analytics_performance_ts_study_006.md	firebase_analytics_performance_ts_study_006_simple_flow.png	./picture/firebase_analytics_performance_ts_study_006_simple_flow.png	Theme: 3-Step Simple Flow Labels to Render: - Login: "ログイン" - Create: "作成" - Save: "保存" Visual Details: 1. Core Concept: A simple, non-branching path. 2. Metaphor: Three stepping stones or checkpoints in a straight line. 3. Action: An arrow flowing through them successfully. 4. Layout: Linear horizontal flow.	## 2) まずは“ファネル1本だけ”決めよう🎯🧩
46	docs/firebase_analytics_performance_ts_study_006.md	firebase_analytics_performance_ts_study_006_mapping_table.png	./picture/firebase_analytics_performance_ts_study_006_mapping_table.png	Theme: Human to Machine Mapping Labels to Render: - Human Step: "人の行動" - Event Name: "イベント名" - Link: "紐付け" Visual Details: 1. Core Concept: Translating user actions into code events. 2. Metaphor: A translator or a bridge connecting a human icon (left) to a code block (right). 3. Action: A connection line or handshake between them. 4. Layout: Side-by-side comparison.	## 3) “イベント ↔ ステップ”対応表を作る🗂️🧠
47	docs/firebase_analytics_performance_ts_study_006.md	firebase_analytics_performance_ts_study_006_open_closed.png	./picture/firebase_analytics_performance_ts_study_006_open_closed.png	Theme: Open vs Closed Funnel Labels to Render: - Closed: "Closed" - Open: "Open" - Entry: "入口" Visual Details: 1. Core Concept: Difference in entry points. 2. Metaphor: Closed Funnel: A tube where you can only enter at the top. Open Funnel: A tube with side openings where people can jump in mid-way. 3. Action: Arrows showing entry points. 4. Layout: Side-by-side comparison.	## Open と Closed、どっち？🤔
48	docs/firebase_analytics_performance_ts_study_006.md	firebase_analytics_performance_ts_study_006_dropoff_reasons.png	./picture/firebase_analytics_performance_ts_study_006_dropoff_reasons.png	Theme: 3 Drop-off Reasons Labels to Render: - Confusing: "分かりにくい" - Hassle: "面倒" - Scary: "怖い" Visual Details: 1. Core Concept: The three main psychological barriers. 2. Metaphor: Three distinct hurdles or walls blocking the user's path. 3. Action: Users stopping or turning back at these walls. 4. Layout: Three separate vignettes or a single path with 3 obstacles.	## 7) “離脱”が見えたら、改善案は3択で考える🛠️💡
49	docs/firebase_analytics_performance_ts_study_006.md	firebase_analytics_performance_ts_study_006_ai_analysis.png	./picture/firebase_analytics_performance_ts_study_006_ai_analysis.png	Theme: AI Funnel Optimization Labels to Render: - Funnel: "ファネル" - Leak: "漏れ" - AI Fix: "AI修正" Visual Details: 1. Core Concept: AI helping to repair the funnel. 2. Metaphor: A robotic mechanic inspecting a leaky funnel and pointing out the hole. 3. Action: Repairing/Highlighting. 4. Layout: Interaction between AI and the chart.	## 8) Gemini / AIで“ファネルの設計”を爆速にする🤖⚡
50	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_three_point_match.png	./picture/firebase_analytics_performance_ts_study_007_three_point_match.png	Theme: 3-Point Consistency Labels to Render: - Design: "設計" - Code: "コード" - Result: "結果" Visual Details: 1. Core Concept: Ensuring consistency across three stages. 2. Metaphor: A triangle connecting a blueprint (Design), a code snippet (Code), and a dashboard (Result). 3. Action: Green checkmarks appearing on the connections. 4. Layout: Triangular composition.	## まず結論：品質チェックは「三点照合」🔺🔍
51	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_debug_vs_report.png	./picture/firebase_analytics_performance_ts_study_007_debug_vs_report.png	Theme: Speed Comparison Labels to Render: - DebugView: "即時" - Report: "24h" Visual Details: 1. Core Concept: The time difference between DebugView and standard reports. 2. Metaphor: A rocket (DebugView) zooming past a slow tortoise (Report). 3. Action: Rocket leaving a trail. 4. Layout: Race comparison.	## 「レポートに出ない！」は普通。確認は Realtime / DebugView 🧠⏱️
52	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_naming_police.png	./picture/firebase_analytics_performance_ts_study_007_naming_police.png	Theme: Naming Rules Enforcement Labels to Render: - OK: "OK" - NG: "NG" - Rule: "ルール" Visual Details: 1. Core Concept: Strictly following naming conventions. 2. Metaphor: A gatekeeper or police officer checking event name tags. 'memo_create' is allowed, 'firebase_log' is stopped. 3. Action: Blocking the NG tag. 4. Layout: Gatekeeper scenario.	## ① イベント名のルール違反がない？（地味に多い）🧨
53	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_react_double_send.png	./picture/firebase_analytics_performance_ts_study_007_react_double_send.png	Theme: React StrictMode Double Send Labels to Render: - Click: "クリック" - Event: "イベント" - Duplicate: "重複" Visual Details: 1. Core Concept: One action triggering two events in React StrictMode. 2. Metaphor: A user clicking a button once, but two identical ghost events fly out from the screen. 3. Action: Ghosting effect. 4. Layout: Interaction focus.	## ④ 二重送信してない？（Reactの罠）🪤
54	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_no_pii_shredder.png	./picture/firebase_analytics_performance_ts_study_007_no_pii_shredder.png	Theme: PII Filtering Labels to Render: - Email: "メアド" - PII: "個人情報" - Analytics: "Analytics" Visual Details: 1. Core Concept: Preventing PII from entering Analytics. 2. Metaphor: A shredder or filter mechanism that destroys PII cards (like email addresses) before they fall into the Analytics box. 3. Action: Shredding/Filtering. 4. Layout: Process flow.	## ⑤ PII（個人情報）を送ってない？🚫👤
55	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_ts_shield.png	./picture/firebase_analytics_performance_ts_study_007_ts_shield.png	Theme: TypeScript Type Safety Labels to Render: - Typos: "タイプミス" - TypeScript: "型" - Block: "ブロック" Visual Details: 1. Core Concept: Types preventing coding errors. 2. Metaphor: A sturdy shield labeled 'TS' deflecting arrows labeled with typos like 'memo_created'. 3. Action: Deflection/Protection. 4. Layout: Defensive stance.	## 実装を “揺れない” ようにする小ワザ（TypeScript編）🧠🧷
56	docs/firebase_analytics_performance_ts_study_007.md	firebase_analytics_performance_ts_study_007_ai_audit.png	./picture/firebase_analytics_performance_ts_study_007_ai_audit.png	Theme: AI Code Audit Labels to Render: - Code: "コード" - Design: "設計" - AI Check: "AIチェック" Visual Details: 1. Core Concept: AI verifying consistency between code and design. 2. Metaphor: An AI robot holding a magnifying glass, comparing a code file and a design document, looking for discrepancies. 3. Action: Scanning/Comparing. 4. Layout: Side-by-side inspection.	## AIで“品質チェック”を爆速にする 🤖⚡
57	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_control_panel.png	./picture/firebase_analytics_performance_ts_study_008_control_panel.png	Theme: Remote Control Panel Labels to Render: - AI Button: "AIボタン" - ON/OFF: "ON/OFF" - Color: "色" Visual Details: 1. Core Concept: Remotely controlling app features. 2. Metaphor: A dashboard with toggle switches and sliders that control the app's behavior. 3. Action: A hand adjusting a slider. 4. Layout: Dashboard view.	## 1) Remote Configって結局なに？🤔🎛️
58	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_kill_switch.png	./picture/firebase_analytics_performance_ts_study_008_kill_switch.png	Theme: Safety Kill Switch Labels to Render: - Kill Switch: "緊急停止" - Safe: "安全" - Danger: "危険" Visual Details: 1. Core Concept: An emergency stop mechanism. 2. Metaphor: A large, red, industrial-style emergency stop button. 3. Action: Ready to be pressed. 4. Layout: Close-up of the button.	## 2) “機能フラグ”の考え方（超重要）🚦🧠
59	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_flag_blueprint.png	./picture/firebase_analytics_performance_ts_study_008_flag_blueprint.png	Theme: Feature Flag Blueprint Labels to Render: - Key: "キー" - Default: "初期値" - Description: "説明" Visual Details: 1. Core Concept: Planning the flags before implementation. 2. Metaphor: A technical drawing or blueprint document listing the flags and their default values. 3. Action: Drafting/Writing. 4. Layout: Document view.	## 3) まずは「フラグの設計図」を作ろう✍️🗺️
60	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_key_terms.png	./picture/firebase_analytics_performance_ts_study_008_key_terms.png	Theme: 4 Remote Config Terms Labels to Render: - Parameter: "パラメータ" - Condition: "条件" - Template: "テンプレート" - Fetch: "取得" Visual Details: 1. Core Concept: The four main building blocks of Remote Config. 2. Metaphor: Four distinct puzzle pieces or icons arranged to form a whole system. 3. Action: Connecting together. 4. Layout: 2x2 Grid.	## 4) Remote Configの中身（用語をやさしく）📚🙂
61	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_priority_stack.png	./picture/firebase_analytics_performance_ts_study_008_priority_stack.png	Theme: Value Priority Logic Labels to Render: - 1. Remote: "1.リモート" - 2. Default: "2.デフォルト" - 3. Static: "3.静的" Visual Details: 1. Core Concept: Which value wins. 2. Metaphor: A tiered podium or stack. The 'Remote' value is on top (Gold), covering 'Default' (Silver), and 'Static' (Bronze). 3. Action: Stacking. 4. Layout: Vertical stack.	## 5) アプリ側の動き（頭の中の図）🧠🧩
62	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_fetch_interval.png	./picture/firebase_analytics_performance_ts_study_008_fetch_interval.png	Theme: Fetch Interval & Cache Labels to Render: - Server: "サーバー" - Cache: "キャッシュ" - 12h: "12時間" Visual Details: 1. Core Concept: Caching mechanism to prevent overuse. 2. Metaphor: An hourglass or clock showing 12 hours, with a box (Cache) holding the value during that time. 3. Action: App checking cache first. 4. Layout: Cycle/Flow.	## 6) 「取りに行きすぎ問題」とキャッシュ感覚🗃️😇
63	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_no_secrets.png	./picture/firebase_analytics_performance_ts_study_008_no_secrets.png	Theme: Public Visibility Warning Labels to Render: - API Key: "APIキー" - Password: "パスワード" - Visible: "見えちゃう" Visual Details: 1. Core Concept: Remote Config values are not secret. 2. Metaphor: A transparent glass box containing valuables (keys, passwords), showing they are clearly visible to anyone looking. 3. Action: Warning sign. 4. Layout: Warning scenario.	## ❌ 秘密を入れない（超重要）🔒
64	docs/firebase_analytics_performance_ts_study_008.md	firebase_analytics_performance_ts_study_008_ai_config.png	./picture/firebase_analytics_performance_ts_study_008_ai_config.png	Theme: AI Configuration Assistant Labels to Render: - AI Agent: "AI" - Config: "設定" - Update: "更新" Visual Details: 1. Core Concept: AI helping to manage configuration. 2. Metaphor: A robotic arm or AI agent adjusting the sliders on the Remote Config panel. 3. Action: Adjusting/Optimizing. 4. Layout: Interaction.	## 10) AIでRemote Config作業を速くする（Antigravity / Gemini CLI）🛸🤝
65	docs/firebase_analytics_performance_ts_study_009.md	firebase_analytics_performance_ts_study_009_fetch_flow.png	./picture/firebase_analytics_performance_ts_study_009_fetch_flow.png	Theme: 4-Step Fetch Flow Labels to Render: - 1. Default: "デフォルト" - 2. Fetch: "取得" - 3. Activate: "有効化" - 4. Get: "取り出し" Visual Details: 1. Core Concept: The lifecycle of a Remote Config value. 2. Metaphor: A relay race or sequential pipeline. 3. Action: Data packet moving through the 4 stages. 4. Layout: Linear process.	## 1) 今日作るフラグ（最小セット）🧩
66	docs/firebase_analytics_performance_ts_study_009.md	firebase_analytics_performance_ts_study_009_init_structure.png	./picture/firebase_analytics_performance_ts_study_009_init_structure.png	Theme: Initialization Pillars Labels to Render: - Settings: "設定" - Default: "初期値" - FetchAndActivate: "取得＆反映" Visual Details: 1. Core Concept: The three essential parts of setup. 2. Metaphor: Three pillars or building blocks supporting a structure labeled 'Remote Config'. 3. Action: Static structural support. 4. Layout: Three columns.	## 2) Remote Config 初期化の“型”を1つ作ろう 🧱✨
67	docs/firebase_analytics_performance_ts_study_009.md	firebase_analytics_performance_ts_study_009_provider_pattern.png	./picture/firebase_analytics_performance_ts_study_009_provider_pattern.png	Theme: React Context Provider Labels to Render: - Provider: "Provider" - App: "App" - Flags: "フラグ" Visual Details: 1. Core Concept: Distributing data to the whole app. 2. Metaphor: A cloud or sprinkler (Provider) raining down data (Flags) onto the component tree (App). 3. Action: Raining/Distributing. 4. Layout: Hierarchy view.	## 3) React に流し込む（Provider でラクする）🧑‍💻🧩
68	docs/firebase_analytics_performance_ts_study_009.md	firebase_analytics_performance_ts_study_009_ui_toggle.png	./picture/firebase_analytics_performance_ts_study_009_ui_toggle.png	Theme: UI Switching Labels to Render: - Flag ON: "ON" - Flag OFF: "OFF" - Button: "ボタン" Visual Details: 1. Core Concept: Visualizing the effect of the flag. 2. Metaphor: Split screen comparison. Top: Switch is ON, Robot Button is visible. Bottom: Switch is OFF, 'Coming Soon' text is shown. 3. Action: Toggle switch state. 4. Layout: Vertical comparison.	## 4) 反映：フラグでUIを切り替える🎚️👀
69	docs/firebase_analytics_performance_ts_study_009.md	firebase_analytics_performance_ts_study_009_pitfalls.png	./picture/firebase_analytics_performance_ts_study_009_pitfalls.png	Theme: Remote Config Pitfalls Labels to Render: - Cache: "キャッシュ" - Throttle: "制限" - Typo: "タイプミス" Visual Details: 1. Core Concept: Common errors to avoid. 2. Metaphor: An obstacle course. A locked box (Cache), a traffic officer stopping you (Throttle), and a mislabeled signpost (Typo). 3. Action: Stumbling/Stopping. 4. Layout: Three obstacles.	## 5) 「変えたのに変わらない！」あるある🧯😇
70	docs/firebase_analytics_performance_ts_study_009.md	firebase_analytics_performance_ts_study_009_ai_remote.png	./picture/firebase_analytics_performance_ts_study_009_ai_remote.png	Theme: AI Model Switching Labels to Render: - Remote: "リモコン" - App: "アプリ" - Model A: "モデルA" - Model B: "モデルB" Visual Details: 1. Core Concept: Changing the AI model without updating the app. 2. Metaphor: A hand holding a remote control, pointing at the app. The 'screen' of the app changes from showing Model A to Model B. 3. Action: Remote signal firing. 4. Layout: Interaction.	## 7) AI連携のリアル：Remote Config は AI運用の“リモコン”になる🤖🎛️
71	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_balance_risk.png	./picture/firebase_analytics_performance_ts_study_010_balance_risk.png	Theme: Convenience vs Risk Labels to Render: - Convenience: "便利" - Risk: "事故" - Balance: "バランス" Visual Details: 1. Core Concept: Remote Config is powerful but risky if misused. 2. Metaphor: A balance scale. One side holds the 'Remote Config' icon (representing convenience), weighing against a 'Warning' icon (representing risk/accidents). 3. Action: Balancing. 4. Layout: Central composition.	## 1) まず用語を3行で📘✨
72	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_fetch_interval_rule.png	./picture/firebase_analytics_performance_ts_study_010_fetch_interval_rule.png	Theme: Production vs Dev Interval Labels to Render: - Production: "本番:12h" - Dev: "開発:短縮" - Clock: "時計" Visual Details: 1. Core Concept: Different rules for different environments. 2. Metaphor: A slow, calm grandfather clock for Production (12h) vs a fast, vibrating stopwatch for Development. 3. Action: Ticking. 4. Layout: Side-by-side comparison.	## 2) フェッチ間隔の“本番ルール”はこれ🕰️
73	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_throttling_backoff.png	./picture/firebase_analytics_performance_ts_study_010_throttling_backoff.png	Theme: Exponential Backoff Labels to Render: - Throttle: "制限" - Wait: "待機" - Retry: "再試行" Visual Details: 1. Core Concept: Waiting longer after each failure. 2. Metaphor: A car stopped at a traffic light. The timer on the light increases with each stop: 1s -> 2s -> 4s -> 8s. 3. Action: Waiting. 4. Layout: Progression view.	## 3) スロットリング（FETCH_THROTTLE）対策🧯
74	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_activation_timing.png	./picture/firebase_analytics_performance_ts_study_010_activation_timing.png	Theme: Activation Timing UX Labels to Render: - Bad: "いきなり" - Good: "次回起動" - UX: "体験" Visual Details: 1. Core Concept: Preventing sudden UI changes. 2. Metaphor: Split screen. Left (Bad): A user is shocked as the button changes while they are about to click. Right (Good): The app updates quietly while the user is away, ready for the next launch. 3. Action: Changing UI. 4. Layout: Comparison.	## 4) “いつ activate するか”がUXを決める🎮✨
75	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_staged_rollout.png	./picture/firebase_analytics_performance_ts_study_010_staged_rollout.png	Theme: Staged Rollout Steps Labels to Render: - 1%: "1%" - 5%: "5%" - 20%: "20%" - 100%: "100%" Visual Details: 1. Core Concept: Gradually increasing the user base for a new feature. 2. Metaphor: A staircase ascending from left to right. Each step is wider and labeled with the percentage. Small groups of user dots occupy the lower steps, a massive crowd on the top step. 3. Action: Climbing/Expanding. 4. Layout: Staircase flow.	## 5) 段階リリース（Rollouts）で“安全に出す”🪜🚦
76	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_code_blueprint.png	./picture/firebase_analytics_performance_ts_study_010_code_blueprint.png	Theme: Config Code Structure Labels to Render: - Defaults: "初期値" - Settings: "設定" - Fetch: "取得" Visual Details: 1. Core Concept: Organizing the code logic. 2. Metaphor: A clean diagram or blueprint showing three distinct blocks: Default Config, Settings (Interval/Timeout), and Safe Fetch Logic. 3. Action: Structuring. 4. Layout: Block diagram.	## 6-1. remoteConfig.ts を作る（設定まとめ役）📦
77	docs/firebase_analytics_performance_ts_study_010.md	firebase_analytics_performance_ts_study_010_ai_rollout.png	./picture/firebase_analytics_performance_ts_study_010_ai_rollout.png	Theme: AI Staged Rollout Labels to Render: - AI Feature: "AI機能" - Rollout: "段階リリース" - Safe: "安全" Visual Details: 1. Core Concept: Carefully releasing an AI feature. 2. Metaphor: An AI robot acting as an engineer, slowly turning a valve or lever to release a new feature drop by drop, monitoring a pressure gauge to ensure safety. 3. Action: Controlling flow. 4. Layout: Industrial control scenario.	## 8) AI と Remote Config は相性よすぎ問題🤝🤖
78	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_segmentation_concept.png	./picture/firebase_analytics_performance_ts_study_011_segmentation_concept.png	Theme: User Segmentation Labels to Render: - Admin: "管理者" - User: "一般" - New: "新規" Visual Details: 1. Core Concept: Different users seeing different app versions. 2. Metaphor: A diverse group of users. The Admin has a special badge and sees extra buttons. The New user has a 'Tutorial' bubble. The General user sees the standard UI. 3. Action: Viewing screens. 4. Layout: Group composition.	## 1) “出し分け”って、どんな時に使うの？🎁
79	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_condition_types.png	./picture/firebase_analytics_performance_ts_study_011_condition_types.png	Theme: 4 Condition Types Labels to Render: - Env: "環境" - Percent: "％" - User: "ユーザー" - Custom: "カスタム" Visual Details: 1. Core Concept: The four ways to target users. 2. Metaphor: Four puzzle pieces or distinct icons (Globe, Pie Chart, Avatar, Wrench) fitting together to form a 'Targeting' concept. 3. Action: Fitting together. 4. Layout: 2x2 Grid.	## 2) 条件はだいたい4系統🧩（Webで重要なやつ中心）
80	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_design_table.png	./picture/firebase_analytics_performance_ts_study_011_design_table.png	Theme: Segmentation Design Document Labels to Render: - Role: "役割" - Flag: "フラグ" - Value: "値" Visual Details: 1. Core Concept: Planning the segmentation logic. 2. Metaphor: A clean table showing the logic: 'If Role=Admin -> Flag=True'. 3. Action: Planning. 4. Layout: Document view.	## ステップ1：まず“出し分け設計表”を作る🗂️✍️
81	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_set_user_prop.png	./picture/firebase_analytics_performance_ts_study_011_set_user_prop.png	Theme: Stamping User Property Labels to Render: - Code: "コード" - Tag: "タグ" - User: "ユーザー" Visual Details: 1. Core Concept: Applying a user property via code. 2. Metaphor: A robotic hand (representing code) stamping a tag labeled 'Admin' onto a user avatar. 3. Action: Stamping. 4. Layout: Action shot.	## ステップ2：Web（React）でユーザープロパティを付ける🏷️👤
82	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_condition_builder.png	./picture/firebase_analytics_performance_ts_study_011_condition_builder.png	Theme: Condition Builder Logic Labels to Render: - If: "もし" - Condition: "条件" - Then: "なら" Visual Details: 1. Core Concept: Constructing logic in the console. 2. Metaphor: A flow chart logic block: If [Icon] then [Value A], Else [Value B]. 3. Action: Logic flow. 4. Layout: Logic diagram.	## ステップ3：Remote Configのコンソールで“条件”を作る🎛️🧱
83	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_param_branches.png	./picture/firebase_analytics_performance_ts_study_011_param_branches.png	Theme: Conditional Parameter Values Labels to Render: - Default: "デフォルト" - Admin: "管理者" - Beta: "ベータ" Visual Details: 1. Core Concept: One parameter having multiple possible values based on conditions. 2. Metaphor: A single pipe (parameter 'enable_ai') branching into three paths with different outlets (False, True, True) based on who is asking. 3. Action: Branching. 4. Layout: Flow chart.	## ステップ4：パラメータに“条件付きの値”を設定する🎚️✅
84	docs/firebase_analytics_performance_ts_study_011.md	firebase_analytics_performance_ts_study_011_ai_switching.png	./picture/firebase_analytics_performance_ts_study_011_ai_switching.png	Theme: AI Model Segmentation Labels to Render: - Admin: "管理者" - User: "一般" - Model: "モデル" Visual Details: 1. Core Concept: Different users accessing different AI models. 2. Metaphor: Split screen. Top: Admin user chatting with a futuristic, glowing robot (Model B). Bottom: Normal user chatting with a standard robot (Model A). 3. Action: Chatting. 4. Layout: Comparison.	## 5) AI連携で、ここが強い🤖⚡
85	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_ai_remote_control.png	./picture/firebase_analytics_performance_ts_study_012_ai_remote_control.png	Theme: AI Remote Control Labels to Render: - AI Feature: "AI機能" - Stop: "停止" - Change: "変更" Visual Details: 1. Core Concept: Controlling AI behavior remotely. 2. Metaphor: A sleek remote control pointed at a robot (AI). The remote has buttons for Stop, Weaken, and Change. 3. Action: Pointing/Controlling. 4. Layout: Interaction.	## この章で作る“AI運用リモコン”🎛️🤖
86	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_ai_parameters.png	./picture/firebase_analytics_performance_ts_study_012_ai_parameters.png	Theme: AI Parameter Dashboard Labels to Render: - ON/OFF: "ON/OFF" - Limit: "上限:5" - Model: "モデル:Gemini" Visual Details: 1. Core Concept: The specific knobs and switches for AI control. 2. Metaphor: A dashboard with a toggle (ON/OFF), a counter dial (Limit), and a dropdown selector (Model). 3. Action: Static dashboard. 4. Layout: Dashboard view.	Remote Configに、こんなパラメータを用意します（例）👇
87	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_ai_emergency_stop.png	./picture/firebase_analytics_performance_ts_study_012_ai_emergency_stop.png	Theme: AI Emergency Stop Labels to Render: - Enable AI: "enable_ai" - False: "False" - Stop: "停止" Visual Details: 1. Core Concept: Instantly stopping AI when things go wrong. 2. Metaphor: A hand smashing a 'False' button, causing the out-of-control AI robot to shut down immediately. 3. Action: Smashing button/Shutdown. 4. Layout: Action shot.	## ✅ ① “緊急停止ボタン（Kill Switch）”が作れる🧯
88	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_model_switch.png	./picture/firebase_analytics_performance_ts_study_012_model_switch.png	Theme: AI Model Switching Labels to Render: - Old: "旧モデル" - New: "新モデル" - Remote Config: "Remote Config" Visual Details: 1. Core Concept: Changing the underlying model without code changes. 2. Metaphor: A railroad switch track. The Remote Config lever switches the track from the 'Old' path to the 'New' path. 3. Action: Switching tracks. 4. Layout: Flow/Path.	## ✅ ② “モデル名をあとから変える”が超大事🔁
89	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_defense_layers.png	./picture/firebase_analytics_performance_ts_study_012_defense_layers.png	Theme: Two-Layer Defense Labels to Render: - Soft: "ソフト制限(UX)" - Hard: "ハード制限(API)" - AI: "AI" Visual Details: 1. Core Concept: Multiple layers of security. 2. Metaphor: A castle. The outer wooden fence is the 'Soft Limit', and the inner stone wall is the 'Hard Limit'. The AI treasure is inside. 3. Action: Protective layers. 4. Layout: Concentric or layered.	## ✅ ③ “守り”は2段構えが勝ち🏰
90	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_fetch_logic.png	./picture/firebase_analytics_performance_ts_study_012_fetch_logic.png	Theme: Fetching AI Flags Labels to Render: - App: "アプリ" - Remote Config: "Remote Config" - Flags: "フラグ" - Activate: "反映" Visual Details: 1. Core Concept: The code flow of getting configuration. 2. Metaphor: The App fishing for 'Flags' from the 'Remote Config' cloud. The hook catches a bag of settings. 3. Action: Fishing/Fetching. 4. Layout: Vertical flow.	## 3-1. Remote Configの読み取り（フック化）🪝
91	docs/firebase_analytics_performance_ts_study_012.md	firebase_analytics_performance_ts_study_012_soft_limit.png	./picture/firebase_analytics_performance_ts_study_012_soft_limit.png	Theme: Daily Limit UI Labels to Render: - Button: "生成ボタン" - Limit: "上限" - Message: "今日はここまで" Visual Details: 1. Core Concept: The user experience when the limit is reached. 2. Metaphor: The generation button turning gray/disabled, and a friendly sign 'Message' popping up. 3. Action: Disabling. 4. Layout: UI Mockup style.	## 5) まずは“やさしい制限”：1日上限でボタンを止める🙂🔒
92	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_ab_steps.png	./picture/firebase_analytics_performance_ts_study_013_ab_steps.png	Theme: 3 Steps of A/B Testing Labels to Render: - 1. Hypothesis: "仮説" - 2. Split: "出し分け" - 3. Judge: "判断" Visual Details: 1. Core Concept: The fundamental process. 2. Metaphor: Step 1: Ideally a thought bubble. Step 2: A path splitting into A and B. Step 3: A judge holding a scorecard. 3. Action: Flowing from 1 to 3. 4. Layout: Linear sequence.	## まず超ざっくり：A/Bテストって何するの？🍱🧪
93	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_ab_terms.png	./picture/firebase_analytics_performance_ts_study_013_ab_terms.png	Theme: A/B Testing Terms Labels to Render: - Control: "A(現状)" - Variant: "B(変更)" - Metric: "指標" - Guardrail: "安全装置" Visual Details: 1. Core Concept: Visualizing the key components. 2. Metaphor: Two boxes (A and B) being weighed. A ruler (Metric) measuring them. A fire extinguisher (Guardrail) standing by. 3. Action: Static comparison. 4. Layout: Grouped elements.	## 用語ミニ辞典📚🙂
94	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_pitfall_too_many.png	./picture/firebase_analytics_performance_ts_study_013_pitfall_too_many.png	Theme: Changing Too Many Variables Labels to Render: - Bad: "悪い例" - Good: "良い例" - Confusing: "なにが効いた？" - Clear: "これが効いた！" Visual Details: 1. Core Concept: Isolating the variable. 2. Metaphor: Bad: A room where everything is different (color, furniture, size). Good: Two identical rooms except for one red chair. 3. Action: Comparison. 4. Layout: Side-by-side.	## あるある2：変えるものが多すぎる🎛️🎛️🎛️
95	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_pitfall_peeking.png	./picture/firebase_analytics_performance_ts_study_013_pitfall_peeking.png	Theme: Premature Stopping Labels to Render: - Early: "早すぎ" - Wait: "待つ" - Result: "結果" Visual Details: 1. Core Concept: Stopping before statistical significance. 2. Metaphor: Taking a cake out of the oven while it's still doughy (Early) vs a perfectly baked cake (Wait). 3. Action: Taking out. 4. Layout: Comparison.	## あるある3：途中でのぞいて早めに止める👀💨
96	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_design_sheet.png	./picture/firebase_analytics_performance_ts_study_013_design_sheet.png	Theme: A/B Design Sheet Labels to Render: - Hypothesis: "仮説" - Metric: "主指標" - Guardrail: "ガードレール" - Plan: "設計書" Visual Details: 1. Core Concept: Planning before acting. 2. Metaphor: A clipboard with a checklist. The items correspond to the labels. A pen is checking them off. 3. Action: Writing/Planning. 4. Layout: Document view.	## A/B設計シート（これを埋めたら8割勝ち）📝🏆
97	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_metric_pillars.png	./picture/firebase_analytics_performance_ts_study_013_metric_pillars.png	Theme: Primary Metric Pillars Labels to Render: - Value: "価値" - Measurable: "計測可能" - Short-term: "短期間" Visual Details: 1. Core Concept: Criteria for a good metric. 2. Metaphor: Three pillars supporting a trophy labeled 'Primary Metric'. 3. Action: Supporting. 4. Layout: Structure.	## “主指標”を選ぶコツ📊🧠
98	docs/firebase_analytics_performance_ts_study_013.md	firebase_analytics_performance_ts_study_013_agent_workflow.png	./picture/firebase_analytics_performance_ts_study_013_agent_workflow.png	Theme: AI Agent Collaboration Labels to Render: - Agent A: "設計" - Agent B: "実装" - Agent C: "検証" Visual Details: 1. Core Concept: Division of labor among AI agents. 2. Metaphor: Three robots sitting around a table. Agent A holds a blueprint. Agent B holds a tool. Agent C holds a magnifying glass. 3. Action: Collaborating. 4. Layout: Team circle.	## おまけ：開発AI（Antigravity）で“実験計画→実装→検証”を一気に進めるコツ🛸🤖
99	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_button_ab.png	./picture/firebase_analytics_performance_ts_study_014_button_ab.png	Theme: Button Text A/B Test Labels to Render: - A: "A:保存する" - B: "B:メモを残す" - User: "ユーザー" Visual Details: 1. Core Concept: Showing two variations of the same UI element. 2. Metaphor: A split screen showing a smartphone. Half shows Button A, the other half shows Button B. 3. Action: Comparison. 4. Layout: Side-by-side.	## 2) 今日の題材：保存ボタンの文言をA/Bする🗣️🧪
100	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_ab_workflow.png	./picture/firebase_analytics_performance_ts_study_014_ab_workflow.png	Theme: A/B Test Workflow Labels to Render: - App: "アプリ" - Config: "設定" - Events: "イベント" - Console: "コンソール" - Rollout: "配布" Visual Details: 1. Core Concept: The lifecycle of an A/B test. 2. Metaphor: A circular flow or roadmap. 1. App gets config. 2. App sends events. 3. Console analyzes. 4. Winner is rolled out. 3. Action: Flowing. 4. Layout: Cycle/Roadmap.	## 3) ざっくり全体の流れ（これだけ覚えればOK）🧭
101	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_fetch_code.png	./picture/firebase_analytics_performance_ts_study_014_fetch_code.png	Theme: Remote Config Code Flow Labels to Render: - Fetch: "Fetch" - Activate: "Activate" - GetValue: "GetValue" - UI: "UI" Visual Details: 1. Core Concept: The sequence of functions to get the value. 2. Metaphor: A pipeline. Data flows from Cloud -> Fetch -> Activate -> GetValue -> UI. 3. Action: Data flowing. 4. Layout: Linear pipeline.	## 4) 手を動かす①：React側で Remote Config を読む🛠️🎛️
102	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_event_types.png	./picture/firebase_analytics_performance_ts_study_014_event_types.png	Theme: Activation vs Goal Events Labels to Render: - Activation: "参加合図" - Goal: "成果" - Cloud: "集計サーバー" Visual Details: 1. Core Concept: Distinguishing the two signals. 2. Metaphor: Activation is a raised hand saying 'I'm here!'. Goal is a trophy being held up saying 'I won!'. Both signals go to the Cloud. 3. Action: Signaling. 4. Layout: Comparison.	## 5) 手を動かす②：A/Bで超重要な「2種類のイベント」を送る📣🎯
103	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_targeting_pie.png	./picture/firebase_analytics_performance_ts_study_014_targeting_pie.png	Theme: Experiment Targeting Labels to Render: - Target: "対象:10%" - Ignore: "対象外:90%" - Users: "全ユーザー" Visual Details: 1. Core Concept: Selecting a small subset of users. 2. Metaphor: A pie chart where a small 10% slice is highlighted as 'Target'. The rest is grayed out. 3. Action: Highlighting. 4. Layout: Chart view.	## 6-2. Targeting（誰に当てる？）👥
104	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_fid_storage.png	./picture/firebase_analytics_performance_ts_study_014_fid_storage.png	Theme: FID in IndexedDB Labels to Render: - Browser: "ブラウザ" - IndexedDB: "IndexedDB" - FID: "FID:チケット" Visual Details: 1. Core Concept: Where the identity is stored. 2. Metaphor: A browser window with a safe (IndexedDB) inside. Inside the safe is a ticket labeled 'FID'. 3. Action: Storing. 4. Layout: Cutaway view.	## 7) Webの超重要ポイント：ブラウザの“固定”はIndexedDBに入る🧠🧷
105	docs/firebase_analytics_performance_ts_study_014.md	firebase_analytics_performance_ts_study_014_force_variant.png	./picture/firebase_analytics_performance_ts_study_014_force_variant.png	Theme: Forcing Test Device Labels to Render: - Device: "テスト端末" - Console: "コンソール" - Force A: "Aに固定" Visual Details: 1. Core Concept: Overriding the random assignment. 2. Metaphor: A developer using a remote control (Console) to force a specific phone (Device) to show screen A. 3. Action: Forcing/Controlling. 4. Layout: Interaction.	## 8) テスト端末でA/Bを強制する：Manage test devices🧪🧷
106	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_decision_judge.png	./picture/firebase_analytics_performance_ts_study_015_decision_judge.png	Theme: A/B Result Judge Labels to Render: - Win: "勝ち" - Lose: "負け" - Hold: "保留" - Abort: "中止" Visual Details: 1. Core Concept: Making a clear decision based on data. 2. Metaphor: A judge sitting at a bench with four gavels or signs. 3. Action: Ready to decide. 4. Layout: Central composition.	## 1) まずは“見る場所”を固定しよう🧭👀
107	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_stats_terms.png	./picture/firebase_analytics_performance_ts_study_015_stats_terms.png	Theme: CI and P-value Labels to Render: - 95% CI: "信頼区間(幅)" - P-value: "P値(確率)" - Significant: "有意" Visual Details: 1. Core Concept: Visualizing abstract statistical concepts. 2. Metaphor: CI is a ruler showing a range. P-value is a pair of dice showing a rare roll. 3. Action: Measuring/Rolling. 4. Layout: Side-by-side.	## 2) 結果画面の“用語”は3つだけ覚える🧩📌
108	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_leader_concept.png	./picture/firebase_analytics_performance_ts_study_015_leader_concept.png	Theme: Leader Definition Labels to Render: - Baseline: "基準(A)" - Leader: "リーダー(B)" - Better: "統計的優位" Visual Details: 1. Core Concept: Being significantly better than the baseline. 2. Metaphor: A race where the Leader is clearly ahead of the Baseline, crossing a line marked 'Significance'. 3. Action: Running ahead. 4. Layout: Horizontal race.	## 3) “leader”の意味をやさしく言うと🏁🙂
109	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_decision_patterns.png	./picture/firebase_analytics_performance_ts_study_015_decision_patterns.png	Theme: 4 Decision Patterns Labels to Render: - Win: "勝ち🎉" - Lose: "負け🧯" - Hold: "保留🤔" - Abort: "中止🚨" Visual Details: 1. Core Concept: The four possible outcomes. 2. Metaphor: Four distinct doors or paths. Win is a party. Lose is a dead end. Hold is a waiting room. Abort is an emergency exit. 3. Action: Choosing a path. 4. Layout: 2x2 Grid.	## 4) 今日から使える“判断ルール”テンプレ📋✅
110	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_web_identity_trap.png	./picture/firebase_analytics_performance_ts_study_015_web_identity_trap.png	Theme: Web Identity Trap Labels to Render: - User: "1人のユーザー" - Chrome: "Chrome" - Edge: "Edge" - Incognito: "シークレット" Visual Details: 1. Core Concept: One person appearing as multiple users due to browser context. 2. Metaphor: A single person wearing three different masks (Chrome, Edge, Incognito Spy), counting as 3 separate users. 3. Action: Multiplying. 4. Layout: Character split.	罠①：ブラウザ/シークレットで別人扱いになる🫥
111	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_missing_activation.png	./picture/firebase_analytics_performance_ts_study_015_missing_activation.png	Theme: Missing Activation Event Labels to Render: - Web: "Web" - Activation: "Activation" - Unsupported: "非対応" Visual Details: 1. Core Concept: A feature missing on the Web platform. 2. Metaphor: A dashboard with a plug socket labeled 'Activation', but the Web plug doesn't fit or is missing. 3. Action: Failing to connect. 4. Layout: Close-up.	罠②：Activation event が Web では使えない🧩🚫
112	docs/firebase_analytics_performance_ts_study_015.md	firebase_analytics_performance_ts_study_015_ai_interpreter.png	./picture/firebase_analytics_performance_ts_study_015_ai_interpreter.png	Theme: AI Data Interpreter Labels to Render: - Graph: "難解なグラフ" - AI: "Gemini" - Simple: "わかりやすい説明" Visual Details: 1. Core Concept: AI simplifying complex data. 2. Metaphor: A robot (Gemini) looking at a messy graph and handing a user a simple card with a clear summary. 3. Action: Translating/Simplifying. 4. Layout: Interaction.	## 7) ミニ課題：AI（Gemini）で“読み間違い”を減らす🤖🛡️
113	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_server_benefits.png	./picture/firebase_analytics_performance_ts_study_016_server_benefits.png	Theme: Benefits of Server-Side Labels to Render: - Trust: "信用できる" - Guard: "守れる" - Secret: "秘密保持" Visual Details: 1. Core Concept: Why use a server? 2. Metaphor: A fortress (Server) protecting three treasures: A certified document (Trust), A shield (Guard), and A locked chest (Secret). 3. Action: Protecting. 4. Layout: Fortress composition.	## 1) まず結論：サーバー側を入れると何が嬉しい？🎁
114	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_server_roles.png	./picture/firebase_analytics_performance_ts_study_016_server_roles.png	Theme: 3 Server Roles Labels to Render: - Fact: "確定事実" - Guard: "ガード" - Aggregator: "集計" Visual Details: 1. Core Concept: The three main uses. 2. Metaphor: Three specialized robots. One stamping 'Confirmed' (Fact), one holding a shield (Guard), and one using an abacus (Aggregator). 3. Action: Specialized tasks. 4. Layout: Trio.	## 2) “サーバーちょい足し”の3パターン 🍳✨
115	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_app_check_flow.png	./picture/firebase_analytics_performance_ts_study_016_app_check_flow.png	Theme: App Check Flow Labels to Render: - UI: "画面" - Server: "サーバー" - Check: "判定" - Token: "トークン" Visual Details: 1. Core Concept: Verifying the request. 2. Metaphor: A UI sending a request with a badge (Token) to the Server. The Server checks the badge with a scanner before allowing access. 3. Action: Scanning/Checking. 4. Layout: Linear flow.	## 3-1. 仕組み（超ざっくり図）🗺️
116	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_soft_vs_hard.png	./picture/firebase_analytics_performance_ts_study_016_soft_vs_hard.png	Theme: Soft vs Hard Limit Roles Labels to Render: - Remote Config: "UX(優しさ)" - Server: "防衛(絶対)" - Message: "もうすぐ上限" - Block: "停止" Visual Details: 1. Core Concept: Complementary roles. 2. Metaphor: A concierge (Remote Config) politely warning a guest, backed by a security guard (Server) ready to block entry if needed. 3. Action: Warning vs Blocking. 4. Layout: Pair comparison.	## 4) Remote Configとの“いい関係”🎛️🤝（重要な設計思想）
117	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_measurement_protocol.png	./picture/firebase_analytics_performance_ts_study_016_measurement_protocol.png	Theme: Measurement Protocol Labels to Render: - Server: "サーバー" - GA4: "GA4" - Event: "確定イベント" Visual Details: 1. Core Concept: Sending data from server to analytics. 2. Metaphor: A server putting a stamped 'Official Result' document into an envelope and mailing it directly to the GA4 building. 3. Action: Mailing/Sending. 4. Layout: Server to GA4 flow.	## 5) ハンズオン②（発展）：サーバーから“確定イベント”を送る📨📊
118	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_runtime_versions.png	./picture/firebase_analytics_performance_ts_study_016_runtime_versions.png	Theme: Supported Runtimes Labels to Render: - Node.js: "Node.js 22/20" - Python: "Python 3.13" - .NET: ".NET 8" Visual Details: 1. Core Concept: Current supported versions. 2. Metaphor: A shelf with labeled boxes representing the stable runtime versions. 3. Action: Static display. 4. Layout: Shelf/Row.	## 6) “バージョン感”だけはここで固定しよう📌（詰まり防止）
119	docs/firebase_analytics_performance_ts_study_016.md	firebase_analytics_performance_ts_study_016_ai_toolkit.png	./picture/firebase_analytics_performance_ts_study_016_ai_toolkit.png	Theme: AI Development Toolkit Labels to Render: - Antigravity: "Antigravity" - Gemini CLI: "Gemini CLI" - MCP: "MCP" Visual Details: 1. Core Concept: Tools for AI development. 2. Metaphor: A futuristic toolbox containing high-tech tools labeled with the names. 3. Action: Ready to use. 4. Layout: Toolkit view.	## 7) AI導入済みの“時短ムーブ”🚀🤖（Antigravity / Gemini CLI）
120	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_speed_feeling.png	./picture/firebase_analytics_performance_ts_study_017_speed_feeling.png	Theme: Speed vs User Feeling Labels to Render: - Fast: "速い" - Slow: "遅い" - Happy: "快適😊" - Sad: "不安😖" Visual Details: 1. Core Concept: Emotional impact of performance. 2. Metaphor: A split screen. Left: Fast car/rocket, user smiling. Right: Turtle/Snail, user sweating/stressed. 3. Action: Reacting. 4. Layout: Comparison.	## 1) Performance Monitoring って何がうれしいの？🙂📈
121	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_web_vitals.png	./picture/firebase_analytics_performance_ts_study_017_web_vitals.png	Theme: Web Vitals Trio Labels to Render: - LCP: "LCP(表示)" - INP: "INP(反応)" - CLS: "CLS(ズレ)" Visual Details: 1. Core Concept: The three key metrics. 2. Metaphor: Three distinct icons. LCP: A painting appearing. INP: A finger tapping a button. CLS: A layout shifting or shaking. 3. Action: Visualizing the metric. 4. Layout: Trio.	## 2-1. ページ読み込み（Page load）🖼️⏱️
122	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_network_metrics.png	./picture/firebase_analytics_performance_ts_study_017_network_metrics.png	Theme: Network Metrics Labels to Render: - Request: "リクエスト" - Response: "レスポンス" - Time: "時間" - Size: "サイズ" Visual Details: 1. Core Concept: Measuring network traffic. 2. Metaphor: A package travelling along a wire. A stopwatch measures the time, and a scale measures the weight (size). 3. Action: Measuring. 4. Layout: Linear flow.	## 2-2. 通信（HTTP/S network request）📡⏱️
123	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_react_setup.png	./picture/firebase_analytics_performance_ts_study_017_react_setup.png	Theme: React Performance Setup Labels to Render: - App: "App" - Firebase: "Firebase" - Performance: "Perf SDK" - Connect: "接続" Visual Details: 1. Core Concept: Hooking up the SDK. 2. Metaphor: A plug labeled 'Perf SDK' being connected to the 'Firebase App' block. 3. Action: Connecting. 4. Layout: Component connection.	## 3-2. コード（最小構成）✍️
124	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_10s_rule.png	./picture/firebase_analytics_performance_ts_study_017_10s_rule.png	Theme: The 10 Second Rule Labels to Render: - Browser: "ブラウザ" - Tab: "タブ" - Wait: "待つ" - 10s: "10秒" Visual Details: 1. Core Concept: Keeping the tab open to ensure data sending. 2. Metaphor: A browser tab with a timer counting down from 10. A data packet is waiting to fly out. 3. Action: Waiting/Counting. 4. Layout: Close-up.	## 5) 最初のデータを“出す”コツ（ここ超重要）🔥
125	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_console_filter.png	./picture/firebase_analytics_performance_ts_study_017_console_filter.png	Theme: Console Filtering Labels to Render: - Console: "コンソール" - Filter: "フィルタ" - Country: "国" - Device: "端末" Visual Details: 1. Core Concept: Drilling down into data. 2. Metaphor: A funnel or sieve labeled 'Filter'. Messy data goes in top, sorted data (by Country, Device) comes out bottom. 3. Action: Filtering. 4. Layout: Funnel.	## 7) Consoleで“最初に見る”場所👀📊
126	docs/firebase_analytics_performance_ts_study_017.md	firebase_analytics_performance_ts_study_017_rollout_monitor.png	./picture/firebase_analytics_performance_ts_study_017_rollout_monitor.png	Theme: Monitoring Rollout Speed Labels to Render: - Feature A: "新機能A" - Speed: "速度" - Monitor: "監視" - OK/NG: "判定" Visual Details: 1. Core Concept: Checking if a new feature slows down the app. 2. Metaphor: A scientist watching a monitor while releasing a new chemical (Feature A). The monitor shows a speed graph. 3. Action: Monitoring. 4. Layout: Lab scenario.	## 8) Remote Config と相性が良い理由🎛️🤝⚡
127	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_suspects.png	./picture/firebase_analytics_performance_ts_study_018_suspects.png	Theme: Screen vs Network Suspects Labels to Render: - Screen: "画面" - Network: "通信" - Slow: "遅い犯人" Visual Details: 1. Core Concept: Identifying whether the slowness comes from the screen rendering or network requests. 2. Metaphor: A detective lineup. Two characters: A Screen (Monitor head) and a Network (Wifi signal head). The detective is pointing at one of them. 3. Action: Pointing/Identifying. 4. Layout: Lineup style.	## まず結論：遅さの“主犯”はだいたいこの2つ👀⚡
128	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_vital_signs.png	./picture/firebase_analytics_performance_ts_study_018_vital_signs.png	Theme: Page Load Vital Signs Labels to Render: - LCP: "LCP(表示)" - INP: "INP(反応)" - CLS: "CLS(ズレ)" Visual Details: 1. Core Concept: Checking the health metrics of a web page. 2. Metaphor: A medical monitor showing heart rate (LCP), blood pressure (INP), and temperature (CLS). 3. Action: Monitoring. 4. Layout: Dashboard view.	## 1) 画面が遅い：どの数字を見ればいいの？📄🐢➡️🎯
129	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_network_traffic.png	./picture/firebase_analytics_performance_ts_study_018_network_traffic.png	Theme: Network Traffic Issues Labels to Render: - Latency: "待ち時間" - Size: "サイズ" - Error: "エラー" Visual Details: 1. Core Concept: Three types of network problems. 2. Metaphor: A road scenario. Latency is a traffic jam. Size is a huge overloaded truck. Error is a collapsed bridge. 3. Action: Driving/Blocking. 4. Layout: Three distinct vignettes.	## 2) 通信が遅い：Network traces の見方📡🐢➡️🎯
130	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_ai_lane.png	./picture/firebase_analytics_performance_ts_study_018_ai_lane.png	Theme: Dedicated AI Monitoring Labels to Render: - Normal: "通常通信" - AI: "AI通信" - Monitor: "監視" Visual Details: 1. Core Concept: Separating AI traffic for better monitoring. 2. Metaphor: A highway with a special express lane marked 'AI Only'. A speed camera (Monitor) is specifically watching this lane. 3. Action: Driving fast. 4. Layout: Perspective view of highway.	## AI機能が遅い時の“近道”🤖⚡（ここ、差がつく）
131	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_ai_detective.png	./picture/firebase_analytics_performance_ts_study_018_ai_detective.png	Theme: AI Code Detective Labels to Render: - Code: "コード" - Gemini: "Gemini" - Bug: "原因" Visual Details: 1. Core Concept: AI helping to find the bug in the code. 2. Metaphor: Sherlock Holmes (represented by Gemini robot) holding a magnifying glass against a wall of code, finding a red bug. 3. Action: Investigating. 4. Layout: Close-up investigation.	## Gemini CLI / Antigravity を“調査役”にする🕵️‍♀️💻✨
132	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_batch_mail.png	./picture/firebase_analytics_performance_ts_study_018_batch_mail.png	Theme: Batched Data Sending Labels to Render: - Events: "イベント" - Batch: "まとめ送付" - Wait: "少し待つ" Visual Details: 1. Core Concept: Data is not sent instantly but in batches. 2. Metaphor: Letters (Events) accumulating in a mailbox. A postal worker collects them all at once (Batch) rather than one by one. 3. Action: Collecting. 4. Layout: Postal scene.	## よくあるハマり🧯（ここ踏む人多い）
133	docs/firebase_analytics_performance_ts_study_018.md	firebase_analytics_performance_ts_study_018_wanted_poster.png	./picture/firebase_analytics_performance_ts_study_018_wanted_poster.png	Theme: Top 1 Culprit Wanted Labels to Render: - Wanted: "WANTED" - Slow Page: "遅いページ" - Reward: "改善" Visual Details: 1. Core Concept: Identifying the worst performing page. 2. Metaphor: An old western 'Wanted' poster pinned to a wall. The picture on it is a sad/slow web page. 3. Action: Static poster. 4. Layout: Close-up.	## ミニ課題🎒✨：遅いページTOP1を“1つだけ”決めよう🏆
134	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_custom_dashboard.png	./picture/firebase_analytics_performance_ts_study_019_custom_dashboard.png	Theme: Custom vs Auto Dashboard Labels to Render: - Auto: "自動計測" - Custom: "カスタム" - My Logic: "自分の処理" Visual Details: 1. Core Concept: Automatic metrics are generic, Custom traces are specific. 2. Metaphor: Comparing a standard car dashboard (Auto) with a specialized racing cockpit (Custom) that has extra gauges for 'My Logic'. 3. Action: Comparison. 4. Layout: Side-by-side.	## 1) カスタムトレースって何？いつ使うの？🧠
135	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_trace_layers.png	./picture/firebase_analytics_performance_ts_study_019_trace_layers.png	Theme: Layered Trace Segments Labels to Render: - Total: "Total" - Model: "Model" - Post: "Post" Visual Details: 1. Core Concept: Breaking down a process into measurable chunks. 2. Metaphor: A layer cake or a sandwich. The top bun is 'Start', the filling is 'Model', the bottom bun is 'Post', and the whole sandwich is 'Total'. 3. Action: Measuring each layer. 4. Layout: Exploded view of sandwich.	## 2) 設計が8割：まず「計測ポイント」を決めよう🎯
136	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_naming_gatekeeper.png	./picture/firebase_analytics_performance_ts_study_019_naming_gatekeeper.png	Theme: Trace Naming Rules Labels to Render: - OK: "ai_format" - NG: "_start" - NG: "user 123" Visual Details: 1. Core Concept: Strict rules for naming traces. 2. Metaphor: A gatekeeper or bouncer checking ID cards. 'ai_format' gets a green light. '_start' (underscore) and 'user 123' (space) get a red cross. 3. Action: Blocking/Allowing. 4. Layout: Gatekeeper scenario.	## 3) 命名ルール＆やっちゃダメ集🚫（ここで詰まりがち）
137	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_helper_tool.png	./picture/firebase_analytics_performance_ts_study_019_helper_tool.png	Theme: Trace Helper Function Labels to Render: - Helper: "withPerfTrace" - Start: "Start" - Stop: "Stop" - Error: "Error" Visual Details: 1. Core Concept: A reusable tool that handles start, stop, and error handling. 2. Metaphor: A Swiss Army knife labeled 'withPerfTrace'. The blades are labeled 'Start', 'Stop', and 'Error Handling'. 3. Action: Ready to use. 4. Layout: Tool view.	### 4-1) まずは「汎用ヘルパー」を作る（最強）💪✨
138	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_bucketing.png	./picture/firebase_analytics_performance_ts_study_019_bucketing.png	Theme: Attribute Bucketing Labels to Render: - Small: "lt200" - Medium: "lt800" - Large: "lt2000" - Input: "入力文字数" Visual Details: 1. Core Concept: Grouping continuous values into categories. 2. Metaphor: A postal worker sorting envelopes of various sizes (Input) into three clearly labeled bins (Small, Medium, Large). 3. Action: Sorting. 4. Layout: Sorting bins.	### 4-2) AI整形ボタンに入れる（本題）🤖📝
139	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_p90_focus.png	./picture/firebase_analytics_performance_ts_study_019_p90_focus.png	Theme: Focusing on p90 Labels to Render: - Average: "平均" - p90: "p90 (遅い)" - User: "ユーザー" Visual Details: 1. Core Concept: Identifying the experience of the slowest 10% of users. 2. Metaphor: A marathon race. The camera and spotlight are focused on the runner at the back (p90) who is struggling, rather than the average runner. 3. Action: Focusing/Highlighting. 4. Layout: Race scene.	## 5) どこで見れる？どう読めばいい？👀📊
140	docs/firebase_analytics_performance_ts_study_019.md	firebase_analytics_performance_ts_study_019_stopwatch_fail.png	./picture/firebase_analytics_performance_ts_study_019_stopwatch_fail.png	Theme: Stop Forgotten Error Labels to Render: - Start: "Start" - No Stop: "Stop忘れ" - No Data: "データなし" Visual Details: 1. Core Concept: Data is never sent if stop() is not called. 2. Metaphor: A stopwatch that was started but never stopped. It keeps running into infinity, and the 'Result' paper remains blank. 3. Action: Running forever. 4. Layout: Time passing.	## 6) 「出ない！」ときの即チェック🧯（99%ここ）
141	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_improvement_flywheel.png	./picture/firebase_analytics_performance_ts_study_020_improvement_flywheel.png	Theme: Improvement Flywheel Labels to Render: - Hypothesis: "仮説" - Change: "変更" - Measure: "計測" - Judge: "判断" Visual Details: 1. Core Concept: A continuous cycle of improvement, accelerated by AI. 2. Metaphor: A spinning flywheel or turbine. The blades are labeled with the 4 steps. Sparks of energy (AI) make it spin faster. 3. Action: Spinning. 4. Layout: Circular cycle.	## 今日の“1周セット”の全体図 🗺️🔁
142	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_kpi_guardrails.png	./picture/firebase_analytics_performance_ts_study_020_kpi_guardrails.png	Theme: KPI and Guardrails Labels to Render: - KPI: "北極星" - Guardrail: "ガードレール" - Path: "安全な道" Visual Details: 1. Core Concept: Aiming for a goal while staying safe. 2. Metaphor: A mountain climber on a path. The North Star (KPI) is shining above the peak. Safety rails (Guardrails) line the cliff edge to prevent falling. 3. Action: Climbing safely. 4. Layout: Perspective view.	## Step 1：KPI（北極星）とガードレールを決める 🌟🧯
143	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_planting_sensors.png	./picture/firebase_analytics_performance_ts_study_020_planting_sensors.png	Theme: Planting Event Sensors Labels to Render: - Code: "コード" - Event: "イベント" - Trace: "トレース" Visual Details: 1. Core Concept: Preparing the code to measure outcomes. 2. Metaphor: A gardener planting small sensor devices (Events & Traces) into the soil of a garden (Codebase) to monitor plant growth. 3. Action: Planting/Installing. 4. Layout: Garden scene.	## Step 2：イベントと“遅さの証拠”を仕込む 🧩📊⚡
144	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_safety_valve.png	./picture/firebase_analytics_performance_ts_study_020_safety_valve.png	Theme: Remote Config Safety Valve Labels to Render: - Remote Config: "Remote Config" - Users: "ユーザー" - Flow: "少しずつ" Visual Details: 1. Core Concept: Controlling the release flow to prevent accidents. 2. Metaphor: A large water valve or faucet (Remote Config). A hand is turning it slightly to let a small stream of water (Users) through, instead of a flood. 3. Action: Controlling flow. 4. Layout: Close-up of valve.	## Step 3：Remote Configで「安全に出す」🎛️🛡️
145	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_courtroom_decision.png	./picture/firebase_analytics_performance_ts_study_020_courtroom_decision.png	Theme: A/B Test Verdict Labels to Render: - Plan A: "案A" - Plan B: "案B" - Judge: "判断" - Winner: "勝ち" Visual Details: 1. Core Concept: Deciding a winner based on evidence. 2. Metaphor: A courtroom. Plan A and Plan B are distinct characters. A Judge (you) hits the gavel and points to Plan B as the Winner. 3. Action: Judging/Deciding. 4. Layout: Courtroom scene.	## Step 4：A/Bテストで「勝ち負け」を決める 🧪⚖️
146	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_ai_team.png	./picture/firebase_analytics_performance_ts_study_020_ai_team.png	Theme: AI Development Team Labels to Render: - Console: "相談役" - CLI: "実装役" - Antigravity: "監督" Visual Details: 1. Core Concept: Different AI tools playing different roles in the team. 2. Metaphor: A team of three robots. Robot 1 (Console) is a consultant with a clipboard. Robot 2 (CLI) is a coder typing fast. Robot 3 (Antigravity) is a manager overseeing the project. 3. Action: Collaborating. 4. Layout: Team portrait.	## Step 6：AIで「改善の回転数」を上げる（開発AIの使いどころ）🧠💻
147	docs/firebase_analytics_performance_ts_study_020.md	firebase_analytics_performance_ts_study_020_24h_challenge.png	./picture/firebase_analytics_performance_ts_study_020_24h_challenge.png	Theme: 24H Improvement Cycle Labels to Render: - 12PM: "仮説" - 3PM: "実装" - 6PM: "計測" - 9AM: "判断" Visual Details: 1. Core Concept: Running through the whole cycle in one day. 2. Metaphor: A 24-hour clock face. The cycle stages (Hypothesis, Implement, Measure, Judge) are mapped to different times of the day. 3. Action: Cycling. 4. Layout: Clock face.	## ミニ課題：24時間で「改善を1周」してみよう 🏁🧪⚡