導入

「コードを1行も書かずに、スプレッドシート連携のWebアプリがスマホで動く」——そんな時代が本当にやってきました。

本記事は、前回の閑話108：生成AIによる個人開発の実験と考察

で提示した仮説—— 「AI自律型エージェント主導の開発フローは、特定の小規模アプリにとどまらず、一般的なWebアプリケーション構築へどこまで適用・拡張可能か？」 という実験的問いに対する具体的な検証と展開の第1弾（B110）です。

今回は、AI自律型エージェント Antigravity と Gemini 3.1 Pro をパートナーに迎え、愛犬・愛猫のための「給餌量計算Webアプリ（Lab_gr）」を開発・デプロイするまでのリアルな全記録をお届けします。

開発PC（Mac/Ubuntu）での環境構築から、Googleスプレッドシートとのリアルタイム連携、GitHub管理、そしてStreamlit Community Cloudへの本番デプロイまで、人間が直接打ち込んだコードは「0行」 。全体の Quota消費も累計わずか61% で本番稼働まで貫通しました。

しかし、その道のりは決して「ボタン一発で全自動」というおめでたい話だけではありませんでした……。

🎨 全体像とアーキテクチャ

今回採用した開発プロセスは、人間が「書き手」から「意思決定者・承認者（HITL: Human-in-the-Loop Orchestrator）」へとシフトする次世代フローです。

Antigravityを活用した開発の5ステップ

1. STEP 1：要件定義と構造化
   • 大容量コンテキストを持つGemini 3.1 Proが、プロジェクト構造と最適なホスティング先（Streamlit Cloud）を提案。
2. STEP 2：多角的ペルソナレビュー（シフトレフト）
   • セキュリティ・SRE・コスト・UXの4つの視点で事前検証し、ビルドエラーの芽を事前摘出。
3. STEP 3：自律コーディング（実装）
   • Antigravityが .antigravity/rules.md に従い、Pythonコードと依存関係（requirements.txt）を自律生成。
4. STEP 4：ローカル検証とブラウザテスト
   • ローカルサーバー（Streamlit）を立ち上げ、UIやデータの整合性を検証。
5. STEP 5：本番環境へのデプロイ
   • GitHub連携、Secrets設定、クラウド放流を一括実行。

🎬 【動画デモ】Vibe Codingの現場（STEP 3 ➔ STEP 4）

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

動画のポイント: スプレッドシート（マスターDB）の「ロイヤルカナン」等のデータをAIが自動読み込み。人間は手元のiPhoneで計算ロジックと画面をチェックし、問題なければデプロイを承認（Approve）します。

🔍 泥臭いトラブルシューティング：たった1文字の"（ダブルクォート）が起こしたフリーズ

ローカルテストを終え、いざStreamlit Community Cloudへ本番放流（STEP 5）しようとしたその時、最大の試練が訪れました。

1. Secrets設定での「Invalid format」エラー

GCPサービスアカウントキー（JSON）を .streamlit/secrets.toml に転記した際、何度試してもStreamlit Cloudの「Deploy!」ボタンがグレーアウトして押せない状態に。

• 原因: TOMLファイルの最終行で、ダブルクォーテーション " が たった1文字欠落 していたこと。
• 教訓: LLMは高度な推論やコード構築が得意な反面、「記号が1文字足りない」といった厳密な構文チェックで盲目になることがあります。

2. GCPプライベートキーのエスケープ地獄

private_key 内の改行コード（\n）がTOMLの構文エラーを引き起こす問題に対し、最終的にTOMLのリテラル文字表記である '''（シングルクォート3つ） で全体を囲むことで解決しました。

# ⭕️ エスケープ問題を一発解消した設定記述
[gcp_service_account]
type = "service_account"
project_id = "your-project-id"
private_key = '''-----BEGIN PRIVATE KEY-----
MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgw...
-----END PRIVATE KEY-----'''
client_email = "your-service-account@your-project.iam.gserviceaccount.com"

[app]
spreadsheet_id = "your-spreadsheet-id"

🎧 音声解説（NotebookLM Deep Dive） 今回の「閑話108からの一般化への実験」や泥臭いトラブル劇、そしてVibe Codingの本質について、AI2人が熱く語り合う音声ポッドキャストを作成しました。ドライブ中や作業BGMにぜひお聴きください！

💡 まとめ：人間は「総料理長」になれ AIがどれほど進化しても、クラウドの課金責任やセキュリティ権限、そして「このアプリを世に出すか」という最終決定権（Approve）を持つのは人間です。

AIに玉ねぎの刻み（コード記述）を任せ、人間は味付けと最後の盛り付けをチェックする「総料理長」として振る舞うこと。これこそが「閑話108」から一歩踏み出した、現代のVibe Coding時代に求められるハッカースピリットです。

📂 一次資料アーカイブ（開発ドキュメント）

今回の開発において、AI自律型エージェント（Antigravity）が自律生成した思考ログ・設計ドキュメントの完全版（Markdown）を公開しています。

• 📄 Implementation Plan（実装計画書）をブラウザで見る
• 📄 Walkthrough（動作検証・手順書）をブラウザで見る

次回第2回では、「マスターDB（スプレッドシート）を書き換えて、コード無修正でUIが即時変貌する動的設計」についてさらに深掘りします！

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