Antigravityを使ってGeminiAPI（NanobananaPro）と連携して挿絵メーカーを作った

Antigravityを使ってGeminiAPI（NanobananaPro）と連携して挿絵メーカーを作った内容のスライド

Transcript

1. Antigravityを使って GeminiAPI（NanobananaPro）と連携して 挿絵メーカーを作った コーディングエージェント × 画像生成AIによるWebアプリ開発の全記録
2. 導入 背景とアプリ開発の目的 同人誌・ラノベ執筆における挿絵制作の課題解決 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 開発の動機と課題 同人誌執筆において挿絵の作成・管理は大変で、生成AIとの格闘が続く 単体の画像生成AIでは「キャラの見た目を保ったまま小説シーンを描く」ことが困難 コーディングエージェント（Antigravity）で実践的なアプリを作ってみたい 採用した技術スタック コーディング: Antigravity（自律型AIコーディングエージェント） 画像生成: Gemini API（NanobananaPro / gemini-3-pro-image-preview ） 開発所要時間: 約5時間で要件定義・設計・実装・動作確認まで完了 2
3. 目次 アジェンダ Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 第1章 作業準備・企画・要件定義（工程管理 / 企画書 / 要件定義書） 第2章 システム設計（基本設計 / データモデル / データフロー / UI設計） 第3章 開発工程と画面実装（Next.js開発 / 画面機能 / API・課金設定） 第4章 公開作業と設計ポイント（GitHub公開 / Web選定 / IndexedDB / コスト） まとめ 今後の展望（小説メーカー / 4コマ漫画メーカー） 3
4. 1.1 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 作業準備：ウォーターフォール工程管理 Antigravityへの初期指示とフォルダ構成の構築 工程に沿った管理フォルダの自動生成 「企画・要件定義 ➔ 設計 ➔ 開発 ➔ 公開」の4工程を明確に分離 ├── README.md ├── 01_企画・要件定義/ │ ├── 01_企画書.md │ └── 02_要件定義書.md ├── 02_設計/ │ ├── 01_基本設計.md │ └── 02_画面UI設計.md ├── 03_開発/ │ ├── README.md │ └── src/ └── 04_公開/ ├── 01_ビルド・デプロイ手順.md └── 02_リリースノート.md # プロジェクト全体概要・工程ガイド # コンセプト、目的、ターゲット、機能概要 # 機能要件・非機能要件・画面一覧 # 全体構成・システム構成・データフロー # 画面遷移、UIレイアウト、プロンプト仕様 # 開発環境セットアップ・コード構造ガイド # アプリケーションソースコード # ビルド、公開、配布手順 # バージョン履歴・変更点 4
5. 1.2 企画書：コンセプトと主要4大機能 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 「立ち絵 × シーン文章 ＝ シーンにぴったりの挿絵」 コアコンセプト キャラビジュアル固定: 登録した立ち絵を元に顔・髪型・衣装の一貫性を維持 文脈に合わせた生成: 小説本文からポーズ・表情・背景・雰囲気をAIが自動解析 主要4大機能 i. 小説プロジェクト管理: 複数小説の作成・切り替え、あらすじメモ管理 ii. キャラクター管理: 立ち絵登録、外見特徴MD自動生成、正面・横向き立ち絵自動生成 iii. シーン管理: 小説本文管理、登場キャラ選択、シーン設定MD自動生成 iv. 挿絵生成＆出力: 4構図並列同時生成、自動履歴保存、ローカルダウンロード 5
6. 1.3 要件定義：機能要件と非機能要件 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 立ち絵解析から4構図並列生成までの機能定義 分類 小説管理 キャラ管理 ポーズ生成 シーン管理 挿絵生成 非機能要件 要件項目 プロジェクト切替 外見特徴＆設定MD 別アングル自動生成 シーン設定MD生成 4構図並列生成 Localhost & IndexedDB 仕様・実装内容 ヘッダーのプルダウンから瞬時に切り替え、あらすじ管理 画像から外見(Visual)自動抽出＋手動プロフィール(Profile) 保存時に正面・横向き立ち絵を裏側で並列同時生成・白背景透過 本文から登場人物状態・構図・背景をAIが自動抽出（最大2万字） 三分割／日の丸／三角形／対角線の4構図を同時生成・グリッド比較 外部非公開のローカルWebアプリ、画像は大容量IndexedDB保存 6
7. 2.1 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 基本設計：システム構成と技術スタック Next.js (React) + IndexedDB + Gemini API の構成 動作環境: ローカルPCブラウザ（Chrome推奨 / SPA構成） 選定技術スタック 実行基盤: Node.js UIフレームワーク: Next.js (React) / TypeScript スタイル: Vanilla CSS（CSSカスタムプロパティによるダークテーマ設計） データベース: IndexedDB（Dexie.js / 画像バイナリ・テキストの大容量保存） AI API連携: 画像生成: NanobananaPro API ( gemini-3-pro-image-preview ) テキスト解析: Gemini API ( gemini-3.6-flash / gemini-3.6-pro ) 7
8. 2.2 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 データモデル設計（IndexedDB スキーマ） 4つのテーブルによる親子リレーション構造 [ Novels (小説情報) ] ├── id (UUID) / title / description / createdAt / updatedAt │ ├── [ Characters (キャラクター情報) ] │ ├── id (UUID) / novelId (FK) / name │ ├── images { input, front, side } (Base64) │ └── characterVisual (MD) / characterProfile (MD) │ └── [ Scenes (シーン・挿絵情報) ] ├── id (UUID) / novelId (FK) / name / text / characterIds ├── aiSituation (MD: 構図・表情・背景指示) │ └── [ GeneratedImages (生成画像履歴) ] └── id (UUID) / sceneId (FK) / image (Blob) 8
9. 2.3 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 データフロー：キャラ登録・挿絵生成の流れ 白背景自動透過と4構図並列生成パイプライン キャラクター登録＆ポーズ生成フロー i. ユーザーが立ち絵画像をアップロード ➔ AIが外見特徴Markdownを自動抽出 ii. 保存ボタン押下でNanobananaProが正面・横向きポーズを並列同時生成 iii. Canvasで白背景を自動検出して透明（透過PNG）化 ➔ IndexedDBへ一括保存 シーン設定＆挿絵生成フロー i. 小説本文入力＆キャラ選択 ➔ Geminiがシーン設定Markdownを自動抽出 ii. 全アングル画像（元・正面・横）＋設定MDをNanobananaProへ送信 iii. 4つの構図（三分割・日の丸・三角形・対角線）を同時並列生成して2×2表示 9
10. 2.4 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 画面UI設計：3ペイン構成とデザイン方針 執筆に集中できるダークテーマ＆独立スクロール設計 画面UIレイアウト ヘッダー: タイトル、小説切り替えプルダウン、新規小説作成、機能タブ 左ペイン: 入力・設定（小説本文、キャラ選択、アスペクト比 2:3 / 3:4） 中央ペイン: シーン設定エディタ（AI抽出Markdownの微調整・2万字対応） 右ペイン: プレビュー＆4構図グリッド比較＆履歴一覧 デザイン方針 ダークテーマ: 深めのグレー（ #121214 / #1a1a1e ）＋ライトイエロー（ #ffd200 ） 独立スクロール: 入力側が長くなってもプレビュー・操作ボタンが画面内に固定 10
11. 3.1 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 開発工程：開発サーバー起動と画面実装 コマンド1発で起動するNext.jsローカル環境 開発サーバー起動コマンド cd "/Users/yoshimura/Documents/Vtuber/挿絵メーカー/03_開発" && npm run dev アクセスURL: http://localhost:3000/ 実装された画面群 小説管理画面: 小説タイトル・あらすじ入力、プロジェクト一覧カード キャラクター管理画面: 立ち絵登録、外見解析、正面・横向き自動生成、ライブラリ シーン・挿絵生成画面: 本文解析、4構図並列生成、画像ダウンロード 11
12. 3.2 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 Google AI Studioと課金・APIキー設定 NanobananaPro利用のためのAPI環境構築 APIキーの取得手順 i. Google AI Studio（aistudio.google.com）にアクセスしてダッシュボードを開く ii. APIキーを作成し、クライアントアプリ側で設定 課金（Billing）の注意点 Google AI Proに入っていても、Google AI StudioのAPI利用は別課金体系 Google CloudのBillingにチャージ（2,000円チャージ等）してAPIキーに紐づけ Billing有効化によりNanobananaPro（ gemini-3-pro-image-preview ）が利用可能に 💡 ポイント: APIキーはコードにハードコーディングせず、クライアント画面から安全に入力・保存する設計を採用していま す。 12
13. 3.3 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 開発ディレクトリとソースコード構成 Next.js (App Router) + IndexedDB (Dexie) のクリーン構造 主要ソースコード構成 src/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── globals.css └── lib/ ├── db.ts └── ai.ts # 共通レイアウト定義 # メイン画面 (SPA) と状態管理ロジック # Vanilla CSSによるダークテーマスタイル設計 # IndexedDB (Dexie.js) のデータベース定義・スキーマ # Gemini API / NanobananaPro API との通信インターフェース Antigravityの活躍: 設計書をもとに、フロントエンドUI・DBスキーマ・API通信ロジックを迷 いなく一括生成 13
14. 4.1 設計・実装の重要ポイント解説 実用性と安全性を両立させるための設計判断 Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 Webベース（Next.js）を選定した理由 自分用ツールでありながら、GitHub公開時にMacでもWindowsでも同じように動作可能 APIキーのクライアント入力方式 ソースコードにハードコーディングせず、GitHub公開時の漏洩リスクを完全に遮断 IndexedDB（Dexie.js）の選定理由 バックエンドDBサーバーを不要にし、ローカル完結で画像バイナリを大容量保存 APIコストの考慮 テスト数回で約700円消費 ➔ 外部公開サービス化にはコスト設計の壁があることを把握 14
15. まとめ Antigravity × Gemini API（NanobananaPro）挿絵メーカー開発 挿絵メーカー開発のまとめと今後の展望 AIコーディングエージェントによる超高速プロトタイピングの成功 プロジェクトの成果 Antigravityの活用により、企画から設計・実装まで約5時間で完全動作アプリが完成 NanobananaProとの連携で、キャラクター同一性を保った4構図挿絵生成を実現 今後の展開アイデア i. 小説メーカー: 挿絵だけでなくプロット・本文執筆まで一気通貫で支援するツール ii. 4コマ漫画メーカー: シーン分割とコマ割り構図を自動生成するツール GitHubにてソースコード公開中: CloneしてAPIキーを入れるだけで即座に利用可能 15