カスタマイズガイド - AIアプリスターターキット

概要

AIアプリスターターキットは、AI画像生成機能を持つWebアプリケーションのテンプレートです。React + TypeScript + Supabaseをベースに構築されており、モジュラー設計により簡単にカスタマイズできます。

プロジェクト構成

bananano-template/

├── src/

│   ├── features/                    # 機能別ディレクトリ

│   │   ├── auth/                   # 認証機能

│   │   ├── bananano/               # メインアプリ機能

│   │   ├── bananano-demo/          # デモ機能

│   │   └── appadmin/               # アプリ管理者機能

│   ├── plugins/                    # プラグインシステム

│   │   ├── base/                   # ベースプラグイン

│   │   ├── gemini-images/         # 画像生成プラグイン

│   │   ├── gemini-text/            # テキスト生成プラグイン

│   │   ├── gemini-speech/          # 音声処理プラグイン

│   │   ├── gemini-embeddings/      # エンベディングプラグイン

│   │   ├── user-auth/              # ユーザー認証プラグイン

│   │   ├── resend-email/           # メール送信プラグイン

│   │   └── stripe-payment/         # 決済プラグイン

│   ├── integrations/              # 外部サービス統合

│   ├── config/                     # 設定ファイル

│   └── dev/                        # 開発用機能

├── supabase/

│   ├── migrations/                 # データベースマイグレーション

│   └── functions/                   # Edge Functions

└── docs/                          # ドキュメント

プラグインシステム

ベースプラグイン (plugins/base/)

認証機能
基本的なUIコンポーネント
共通サービス

画像生成プラグイン (plugins/gemini-images/)

Google Gemini API統合
画像生成・編集機能
ストレージ管理

テキスト生成プラグイン (plugins/gemini-text/)

Google Gemini APIを使用したテキスト生成
多言語翻訳機能（12言語対応）
テキスト要約機能（4つのスタイル）
言語選択コンポーネント

音声処理プラグイン (plugins/gemini-speech/)

Text-to-Speech（TTS）機能
Speech-to-Text（STT）機能
多言語音声対応（日本語、英語、中国語、韓国語）
音声・速度調整機能

エンベディングプラグイン (plugins/gemini-embeddings/)

テキストエンベディング生成
類似度検索機能
バッチ処理対応
多様なタスクタイプ（検索、分類、クラスタリング）

ユーザー認証プラグイン (plugins/user-auth/)

新規登録・ログイン機能
Google認証連携
パスワード再発行機能
プロフィール管理

メール送信プラグイン (plugins/resend-email/)

Resend APIを使用したメール送信
HTML・テキストメール対応
送信キュー処理

決済プラグイン (plugins/stripe-payment/)

Stripe APIを使用した決済処理
サブスクリプション管理
商品・プラン管理
決済履歴管理

データベース構成

ベース機能 (20250101000001_initialize_base.sql)

テーブル

user_profiles - ユーザープロファイル（公開情報）
- id, display_name, avatar_url, bio, website_url, location
user_settings - ユーザー設定（非公開）
- id, email_notifications, push_notifications, theme_preference, language

ストレージバケット

fb-image-generation - 画像ファイル保存用

画像生成機能 (20250101000002_initialize_gemini.sql)

テーブル

fb_image_generations - 画像生成履歴
- id, user_id, url, prompt, generation_mode, tool_name, provider, model_name, visibility
fb_image_likes - いいね機能
- id, user_id, image_id

機能

画像生成・編集・合成
いいね機能
公開・非公開設定
プロファイル連携

Edge Functions

画像生成 (gemini-image-generator/)

機能: Google Gemini APIを使用した画像生成
エンドポイント: /functions/v1/gemini-image-generator
環境変数: GEMINI_API_KEY

対応機能

テキストから画像生成（プロンプトを自動で英語に最適化）
画像編集・リミックス
スタイル転送
画像合成

テキスト生成 (gemini-text/)

機能: Google Gemini APIを使用したテキスト生成・翻訳・要約
エンドポイント: /functions/v1/gemini-text
環境変数: GEMINI_API_KEY

対応機能

テキスト生成
多言語翻訳（12言語対応）
テキスト要約（4つのスタイル）

音声処理 (gemini-speech/)

機能: Google Gemini APIを使用した音声合成・音声認識
エンドポイント: /functions/v1/gemini-speech
環境変数: GEMINI_API_KEY

対応機能

Text-to-Speech（TTS）
Speech-to-Text（STT）
多言語音声対応

エンベディング (gemini-embeddings/)

機能: Google Gemini APIを使用したテキストエンベディング生成
エンドポイント: /functions/v1/gemini-embeddings
環境変数: GEMINI_API_KEY

対応機能

エンベディング生成
類似度検索
バッチ処理

メール送信 (resend-email-handler/)

機能: Resend APIを使用したメール送信
エンドポイント: /functions/v1/resend-email-handler
環境変数: RESEND_API_KEY

対応機能

HTML・テキストメール送信
送信キュー処理

Stripe決済 (stripe-*)

機能: Stripe APIを使用した決済・サブスクリプション処理
エンドポイント:
- /functions/v1/stripe-create-payment-intent
- /functions/v1/stripe-create-setup-intent
- /functions/v1/stripe-create-subscription
- /functions/v1/stripe-webhook
環境変数: STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET

対応機能

決済セッション作成
サブスクリプション管理
Webhook処理

カスタマイズ例

新しい機能の追加

// src/features/new-feature/

├── components/

│   └── NewFeatureComponent.tsx

├── hooks/

│   └── useNewFeature.ts

├── services/

│   └── newFeature.service.ts

└── types/

    └── newFeature.types.ts

新しいAPIエンドポイントの追加

// src/features/your-feature/services/yourFeature.service.ts

export class YourFeatureService {

  static async getData() {

    const { data, error } = await supabase

      .from('your_table')

      .select('*');

    return { data, error };

  }

}

設定ファイル

アプリ設定 (src/config/app.ts)

export const getAppName = () => "Your App Name";

export const getAppDescription = () => "Your app description";

環境変数 (.env)

# Supabase設定

VITE_SUPABASE_URL=your_supabase_url

VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Edge Functions用環境変数（Supabaseダッシュボードで設定）

# Gemini

GEMINI_API_KEY=your_gemini_api_key

# Resend（メール送信）

RESEND_API_KEY=your_resend_api_key

# Stripe設定（テスト環境）

ENVIRONMENT=test

STRIPE_SECRET_KEY_TEST=sk_test_your_stripe_test_secret_key

STRIPE_WEBHOOK_SECRET_TEST=whsec_your_stripe_test_webhook_secret

# Stripe設定（本番環境）

ENVIRONMENT=live

STRIPE_SECRET_KEY_LIVE=sk_live_your_stripe_live_secret_key

STRIPE_WEBHOOK_SECRET_LIVE=whsec_your_stripe_live_webhook_secret

認証プロバイダーの設定（オプション）

Googleログインの設定

Google Cloud Consoleでの設定

Google Cloud Consoleにアクセス
新しいプロジェクトを作成または既存プロジェクトを選択
「APIとサービス」> 「認証情報」を開く
「+認証情報を作成」> 「OAuth 2.0 クライアント ID」を選択
アプリケーションの種類を「ウェブアプリケーション」に設定
承認済みのリダイレクト URIに以下を追加：
https://your-project-ref.supabase.co/auth/v1/callback
クライアントIDとクライアントシークレットをコピー

Supabaseでの設定

Supabaseダッシュボード > 「Authentication」> 「Providers」
「Google」を有効化
取得したクライアントIDとクライアントシークレットを入力
「Save」をクリック

メール送信設定（オプション）

Resendを使用したメール設定

Resendアカウントの作成

Resendにアクセス
アカウントを作成
ドメインを追加（例: your-domain.com）
DNS設定を完了してドメインを認証

APIキーの取得

Resendダッシュボード > 「API Keys」
「Create API Key」をクリック
APIキー名を入力（例: supabase-smtp）
生成されたAPIキーをコピー

Supabaseでの設定

Supabaseダッシュボード > 「Authentication」> 「Settings」
「SMTP Settings」セクションを開く
以下の設定を入力：
- Enable custom SMTP: オン
- SMTP Host: smtp.resend.com
- SMTP Port: 587
- SMTP User: resend
- SMTP Pass: 取得したAPIキー
- SMTP Admin Email: noreply@your-domain.com
- SMTP Sender Name: アプリ名（例: Bananano App）
「Confirm email」をオンにする
「Save」をクリック

デプロイ

開発環境

npm run dev

本番環境

npm run build

npm run preview

Supabaseデプロイ

npx supabase db push

npx supabase functions deploy

トラブルシューティング

よくある問題

認証エラー: RLSポリシーを確認
画像アップロードエラー: ストレージバケットの設定を確認
API呼び出しエラー: Edge Functionsのデプロイ状況を確認

ログの確認

ブラウザの開発者ツール
Supabaseダッシュボードのログ
Edge Functionsのログ

サポート

カスタマイズに関する質問や問題がある場合は、以下を確認してください：

                        プレミアムパックをご購入いただいた方は、カスタマイズのサポートを所定期間無料で提供します。スタンダードパックには通常の技術サポートが付属します。
                    