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

image_generation_plan.performance_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
2docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_four_tools.png./picture/firebase_analytics_performance_ts_index_four_tools.pngTheme: 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.		## このカテゴリの完成イメージ 🧩🏁
3docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_north_star.png./picture/firebase_analytics_performance_ts_index_north_star.pngTheme: 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章：なぜ計測するの？「北極星」づくり🌟📌
4docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_funnel.png./picture/firebase_analytics_performance_ts_index_funnel.pngTheme: 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章：ファネル（どこで離脱？）の発想🚪➡️🏁
5docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_feature_flag.png./picture/firebase_analytics_performance_ts_index_feature_flag.pngTheme: 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の全体像（機能フラグ）🎛️🚦
6docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_ab_testing.png./picture/firebase_analytics_performance_ts_index_ab_testing.pngTheme: 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テストの基本（仮説→実験→判断）🧪⚖️
7docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_perf_mon.png./picture/firebase_analytics_performance_ts_index_perf_mon.pngTheme: 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導入（遅いを“見える化”）⚡👀
8docs/firebase_analytics_performance_ts_index.mdfirebase_analytics_performance_ts_index_improvement_cycle.png./picture/firebase_analytics_performance_ts_index_improvement_cycle.pngTheme: 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も使って回す）🔁🤖🏁
9docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_blind_dev.png./picture/firebase_analytics_performance_ts_study_001_blind_dev.pngTheme: 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) 「作って終わり」だと起きがちな悲劇🥲📉
10docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_north_star.png./picture/firebase_analytics_performance_ts_study_001_north_star.pngTheme: 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）
11docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_kpi_steps.png./picture/firebase_analytics_performance_ts_study_001_kpi_steps.pngTheme: 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
12docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_guardrails.png./picture/firebase_analytics_performance_ts_study_001_guardrails.pngTheme: 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.		## ✅ ガードレール（悪化したらダメな指標）🚧
13docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_success_definition.png./picture/firebase_analytics_performance_ts_study_001_success_definition.pngTheme: 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行で定義しよう✍️🌟（手を動かす）
14docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_ai_control.png./picture/firebase_analytics_performance_ts_study_001_ai_control.pngTheme: 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機能があるアプリは「制御できる設計」が命🎛️🤖🛡️
15docs/firebase_analytics_performance_ts_study_001.mdfirebase_analytics_performance_ts_study_001_gemini_brainstorm.png./picture/firebase_analytics_performance_ts_study_001_gemini_brainstorm.pngTheme: 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活用コーナー🧠✨（超おすすめ）
16docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_overview.png./picture/firebase_analytics_performance_ts_study_002_overview.pngTheme: 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.		## この章でできるようになること ✅🎯
17docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_data_flow.png./picture/firebase_analytics_performance_ts_study_002_data_flow.pngTheme: 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.		## まずは全体図 🗺️✨（ここが今日のメイン）
18docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_three_terms.png./picture/firebase_analytics_performance_ts_study_002_three_terms.pngTheme: 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）
19docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_enable_analytics.png./picture/firebase_analytics_performance_ts_study_002_enable_analytics.pngTheme: 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が有効になってる？」を確認 ✅
20docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_event_types.png./picture/firebase_analytics_performance_ts_study_002_event_types.pngTheme: 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.		## 「既定イベント」ってなに？ 🤔📥（まずはこれが届けば勝ち！）
21docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_debugview.png./picture/firebase_analytics_performance_ts_study_002_debugview.pngTheme: 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 が最強 🕵️‍♂️⚡
22docs/firebase_analytics_performance_ts_study_002.mdfirebase_analytics_performance_ts_study_002_ai_troubleshoot.png./picture/firebase_analytics_performance_ts_study_002_ai_troubleshoot.pngTheme: 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で爆速に理解＆切り分け 🤖⚡（ここ、今どきの勝ち筋）
23docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_naming_rules.png./picture/firebase_analytics_performance_ts_study_003_naming_rules.pngTheme: 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) まず最初に知っておく “現実ルール” 📏😇
24docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_naming_convention.png./picture/firebase_analytics_performance_ts_study_003_naming_convention.pngTheme: 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：基本は「動詞_目的語」🗣️➡️🎯
25docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_event_granularity.png./picture/firebase_analytics_performance_ts_study_003_event_granularity.pngTheme: 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) 粒度の設計コツ “細かすぎ問題” を回避 🧠🔍
26docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_parameter_grouping.png./picture/firebase_analytics_performance_ts_study_003_parameter_grouping.pngTheme: 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：分岐は “イベント名” ではなく “パラメータ” に寄せる 🎛️
27docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_high_cardinality.png./picture/firebase_analytics_performance_ts_study_003_high_cardinality.pngTheme: 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：値が無限に増えるパラメータは避ける♾️🙅‍♂️
28docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_event_table.png./picture/firebase_analytics_performance_ts_study_003_event_table.pngTheme: 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 イベント表テンプレ 📋✨
29docs/firebase_analytics_performance_ts_study_003.mdfirebase_analytics_performance_ts_study_003_ai_review.png./picture/firebase_analytics_performance_ts_study_003_ai_review.pngTheme: 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でイベント表を一瞬で良くする 🤖⚡
30docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_goal.png./picture/firebase_analytics_performance_ts_study_004_goal.pngTheme: 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.		## この章のゴール🏁✨
31docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_naming_rules.png./picture/firebase_analytics_performance_ts_study_004_naming_rules.pngTheme: 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) イベント名のルール（地味だけど超重要）🧷
32docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_safe_init.png./picture/firebase_analytics_performance_ts_study_004_safe_init.pngTheme: 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を“安全に初期化”する（ブラウザだけ）🌐
33docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_track_function.png./picture/firebase_analytics_performance_ts_study_004_track_function.pngTheme: 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() を呼ぶ🖱️📤
34docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_ai_tracking.png./picture/firebase_analytics_performance_ts_study_004_ai_tracking.pngTheme: 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）にもイベントを付ける🤖📣
35docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_debugview_flow.png./picture/firebase_analytics_performance_ts_study_004_debugview_flow.pngTheme: 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で“今飛んでる”を目で見る👀🧪
36docs/firebase_analytics_performance_ts_study_004.mdfirebase_analytics_performance_ts_study_004_pitfalls.png./picture/firebase_analytics_performance_ts_study_004_pitfalls.pngTheme: 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.		## よくある詰まりポイント集🧯😇
37docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_user_properties.png./picture/firebase_analytics_performance_ts_study_005_user_properties.pngTheme: 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) ユーザープロパティって何？🏷️🙂
38docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_cardinality.png./picture/firebase_analytics_performance_ts_study_005_cardinality.pngTheme: 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：値は「種類が少ない」ものにする
39docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_no_pii.png./picture/firebase_analytics_performance_ts_study_005_no_pii.pngTheme: 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：個人情報は絶対に送らない🛑
40docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_register_definition.png./picture/firebase_analytics_performance_ts_study_005_register_definition.pngTheme: 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側で「登録」する🖱️🧾
41docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_set_user_props.png./picture/firebase_analytics_performance_ts_study_005_set_user_props.pngTheme: 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 を付ける🧑‍💻🏷️
42docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_debug_props.png./picture/firebase_analytics_performance_ts_study_005_debug_props.pngTheme: 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で「本当に付いたか」見る🧯👀
43docs/firebase_analytics_performance_ts_study_005.mdfirebase_analytics_performance_ts_study_005_ai_design.png./picture/firebase_analytics_performance_ts_study_005_ai_design.pngTheme: 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で“設計”を一気に楽にする🤖🪄
44docs/firebase_analytics_performance_ts_study_006.mdfirebase_analytics_performance_ts_study_006_funnel_concept.png./picture/firebase_analytics_performance_ts_study_006_funnel_concept.pngTheme: 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) ファネルってなに？🧠📉
45docs/firebase_analytics_performance_ts_study_006.mdfirebase_analytics_performance_ts_study_006_simple_flow.png./picture/firebase_analytics_performance_ts_study_006_simple_flow.pngTheme: 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本だけ”決めよう🎯🧩
46docs/firebase_analytics_performance_ts_study_006.mdfirebase_analytics_performance_ts_study_006_mapping_table.png./picture/firebase_analytics_performance_ts_study_006_mapping_table.pngTheme: 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) “イベント ↔ ステップ”対応表を作る🗂️🧠
47docs/firebase_analytics_performance_ts_study_006.mdfirebase_analytics_performance_ts_study_006_open_closed.png./picture/firebase_analytics_performance_ts_study_006_open_closed.pngTheme: 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、どっち？🤔
48docs/firebase_analytics_performance_ts_study_006.mdfirebase_analytics_performance_ts_study_006_dropoff_reasons.png./picture/firebase_analytics_performance_ts_study_006_dropoff_reasons.pngTheme: 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択で考える🛠️💡
49docs/firebase_analytics_performance_ts_study_006.mdfirebase_analytics_performance_ts_study_006_ai_analysis.png./picture/firebase_analytics_performance_ts_study_006_ai_analysis.pngTheme: 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で“ファネルの設計”を爆速にする🤖⚡
50docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_three_point_match.png./picture/firebase_analytics_performance_ts_study_007_three_point_match.pngTheme: 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.		## まず結論：品質チェックは「三点照合」🔺🔍
51docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_debug_vs_report.png./picture/firebase_analytics_performance_ts_study_007_debug_vs_report.pngTheme: 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 🧠⏱️
52docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_naming_police.png./picture/firebase_analytics_performance_ts_study_007_naming_police.pngTheme: 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.		## ① イベント名のルール違反がない？（地味に多い）🧨
53docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_react_double_send.png./picture/firebase_analytics_performance_ts_study_007_react_double_send.pngTheme: 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の罠）🪤
54docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_no_pii_shredder.png./picture/firebase_analytics_performance_ts_study_007_no_pii_shredder.pngTheme: 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（個人情報）を送ってない？🚫👤
55docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_ts_shield.png./picture/firebase_analytics_performance_ts_study_007_ts_shield.pngTheme: 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編）🧠🧷
56docs/firebase_analytics_performance_ts_study_007.mdfirebase_analytics_performance_ts_study_007_ai_audit.png./picture/firebase_analytics_performance_ts_study_007_ai_audit.pngTheme: 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で“品質チェック”を爆速にする 🤖⚡
57docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_control_panel.png./picture/firebase_analytics_performance_ts_study_008_control_panel.pngTheme: 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って結局なに？🤔🎛️
58docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_kill_switch.png./picture/firebase_analytics_performance_ts_study_008_kill_switch.pngTheme: 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) “機能フラグ”の考え方（超重要）🚦🧠
59docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_flag_blueprint.png./picture/firebase_analytics_performance_ts_study_008_flag_blueprint.pngTheme: 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) まずは「フラグの設計図」を作ろう✍️🗺️
60docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_key_terms.png./picture/firebase_analytics_performance_ts_study_008_key_terms.pngTheme: 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の中身（用語をやさしく）📚🙂
61docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_priority_stack.png./picture/firebase_analytics_performance_ts_study_008_priority_stack.pngTheme: 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) アプリ側の動き（頭の中の図）🧠🧩
62docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_fetch_interval.png./picture/firebase_analytics_performance_ts_study_008_fetch_interval.pngTheme: 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) 「取りに行きすぎ問題」とキャッシュ感覚🗃️😇
63docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_no_secrets.png./picture/firebase_analytics_performance_ts_study_008_no_secrets.pngTheme: 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.		## ❌ 秘密を入れない（超重要）🔒
64docs/firebase_analytics_performance_ts_study_008.mdfirebase_analytics_performance_ts_study_008_ai_config.png./picture/firebase_analytics_performance_ts_study_008_ai_config.pngTheme: 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）🛸🤝
65docs/firebase_analytics_performance_ts_study_009.mdfirebase_analytics_performance_ts_study_009_fetch_flow.png./picture/firebase_analytics_performance_ts_study_009_fetch_flow.pngTheme: 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) 今日作るフラグ（最小セット）🧩
66docs/firebase_analytics_performance_ts_study_009.mdfirebase_analytics_performance_ts_study_009_init_structure.png./picture/firebase_analytics_performance_ts_study_009_init_structure.pngTheme: 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つ作ろう 🧱✨
67docs/firebase_analytics_performance_ts_study_009.mdfirebase_analytics_performance_ts_study_009_provider_pattern.png./picture/firebase_analytics_performance_ts_study_009_provider_pattern.pngTheme: 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 でラクする）🧑‍💻🧩
68docs/firebase_analytics_performance_ts_study_009.mdfirebase_analytics_performance_ts_study_009_ui_toggle.png./picture/firebase_analytics_performance_ts_study_009_ui_toggle.pngTheme: 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を切り替える🎚️👀
69docs/firebase_analytics_performance_ts_study_009.mdfirebase_analytics_performance_ts_study_009_pitfalls.png./picture/firebase_analytics_performance_ts_study_009_pitfalls.pngTheme: 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) 「変えたのに変わらない！」あるある🧯😇
70docs/firebase_analytics_performance_ts_study_009.mdfirebase_analytics_performance_ts_study_009_ai_remote.png./picture/firebase_analytics_performance_ts_study_009_ai_remote.pngTheme: 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運用の“リモコン”になる🤖🎛️
71docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_balance_risk.png./picture/firebase_analytics_performance_ts_study_010_balance_risk.pngTheme: 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行で📘✨
72docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_fetch_interval_rule.png./picture/firebase_analytics_performance_ts_study_010_fetch_interval_rule.pngTheme: 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) フェッチ間隔の“本番ルール”はこれ🕰️
73docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_throttling_backoff.png./picture/firebase_analytics_performance_ts_study_010_throttling_backoff.pngTheme: 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）対策🧯
74docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_activation_timing.png./picture/firebase_analytics_performance_ts_study_010_activation_timing.pngTheme: 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を決める🎮✨
75docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_staged_rollout.png./picture/firebase_analytics_performance_ts_study_010_staged_rollout.pngTheme: 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）で“安全に出す”🪜🚦
76docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_code_blueprint.png./picture/firebase_analytics_performance_ts_study_010_code_blueprint.pngTheme: 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 を作る（設定まとめ役）📦
77docs/firebase_analytics_performance_ts_study_010.mdfirebase_analytics_performance_ts_study_010_ai_rollout.png./picture/firebase_analytics_performance_ts_study_010_ai_rollout.pngTheme: 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 は相性よすぎ問題🤝🤖
78docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_segmentation_concept.png./picture/firebase_analytics_performance_ts_study_011_segmentation_concept.pngTheme: 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) “出し分け”って、どんな時に使うの？🎁
79docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_condition_types.png./picture/firebase_analytics_performance_ts_study_011_condition_types.pngTheme: 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で重要なやつ中心）
80docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_design_table.png./picture/firebase_analytics_performance_ts_study_011_design_table.pngTheme: 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：まず“出し分け設計表”を作る🗂️✍️
81docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_set_user_prop.png./picture/firebase_analytics_performance_ts_study_011_set_user_prop.pngTheme: 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）でユーザープロパティを付ける🏷️👤
82docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_condition_builder.png./picture/firebase_analytics_performance_ts_study_011_condition_builder.pngTheme: 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のコンソールで“条件”を作る🎛️🧱
83docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_param_branches.png./picture/firebase_analytics_performance_ts_study_011_param_branches.pngTheme: 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：パラメータに“条件付きの値”を設定する🎚️✅
84docs/firebase_analytics_performance_ts_study_011.mdfirebase_analytics_performance_ts_study_011_ai_switching.png./picture/firebase_analytics_performance_ts_study_011_ai_switching.pngTheme: 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連携で、ここが強い🤖⚡
85docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_ai_remote_control.png./picture/firebase_analytics_performance_ts_study_012_ai_remote_control.pngTheme: 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運用リモコン”🎛️🤖
86docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_ai_parameters.png./picture/firebase_analytics_performance_ts_study_012_ai_parameters.pngTheme: 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に、こんなパラメータを用意します（例）👇
87docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_ai_emergency_stop.png./picture/firebase_analytics_performance_ts_study_012_ai_emergency_stop.pngTheme: 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）”が作れる🧯
88docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_model_switch.png./picture/firebase_analytics_performance_ts_study_012_model_switch.pngTheme: 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.		## ✅ ② “モデル名をあとから変える”が超大事🔁
89docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_defense_layers.png./picture/firebase_analytics_performance_ts_study_012_defense_layers.pngTheme: 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段構えが勝ち🏰
90docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_fetch_logic.png./picture/firebase_analytics_performance_ts_study_012_fetch_logic.pngTheme: 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の読み取り（フック化）🪝
91docs/firebase_analytics_performance_ts_study_012.mdfirebase_analytics_performance_ts_study_012_soft_limit.png./picture/firebase_analytics_performance_ts_study_012_soft_limit.pngTheme: 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日上限でボタンを止める🙂🔒
92docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_ab_steps.png./picture/firebase_analytics_performance_ts_study_013_ab_steps.pngTheme: 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テストって何するの？🍱🧪
93docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_ab_terms.png./picture/firebase_analytics_performance_ts_study_013_ab_terms.pngTheme: 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.		## 用語ミニ辞典📚🙂
94docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_pitfall_too_many.png./picture/firebase_analytics_performance_ts_study_013_pitfall_too_many.pngTheme: 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：変えるものが多すぎる🎛️🎛️🎛️
95docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_pitfall_peeking.png./picture/firebase_analytics_performance_ts_study_013_pitfall_peeking.pngTheme: 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：途中でのぞいて早めに止める👀💨
96docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_design_sheet.png./picture/firebase_analytics_performance_ts_study_013_design_sheet.pngTheme: 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割勝ち）📝🏆
97docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_metric_pillars.png./picture/firebase_analytics_performance_ts_study_013_metric_pillars.pngTheme: 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.		## “主指標”を選ぶコツ📊🧠
98docs/firebase_analytics_performance_ts_study_013.mdfirebase_analytics_performance_ts_study_013_agent_workflow.png./picture/firebase_analytics_performance_ts_study_013_agent_workflow.pngTheme: 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）で“実験計画→実装→検証”を一気に進めるコツ🛸🤖
99docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_button_ab.png./picture/firebase_analytics_performance_ts_study_014_button_ab.pngTheme: 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する🗣️🧪
100docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_ab_workflow.png./picture/firebase_analytics_performance_ts_study_014_ab_workflow.pngTheme: 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）🧭
101docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_fetch_code.png./picture/firebase_analytics_performance_ts_study_014_fetch_code.pngTheme: 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 を読む🛠️🎛️
102docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_event_types.png./picture/firebase_analytics_performance_ts_study_014_event_types.pngTheme: 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種類のイベント」を送る📣🎯
103docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_targeting_pie.png./picture/firebase_analytics_performance_ts_study_014_targeting_pie.pngTheme: 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（誰に当てる？）👥
104docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_fid_storage.png./picture/firebase_analytics_performance_ts_study_014_fid_storage.pngTheme: 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に入る🧠🧷
105docs/firebase_analytics_performance_ts_study_014.mdfirebase_analytics_performance_ts_study_014_force_variant.png./picture/firebase_analytics_performance_ts_study_014_force_variant.pngTheme: 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🧪🧷
106docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_decision_judge.png./picture/firebase_analytics_performance_ts_study_015_decision_judge.pngTheme: 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) まずは“見る場所”を固定しよう🧭👀
107docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_stats_terms.png./picture/firebase_analytics_performance_ts_study_015_stats_terms.pngTheme: 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つだけ覚える🧩📌
108docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_leader_concept.png./picture/firebase_analytics_performance_ts_study_015_leader_concept.pngTheme: 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”の意味をやさしく言うと🏁🙂
109docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_decision_patterns.png./picture/firebase_analytics_performance_ts_study_015_decision_patterns.pngTheme: 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) 今日から使える“判断ルール”テンプレ📋✅
110docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_web_identity_trap.png./picture/firebase_analytics_performance_ts_study_015_web_identity_trap.pngTheme: 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.		罠①：ブラウザ/シークレットで別人扱いになる🫥
111docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_missing_activation.png./picture/firebase_analytics_performance_ts_study_015_missing_activation.pngTheme: 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 では使えない🧩🚫
112docs/firebase_analytics_performance_ts_study_015.mdfirebase_analytics_performance_ts_study_015_ai_interpreter.png./picture/firebase_analytics_performance_ts_study_015_ai_interpreter.pngTheme: 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）で“読み間違い”を減らす🤖🛡️
113docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_server_benefits.png./picture/firebase_analytics_performance_ts_study_016_server_benefits.pngTheme: 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) まず結論：サーバー側を入れると何が嬉しい？🎁
114docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_server_roles.png./picture/firebase_analytics_performance_ts_study_016_server_roles.pngTheme: 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パターン 🍳✨
115docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_app_check_flow.png./picture/firebase_analytics_performance_ts_study_016_app_check_flow.pngTheme: 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. 仕組み（超ざっくり図）🗺️
116docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_soft_vs_hard.png./picture/firebase_analytics_performance_ts_study_016_soft_vs_hard.pngTheme: 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との“いい関係”🎛️🤝（重要な設計思想）
117docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_measurement_protocol.png./picture/firebase_analytics_performance_ts_study_016_measurement_protocol.pngTheme: 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) ハンズオン②（発展）：サーバーから“確定イベント”を送る📨📊
118docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_runtime_versions.png./picture/firebase_analytics_performance_ts_study_016_runtime_versions.pngTheme: 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) “バージョン感”だけはここで固定しよう📌（詰まり防止）
119docs/firebase_analytics_performance_ts_study_016.mdfirebase_analytics_performance_ts_study_016_ai_toolkit.png./picture/firebase_analytics_performance_ts_study_016_ai_toolkit.pngTheme: 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）
120docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_speed_feeling.png./picture/firebase_analytics_performance_ts_study_017_speed_feeling.pngTheme: 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 って何がうれしいの？🙂📈
121docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_web_vitals.png./picture/firebase_analytics_performance_ts_study_017_web_vitals.pngTheme: 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）🖼️⏱️
122docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_network_metrics.png./picture/firebase_analytics_performance_ts_study_017_network_metrics.pngTheme: 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）📡⏱️
123docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_react_setup.png./picture/firebase_analytics_performance_ts_study_017_react_setup.pngTheme: 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. コード（最小構成）✍️
124docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_10s_rule.png./picture/firebase_analytics_performance_ts_study_017_10s_rule.pngTheme: 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) 最初のデータを“出す”コツ（ここ超重要）🔥
125docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_console_filter.png./picture/firebase_analytics_performance_ts_study_017_console_filter.pngTheme: 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で“最初に見る”場所👀📊
126docs/firebase_analytics_performance_ts_study_017.mdfirebase_analytics_performance_ts_study_017_rollout_monitor.png./picture/firebase_analytics_performance_ts_study_017_rollout_monitor.pngTheme: 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 と相性が良い理由🎛️🤝⚡
127docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_suspects.png./picture/firebase_analytics_performance_ts_study_018_suspects.pngTheme: 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つ👀⚡
128docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_vital_signs.png./picture/firebase_analytics_performance_ts_study_018_vital_signs.pngTheme: 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) 画面が遅い：どの数字を見ればいいの？📄🐢➡️🎯
129docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_network_traffic.png./picture/firebase_analytics_performance_ts_study_018_network_traffic.pngTheme: 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 の見方📡🐢➡️🎯
130docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_ai_lane.png./picture/firebase_analytics_performance_ts_study_018_ai_lane.pngTheme: 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機能が遅い時の“近道”🤖⚡（ここ、差がつく）
131docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_ai_detective.png./picture/firebase_analytics_performance_ts_study_018_ai_detective.pngTheme: 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 を“調査役”にする🕵️‍♀️💻✨
132docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_batch_mail.png./picture/firebase_analytics_performance_ts_study_018_batch_mail.pngTheme: 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.		## よくあるハマり🧯（ここ踏む人多い）
133docs/firebase_analytics_performance_ts_study_018.mdfirebase_analytics_performance_ts_study_018_wanted_poster.png./picture/firebase_analytics_performance_ts_study_018_wanted_poster.pngTheme: 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つだけ”決めよう🏆
134docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_custom_dashboard.png./picture/firebase_analytics_performance_ts_study_019_custom_dashboard.pngTheme: 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) カスタムトレースって何？いつ使うの？🧠
135docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_trace_layers.png./picture/firebase_analytics_performance_ts_study_019_trace_layers.pngTheme: 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割：まず「計測ポイント」を決めよう🎯
136docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_naming_gatekeeper.png./picture/firebase_analytics_performance_ts_study_019_naming_gatekeeper.pngTheme: 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) 命名ルール＆やっちゃダメ集🚫（ここで詰まりがち）
137docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_helper_tool.png./picture/firebase_analytics_performance_ts_study_019_helper_tool.pngTheme: 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) まずは「汎用ヘルパー」を作る（最強）💪✨
138docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_bucketing.png./picture/firebase_analytics_performance_ts_study_019_bucketing.pngTheme: 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整形ボタンに入れる（本題）🤖📝
139docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_p90_focus.png./picture/firebase_analytics_performance_ts_study_019_p90_focus.pngTheme: 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) どこで見れる？どう読めばいい？👀📊
140docs/firebase_analytics_performance_ts_study_019.mdfirebase_analytics_performance_ts_study_019_stopwatch_fail.png./picture/firebase_analytics_performance_ts_study_019_stopwatch_fail.pngTheme: 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%ここ）
141docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_improvement_flywheel.png./picture/firebase_analytics_performance_ts_study_020_improvement_flywheel.pngTheme: 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周セット”の全体図 🗺️🔁
142docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_kpi_guardrails.png./picture/firebase_analytics_performance_ts_study_020_kpi_guardrails.pngTheme: 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（北極星）とガードレールを決める 🌟🧯
143docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_planting_sensors.png./picture/firebase_analytics_performance_ts_study_020_planting_sensors.pngTheme: 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：イベントと“遅さの証拠”を仕込む 🧩📊⚡
144docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_safety_valve.png./picture/firebase_analytics_performance_ts_study_020_safety_valve.pngTheme: 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で「安全に出す」🎛️🛡️
145docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_courtroom_decision.png./picture/firebase_analytics_performance_ts_study_020_courtroom_decision.pngTheme: 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テストで「勝ち負け」を決める 🧪⚖️
146docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_ai_team.png./picture/firebase_analytics_performance_ts_study_020_ai_team.pngTheme: 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の使いどころ）🧠💻
147docs/firebase_analytics_performance_ts_study_020.mdfirebase_analytics_performance_ts_study_020_24h_challenge.png./picture/firebase_analytics_performance_ts_study_020_24h_challenge.pngTheme: 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周」してみよう 🏁🧪⚡