image_generation_plan.fcm_ts

ID	File Name	Proposed Image Filename	Relative Link Path	Prompt	Insertion Point
2	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_msg_types.png	./picture/firebase_notification_fcm_ts_index_msg_types.png	Theme: Comparison of Notification vs Data messages Labels to Render: - Notification: "自動表示" - Data: "アプリ処理" Visual Details: Two distinct envelopes. The "Notification" envelope is open with a visible message card popping out (representing automatic display). The "Data" envelope is sealed with a gear icon on it (representing background processing/logic).	After "Firebase Cloud Messagingは、通知（表示される系）とデータ（アプリ側で処理する系）の両方を送れます。"
3	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_service_worker.png	./picture/firebase_notification_fcm_ts_index_service_worker.png	Theme: Service Worker handling background messages Labels to Render: - Browser Tab: "アプリ画面" - Service Worker: "裏方の作業員" - Message: "受信" Visual Details: A browser window (foreground) is dimmed or closed. Next to it, a distinct "worker" character (abstract gear or bot) catches a falling message envelope. Indicates active reception even when the main app is asleep.	After "Webの受信は Service Worker が重要ポイント"
4	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_permission_ux.png	./picture/firebase_notification_fcm_ts_index_permission_ux.png	Theme: Contextual Permission Request Labels to Render: - Bad: "いきなり許可？" - Good: "ボタンを押して許可" Visual Details: Split screen. Left side (Bad): A user looks confused/annoyed by a sudden browser popup. Right side (Good): The user proactively clicks a "Bell" icon/button, and then the popup appears, with the user looking satisfied.	After "「許可ダイアログの出し方」でブロック率が激変します。"
5	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_token_flow.png	./picture/firebase_notification_fcm_ts_index_token_flow.png	Theme: FCM Token Registration Flow Labels to Render: - Device: "スマホ" - Token: "手形 (Token)" - Database: "保存" Visual Details: A smartphone generates a glowing key (Token). An arrow shows this key being sent to a database cylinder (Firestore). A "Refresh" icon implies the key can change.	After "トークンは“端末ごとの宛先”"
6	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_event_driven.png	./picture/firebase_notification_fcm_ts_index_event_driven.png	Theme: Firestore Trigger to FCM Labels to Render: - User A: "投稿" - Firestore: "書き込み" - Function: "検知 & 送信" - User B: "通知" Visual Details: Flow chart from left to right. User A adds a document to a Database icon. A lightning bolt (Trigger) activates a Function gear. The Function shoots a message envelope to User B's device.	After "イベント駆動＝「起きたら勝手に動く」"
7	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_ai_summary.png	./picture/firebase_notification_fcm_ts_index_ai_summary.png	Theme: AI Summarizing Notification Text Labels to Render: - Long Text: "長いコメント..." - AI: "要約処理" - Short Notification: "簡潔な通知" Visual Details: A long, messy document goes into a "Brain" or "Sparkle" box (AI). Out comes a neat, small speech bubble suitable for a phone notification.	After "通知文は短距離走。AIで「要点だけ」にできる"
8	docs/firebase_notification_fcm_ts_index.md	firebase_notification_fcm_ts_index_multidevice.png	./picture/firebase_notification_fcm_ts_index_multidevice.png	Theme: Sending to Multiple Devices Labels to Render: - Server: "送信" - User: "ユーザーID" - Devices: "全端末へ" Visual Details: A central server sends a signal to a single User ID profile. From that profile, three branching lines connect to a Smartphone, a Laptop, and a Tablet, all lighting up with the same notification.	After "ユーザーの全トークンにまとめて送信"
9	docs/firebase_notification_fcm_ts_study_001.md	firebase_notification_fcm_ts_study_001_lifeline.png	./picture/firebase_notification_fcm_ts_study_001_lifeline.png	Theme: Notification as Help vs Noise Labels to Render: - Help: "助け舟" - Noise: "騒音" Visual Details: Split screen. Left: A megaphone shouting at a user (Noise). Right: A lifebuoy being thrown to a user (Help).	After "通知＝“呼び戻し”じゃなく“助け舟”だと強い"
10	docs/firebase_notification_fcm_ts_study_001.md	firebase_notification_fcm_ts_study_001_types.png	./picture/firebase_notification_fcm_ts_study_001_types.png	Theme: Two Types of Notifications Labels to Render: - Display: "画面に表示" - Data: "裏で処理" Visual Details: Two phone screens. One has a visible notification banner popping up. The other is dark but has a glowing gear inside, indicating background work.	After "通知には大きく2つの役割があるよ："
11	docs/firebase_notification_fcm_ts_study_001.md	firebase_notification_fcm_ts_study_001_permission.png	./picture/firebase_notification_fcm_ts_study_001_permission.png	Theme: Good vs Bad Permission Timing Labels to Render: - Bad: "いきなり" - Good: "説明してから" Visual Details: Left: A large "Allow?" popup blocking the screen immediately. Right: A small "Enable Notifications" button being clicked, followed by the popup.	After "「許可ダイアログ」は“価値が伝わってから”が王道🙅‍♂️➡️🙆‍♀️"
12	docs/firebase_notification_fcm_ts_study_001.md	firebase_notification_fcm_ts_study_001_scenarios.png	./picture/firebase_notification_fcm_ts_study_001_scenarios.png	Theme: Three Good Notification Scenarios Labels to Render: - Wait: "待機" - Help: "行動支援" - Safe: "損を防ぐ" Visual Details: Three distinct icons arranged horizontally. 1. A clock/chat bubble (Waiting). 2. A compass or map pin (Helping). 3. A shield or warning sign (Safety).	After "通知が“使われる”方向に効くのは、だいたいこの3つに当てはまるとき👇"
13	docs/firebase_notification_fcm_ts_study_001.md	firebase_notification_fcm_ts_study_001_value_formula.png	./picture/firebase_notification_fcm_ts_study_001_value_formula.png	Theme: User Value Formula Labels to Render: - User: "ユーザー" - Situation: "状況" - Happy: "嬉しい" Visual Details: An equation layout: [User Icon] + [Situation Icon] = [Happy Face Icon]. Simple and clean.	After "さっきの3つのうち、いちばん強い1つを選んで、これを完成させてね👇"
14	docs/firebase_notification_fcm_ts_study_001.md	firebase_notification_fcm_ts_study_001_ai_ideas.png	./picture/firebase_notification_fcm_ts_study_001_ai_ideas.png	Theme: AI Generating Notification Ideas Labels to Render: - AI: "AI" - Ideas: "アイデア" - Dev: "開発者" Visual Details: A robot character handing a stack of "Lightbulb" cards to a developer character. The developer looks inspired.	After "おすすめの頼み方（コピペ用）👇"
15	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_mines.png	./picture/firebase_notification_fcm_ts_study_002_mines.png	Theme: Three Landmines of Bad Notifications Labels to Render: - Permission: "許可の取り方" - Frequency: "頻度" - Content: "内容" Visual Details: Three round naval mines floating in water or sitting on ground. A stick figure looks worried. The mines represent the dangers of sudden permission, spammy frequency, and bad content.	After "2-1. まず結論：地雷はこの3つ💣💣💣"
16	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_tripod.png	./picture/firebase_notification_fcm_ts_study_002_tripod.png	Theme: Three Pillars of Notification Design Labels to Render: - When: "いつ" - Who: "だれに" - What: "なにを" Visual Details: A sturdy structure (like a stool or temple) supported by three legs. Each leg represents one of the core questions.	After "2-2. “うざくならない”通知の合言葉（設計の骨組み）🦴✨"
17	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_permission_flow.png	./picture/firebase_notification_fcm_ts_study_002_permission_flow.png	Theme: Bad vs Good Permission Flow Labels to Render: - Bad: "即ブロック" - Good: "納得して許可" Visual Details: Two horizontal arrows. Top arrow: Start -> Popup -> X (Block). Bottom arrow: Start -> Explanation -> Button Click -> Popup -> O (Allow).	After "✅ 良い例（同意が取りやすい）🙆‍♀️"
18	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_settings_ui.png	./picture/firebase_notification_fcm_ts_study_002_settings_ui.png	Theme: Notification Settings UI Labels to Render: - Settings: "設定" - Toggle: "通知ON/OFF" - Detail: "詳細設定へ" Visual Details: A simple smartphone screen wireframe. Shows a list item "Notifications" with a toggle switch (currently Off) and a chevron (>) indicating a sub-menu.	After "## ① 画面遷移図（文章でOK）🗺️"
19	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_soft_permission.png	./picture/firebase_notification_fcm_ts_study_002_soft_permission.png	Theme: Soft Permission Explanation UI Labels to Render: - Explanation: "見逃さない！" - Benefit: "返信をお知らせ" - Button: "通知をON" Visual Details: A friendly UI card. It has a nice icon (bell), a short persuasive text, and a prominent button to enable notifications. This precedes the system dialog.	After "## ② “ソフト許可”用のUI文言（まずは仮で置く）📝"
20	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_button_trigger.png	./picture/firebase_notification_fcm_ts_study_002_button_trigger.png	Theme: User Action Triggers Permission Labels to Render: - User: "クリック" - Code: "関数実行" - System: "ダイアログ表示" Visual Details: A sequence: 1. Hand clicks button. 2. Arrow to Code Block. 3. Arrow to System Popup. Emphasizes that the popup only comes after the click.	After "## ③（ミニ実装）許可リクエストは“ボタン押した時だけ”にする🔔"
21	docs/firebase_notification_fcm_ts_study_002.md	firebase_notification_fcm_ts_study_002_ai_writer.png	./picture/firebase_notification_fcm_ts_study_002_ai_writer.png	Theme: AI Drafting Notification Text Labels to Render: - AI: "AIライター" - Drafts: "文言案" - Constraint: "30文字以内" Visual Details: A robot with a pen writing on a board. Several sticky notes are on the board, showing short text variations.	After "## ミニ課題（5分）🎯📝：「通知ONにする理由」をUI文言で作る（AIも使う🤖✨）"
22	docs/firebase_notification_fcm_ts_study_003.md	firebase_notification_fcm_ts_study_003_roles.png	./picture/firebase_notification_fcm_ts_study_003_roles.png	Theme: Four Roles of FCM Architecture Labels to Render: - Client: "アプリ (React)" - SW: "裏方 (SW)" - FCM: "郵便局 (FCM)" - Server: "送信元 (Server)" Visual Details: Four distinct icons. 1. Phone/Screen (Client). 2. A worker with a wrench (Service Worker). 3. A post office building with envelope (FCM). 4. A cloud server icon (Server).	After "1) 登場人物（FCMの“班分け”）👥🧩"
23	docs/firebase_notification_fcm_ts_study_003.md	firebase_notification_fcm_ts_study_003_flow.png	./picture/firebase_notification_fcm_ts_study_003_flow.png	Theme: FCM Message Flow Labels to Render: - User: "操作" - Server: "検知 & 送信" - FCM: "配達" - Device: "受信" Visual Details: A flow diagram from left to right. User clicks -> Server processes -> FCM carries envelope -> Device lights up.	After "2) ざっくり全体フロー（3レーン図）🛣️🛣️🛣️"
24	docs/firebase_notification_fcm_ts_study_003.md	firebase_notification_fcm_ts_study_003_targets.png	./picture/firebase_notification_fcm_ts_study_003_targets.png	Theme: FCM Target Types Labels to Render: - Token: "個別の宛先" - Topic: "一斉送信" - Condition: "条件配信" Visual Details: Three icons. 1. An envelope with a specific address (Token). 2. A megaphone broadcasting to a group (Topic). 3. A logic gate or funnel filtering people (Condition).	After "3) “宛先”の種類：トークン / トピック / 条件 🎯📬"
25	docs/firebase_notification_fcm_ts_study_003.md	firebase_notification_fcm_ts_study_003_keys.png	./picture/firebase_notification_fcm_ts_study_003_keys.png	Theme: Public vs Secret Keys Labels to Render: - Public: "公開OK" - Secret: "絶対秘密" Visual Details: Left: An open glass box with "API Key" inside. Right: A heavy steel safe with "Service Account" inside, locked tight.	After "4) IDの話（ここが混乱ポイント！）🧩🧾"
26	docs/firebase_notification_fcm_ts_study_003.md	firebase_notification_fcm_ts_study_003_send_methods.png	./picture/firebase_notification_fcm_ts_study_003_send_methods.png	Theme: Admin SDK vs HTTP v1 API Labels to Render: - Admin SDK: "簡単ツール" - HTTP v1: "API接続" Visual Details: Left: A toolbox or dashboard (Admin SDK). Right: A plug connecting to a socket with a "Bearer Token" key (HTTP v1).	After "5) メッセージの“送り方”2択（サーバー側）📤⚙️"
27	docs/firebase_notification_fcm_ts_study_003.md	firebase_notification_fcm_ts_study_003_ai_review.png	./picture/firebase_notification_fcm_ts_study_003_ai_review.png	Theme: AI Reviewing Architecture Labels to Render: - AI: "レビュー役" - Blueprint: "設計図" - Check: "改善案" Visual Details: A robot character holding a magnifying glass, examining a blueprint document. The blueprint has some red marks (improvements).	After "おすすめの使い方（プロンプト例）👇"
28	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_two_layers.png	./picture/firebase_notification_fcm_ts_study_004_two_layers.png	Theme: App Switch vs System Gate Labels to Render: - App: "アプリの意思" - System: "ブラウザの関所" Visual Details: User interacts with a friendly toggle switch (App Layer). Behind it is a sturdy gate or guard (System Layer). Both must be open for the message to pass.	After "1) 読む：スイッチは「ON/OFF」じゃなく“状態マシン”っぽく考える🧠🧩"
29	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_state_matrix.png	./picture/firebase_notification_fcm_ts_study_004_state_matrix.png	Theme: App Preference vs Browser Permission Matrix Labels to Render: - Axis X: "ブラウザ許可 (Granted/Denied)" - Axis Y: "アプリ設定 (ON/OFF)" - Result: "実際の動作" Visual Details: A grid showing how the two settings interact. E.g., App ON + Browser Denied = Blocked. App ON + Browser Granted = Active.	After "つまり 「アプリ設定」×「ブラウザ許可」 の掛け算で、見せるUIが変わります🎛️✨"
30	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_localstorage.png	./picture/firebase_notification_fcm_ts_study_004_localstorage.png	Theme: LocalStorage Save/Load Cycle Labels to Render: - Action: "スイッチ切替" - Save: "保存" - Storage: "localStorage" - Load: "読み込み" Visual Details: A circular flow. Switch -> Arrow to Box (Storage) -> Arrow back to Switch. Simple data persistence visualization.	After "## 2-1. まずは設定の保存・読み込み（localStorage）🧺"
31	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_switch_ui.png	./picture/firebase_notification_fcm_ts_study_004_switch_ui.png	Theme: Accessible Toggle Switch Labels to Render: - UI: "見た目" - Code: "aria-checked" - Screen Reader: "読み上げ" Visual Details: A toggle switch. An arrow points to it from a code snippet showing role="switch". A speech bubble represents a screen reader announcing the state.	After "## 2-2. “それっぽい”スイッチコンポーネント（アクセシブル寄り）🧷✨"
32	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_screen_mockup.png	./picture/firebase_notification_fcm_ts_study_004_screen_mockup.png	Theme: Notification Settings Screen Layout Labels to Render: - Header: "通知設定" - Switch: "受け取る" - Status: "許可状態" - Test: "テスト送信" Visual Details: A clean UI layout. Top: Title. Middle: Toggle switch with status text. Bottom: A "Test Notification" button (disabled or enabled).	After "## 2-3. 設定画面本体：スイッチ＋状態表示＋テストボタン🎛️🔔"
33	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_architecture_slots.png	./picture/firebase_notification_fcm_ts_study_004_architecture_slots.png	Theme: Pluggable Architecture for Notifications Labels to Render: - Core: "設定UI" - Slot 1: "許可ロジック" - Slot 2: "FCM接続" Visual Details: A central puzzle piece (Settings UI) connecting to outline/ghost pieces (Permission, FCM) that will be filled in later chapters.	After "3) 次章以降につながる「差し込み口」だけ先に作っておく🧩🔌"
34	docs/firebase_notification_fcm_ts_study_004.md	firebase_notification_fcm_ts_study_004_ai_text.png	./picture/firebase_notification_fcm_ts_study_004_ai_text.png	Theme: AI Generating UI Text Labels to Render: - App: "アプリ画面" - AI: "生成中..." - Text: "やさしい説明文" Visual Details: A smartphone screen where the explanation text is being written/updated by glowing magic dust or a robot hand, implying dynamic generation.	After "## 4-2. Firebase AI Logicで “アプリ内” から文言生成（後でA/Bもしやすい）🧠📲"
35	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_load_vs_action.png	./picture/firebase_notification_fcm_ts_study_005_load_vs_action.png	Theme: Permission on Load vs Action Labels to Render: - Load: "いきなり" - Action: "押した時だけ" Visual Details: Left: A webpage loads and a popup punches the user (metaphorically). Right: User clicks a button, then the popup gently appears.	After "## 1) “ページ開いた瞬間に許可”は嫌われやすい🙅‍♂️"
36	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_states.png	./picture/firebase_notification_fcm_ts_study_005_states.png	Theme: Three Permission States Labels to Render: - Default: "未選択" - Granted: "許可" - Denied: "拒否" Visual Details: A traffic light or three distinct badges. Default is gray/yellow question mark. Granted is green check. Denied is red X or stop sign.	After "## 2) 許可状態は3つだけ（まずこれ覚える）🧩"
37	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_denied_recovery.png	./picture/firebase_notification_fcm_ts_study_005_denied_recovery.png	Theme: Recovering from Denied State Labels to Render: - State: "ブロック中" - Guide: "復帰ルート" - Settings: "設定へ" Visual Details: A user facing a "Road Closed" barrier. A signpost points to a "Detour" path leading to a "Settings" gear icon.	After "## 3) 「拒否された時の復帰導線」があるだけで優しい🥹"
38	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_ui_flow.png	./picture/firebase_notification_fcm_ts_study_005_ui_flow.png	Theme: Notification UI State Transition Labels to Render: - Start: "OFF" - Action: "ボタン押下" - Result: "ON / 拒否" Visual Details: A simple branching diagram. A central "Button Click" node branches into a Green path (Success) and a Red path (Denied with Help).	After "## 0) UIの状態設計（いちばん大事）🎛️"
39	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_hook_logic.png	./picture/firebase_notification_fcm_ts_study_005_hook_logic.png	Theme: Permission Hook Logic Labels to Render: - Read: "読むだけ (安全)" - Request: "要求 (ダイアログ)" Visual Details: Two modes of a tool (e.g., a scanner). Mode 1 scans silently (Read). Mode 2 emits a signal/beam (Request).	After "## 1) まず「許可状態」を読むフックを作る🪝"
40	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_card_states.png	./picture/firebase_notification_fcm_ts_study_005_card_states.png	Theme: Notification Settings Card Variations Labels to Render: - Default: "有効化ボタン" - Granted: "設定完了" - Denied: "ヘルプ表示" Visual Details: Three variations of the same UI card stacked or side-by-side. 1. Has a big button. 2. Has a green checkmark. 3. Has a warning icon and text link.	After "## 2) 設定画面に「有効化ボタン」を置く（ここが第5章の主役）🥇"
41	docs/firebase_notification_fcm_ts_study_005.md	firebase_notification_fcm_ts_study_005_value_sandwich.png	./picture/firebase_notification_fcm_ts_study_005_value_sandwich.png	Theme: Value-First Permission Flow Labels to Render: - Step 1: "価値説明" - Step 2: "合意クリック" - Step 3: "許可ダイアログ" Visual Details: A three-layer stack or vertical flow. Top: "Explanation". Middle: "User Consent". Bottom: "System Request". Shows the ideal order.	After "最強パターンはこれ👇"
42	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_sw_role.png	./picture/firebase_notification_fcm_ts_study_006_sw_role.png	Theme: Service Worker as a Background Guard Labels to Render: - App Closed: "アプリ閉" - Service Worker: "常駐係" - Notification: "通知" Visual Details: 1. Core Concept: SW works even when the app is closed. 2. Metaphor: A closed shop (App) with the lights off. A diligent security guard (Service Worker) stands outside, receiving a package (Notification) from a delivery drone. 3. Action: The guard catches the package. 4. Layout: Side view of the shop front.	## SWは「裏方の常駐係」🕵️‍♂️
43	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_fg_bg.png	./picture/firebase_notification_fcm_ts_study_006_fg_bg.png	Theme: Foreground vs Background Processing Labels to Render: - Foreground: "画面あり" - Background: "画面なし" - React: "React (onMessage)" - SW: "SW (onBackgroundMessage)" Visual Details: 1. Core Concept: Different handlers for different states. 2. Metaphor: Split screen. Left (Light Mode): User looking at a phone screen, React logo catching a ball. Right (Dark Mode): Phone in a pocket, Service Worker logo catching a ball. 3. Action: Catching the message. 4. Layout: Split vertically.	## フォアグラウンドとバックグラウンドの分担💡
44	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_file_structure.png	./picture/firebase_notification_fcm_ts_study_006_file_structure.png	Theme: Service Worker File Placement Labels to Render: - Project: "プロジェクト" - Public: "public/" - Root: "Webルート" - Build: "ビルド後" Visual Details: 1. Core Concept: The file must end up at the domain root. 2. Metaphor: A file folder structure. An arrow traces the path of firebase-messaging-sw.js from the public folder in development to the top-level root in the deployment/build. 3. Action: Movement/Copying. 4. Layout: Left to right flow.	## 1) firebase-messaging-sw.js を “Webルート” に置く📌
45	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_code_parts.png	./picture/firebase_notification_fcm_ts_study_006_code_parts.png	Theme: Minimal Service Worker Code Structure Labels to Render: - Import: "ライブラリ" - Init: "初期化" - Event: "受信イベント" - Action: "通知表示" Visual Details: 1. Core Concept: The four essential parts of the SW script. 2. Metaphor: A scroll or script document divided into 4 colored blocks. Each block has an icon: Library book (Import), Key (Init), Lightning (Event), Bell (Action). 3. Action: None, static structural view. 4. Layout: Vertical stack.	## 2) まずは最小の Service Worker を書く🧩（ログ＆通知表示）
46	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_click_flow.png	./picture/firebase_notification_fcm_ts_study_006_click_flow.png	Theme: Notification Click Logic Flow Labels to Render: - Click: "クリック" - Check: "タブ確認" - Focus: "既存タブ" - Open: "新規タブ" Visual Details: 1. Core Concept: Logic to reuse existing tabs. 2. Metaphor: Flowchart. Hand clicks Notification -> Diamond shape (Tab Open?) -> Yes path (Magnifying glass focusing on window) / No path (New window popping up). 3. Action: Flow arrows. 4. Layout: Top to bottom.	✅ これで「バックグラウンド受信 → ログ → 通知表示 → クリックで遷移」の骨格ができます🔥
47	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_devtools.png	./picture/firebase_notification_fcm_ts_study_006_devtools.png	Theme: Verifying SW in DevTools Labels to Render: - Tab: "Application" - Section: "Service Workers" - Status: "Active" - Log: "Console" Visual Details: 1. Core Concept: Where to look in Chrome DevTools. 2. Metaphor: A simplified wireframe of the browser developer tools. Highlighting the 'Application' tab on top, the 'Service Workers' menu on the left, and a green 'Status: Active' dot in the main area. 3. Action: A magnifying glass inspecting the status. 4. Layout: Dashboard view.	## ✅ SW が入ったか確認（WindowsのChrome/Edge）
48	docs/firebase_notification_fcm_ts_study_006.md	firebase_notification_fcm_ts_study_006_pitfalls.png	./picture/firebase_notification_fcm_ts_study_006_pitfalls.png	Theme: Three Common Service Worker Pitfalls Labels to Render: - Path: "配置ミス" - Protocol: "HTTP (x)" - Click: "クリック不可" Visual Details: 1. Core Concept: The three main traps. 2. Metaphor: Three hazard signs. 1. A file folder with a question mark (Wrong Path). 2. An unlocked padlock with a red cross (Not HTTPS). 3. A mouse cursor clicking a 'Data' box with no response (Click Logic missing). 3. Action: Warning symbols. 4. Layout: Horizontal arrangement.	## よくある罠🧯（ハマりポイントだけ先に潰す）
49	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_token_address.png	./picture/firebase_notification_fcm_ts_study_007_token_address.png	Theme: Token as Device Address Labels to Render: - User: "ユーザーID" - Device A: "スマホ(Token A)" - Device B: "PC(Token B)" - Delivery: "配達" Visual Details: 1. Core Concept: Tokens are addresses for devices, not users. 2. Metaphor: A user stands in front of two houses (Phone House and PC House). Each house has a unique address plate (Token). A delivery person checks the address plate to deliver a letter. 3. Action: Checking the address. 4. Layout: Landscape view.	## 1) まず理解：トークンは“端末の住所”🏠📬
50	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_firestore_schema.png	./picture/firebase_notification_fcm_ts_study_007_firestore_schema.png	Theme: Firestore Data Structure for Tokens Labels to Render: - Collection: "users" - Doc: "{uid}" - SubCollection: "fcmTokens" - Fields: "token, platform..." Visual Details: 1. Core Concept: Hierarchical data structure. 2. Metaphor: A tree diagram. Root 'users' -> Branch '{uid}' -> Branch 'fcmTokens' -> Leaves (Documents) with data fields like 'token', 'platform', 'createdAt'. 3. Action: Static structure. 4. Layout: Hierarchical tree.	## 2) Firestoreの保存設計（ここが“現実アプリ感”の第一歩）🧠✨
51	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_token_hashing.png	./picture/firebase_notification_fcm_ts_study_007_token_hashing.png	Theme: Hashing Token for Document ID Labels to Render: - Input: "長いトークン" - Process: "SHA-256" - Output: "安全なID" Visual Details: 1. Core Concept: Converting a long raw token into a safe ID. 2. Metaphor: A machine or grinder. A long, messy strip (Token) enters one side. It passes through a gear labeled 'SHA-256'. A neat, uniform block (Hash ID) comes out the other side. 3. Action: Processing. 4. Layout: Left to right.	## tokenIdは“ハッシュ”推奨 🔐
52	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_save_logic.png	./picture/firebase_notification_fcm_ts_study_007_save_logic.png	Theme: Token Save Logic Flow Labels to Render: - Start: "開始" - Check: "対応 & 許可" - Get: "トークン取得" - Save: "Firestore保存" Visual Details: 1. Core Concept: Steps to save a token. 2. Metaphor: A flowchart. Start -> Diamond (Supported/Allowed?) -> Box (Get Token) -> Box (Hash Token) -> Cylinder (Save to Firestore). 3. Action: Flow arrows. 4. Layout: Top to bottom.	## 3) 実装：トークン取得 → Firestoreへ保存 🛠️🔥
53	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_ui_interaction.png	./picture/firebase_notification_fcm_ts_study_007_ui_interaction.png	Theme: UI State during Token Save Labels to Render: - Idle: "通知ONボタン" - Loading: "取得中..." - Success: "登録完了!" Visual Details: 1. Core Concept: User feedback during the process. 2. Metaphor: Three button states shown in sequence. 1. A clickable button. 2. A button with a spinner. 3. A button with a checkmark and success message. 3. Action: Transition. 4. Layout: Horizontal sequence.	## 3-2. React側：通知ONボタンを押したら保存🎛️⚛️
54	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_security_rules.png	./picture/firebase_notification_fcm_ts_study_007_security_rules.png	Theme: Firestore Security Rules Logic Labels to Render: - User A: "自分 (OK)" - User B: "他人 (Block)" - Guard: "ルール (uid check)" - Data: "My Token" Visual Details: 1. Core Concept: Access control based on User ID. 2. Metaphor: A security checkpoint. User A shows an ID that matches the gate's requirement and passes. User B shows a different ID and is blocked by a shield. 3. Action: Checking ID. 4. Layout: Comparative view.	## 4) Firestoreルール（最低限ここまでは守る）🛡️🔥
55	docs/firebase_notification_fcm_ts_study_007.md	firebase_notification_fcm_ts_study_007_multidevice.png	./picture/firebase_notification_fcm_ts_study_007_multidevice.png	Theme: Saving Tokens from Multiple Devices Labels to Render: - Phone: "スマホ" - Laptop: "PC" - Firestore: "2つのドキュメント" Visual Details: 1. Core Concept: One user, multiple device tokens. 2. Metaphor: A smartphone and a laptop both sending data packets (tokens) to the same Firestore User folder. Inside the folder, two distinct files appear, one for each device. 3. Action: Data syncing. 4. Layout: Converging lines to database.	## ミニ課題🎯：同一ユーザーで「2トークン」保存できる？📱💻
56	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_lifecycle.png	./picture/firebase_notification_fcm_ts_study_008_lifecycle.png	Theme: Token Lifecycle Labels to Render: - Born: "新規登録" - Active: "有効期間" - Dead: "無効 (Uninstalled)" - Replaced: "更新 (New)" Visual Details: 1. Core Concept: Tokens are transient. 2. Metaphor: A plant lifecycle. A seed sprouts (Born), grows into a tree (Active), withers (Dead), and a new sprout appears next to it (Replaced). 3. Action: Growth and decay. 4. Layout: Left to right timeline.	## 読む📖：トークンは「変わる」し「死ぬ」💀➡️🆕
57	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_duplicates.png	./picture/firebase_notification_fcm_ts_study_008_duplicates.png	Theme: Duplicate Prevention Strategy Labels to Render: - Bad: "ランダムID (重複)" - Good: "Hash ID (上書き)" Visual Details: 1. Core Concept: Preventing clutter in the database. 2. Metaphor: Split screen. Left (Bad): A messy pile of duplicate files for the same user. Right (Good): A single, neat file that gets updated and polished. 3. Action: Comparison. 4. Layout: Side by side.	## 手を動かす🖱️：1つの“正解パターン”を実装しよう（Web + Firestore）⚛️🗃️
58	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_upsert.png	./picture/firebase_notification_fcm_ts_study_008_upsert.png	Theme: Token Upsert Logic Labels to Render: - Client: "アプリ" - Hash: "ID化" - Firestore: "Upsert (Merge)" - Result: "最新化" Visual Details: 1. Core Concept: Updating existing records instead of creating new ones. 2. Metaphor: A stamping machine. The client sends a 'Token' which gets stamped into a 'Hash' shape. It lands on an existing slot in Firestore, updating the 'Last Seen' label without moving the slot. 3. Action: Stamping/Updating. 4. Layout: Top to bottom.	## 2) クライアント側：トークン取得→ハッシュ化→Firestoreにupsert🔁
59	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_replacement.png	./picture/firebase_notification_fcm_ts_study_008_replacement.png	Theme: Detecting Token Change Labels to Render: - Storage: "前回のHash" - Current: "今回のHash" - Action: "Old -> Inactive" - Link: "replacedBy" Visual Details: 1. Core Concept: Handling token rotation. 2. Metaphor: A relay race. The 'Old Token' passes the baton to the 'New Token'. The Old Token retires (greys out) and points to the New Token (replacedBy). 3. Action: Passing baton. 4. Layout: Horizontal transition.	localStorage.setItem("fcmTokenHash", tokenHash);
60	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_deletion.png	./picture/firebase_notification_fcm_ts_study_008_deletion.png	Theme: Token Deletion Flow Labels to Render: - User: "解除" - FCM: "deleteToken" - Firestore: "isActive: false" Visual Details: 1. Core Concept: Disabling notifications cleanly. 2. Metaphor: A switch being turned off. 1. User flips switch. 2. Signal sent to FCM (Trash can). 3. Database record light turns off (Inactive). 3. Action: Turning off. 4. Layout: Sequence.	const deleted = await deleteToken(messaging); // Promise
61	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_cleanup.png	./picture/firebase_notification_fcm_ts_study_008_cleanup.png	Theme: Server-Side Token Cleanup Labels to Render: - Send: "500件送信" - Response: "エラー検知" - Action: "DB削除" Visual Details: 1. Core Concept: Removing invalid tokens after failed send. 2. Metaphor: A post office sorting machine. It sends 500 letters. Some bounce back with red 'Error' stamps. The machine takes these bounced letters and shreds the corresponding address cards. 3. Action: Filtering and shredding. 4. Layout: Cycle flow.	## 送信側で“死んだトークンを消す”🧹⚡（これが最重要）
62	docs/firebase_notification_fcm_ts_study_008.md	firebase_notification_fcm_ts_study_008_dashboard.png	./picture/firebase_notification_fcm_ts_study_008_dashboard.png	Theme: Token Health Dashboard Labels to Render: - Valid: "有効 (Active)" - Dead: "無効 (Dead)" - Action: "掃除する" Visual Details: 1. Core Concept: Monitoring token health. 2. Metaphor: A computer dashboard screen. A pie chart shows Green (Active) vs Red (Dead) tokens. A robot assistant points to a button labeled 'Clean up Dead Tokens'. 3. Action: Monitoring. 4. Layout: Dashboard UI.	## ミニ課題🎯：トークンに「観測用メタデータ」を足して、掃除ルールを言語化しよう🧠🧹
63	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_toast_ux.png	./picture/firebase_notification_fcm_ts_study_009_toast_ux.png	Theme: In-App Notification vs OS Notification Labels to Render: - OS: "OS通知 (邪魔)" - App: "トースト (快適)" Visual Details: 1. Core Concept: In-app notifications are less intrusive. 2. Metaphor: Split screen. Left (OS): A user playing a game is blocked by a huge banner notification covering the screen. Right (App): The same user playing, but a small, sleek toast message appears quietly at the bottom corner, not interrupting the game. 3. Action: Comparison. 4. Layout: Side by side.	## “アプリ内通知”が気持ちいい理由🍀
64	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_hook_architecture.png	./picture/firebase_notification_fcm_ts_study_009_hook_architecture.png	Theme: useFcmForeground Hook Architecture Labels to Render: - Hook: "useFcmForeground" - Input: "onMessage" - State: "notices[]" - Output: "UI (Toast/Badge)" Visual Details: 1. Core Concept: Data flow in the React hook. 2. Metaphor: A component diagram. The Hook is the central brain box. It receives 'Signal' arrows from 'onMessage', stores them in a 'State' container, and sends 'Data' arrows out to 'Toast' and 'Badge' UI components. 3. Action: Data flow. 4. Layout: Central hub.	## ステップA：onMessage を “Reactで安全に” 受ける🎣
65	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_toast_lifecycle.png	./picture/firebase_notification_fcm_ts_study_009_toast_lifecycle.png	Theme: Toast Notification Lifecycle Labels to Render: - Born: "受信 (Add)" - Live: "表示 (4.5s)" - Die: "消滅 (Remove)" Visual Details: 1. Core Concept: Temporary nature of toast notifications. 2. Metaphor: A timeline. 1. A star icon (Event) triggers a box to appear (Born). 2. A clock icon ticks while the box stays visible (Live). 3. The box turns into a ghost or fades away (Die). 3. Action: Timeline progression. 4. Layout: Left to right.	## ステップB：トーストUI（邪魔しない通知）を作る🍞✨
66	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_dev_panel.png	./picture/firebase_notification_fcm_ts_study_009_dev_panel.png	Theme: FCM Development Panel UI Labels to Render: - Header: "受信ログ" - List: "メッセージ一覧" - Data: "JSON詳細" - Action: "クリア" Visual Details: 1. Core Concept: A tool for debugging notifications. 2. Metaphor: A clean UI mockup of a developer panel. It features a list of recent log entries with timestamps, a code block area showing raw JSON data, and a 'Broom' icon button for clearing logs. 3. Action: Debugging. 4. Layout: Panel interface.	## ステップC：バッジ＆“開発用パネル”で見える化👀🧪
67	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_badge_update.png	./picture/firebase_notification_fcm_ts_study_009_badge_update.png	Theme: Silent Badge Update Labels to Render: - Bell: "通知アイコン" - Badge: "赤丸 (未読数)" - Action: "+1" Visual Details: 1. Core Concept: Subtle notification indicator. 2. Metaphor: A bell icon. A small red circle with the number '3' inside appears on top of it. A '+1' floating text implies it just incremented silently. 3. Action: Incrementing. 4. Layout: Icon focus.	## 6) src/App.tsx（例：設定画面に組み込む感じ）
68	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_rate_limiting.png	./picture/firebase_notification_fcm_ts_study_009_rate_limiting.png	Theme: Notification Rate Limiting Labels to Render: - Burst: "連打 (5件)" - Filter: "まとめ処理" - Result: "トースト (1件)" Visual Details: 1. Core Concept: Preventing notification spam. 2. Metaphor: Five message envelopes flying rapidly towards a funnel. Inside the funnel, they are merged. Only one single, neat toast message comes out the other end. 3. Action: Filtering/Merging. 4. Layout: Flow process.	## 3) ミニ課題 🎯：「受信を“気持ちよく”仕上げる」3点セット✨
69	docs/firebase_notification_fcm_ts_study_009.md	firebase_notification_fcm_ts_study_009_ai_shortening.png	./picture/firebase_notification_fcm_ts_study_009_ai_shortening.png	Theme: AI Text Shortening for Notifications Labels to Render: - Long: "長い文章..." - AI: "要約 (Gemini)" - Short: "短文 (トースト用)" Visual Details: 1. Core Concept: Summarizing text for UI constraints. 2. Metaphor: A long scroll of text enters a robot's head (representing AI). The robot processes it, and a small, neat card with a short summary pops out. 3. Action: Summarizing. 4. Layout: Input-Process-Output.	## おまけ：AIで“通知文を短くする”をチラ見せ🤖📝✨（任意）
70	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_sw_vigilance.png	./picture/firebase_notification_fcm_ts_study_010_sw_vigilance.png	Theme: Service Worker Background Role Labels to Render: - App: "アプリ (睡眠中)" - SW: "SW (待機中)" - Msg: "受信" Visual Details: 1. Core Concept: SW works while the app sleeps. 2. Metaphor: A night scene. The main house (App) has its lights off. Outside, a guard in a booth (Service Worker) is wide awake with a flashlight, spotting an incoming message envelope. 3. Action: Monitoring. 4. Layout: Nighttime scene.	## 1) バックグラウンドは Service Worker の世界🧑‍🚒
71	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_focus_trap.png	./picture/firebase_notification_fcm_ts_study_010_focus_trap.png	Theme: The "Focus Only" Trap Labels to Render: - Action: "クリック" - Result: "タブ前面化" - Content: "変わらない..." Visual Details: 1. Core Concept: Default behavior isn't enough. 2. Metaphor: A user clicks a notification. The browser tab jumps to the front, but the content remains on the 'Home' page instead of the 'Comment' page. The user looks confused. 3. Action: User confusion. 4. Layout: Sequence.	## 2) “クリックしたら遷移”は、実は罠がある🪤😵
72	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_code_order.png	./picture/firebase_notification_fcm_ts_study_010_code_order.png	Theme: Critical Code Order Labels to Render: - Top: "1. notificationclick" - Bottom: "2. firebase.messaging()" - Result: "OK (有効)" Visual Details: 1. Core Concept: Event listener must come first. 2. Metaphor: A scroll of code. An arrow points to the top section labeled 'Event Listener' with a green checkmark. Another arrow points to the bottom section labeled 'Firebase Init'. A warning sign says 'Do not swap!'. 3. Action: Instruction. 4. Layout: Vertical stack.	## Step 1) firebase-messaging-sw.js に “クリック処理” を最初に書く🧷👆
73	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_client_match.png	./picture/firebase_notification_fcm_ts_study_010_client_match.png	Theme: Finding Existing Tabs Logic Labels to Render: - SW: "検索" - Tabs: "開いているタブ" - Match: "発見!" - Action: "Focus & Navigate" Visual Details: 1. Core Concept: Reusing open tabs. 2. Metaphor: The Service Worker uses binoculars to scan a row of open browser tabs. It spots one with the app's logo and points to it, indicating 'Use this one!'. 3. Action: Searching and finding. 4. Layout: Horizontal scan.	const windowClients = await clients.matchAll({
74	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_postmessage.png	./picture/firebase_notification_fcm_ts_study_010_postmessage.png	Theme: Service Worker to React Communication Labels to Render: - SW: "Service Worker" - Bridge: "postMessage" - React: "React App" - Data: "URL" Visual Details: 1. Core Concept: Passing data from background to foreground. 2. Metaphor: A bridge connecting two islands (SW Island and React Island). A messenger runs across the bridge carrying a scroll labeled 'URL'. 3. Action: Delivering message. 4. Layout: Bridge connection.	## Step 3) React 側で “NAVIGATE メッセージ” を受けてルーティングする⚛️📨➡️🧭
75	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_payload.png	./picture/firebase_notification_fcm_ts_study_010_payload.png	Theme: Data Payload Structure Labels to Render: - Key: "data" - Fields: "url, title, body" - Purpose: "SW制御用" Visual Details: 1. Core Concept: JSON structure for custom notifications. 2. Metaphor: A blueprint or schematic drawing of a data packet. It highlights the 'data' compartment containing 'url', 'title', and 'body' as the essential components for the Service Worker logic. 3. Action: Blueprint display. 4. Layout: Schematic view.	## Step 4) 送信側（次章以降）に備えて payload 設計メモ🧠🗒️
76	docs/firebase_notification_fcm_ts_study_010.md	firebase_notification_fcm_ts_study_010_deeplink.png	./picture/firebase_notification_fcm_ts_study_010_deeplink.png	Theme: Successful Deep Linking Labels to Render: - Notification: "クリック" - Transition: "遷移" - Result: "コメント詳細" Visual Details: 1. Core Concept: Landing on the specific content. 2. Metaphor: User clicks a notification labeled 'New Comment'. The screen transitions smoothly, and the specific comment is highlighted in yellow on the page. The user looks satisfied. 3. Action: Seamless transition. 4. Layout: Before and After.	## ミニ課題（5分）🎯🔥 “コメントID入りの深い導線” を完成させよう
77	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_message_types.png	./picture/firebase_notification_fcm_ts_study_011_message_types.png	Theme: Notification vs Data Message Labels to Render: - Notification: "表示重視" - Data: "制御重視" - Hybrid: "最強コンボ (両方)" Visual Details: 1. Core Concept: Two types of messages. 2. Metaphor: Two puzzle pieces. One piece (Notification) has a 'Picture' icon (Auto Display). The other piece (Data) has a 'Gear' icon (Control). When they join (Hybrid), they form a glowing, complete puzzle. 3. Action: Combining. 4. Layout: Side by side comparison.	## 1) まず結論：迷ったら「notification + data」からでOK🙆‍♀️✨
78	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_foreground_background.png	./picture/firebase_notification_fcm_ts_study_011_foreground_background.png	Theme: Web Behavior by State Labels to Render: - Foreground: "アプリ起動中" - Background: "裏側/閉" - Handler: "onMessage / onBackgroundMessage" Visual Details: 1. Core Concept: Different handlers for different states. 2. Metaphor: A stage with curtains. Open curtains (Foreground) show the 'onMessage' actor. Closed curtains (Background) show the 'Service Worker' shadow puppet behind the scenes. 3. Action: Acting/Handling. 4. Layout: Contrast view.	## 2) Web（React）での挙動：ここだけは覚えて勝ち🏆🌐
79	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_decision_matrix.png	./picture/firebase_notification_fcm_ts_study_011_decision_matrix.png	Theme: Message Type Decision Matrix Labels to Render: - Auto: "楽ちん表示" - Link: "クリック遷移" - UI: "アプリ制御" - Custom: "完全自前" Visual Details: 1. Core Concept: Choosing the right type. 2. Metaphor: A flowchart or decision tree. Start -> 'Want easy display?' -> Yes (Notification). No -> 'Want custom UI?' -> Yes (Data). Hybrid options branch out in between. 3. Action: Decision making. 4. Layout: Flowchart.	## 3) 使い分けの判断表🗺️🧩
80	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_payload_size.png	./picture/firebase_notification_fcm_ts_study_011_payload_size.png	Theme: Payload Size Limit (4KB) Labels to Render: - Box: "4KB制限" - Content: "ID (Tiny)" - Content: "Huge Text (Over)" - Action: "IDだけ入れる" Visual Details: 1. Core Concept: Keeping payload small. 2. Metaphor: A small shipping box labeled '4KB Max'. A large furniture item (Long Text) tries to fit but fails. A key (ID) fits perfectly inside. 3. Action: Packing. 4. Layout: Comparison.	## 4) payload設計のコツ：4KBに勝つ🥊📦
81	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_comment_payload.png	./picture/firebase_notification_fcm_ts_study_011_comment_payload.png	Theme: Ideal Comment Payload Structure Labels to Render: - Type: "comment_created" - IDs: "commentId, postId" - Meta: "actorName, preview" Visual Details: 1. Core Concept: Structured data for comments. 2. Metaphor: A neat index card or JSON block. It lists the essential fields clearly: 'Type', 'IDs', 'URL', and 'Preview'. Everything is text (String). 3. Action: Data organization. 4. Layout: Card view.	## 5) 今回の題材：コメント通知の“いい感じpayload”例📝🔔
82	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_ui_update.png	./picture/firebase_notification_fcm_ts_study_011_ui_update.png	Theme: Foreground UI Update Flow Labels to Render: - Data: "受信 (Data)" - React: "UI更新" - Toast: "トースト表示" - Badge: "バッジ+1" Visual Details: 1. Core Concept: Using data to update the app interface. 2. Metaphor: A magic wand (Data) touches the app screen. Instantly, a toast message appears, and the bell icon's badge number increments by one. 3. Action: Magic update. 4. Layout: Screen interaction.	## 7) 手を動かす②：React（フォアグラウンド）で受け取ってUI更新📲✨
83	docs/firebase_notification_fcm_ts_study_011.md	firebase_notification_fcm_ts_study_011_ai_compress.png	./picture/firebase_notification_fcm_ts_study_011_ai_compress.png	Theme: AI Text Compression Labels to Render: - Input: "長い文章..." - AI: "要約" - Output: "短文 (通知用)" - Privacy: "伏せ字" Visual Details: 1. Core Concept: AI summarizing text for notifications. 2. Metaphor: A compressor machine. Long text goes in, gets squeezed by a robot arm (AI), and comes out as a dense, short block suitable for a notification bubble. Masking tape covers sensitive parts. 3. Action: Compression. 4. Layout: Process flow.	## 11) AI活用：4KBと“短く伝わる通知文”の最強コンボ🤖✂️✨
84	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_console_benefit.png	./picture/firebase_notification_fcm_ts_study_012_console_benefit.png	Theme: Console Testing vs Code Implementation Labels to Render: - Code: "実装 (複雑)" - Console: "コンソール (シンプル)" - Goal: "届く確認" Visual Details: 1. Core Concept: Isolating variables by using the console first. 2. Metaphor: Split screen. Left (Code): A tangled knot of wires labeled 'Code' (Sender logic mixed with Receiver logic). Right (Console): A clean, straight line connecting a 'Firebase Console' icon directly to a 'Phone' icon. 3. Action: Comparison. 4. Layout: Side by side.	After "コンソールのテスト送信なら、送信側の実装を一旦忘れて “届くかどうか”だけに集中できます🧪"
85	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_test_background.png	./picture/firebase_notification_fcm_ts_study_012_test_background.png	Theme: Testing in Background State Labels to Render: - Foreground: "アプリ表示中 (x)" - Background: "裏側/最小化 (o)" - Test: "テスト送信" Visual Details: 1. Core Concept: The requirement to background the app for testing. 2. Metaphor: A user holding a phone. They press the 'Home' button to minimize the app (making it background). Then, a notification banner appears at the top. A 'Check' mark indicates this is the correct test procedure. 3. Action: Minimizing app. 4. Layout: Sequence.	After "公式のテスト手順でも「アプリをバックグラウンドにして」って書いてあります。"
86	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_token_ui.png	./picture/firebase_notification_fcm_ts_study_012_token_ui.png	Theme: Displaying Token for Development Labels to Render: - UI: "開発用表示" - Token: "長い文字列" - Action: "コピー" Visual Details: 1. Core Concept: Exposing the token in the UI for easy copying. 2. Metaphor: A React component box on a screen. Inside is a text area with a long, gibberish string (the token). A cursor highlights the text, and a 'Copy' tooltip appears. 3. Action: Copying text. 4. Layout: UI Mockup.	After "もし「どこにも表示してない…！」なら、開発中だけUIに出すのが手っ取り早いです👇"
87	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_console_steps.png	./picture/firebase_notification_fcm_ts_study_012_console_steps.png	Theme: Firebase Console Send Steps Labels to Render: - Step 1: "Messaging" - Step 2: "作成" - Step 3: "Token入力" - Step 4: "Test送信" Visual Details: 1. Core Concept: The step-by-step process in the console. 2. Metaphor: A stepped path or timeline. 1. Click 'Messaging' icon. 2. Click 'New Campaign' button. 3. Paste Token into 'Test' box. 4. Click 'Send' rocket button. 3. Action: Process flow. 4. Layout: Left to right steps.	After "公式の流れはこの通りです（ほぼそのままやればOK）👇"
88	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_debug_checklist.png	./picture/firebase_notification_fcm_ts_study_012_debug_checklist.png	Theme: Notification Debugging Checklist Labels to Render: - 1: "許可 (Permission)" - 2: "トークン (Token)" - 3: "SW (Service Worker)" - 4: "HTTPS (Secure)" Visual Details: 1. Core Concept: The order of debugging. 2. Metaphor: A funnel or filter system. Bugs enter the top. Layer 1 filters 'Permission' issues. Layer 2 filters 'Token' issues. Layer 3 filters 'SW' issues. Layer 4 filters 'HTTPS' issues. 3. Action: Filtering. 4. Layout: Vertical funnel.	After "まずは上から順に潰すと速いです🏎️💨"
89	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_secure_context.png	./picture/firebase_notification_fcm_ts_study_012_secure_context.png	Theme: Secure Context Requirement Labels to Render: - Safe: "HTTPS / localhost" - Unsafe: "http:// (IP)" - Result: "SW動作" Visual Details: 1. Core Concept: Service Workers require a secure context. 2. Metaphor: A security gate. 'HTTPS' and 'localhost' pass through the gate easily (Green light). 'http://' is stopped by a barrier (Red light). 3. Action: Access control. 4. Layout: Comparison.	After "「localhostだと動くのに、公開環境で死ぬ」系はここが多いです😇"
90	docs/firebase_notification_fcm_ts_study_012.md	firebase_notification_fcm_ts_study_012_ai_debugger.png	./picture/firebase_notification_fcm_ts_study_012_ai_debugger.png	Theme: AI Assisted Debugging Labels to Render: - Human: "状況説明 (Logs)" - AI: "Gemini" - Output: "原因リスト" Visual Details: 1. Core Concept: Using AI to speed up troubleshooting. 2. Metaphor: A developer hands a messy log file to a sleek robot (Gemini). The robot instantly scans it and hands back a neat checklist of 'Probable Causes'. 3. Action: Analysis. 4. Layout: Interaction.	After "ログや状況を渡して「原因候補→次の確認手順」を出させると、デバッグがめちゃ速くなります💨"
91	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_server_security.png	./picture/firebase_notification_fcm_ts_study_013_server_security.png	Theme: Secure Sending Architecture Labels to Render: - Client: "スマホ (送信禁止)" - Server: "Functions (送信OK)" - FCM: "FCM" Visual Details: 1. Core Concept: Preventing client-side sending. 2. Metaphor: A user on a phone trying to send a notification directly to FCM is blocked by a brick wall (Forbidden). A Cloud Function server successfully sends the notification to FCM (Green path). 3. Action: Blocking vs Allowing. 4. Layout: Contrast paths.	After "FCMは便利だけど、もしブラウザやアプリ（クライアント）から直接送れる設計にすると、誰でも通知を乱発できる危険が出ます。"
92	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_node_runtimes.png	./picture/firebase_notification_fcm_ts_study_013_node_runtimes.png	Theme: Node.js Runtime Versions Labels to Render: - Old: "Node 18 (Deprecated)" - New: "Node 20 / 22 (Recommended)" - Action: "Upgrade" Visual Details: 1. Core Concept: Using modern Node.js versions. 2. Metaphor: A dusty, gray box labeled 'Node 18' with a 'Deprecated' warning sticker. Next to it, a shiny, futuristic box labeled 'Node 22' with a 'Supported' badge. An arrow points from Old to New. 3. Action: Upgrading. 4. Layout: Side by side.	After "Functions（Firebase）では Node.js 22 / 20 がサポートされ、**Node.js 18 は deprecated（非推奨）**扱いです。"
93	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_type_definition.png	./picture/firebase_notification_fcm_ts_study_013_type_definition.png	Theme: TypeScript Interface for Push Input Labels to Render: - Interface: "SendPushInput" - Fields: "token, title, body, url" - Type: "Strong Typing" Visual Details: 1. Core Concept: Defining the data structure. 2. Metaphor: A blueprint or technical drawing. It shows a structured box 'SendPushInput' containing the specific parts: 'token' (Key), 'title' (Text), 'body' (Text), 'url' (Link). A shield icon represents 'Type Safety'. 3. Action: Definition. 4. Layout: Schematic.	After "今回の送信は「最低限これだけ」で十分👇"
94	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_function_flow.png	./picture/firebase_notification_fcm_ts_study_013_function_flow.png	Theme: Cloud Function Logic Flow Labels to Render: - 1: "Auth Check" - 2: "Validate Input" - 3: "Size Check" - 4: "Admin Send" Visual Details: 1. Core Concept: The internal logic of the send function. 2. Metaphor: A processing line. Input enters. 1. Guard checks ID (Auth). 2. Inspector checks form (Validate). 3. Scale weighs the package (Size). 4. Postman sends it (Admin Send). 3. Action: Processing steps. 4. Layout: Left to right.	After "// functions/src/index.ts"
95	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_client_trigger.png	./picture/firebase_notification_fcm_ts_study_013_client_trigger.png	Theme: React Triggering Cloud Function Labels to Render: - User: "Click Test" - React: "httpsCallable" - Cloud: "Functions" Visual Details: 1. Core Concept: The client-side trigger. 2. Metaphor: A user pushes a big red 'TEST' button on a React app. A signal cable runs from the button, through the internet cloud, to the 'Functions' server box. 3. Action: Remote trigger. 4. Layout: Connection.	After "// Step D：Reactから呼び出す（テストボタン）🎛️⚛️"
96	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_http_auth.png	./picture/firebase_notification_fcm_ts_study_013_http_auth.png	Theme: HTTP v1 Authorization Flow Labels to Render: - 1: "Credential" - 2: "Get Token" - 3: "POST + Bearer" - 4: "FCM API" Visual Details: 1. Core Concept: The manual auth process for HTTP v1. 2. Metaphor: A key exchange. 1. Show ID Card (Credential). 2. Receive Pass Key (Token). 3. Use Pass Key to open the Gate (POST). 4. Enter FCM Castle. 3. Action: Authentication. 4. Layout: Sequence.	After "Functionsの中でやるなら、アクセストークン取得 → fetch の流れになります。"
97	docs/firebase_notification_fcm_ts_study_013.md	firebase_notification_fcm_ts_study_013_ai_structured.png	./picture/firebase_notification_fcm_ts_study_013_ai_structured.png	Theme: AI Structured Output Labels to Render: - Input: "Rough Text" - AI: "Schema Validation" - Output: "Clean JSON" Visual Details: 1. Core Concept: Enforcing JSON structure on AI output. 2. Metaphor: A messy clay blob (Rough Text) is pressed into a square mold (Schema) by a robot (AI). A perfect square brick (JSON) comes out. 3. Action: Molding/Structuring. 4. Layout: Transformation.	After "Firebase AI Logic の structured output（JSON）を使うと、返してほしい形（title/body）を固定できます🧱"
98	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_comment_trigger.png	./picture/firebase_notification_fcm_ts_study_014_comment_trigger.png	Theme: Event-Driven Comment Notification Labels to Render: - User A: "Comment" - Firestore: "Save" - Trigger: "Function" - User B: "Notification" Visual Details: 1. Core Concept: The chain reaction from comment to notification. 2. Metaphor: A domino effect. User A pushes the first domino (Comment). It hits Firestore, which hits the Function trigger, which sends a signal to User B's phone. 3. Action: Chain reaction. 4. Layout: Left to right.	After "* 保存された瞬間にサーバーが反応して、通知を送る🔔⚡"
99	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_schema_relations.png	./picture/firebase_notification_fcm_ts_study_014_schema_relations.png	Theme: Firestore Schema for Notifications Labels to Render: - Post: "authorUid" - Comment: "authorUid" - User: "fcmTokens" Visual Details: 1. Core Concept: Linking data to find the recipient. 2. Metaphor: A treasure map connecting islands. 'Comment Island' has a line to 'Post Island' (to find Owner). 'Post Island' has a line to 'User Island' (to find Tokens). 3. Action: Linking. 4. Layout: Map/Network.	After "// users/{uid}/fcmTokens/{tokenId}"
100	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_self_check.png	./picture/firebase_notification_fcm_ts_study_014_self_check.png	Theme: Self-Notification Check Logic Labels to Render: - Post Owner: "A" - Commenter: "A" - Check: "A == A?" - Action: "Skip" Visual Details: 1. Core Concept: Avoiding notifications for your own actions. 2. Metaphor: A gatekeeper. A person tries to mail a letter to themselves. The gatekeeper checks the sender and receiver names, sees they are identical, and puts the letter in a 'Skip' bin. 3. Action: Filtering. 4. Layout: Process flow.	After "* 「投稿者 === コメント者」なら送らない🙂（ミニ課題の核心）"
101	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_multicast_fanout.png	./picture/firebase_notification_fcm_ts_study_014_multicast_fanout.png	Theme: Multicast Message Fan-out Labels to Render: - Function: "1 Message" - Method: "Multicast" - Devices: "Phone, PC, Tablet" Visual Details: 1. Core Concept: Sending one payload to multiple tokens. 2. Metaphor: A broadcast tower (Function) emitting a single strong signal (Multicast). The signal splits and hits three different receivers (Phone, PC, Tablet) simultaneously. 3. Action: Broadcasting. 4. Layout: Top to bottom fan-out.	After "// 5) 送る（複数トークンまとめて）"
102	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_ai_shorten_flow.png	./picture/firebase_notification_fcm_ts_study_014_ai_shorten_flow.png	Theme: AI Text Shortening at Creation Labels to Render: - User: "Long Text" - Client AI: "Shorten" - Firestore: "Save Both" - Function: "Use Short" Visual Details: 1. Core Concept: Pre-processing text on the client side. 2. Metaphor: A cooking process. The user brings raw ingredients (Long Text). The Kitchen AI chops them (Shorten). Both Raw and Chopped are stored in the Fridge (Firestore). The Chef (Function) grabs the Chopped ones for quick serving. 3. Action: Pre-processing. 4. Layout: Timeline.	After "そこで React側でコメント投稿時に AI で notifyText を作って Firestore に一緒に保存すると、Functions側は超ラクになります😄"
103	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_dry_run_switch.png	./picture/firebase_notification_fcm_ts_study_014_dry_run_switch.png	Theme: DRY_RUN Safety Switch Labels to Render: - Env: "DRY_RUN=true" - Flow: "Log Only" - Block: "No Send" Visual Details: 1. Core Concept: Preventing accidental sends during development. 2. Metaphor: A railroad switch track. When 'DRY_RUN' is on, the train (Notification) is diverted to a side track labeled 'Log Station', stopping safely before the 'Real World' tunnel. 3. Action: Diverting. 4. Layout: Fork in the road.	After "* .env に DRY_RUN=true を入れておくと、通知は送らずログだけになります✅"
104	docs/firebase_notification_fcm_ts_study_014.md	firebase_notification_fcm_ts_study_014_loop_block.png	./picture/firebase_notification_fcm_ts_study_014_loop_block.png	Theme: Blocking Notification Loop Labels to Render: - User: "Me" - Action: "Comment" - Notification: "Return to Me" - Result: "Block!" Visual Details: 1. Core Concept: Preventing the annoyance of self-notification. 2. Metaphor: A boomerang. A user throws a boomerang (Comment). It tries to come back and hit them (Notification), but a shield labeled 'Self Check' blocks it just in time. 3. Action: Blocking. 4. Layout: Action scene.	After "こういうときに通知が飛ぶと、一気に“うざいアプリ”になります😇🧯"
105	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_user_device_map.png	./picture/firebase_notification_fcm_ts_study_015_user_device_map.png	Theme: One User, Multiple Devices Labels to Render: - User: "1 User" - Devices: "Phone, Tablet, PC" - Tokens: "Token A, Token B, Token C" Visual Details: 1. Core Concept: A single user entity maps to multiple device tokens. 2. Metaphor: A hub and spoke model. The User is the central hub. Spokes connect to three different devices. Each device holds a unique 'Key' (Token). 3. Action: Connection. 4. Layout: Centralized.	After "* Firebase Cloud Messaging（FCM）は、端末（＝ブラウザやアプリの“インスタンス”）ごとに 登録トークン を持ちます🔑"
106	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_token_fields.png	./picture/firebase_notification_fcm_ts_study_015_token_fields.png	Theme: Essential Token Document Fields Labels to Render: - Field: "token" - Field: "platform (web/ios)" - Field: "updatedAt (Time)" - Field: "disabled (false)" Visual Details: 1. Core Concept: The necessary metadata for a token document. 2. Metaphor: A detailed ID card or database record. It highlights critical fields: The Key string (token), the Device Icon (platform), a Clock (updatedAt), and a Status Light (disabled). 3. Action: Static display. 4. Layout: List/Card.	After "フィールド例（最低限＋便利セット）🧠✨"
107	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_token_chunking.png	./picture/firebase_notification_fcm_ts_study_015_token_chunking.png	Theme: Chunking Tokens for FCM Labels to Render: - Input: "1000 Tokens" - Process: "Chunk(500)" - Output: "Batch 1 (500), Batch 2 (500)" Visual Details: 1. Core Concept: Splitting a large list into batches of 500. 2. Metaphor: A sorting machine. A conveyor belt brings a huge pile of tokens. The machine separates them into neat boxes, each labeled 'Max 500'. 3. Action: Sorting/Grouping. 4. Layout: Process flow.	After "// ② 500個ずつ送る（FCMは1回最大500トークン）📦"
108	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_batch_response.png	./picture/firebase_notification_fcm_ts_study_015_batch_response.png	Theme: Batch Response Mapping Labels to Render: - Request: "[Token A, Token B, Token C]" - Response: "[Success, Fail, Success]" - Mapping: "Index 1 = Fail" Visual Details: 1. Core Concept: Correlating request index with response index. 2. Metaphor: Two parallel tracks. Top track has tokens. Bottom track has result flags (Green Check, Red X). Vertical lines connect them 1-to-1 to show which token failed. 3. Action: Mapping. 4. Layout: Parallel lines.	After "// token順に responses が返ってくる（どれが失敗したか分かる） oaicite:11 "
109	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_batch_logic.png	./picture/firebase_notification_fcm_ts_study_015_batch_logic.png	Theme: Batch Send and Cleanup Logic Labels to Render: - 1: "Fetch All" - 2: "Chunk" - 3: "Send Each" - 4: "Delete Failed" Visual Details: 1. Core Concept: The full lifecycle of a multicast send. 2. Metaphor: A cyclical factory process. 1. Gather raw materials (Fetch). 2. Package them (Chunk). 3. Ship them (Send). 4. Recycle defective returns (Delete Failed). 3. Action: Cycle. 4. Layout: Circular flow.	After "⭐ここで押さえる3点だけ覚えればOK！"
110	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_token_refresh_loop.png	./picture/firebase_notification_fcm_ts_study_015_token_refresh_loop.png	Theme: Token Refresh Lifecycle Labels to Render: - Born: "Create" - Active: "Update Timestamp" - Dead: "Invalid Error" - Action: "Delete" Visual Details: 1. Core Concept: Tokens must be maintained or removed. 2. Metaphor: A garden. New plants are watered (Update Timestamp). Dead plants (Invalid) are pulled out (Delete) to keep the garden healthy. 3. Action: Maintenance. 4. Layout: Lifecycle circle.	After "## 3) 失敗トークン掃除の考え方🧹🧠"
111	docs/firebase_notification_fcm_ts_study_015.md	firebase_notification_fcm_ts_study_015_partial_failure.png	./picture/firebase_notification_fcm_ts_study_015_partial_failure.png	Theme: Partial Failure Resilience Labels to Render: - Sender: "Multicast" - Device A: "Success (Light On)" - Device B: "Fail (Broken Bulb)" - System: "Still Working" Visual Details: 1. Core Concept: One failure does not stop the whole batch. 2. Metaphor: A string of Christmas lights wired in parallel. One bulb is broken/dark, but the electricity (signal) still reaches the other bulbs, which are glowing. 3. Action: Resilience. 4. Layout: Horizontal wiring.	After "## ミニ課題（5分）🎯📌「1個失敗でも全体が死なない」を証明する"
112	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_annoyance_vs_solution.png	./picture/firebase_notification_fcm_ts_study_016_annoyance_vs_solution.png	Theme: 3 Annoyances vs 3 Solutions Labels to Render: - Problem: "Spam / Late / Repeat" - Solution: "Digest / TTL / Collapse" - Result: "User Happy" Visual Details: 1. Core Concept: Matching problems to solutions. 2. Metaphor: Three monsters (Spam, Late, Repeat) being defeated by three heroes (Digest Shield, TTL Clock, Collapse Hammer). 3. Action: Combat/Solution. 4. Layout: Matchup.	After "そこで、制御のツマミ（レバー）を3つ使います👇"
113	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_collapse_tag.png	./picture/firebase_notification_fcm_ts_study_016_collapse_tag.png	Theme: Notification Stacking vs Updating Labels to Render: - Bad: "Stacking (10 items)" - Good: "Updating (1 item)" - Mechanism: "tag / collapseKey" Visual Details: 1. Core Concept: Updating an existing notification instead of creating a new one. 2. Metaphor: Split screen. Left (Bad): A phone screen cluttered with 10 identical 'New Comment' banners. Right (Good): A single banner saying 'New Comment (10)', changing nicely. 3. Action: Updating. 4. Layout: Comparison.	After "**「通知が10個積み上がる」→「通知1個が更新され続ける」**になります😇✨"
114	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_bucket_structure.png	./picture/firebase_notification_fcm_ts_study_016_bucket_structure.png	Theme: Notification Bucket Data Structure Labels to Render: - Collection: "notifyBuckets" - Doc: "uid_postId_time" - Fields: "count, latestAt, sendAt" Visual Details: 1. Core Concept: Buffering data in Firestore. 2. Metaphor: A physical bucket labeled with the Document ID. Inside, there are coins (count) and a clock (sendAt) indicating when the bucket should be emptied. 3. Action: Storage. 4. Layout: Object view.	After "* sentAt：送ったら入れる（重複送信防止）"
115	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_buffering_logic.png	./picture/firebase_notification_fcm_ts_study_016_buffering_logic.png	Theme: Buffering Logic Flow Labels to Render: - Trigger: "Comment" - Logic: "Wait 2 mins" - Action: "Add to Bucket" - Status: "Pending" Visual Details: 1. Core Concept: Delaying the send. 2. Metaphor: A conveyor belt. Comments arrive and fall into a box (Bucket). The box sits on a scale with a timer set to '2:00'. It doesn't move to the 'Shipping' truck yet. 3. Action: Accumulation. 4. Layout: Flow.	After "* **“すぐ送らない”**で、まず箱に積む"
116	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_scheduler_trigger.png	./picture/firebase_notification_fcm_ts_study_016_scheduler_trigger.png	Theme: Scheduled Sending Trigger Labels to Render: - Scheduler: "Every 1 min" - Check: "sendAt <= Now" - Action: "Send & Mark Sent" Visual Details: 1. Core Concept: Periodic check and send. 2. Metaphor: A robot watchman waking up every minute. It checks the dates on the buckets. If a date is passed (Now), it grabs the bucket and runs to the Post Office. 3. Action: Scheduled check. 4. Layout: Cyclic process.	After "// 手順3：スケジュール関数で、期限が来た箱だけ送る📤⏱️"
117	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_ttl_bomb.png	./picture/firebase_notification_fcm_ts_study_016_ttl_bomb.png	Theme: Time To Live (TTL) Labels to Render: - Message: "Notification" - TTL: "24 Hours" - Result: "Expire (Poof!)" Visual Details: 1. Core Concept: Messages expiring if not delivered. 2. Metaphor: A mission impossible message tape. It has a digital countdown timer (TTL). When the timer hits 00:00, the message evaporates into smoke (Poof!) before reaching the user. 3. Action: Expiration. 4. Layout: Timeline.	After "## ③ 寿命を付ける（TTL）⏰"
118	docs/firebase_notification_fcm_ts_study_016.md	firebase_notification_fcm_ts_study_016_ai_summarize_batch.png	./picture/firebase_notification_fcm_ts_study_016_ai_summarize_batch.png	Theme: AI Summarizing Multiple Comments Labels to Render: - Input: "3 Comments" - AI: "Summarize" - Output: "'A and 2 others commented'" Visual Details: 1. Core Concept: Aggregating multiple items into one text. 2. Metaphor: A funnel. Three separate comment papers go in. The funnel (AI) blends them. One single elegant card comes out with a summary text. 3. Action: Summarization. 4. Layout: Process flow.	After "今の body は固定文でした。ここを「2分間の出来事」から短文生成に変えると一気にプロっぽいです😎✨"
119	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_error_clog.png	./picture/firebase_notification_fcm_ts_study_017_error_clog.png	Theme: Impact of Ignored Errors Labels to Render: - Flow: "Notifications" - Clog: "Errors / Invalid Tokens" - Result: "Blocked" Visual Details: 1. Core Concept: Accumulating errors stops the system. 2. Metaphor: A water pipe. The water (Notifications) is trying to flow, but a buildup of rust and gunk (Errors) is narrowing the pipe, slowing everything down. 3. Action: Blocking flow. 4. Layout: Cross-section.	After "## 読む（5分）📖✨：健康診断（エラー分析）が大事な理由🧯"
120	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_error_buckets.png	./picture/firebase_notification_fcm_ts_study_017_error_buckets.png	Theme: FCM Error Classification Labels to Render: - 1: "Invalid Token (Delete)" - 2: "Server Error (Retry)" - 3: "Quota (Wait)" Visual Details: 1. Core Concept: Categorizing errors for action. 2. Metaphor: Three distinct sorting bins. Bin 1 is a Trash Can (Delete). Bin 2 is a Recycle Loop (Retry). Bin 3 is a Stop Sign (Wait). 3. Action: Sorting. 4. Layout: Three columns.	After "## 1) エラーの種類を知る（3大分類）📚"
121	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_handler_logic.png	./picture/firebase_notification_fcm_ts_study_017_handler_logic.png	Theme: Granular Error Handling Logic Labels to Render: - Error: "UNREGISTERED" - Action: "Delete Token" - Error: "INTERNAL" - Action: "Retry Later" Visual Details: 1. Core Concept: Code branching based on error code. 2. Metaphor: A railroad switch system. The train (Error) arrives. If it's 'Unregistered', it goes to the 'Scrap Yard'. If it's 'Internal', it goes to the 'Maintenance Loop'. 3. Action: Switching. 4. Layout: Flowchart.	After "## 2) Functions側：エラー詳細を見て“自動掃除”を強化する🧹"
122	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_error_logging.png	./picture/firebase_notification_fcm_ts_study_017_error_logging.png	Theme: Logging Delivery Failures Labels to Render: - User: "Target UID" - Status: "Fail" - Reason: "Quota Exceeded" - DB: "errorLogs" Visual Details: 1. Core Concept: Persisting error details for analysis. 2. Metaphor: A clipboard or logbook. A pen writes a red entry: 'User A - Failed - Reason'. This is stored in a database archive. 3. Action: Recording. 4. Layout: Document view.	After "## 3) “届かなかった人”をFirestoreに記録する📝"
123	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_idempotency_stamp.png	./picture/firebase_notification_fcm_ts_study_017_idempotency_stamp.png	Theme: Idempotency Mechanism Labels to Render: - Event: "ID: 123" - Check: "Processed?" - Result: "Skip (Already Done)" Visual Details: 1. Core Concept: Processing an event exactly once. 2. Metaphor: A stamp machine. A document labeled 'ID: 123' passes by. It already has a 'Processed' stamp. The machine sees the stamp and lifts its arm, refusing to stamp it again. 3. Action: Skipping. 4. Layout: Factory line.	After "## 4) Retry（再試行）は“べき等性”とセットで♻️"
124	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_success_rate_graph.png	./picture/firebase_notification_fcm_ts_study_017_success_rate_graph.png	Theme: Success Rate Monitoring Labels to Render: - Y-Axis: "Success %" - X-Axis: "Time" - Line: "99% (Healthy)" - Drop: "Dip (Incident)" Visual Details: 1. Core Concept: Visualizing system health. 2. Metaphor: A line graph on a monitor. The line is high and green (99%). Suddenly there is a small dip in red, alerting the operator. 3. Action: Monitoring. 4. Layout: Dashboard.	After "## ミニ課題：エラー率を可視化する（ダッシュボードの夢）📊"
125	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_ai_log_doctor.png	./picture/firebase_notification_fcm_ts_study_017_ai_log_doctor.png	Theme: AI Analyzing Error Logs Labels to Render: - Input: "Raw Logs" - AI: "Diagnosis" - Output: "'Token Expiry Spike'" Visual Details: 1. Core Concept: AI finding patterns in logs. 2. Metaphor: A robot doctor examining a patient's chart (Logs). The robot points to a specific pattern and holds up a diagnosis card. 3. Action: Diagnosing. 4. Layout: Interaction.	After "## おまけ：AIで“エラーログ分析”を回す🤖🩺"
126	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_health_tripod.png	./picture/firebase_notification_fcm_ts_study_017_health_tripod.png	Theme: Three Pillars of Notification Health Labels to Render: - 1: "Result Check" - 2: "Cleanup" - 3: "Visualize" Visual Details: 1. Core Concept: The three essential actions for maintaining system health. 2. Metaphor: A tripod or triangle supporting a 'Healthy System' orb. The legs are labeled 'Result Check', 'Cleanup', and 'Visualize'. 3. Action: Support. 4. Layout: Triangle.	After "通知配信の健康診断は、ざっくりこの3点だけ押さえればOKです👇"
127	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_subcollection_vs_array.png	./picture/firebase_notification_fcm_ts_study_017_subcollection_vs_array.png	Theme: Token Storage: Subcollection vs Array Labels to Render: - Array (Bad): "Mixed Pile" - Subcollection (Good): "Individual Boxes" - Action: "Easy Delete" Visual Details: 1. Core Concept: Why subcollections are better for management. 2. Metaphor: Comparison. Left (Array): A messy pile of papers in one box (Hard to remove one). Right (Subcollection): A filing cabinet with distinct folders (Easy to pull one out). 3. Action: Organization. 4. Layout: Side by side.	After "おすすめは「配列」より サブコレクションです。削除が超ラクだから🙂"
128	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_cleanup_logic.png	./picture/firebase_notification_fcm_ts_study_017_cleanup_logic.png	Theme: Send and Cleanup Logic Flow Labels to Render: - 1: "Send" - 2: "Check Result" - 3: "If Invalid -> Delete" - 4: "Log" Visual Details: 1. Core Concept: The logic flow of the cleanup function. 2. Metaphor: A recycling plant line. 1. Truck delivers (Send). 2. Scanner checks items (Check Result). 3. Robot arm picks bad items and puts them in shredder (Delete). 4. Clerk writes report (Log). 3. Action: Processing. 4. Layout: Flowchart.	After "下のコードは「あるユーザーの全トークンに送って、失敗したトークンを掃除し、結果をログ＆Firestoreに残す」役です📌"
129	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_log_threading.png	./picture/firebase_notification_fcm_ts_study_017_log_threading.png	Theme: Log Threading by Execution ID Labels to Render: - Bad: "Mixed Logs" - Good: "Grouped by ID" Visual Details: 1. Core Concept: Untangling concurrent logs. 2. Metaphor: Top: Tangled multi-colored headphone wires (Hard to trace). Bottom: Neatly combed parallel wires, each one a single color (Easy to trace). 3. Action: Untangling. 4. Layout: Comparison.	After "2nd gen（Cloud Runベース）は同時処理が起きるので、ログが交互に混ざることがあります🌀"
130	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_error_sorting.png	./picture/firebase_notification_fcm_ts_study_017_error_sorting.png	Theme: Error Code Sorting Labels to Render: - Bin A: "Delete (Invalid)" - Bin B: "Keep (Unknown/Quota)" Visual Details: 1. Core Concept: Deciding which errors warrant deletion. 2. Metaphor: A sorting station. Items labeled 'Invalid' go into the 'Delete' bin. Items labeled 'Unknown' or 'Quota' go into the 'Keep/Retry' bin. 3. Action: Sorting. 4. Layout: Bins.	After "## 4) 失敗コードの“ざっくり辞書”📚🧠"
131	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_token_aging.png	./picture/firebase_notification_fcm_ts_study_017_token_aging.png	Theme: Token Aging Timeline Labels to Render: - 0 Days: "Active" - 30 Days: "Stale (Warning)" - 270 Days: "Expired (Delete)" Visual Details: 1. Core Concept: Tokens decaying over time. 2. Metaphor: A freshness timeline. An apple starts shiny red (Active). Turns slightly wrinkled (Stale). Finally turns into a core (Expired). 3. Action: Aging. 4. Layout: Timeline.	After "* 1か月以上つながってない端末トークンはstale（古い）"
132	docs/firebase_notification_fcm_ts_study_017.md	firebase_notification_fcm_ts_study_017_ai_ops_report.png	./picture/firebase_notification_fcm_ts_study_017_ai_ops_report.png	Theme: AI Operations Report Labels to Render: - Input: "Raw Logs" - AI: "Analyze" - Output: "Health Report (Grade A)" Visual Details: 1. Core Concept: Generating readable reports from logs. 2. Metaphor: A pile of messy log papers goes into a futuristic printer (AI). A neat, summarized document comes out with a 'Health Grade: A' stamp. 3. Action: Reporting. 4. Layout: Input-Process-Output.	After "Firestoreの pushSendLogs を数十件まとめて、"
133	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_three_principles.png	./picture/firebase_notification_fcm_ts_study_018_three_principles.png	Theme: Three Principles of Notification Text Labels to Render: - Short: "短い" - Clear: "伝わる" - Safe: "安全" Visual Details: 1. Core Concept: The three pillars of good notification text. 2. Metaphor: A trophy or victory podium with three steps. Step 1 is "Short" (Stopwatch). Step 2 is "Clear" (Lightbulb). Step 3 is "Safe" (Shield). 3. Action: Standing firm. 4. Layout: Podium view.	After "通知文は“短距離走”🏃💨 だから 短い・伝わる・安全 の3点セットで勝ちにいきます🙂👍"
134	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_structure_breakdown.png	./picture/firebase_notification_fcm_ts_study_018_structure_breakdown.png	Theme: Notification Structure Breakdown Labels to Render: - Title: "見出し (40字)" - Body: "要点 (120字)" - Data: "IDのみ" Visual Details: 1. Core Concept: Anatomy of a notification. 2. Metaphor: A dissected smartphone notification banner. The 'Title' is highlighted in bold. The 'Body' is a concise sentence. The 'Data' is shown as a hidden gear or chip behind the banner. 3. Action: Analysis. 4. Layout: Exploded view.	After "なのでこの教材では、通知文をこう割り切ります👇"
135	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_lockscreen_privacy.png	./picture/firebase_notification_fcm_ts_study_018_lockscreen_privacy.png	Theme: Privacy Risk on Lock Screen Labels to Render: - Lock Screen: "ロック画面" - Private: "個人情報 (NG)" - Safe: "安全な文 (OK)" Visual Details: 1. Core Concept: Sensitive info visible on locked phone. 2. Metaphor: A smartphone on a desk. The screen is locked (Padlock icon). A notification pops up. One version shows a red warning "Tel: 090..." (Dangerous). Another shows a green check "New Message" (Safe). 3. Action: Warning vs Safety. 4. Layout: Comparison.	After "つまり「個人情報やNG表現が混ざると事故」になりやすい⚠️"
136	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_ai_pipeline.png	./picture/firebase_notification_fcm_ts_study_018_ai_pipeline.png	Theme: AI Notification Processing Pipeline Labels to Render: - Client: "コメント投稿" - Functions: "AI整形" - FCM: "通知送信" - User: "受信" Visual Details: 1. Core Concept: Server-side AI processing. 2. Metaphor: A factory line. Raw material (Comment) enters the 'Functions' factory. Inside, a robot (AI) polishes it into a gem. The gem is put in a box (FCM) and shipped to the user. 3. Action: Processing. 4. Layout: Left to right flow.	After "今回の「コメント作成→自動で通知送信（第14章）」の流れに自然に混ぜるなら、サーバー側（Functions）で整形するのが王道です⚡🛠️"
137	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_premask_logic.png	./picture/firebase_notification_fcm_ts_study_018_premask_logic.png	Theme: Pre-masking Logic Labels to Render: - Input: "Email: abc@..." - Filter: "Pre-mask" - Output: "Email: [email]" Visual Details: 1. Core Concept: Removing sensitive data before AI. 2. Metaphor: A privacy filter. Text containing a phone number and email passes through a screen. The numbers and email addresses are replaced by safe placeholder blocks. 3. Action: Filtering. 4. Layout: Input-Process-Output.	After "Step 2：前処理（個人情報っぽいのを雑にマスク）🧽🔎"
138	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_ai_prompt_rules.png	./picture/firebase_notification_fcm_ts_study_018_ai_prompt_rules.png	Theme: AI Prompt Rules Labels to Render: - Rule 1: "JSON Only" - Rule 2: "No PII" - Rule 3: "Max 120 chars" - AI: "Understanding" Visual Details: 1. Core Concept: Giving clear instructions to AI. 2. Metaphor: A teacher (Developer) pointing to a blackboard with 3 strict rules. A robot student (AI) nods in understanding, holding a pen ready to write JSON. 3. Action: Instruction. 4. Layout: Classroom setting.	After "Step 3：AI整形（“短い・伝わる・安全” を指示する）🤖📝✨"
139	docs/firebase_notification_fcm_ts_study_018.md	firebase_notification_fcm_ts_study_018_post_check_fallback.png	./picture/firebase_notification_fcm_ts_study_018_post_check_fallback.png	Theme: Post-Check and Fallback Labels to Render: - Output: "AI Text" - Check: "Risk Found!" - Action: "Fallback" - Final: "Safe Text" Visual Details: 1. Core Concept: Safety net for AI output. 2. Metaphor: A quality control checkpoint. A package (AI Text) comes down the line. A scanner detects 'Risk'. A mechanical arm grabs it and replaces it with a pre-packaged 'Safe Box' (Fallback). 3. Action: Replacement. 4. Layout: Factory line.	After "Step 4：後処理（最後は“コードで守る”🚧）🧯"
140	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_gatekeeper_concept.png	./picture/firebase_notification_fcm_ts_study_019_gatekeeper_concept.png	Theme: The Gatekeeper Concept Labels to Render: - Notification: "通知" - Gatekeeper: "AI Gate" - Value Check: "価値判定" - Action: "Pass/Block" Visual Details: 1. Core Concept: The Gatekeeper (Quality Control) for notifications. 2. Metaphor: A gatekeeper (AI) standing before the "Send" button. Checking a notification for "Value". If Value < Low, it goes to Trash. If Value > High, it goes to User. 3. Action: Filtering. 4. Layout: Gate mechanism.	After "1) まず考え方：通知は「価値がある時だけ」でいい😇🧯"
141	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_workflow_diagram.png	./picture/firebase_notification_fcm_ts_study_019_workflow_diagram.png	Theme: Workflow Diagram Labels to Render: - Step 1: "Comment" - Step 2: "Function" - Step 3: "AI Judge" - Step 4: "Log" - Step 5: "Send/Stop" Visual Details: 1. Core Concept: The Workflow Diagram. 2. Metaphor: Flowchart: Firestore (New Comment) -> Functions Trigger -> AI Judge (Brain) -> Firestore (Log Decision) -> [Branch] -> Yes (Send FCM) / No (Stop). 3. Action: Process flow. 4. Layout: Left to right.	After "3) 最小構成の“簡易ワークフロー”図🗺️🧩"
142	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_rule_funnel.png	./picture/firebase_notification_fcm_ts_study_019_rule_funnel.png	Theme: Rule-based Filtering Funnel Labels to Render: - Layer 1: "Self-Comment Rule" - Layer 2: "Mute Rule" - Layer 3: "AI Judge" - Output: "Clean Notification" Visual Details: 1. Core Concept: Rule-based filters before AI. 2. Metaphor: A funnel. Top layer: "Self-Comment Rule" (Blocks some). Middle layer: "Mute Rule" (Blocks more). Bottom layer: "AI Judge" (Final check). 3. Action: Filtering. 4. Layout: Vertical funnel.	After "A. いきなりAIに丸投げしない🙅‍♂️➡️🙆‍♀️"
143	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_json_output.png	./picture/firebase_notification_fcm_ts_study_019_json_output.png	Theme: Strict JSON Output Labels to Render: - AI: "Model" - Output: "JSON Box" - Server: "Parser" - Bad Output: "Text Blob (x)" Visual Details: 1. Core Concept: Strict JSON output from AI. 2. Metaphor: AI Robot outputting a perfect cubic box labeled "JSON". Bad output would be a messy blob. The box fits perfectly into the "Server Parser" slot. 3. Action: Fitting. 4. Layout: Process flow.	After "C. 出力は「JSONっぽく」ではなく、JSONで📦✅"
144	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_decision_log.png	./picture/firebase_notification_fcm_ts_study_019_decision_log.png	Theme: Decision Log Structure Labels to Render: - Field: "send: true" - Field: "importance: 85" - Field: "reason: 'Urgent'" - Doc: "Log ID" Visual Details: 1. Core Concept: The Decision Log structure. 2. Metaphor: A logbook or database record view. Fields: commentId, send: true/false, importance: 85, reason: "Urgent reply". 3. Action: Recording. 4. Layout: Record view.	After "5-1) Firestoreに“判定ログ”を置く📚🗃️"
145	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_fallback_safety.png	./picture/firebase_notification_fcm_ts_study_019_fallback_safety.png	Theme: Fallback Logic on Parse Error Labels to Render: - Input: "Broken JSON" - Action: "Catch Error" - Rule: "Is Mention?" - Result: "Send" Visual Details: 1. Core Concept: Fallback Logic on Parse Error. 2. Metaphor: A broken JSON box (Parse Error). A safety net catches it. The net is labeled "Fallback Rule (Mention = Send)". It routes to "Send" instead of crashing. 3. Action: Catching. 4. Layout: Safety net.	After "パース失敗時の保険：安全側（例：メンション/返信なら送る）"
146	docs/firebase_notification_fcm_ts_study_019.md	firebase_notification_fcm_ts_study_019_remote_config_threshold.png	./picture/firebase_notification_fcm_ts_study_019_remote_config_threshold.png	Theme: Adjusting Threshold with Remote Config Labels to Render: - Dashboard: "Remote Config" - Slider: "Threshold: 70" - Server: "Functions (Updated)" Visual Details: 1. Core Concept: Adjusting Threshold with Remote Config. 2. Metaphor: A cloud dashboard with a slider bar labeled "Threshold". Sliding it from 60 to 70 instantly updates the "Functions" server behavior without redeploying code. 3. Action: Sliding. 4. Layout: Dashboard view.	After "「60→70」にしたいだけで再デプロイはしんどいので、閾値は Remote Config に逃がすと気持ちいいです🙂✨"
147	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_stability_pillars.png	./picture/firebase_notification_fcm_ts_study_020_stability_pillars.png	Theme: Four Pillars of Notification Stability Labels to Render: - Pillar 1: "Size Limit" - Pillar 2: "Rate Limit" - Pillar 3: "Retry" - Pillar 4: "Secure HTTPS" Visual Details: 1. Core Concept: The 4 Pillars of Stability (Size, Rate, Retry, Secure). 2. Metaphor: A bridge supported by 4 pillars. Pillar 1: "Size Limit". Pillar 2: "Rate Limit". Pillar 3: "Retry Logic". Pillar 4: "Secure HTTPS". The bridge carries the "Notification" truck safely. 3. Action: Supporting. 4. Layout: Structure view.	After "通知で壊れやすいのは、送信コードそのものより 運用の“当たり前” です😇"
148	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_contract_interface.png	./picture/firebase_notification_fcm_ts_study_020_contract_interface.png	Theme: Standardized Notification Contract Labels to Render: - Interface: "Notification Contract (JSON)" - Plug A: "Node.js" - Plug B: ".NET" - Plug C: "Python" Visual Details: 1. Core Concept: The Standardized Contract (Interface). 2. Metaphor: A universal plug/socket. The "Notification Contract" (JSON) is the socket. Different plugs labeled "Node.js", ".NET", "Python" all fit into it perfectly. 3. Action: Connecting. 4. Layout: Centralized interface.	After "送信処理を移植しやすくする最短ルートは、送信モジュールの入力を JSON 契約に固定することです📦✨"
149	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_route_a_node.png	./picture/firebase_notification_fcm_ts_study_020_route_a_node.png	Theme: Route A: Node.js Architecture Labels to Render: - Client: "Client" - Server: "Functions (Node.js)" - Tool: "Admin SDK" - FCM: "FCM" Visual Details: 1. Core Concept: Node.js based architecture. 2. Metaphor: Architecture diagram. Client -> Functions (Node.js) -> Admin SDK -> FCM. Highlight "Node.js" in green. 3. Action: Data flow. 4. Layout: Horizontal flow.	After "ルートA：Cloud Functions（Node）で完成させる ⚡🟩"
150	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_route_b_dotnet.png	./picture/firebase_notification_fcm_ts_study_020_route_b_dotnet.png	Theme: Route B: .NET Architecture Labels to Render: - Client: "Client" - Server: "Functions (.NET 8)" - Tool: "Admin SDK (C#)" - FCM: "FCM" Visual Details: 1. Core Concept: .NET based architecture. 2. Metaphor: Same diagram but with ".NET 8" in blue. Client -> Cloud Run (.NET) -> Admin SDK (C#) -> FCM. 3. Action: Data flow. 4. Layout: Horizontal flow.	After "ルートB：Cloud Run functions（.NET 8）で送る 🟦✨"
151	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_route_c_python.png	./picture/firebase_notification_fcm_ts_study_020_route_c_python.png	Theme: Route C: Python Architecture Labels to Render: - Client: "Client" - Server: "Functions (Python 3.13)" - Tool: "Admin SDK (Python)" - FCM: "FCM" Visual Details: 1. Core Concept: Python based architecture. 2. Metaphor: Same diagram but with "Python 3.13" in yellow/blue. Client -> Cloud Run (Python) -> Admin SDK (Python) -> FCM. 3. Action: Data flow. 4. Layout: Horizontal flow.	After "ルートC：Cloud Run functions（Python 3.13）で送る 🐍✨"
152	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_ai_logic_proxy.png	./picture/firebase_notification_fcm_ts_study_020_ai_logic_proxy.png	Theme: AI Logic Architecture Labels to Render: - Client: "App" - Proxy: "AI Logic (Shield)" - AI: "Gemini (Brain)" - Action: "Safe Call" Visual Details: 1. Core Concept: AI Logic Architecture. 2. Metaphor: App -> AI Logic Proxy (Shield) -> Gemini (Brain). The Shield filters request/response. 3. Action: Protection. 4. Layout: Layered view.	After "通知文の生成は Firebase AI Logic で「安全に」✨"
153	docs/firebase_notification_fcm_ts_study_020.md	firebase_notification_fcm_ts_study_020_gemini_cli_workflow.png	./picture/firebase_notification_fcm_ts_study_020_gemini_cli_workflow.png	Theme: Gemini CLI Workflow Labels to Render: - User: "Terminal Input" - CLI: "Gemini CLI" - Output: "Code & Tests" - Action: "Generate" Visual Details: 1. Core Concept: Gemini CLI Workflow. 2. Metaphor: A terminal window. User inputs natural language ("Check payload size"). Gemini CLI outputs code and test cases. 3. Action: Coding. 4. Layout: Terminal view.	After "Gemini CLI で「調査→実装→テスト」まで寄せる 💻✨"