セットアップガイド

AIアプリスターターキットを簡単に始められます

動作環境

  • Node.js 18以上
  • npm または yarn
  • Googleアカウント（Gemini API用）
  • Supabaseアカウント

クイックスタート（デモモード）

APIキーやデータベース設定なしで、すぐにアプリを体験できます
npm install
npm run dev

ブラウザで http://localhost:8080 にアクセスし、画面を確認

デモモードで体験できる機能

  • サンプル画像でのギャラリー機能
  • 画像生成・編集のUI操作
  • いいね・公開設定などの機能フロー
  • 全体的なアプリの動作確認

実装モードへの切り替え

デモモードから実装モードに切り替える方法：

設定ファイルの変更

src/config/app.tsで以下の設定を変更：

export const APP_CONFIG = {
  DEMO_MODE: {
    ENABLED: false, // true から false に変更しデモモード無効化
    // ... 他の設定
  },
}

Gemini APIキーの取得

Google AI Studioでの設定

  1. Google AI Studioにアクセス
  2. Googleアカウントでログイン
  3. 「+APIキーを作成」をクリック
  4. APIキーをコピーして保存（後のステップで使用）

請求先アカウントの設定

  1. 「お支払い情報を設定」をクリック
  2. Google Cloud Consoleで請求先アカウントを設定
  3. 重要: 予算アラートの設定を推奨

Supabaseの設定

プロジェクト作成

  1. Supabaseにアクセス
  2. アカウント作成・ログイン
  3. 「New Project」をクリック
  4. プロジェクト名を入力（例: bananano-app）
  5. データベースパスワードを設定
  6. リージョンを選択（推奨: Asia Pacific (Singapore)）
  7. 「Create new project」をクリック

クライアント設定

  1. Supabaseダッシュボード上部の「Connect」をクリック
  2. 「React」と「Vite」を選択
  3. 表示された設定をコピー

環境変数の設定

  1. プロジェクトルートの.env.exampleを.envにリネーム
  2. 以下の内容を設定：
VITE_SUPABASE_URL=https://your-project-ref.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your-supabase-anon-key

データベース設定

Supabase CLIを使う場合（推奨）

CLIのインストール

npm install -g supabase

プロジェクトの初期化

# ローカル環境の初期化
npx supabase init

# リモートプロジェクトとの紐付け
npx supabase link --project-ref YOUR_PROJECT_ID

データベースマイグレーション実行

npx supabase db push

Edge Functionsの設定

# Gemini APIキーをシークレットとして設定
npx supabase secrets set GEMINI_API_KEY=your_api_key_here

# Edge Functionsをデプロイ
npx supabase functions deploy

Supabaseダッシュボードを使う場合

データベース設定

  1. Supabaseダッシュボード > 「SQL Editor」を開く
  2. 以下のマイグレーションファイルを順番に実行：
    • supabase/migrations/20250101000001_initialize_base.sql
    • supabase/migrations/20250101000002_initialize_gemini.sql
  3. 各ファイルの内容をコピー&ペーストして「Run」ボタンで実行

認証設定

メール認証の設定

  1. Supabaseダッシュボード > 「Authentication」> 「Settings」
  2. 「Confirm email」をオフにする（開発時）
  3. 本番環境では: カスタムSMTPを設定後、オンにすることを推奨

動作確認

ユーザー登録

  1. 「アカウント作成」をクリック
  2. メールアドレスとパスワードを入力
  3. 登録完了メールを確認（開発時は自動確認）

画像生成テスト

  1. ログイン後、「生成」タブを開く
  2. プロンプトを入力（例: "A beautiful sunset over mountains"）
  3. 「生成」ボタンをクリック
  4. 画像が生成されることを確認

ギャラリー機能テスト

  1. 「ギャラリー」タブで生成した画像を確認
  2. いいね機能をテスト
  3. 公開設定の変更をテスト

デプロイ

GitHubリポジトリの準備

  1. 新しいGitHubリポジトリを作成
  2. ローカルリポジトリをGitHubに接続
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Cloudflare Pagesでのデプロイ

  1. Cloudflare Pagesにアクセス
  2. サイドバーのコンピューティング（Workers）を選択
  3. 作成 > Pages を選択
  4. 既存の Git リポジトリをインポートする > 始める
  5. GitHubアカウントを連携
  6. 作成したリポジトリを選択 > セットアップの開始
  7. 以下の設定：
    • Framework preset: React/Vite
    • Build command: npm run build
    • Build output directory: dist

シークレットの設定

Cloudflare Pagesのダッシュボードで以下を設定：

  1. 「Settings」> 「変数とシークレット」を開く
  2. 以下の環境変数を追加：
    • VITE_SUPABASE_URL: SupabaseプロジェクトのURL
    • VITE_SUPABASE_PUBLISHABLE_KEY: Supabaseの公開キー

費用について

Gemini API

Supabase

Cloudflare Pages

次のステップ

セットアップ完了後は、カスタマイズガイドを参照してカスタマイズを行うことが可能です。

カスタマイズガイドを見る