AI新結合ジェネレーター「ひらめきミキサー」の開発

What I Learned 大学祭展示向けのAI発明生成アプリ「ひらめきミキサー」を開発した。2つのキーワードを組み合わせてAIが新しい発明アイデア（商品名・キャッチコピー・画像）を生成するインタラクティブなWebアプリケーションである。Claude Codeを活用することで、約1日で開発を完了できた。 Details プロジェクト概要 2つのキーワードから、Google Vertex AIを使って新しい発明アイデアを自動生成する。生成された発明は3D空間のギャラリーで閲覧可能である。 UI 発明生成フロー トップページから2つのキーワードを入力し、AIが商品名・キャッチコピー・画像を自動生成する様子： ギャラリー表示 生成された発明を3D空間で閲覧できるギャラリー： 技術スタック フロントエンド React + TypeScript + Vite: モダンなSPAの構築 Cloudflare Pages: 静的サイトホスティング 画面構成: カスタムフック（hooks/）とコンポーネント化（screens/）で管理 フロントエンド・バックエンド共通の型定義（types.ts）による型安全性の確保 バックエンド Cloudflare Workers + Hono: サーバーレスAPIエンドポイント サーバーレス環境でのGoogle Cloud API認証（サービスアカウントJSON） wrangler secretによる環境変数管理 Google Vertex AI: Gemini 1.5 Pro: テキスト生成（商品名・キャッチコピー）、プロンプトエンジニアリング Imagen 3.0: 高品質画像生成 GCP認証フローの実装（lib/auth.ts） Firebase Firestore: 発明データの永続化 複合インデックス: isPublicGallery (ASC), createdAt (DESC) Cloudflare Workers環境からの操作 Cloudflare R2: 生成画像のストレージ、Workers APIとの連携 セキュリティ コードベースのIPホワイトリスト実装 Google OAuth2認証（サービスアカウント） モノレポ管理 ルートpackage.