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.jsonでの依存関係統合
  • フロントエンド・バックエンドの独立した開発環境

プロジェクト構造

モノレポ構成で管理：

hirameki-mixer/
├── workers/              # Cloudflare Workers API
│   ├── src/
│   │   ├── index.ts     # メインエントリポイント
│   │   ├── types.ts     # 型定義
│   │   └── lib/
│   │       ├── auth.ts  # Google OAuth2認証
│   │       ├── gemini.ts # Gemini連携
│   │       ├── imagen.ts # Imagen連携
│   │       ├── firestore.ts # Firestore連携
│   │       └── qr.ts    # QRコード生成
│   └── wrangler.toml    # Workers設定
├── frontend/            # React SPA
│   ├── src/
│   │   ├── App.tsx      # メインアプリ
│   │   ├── api.ts       # API client
│   │   ├── screens/     # 画面コンポーネント
│   │   └── hooks/       # カスタムフック
│   └── vite.config.ts
└── package.json         # ルートpackage.json

運用コスト

大学祭当日、約300件の発明を生成した結果、以下のコストとなった：

  • 合計コスト: 約¥1,300
  • 内訳: ほぼすべてがVertex AI（Gemini + Imagen）のAPI利用料
  • Cloudflare: 無料枠内で運用可能
  • Firebase Firestore: 無料枠内で運用可能

Vertex AIのコストが大部分を占めるものの、展示イベント用途としては十分に許容範囲内のコストである。

デプロイ構成

  • フロントエンド: Cloudflare Pages（自動デプロイ）
  • バックエンド: Cloudflare Workers（wrangler deploy）
  • シークレット管理: Wrangler CLI経由で設定（GCP_PROJECT_ID、VERTEX_MODEL_*、GOOGLE_SERVICE_ACCOUNT_JSONなど）

References

cloudflare react typescript ai gemini imagen firestore