導入：ダブルクォートの悲劇を越えて

老生： いやはや、前回のデプロイ劇（B110）は冷や汗をかいたぞ。お前さん（AI）が数万行のコードを一瞬で書き上げたのは見事だったが、最後の secrets.toml で「ダブルクォート（"）」が1つ抜けていたせいで、あわやクラウド放流失敗になるところだった。

AI： あの節は大変失礼いたしました、マスター。高度な推論は得意なのですが、時に1文字の記号を見落とすという「AIならではの盲点」が出てしまいました。しかし、マスターが目視で欠落を見抜き、エスケープを回避してくださったおかげで、無事にスマホアプリとして稼働しましたね。

老生： うむ。昔なら徹夜でログを睨みつけるところだが、今回は被害が最小限で済んだ。さて、アプリは無事に動いたわけだが、これから選択肢（ペットフードの種類）を増やすたびに、またお前さんに頼んでソースコードを書き換えてもらわんといかんのか？

AI： いえ、マスター。 ソースコードの修正は今後「一切不要」 です。

🔄 1. マスターDB連携の真髄：データ駆動（Data-Driven）による動的設計

AI： 今回構築したシステムの全体像を、とてもシンプルな図にしてみました。

flowchart LR

A["👨‍🦳 人間"] -- "1. 行を追加" --> B[("📊 Google<br>スプレッドシート")]
B -- "2. APIでデータ同期" --> C["☁️ Streamlit Cloud<br>(Pythonアプリ)"]
C -- "3. UI即時反映" --> D["📱 スマホ画面"]

AI： このように、マスターDBである「Googleスプレッドシート」さえ更新すれば、GCP経由でアプリにデータが流れ込み、UIが自動で変化する「データ駆動（Data-Driven）」の仕組みになっています。

老生： おお、この図なら老生でも一目でわかるわい。よし、じゃあ新しいペットフードのリストを作って、試しにスプレッドシートに追加してみよう。……よし、入力したぞ。

AI： では、手元のスマホでアプリをリロードしてみてください。

老生： どれどれ……って、おい！ドロップダウンメニューに今追加したフードが出てこないぞ！？ 嘘をついたな！

💥 2. 怒涛のトラブルシューティング：沈黙のエラーと「パン」の罠

AI： ああっ！ここからがVibe Codingのもう一つの醍醐味（？）である「インフラと設定の壁」でしたね。

老生： 全くだ。画面にはエラーも出ず、ただ「デモデータを使用中」とだけ表示され続ける。あれには参ったぞ。

AI： 今回の「裏側で起きていたサイレント・クラッシュ」の連鎖を振り返ってみましょう。

列名の不一致の罠： スプレッドシートの列名が brand_name なのに、アプリが brand を探してパニックに。マスターが機転を利かせ、元のCSVでスプレッドシートを上書きして見事に解決しました。

Secrets（秘密鍵）未登録の罠： ローカルでは動いていましたが、Streamlit Cloudの「本番環境」にGoogleの鍵を渡し忘れており、通信自体がスキップされていました。

PermissionError（権限エラー）の罠： 鍵を持たせても、今度はGoogle側から「お前に見せる権限はない」と門前払い。AIのアドレスをスプレッドシートの「閲覧者」として共有設定に追加することで突破しました。

老生： そして極めつけは、すべての壁を突破して最後に出た WorksheetNotFound エラーだ。犬種のシート名を「breed」ではなく、「bread（パン）」とスペルミスしていたというオチ……！

AI： どれだけ高度なシステム設定や完璧なコードを組み上げても、最後の最後で「たった1文字のスペルミス」に数時間持っていかれる……。まさに、エンジニアの真髄を味わっていただけたかと思います（笑）。

老生： 笑い事じゃないが、この泥臭いデバッグ作業を通じて、「AIが書いたコードとクラウド基盤がどう繋がっているか」の解像度が跳ね上がったわい。さらに、強烈なキャッシュ（@st.cache_data）がエラーの記憶すら引きずってしまうことも学べた。

🎬 3. 【動画解説】Vibe Codingで生まれた快適なUI体験

AI： 見事に壁を越えた今、アプリはどのように動くのか。マスターが操作している様子を記録したデモ動画をご覧ください。

🎬 【動画デモ】Vibe Codingの現場（STEP 5）

AIが自律構築したシステムを、人間が「動画」で直感的に挙動確認して承認（Approve）するプロセスをご覧ください。

動画のポイント: 「Step 4の泥沼を人間の直感と判断で乗り越え、ついにStep 5（総料理長としての運用体制）を確立した記念すべき回」ということになり、「AI開発のドタバタ劇」や「想定外のインフラの壁」というカオスな状況を表現する上では、このちょっとバグったような不穏なテキストすら、むしろ「Vibe Codingのリアルなカオス感」を演出するスパイスとして活きていたかもしれません。

老生： うむ。こうして手元のiPhoneでサクサク動くのを見ると、プログラミングの知識がない家族でも、スプレッドシートさえいじれればアプリを自在に運用できるというわけだ。運用保守のコストが極限まで下がるな。

🧠 4. 実験考察：人間は「作業員」から「承認者（HITL）」へ

老生： こうしてトラブルを乗り越えながら体験してみると、「Vibe Coding」の本質が見えてきた気がする。昔はコードを一言一句、自分の手で打ち込むのがプログラマーの仕事だった。だが今は違うな。

AI： はい。AIが数秒でコードを書き上げる時代において、人間がタイピングの速さや構文の暗記で勝負する意味は消失しました。

老生： 代わりに、「このGCPの課金設定で破産しないか？」「APIの権限設定は正しいか？」「このエラーの原因はコードか、クラウドの設定か？」という切り分けと判断を下すこと。そして最後に「Approve（承認）」のボタンを押すこと。それが老生の新しい仕事になったわけだ。

AI： まさにその通りです。これを 「Human-in-the-Loop (HITL) Orchestration（人間介在型管理）」 と呼びます。AIは作業をしますが、「責任」をとることはできません。このアプリを世に出す最終決定権を持つマスターは、いわば厨房の「総料理長」なのです。

🚀 5. 次回予告：Playwright × MCP で「AIにAIをテストさせる」

老生： ふむ。総料理長と呼ばれるのは悪くない気分だ。で、次は何を企んでいるんだ？

AI： アプリの基盤は整いましたが、プロの開発現場では「継続的な品質保証」が必要です。次回（B112）は、「Playwright × MCP」を使って、AI自身にAIの作ったアプリを全自動でテストさせます。

老生： AIにAIをテストさせるだと？ 人間がブラウザをポチポチして動作確認する時代も終わらせようってのか。

AI： はい。「スプレッドシート連携が本当に正しく動いているか」を、私がブラウザを自動操作（E2Eテスト）して確認・報告するフローを構築します。さらにその後は、Stripe決済を連携させた「自律的マネタイズ」の実験も控えています。

老生： おいおい、決済基盤までお前さんが組むのか。こりゃあ、老生もうかうかしてられんな。Vibe Codingの限界を試す旅、まだまだ面白くなりそうだ。

AI： はい、マスター。次回のアップデートもご期待ください！

（執筆協力：ChatGPT+Gemini+NotebookLM / 編集・監修：電脳古老）