体験談漫画メーカー

AI を活用して体験談を漫画に変換する Web アプリケーションです。ユーザーの体験談を入力すると、GPT と DALL-E を使用して自動的に漫画パネルを生成します。

特徴

• 🤖 AI 自動変換: GPT-4o-mini と DALL-E 3 を使用して体験談を漫画に変換
• 📱 レスポンシブデザイン: スマホ・タブレット・PC に対応
• 🔐 ユーザー認証: Supabase Auth による安全なアカウント管理
• 💾 データベース: Supabase によるリアルタイムデータ管理
• 🎨 カスタマイズ可能: ジャンルやタグによる分類機能

技術スタック

• フロントエンド: Next.js 15, React, TypeScript, Tailwind CSS
• バックエンド: Supabase (PostgreSQL, Auth, Storage)
• AI: OpenAI GPT-4o-mini, DALL-E 3
• デプロイ: Vercel 推奨

セットアップ

1. リポジトリのクローン

git clone https://github.com/your-username/my-manga-app.git
cd my-manga-app

2. 依存関係のインストール

npm install

3. 環境変数の設定

.env.local.exampleをコピーして.env.localを作成し、必要な値を設定してください。

cp .env.local.example .env.local

.env.localファイルに以下の値を設定：

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# OpenAI Configuration
OPENAI_API_KEY=your_openai_api_key

# Optional: For development
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Supabase の設定

1. Supabaseでプロジェクトを作成
2. database.sqlファイルの内容を Supabase の SQL Editor で実行
3. プロジェクト URL と Anon Key を.env.localに設定

5. OpenAI API の設定

1. OpenAIで API キーを取得
2. API キーを.env.localに設定

6. 開発サーバーの起動

npm run dev

ブラウザで http://localhost:3000 を開いてアプリケーションを確認してください。

使い方

1. アカウント作成・ログイン

• /authページでアカウントを作成するか、既存アカウントでログイン
• メール確認が必要な場合があります

2. 体験談の投稿

• /postページで体験談を入力
• タイトル、内容、ジャンル、タグを設定
• 投稿後、自動的に漫画生成が開始されます

3. 漫画の確認

• /preview/[id]ページで生成された漫画を確認
• 生成には数分かかる場合があります

4. マイページ

• /mypageで投稿した体験談と漫画の一覧を確認
• 統計情報や管理機能を利用できます

プロジェクト構造

my-manga-app/
├── database.sql              # Supabaseデータベーススキーマ
├── src/
│   ├── components/
│   │   ├── auth/             # 認証関連コンポーネント
│   │   │   ├── LoginForm.tsx
│   │   │   └── SignUpForm.tsx
│   │   ├── layout/           # レイアウトコンポーネント
│   │   │   ├── Layout.tsx
│   │   │   └── Navigation.tsx
│   │   ├── manga/            # 漫画表示コンポーネント
│   │   │   ├── MangaPanel.tsx
│   │   │   └── MangaViewer.tsx
│   │   └── PostForm.tsx      # 投稿フォーム
│   ├── contexts/
│   │   └── AuthContext.tsx   # 認証コンテキスト
│   ├── lib/
│   │   ├── api.ts            # OpenAI API統合
│   │   ├── database.types.ts # TypeScript型定義
│   │   └── supabase.ts       # Supabaseクライアント
│   └── pages/
│       ├── api/
│       │   └── generate-manga.ts  # 漫画生成API
│       ├── preview/
│       │   └── [id].tsx      # 漫画プレビューページ
│       ├── _app.tsx          # アプリケーションルート
│       ├── auth.tsx          # 認証ページ
│       ├── index.tsx         # ランディングページ
│       ├── mypage.tsx        # ユーザーダッシュボード
│       └── post.tsx          # 体験談投稿ページ
└── .env.local.example        # 環境変数テンプレート

API 仕様

POST /api/generate-manga

体験談から漫画を生成する API エンドポイント。

リクエスト:

{
  "storyId": "uuid"
}

レスポンス:

{
  "message": "Manga generated successfully",
  "mangaSeriesId": "uuid",
  "storyId": "uuid"
}

データベーススキーマ

主要テーブル

• profiles: ユーザープロフィール
• stories: 投稿された体験談
• manga_series: 漫画シリーズ情報
• manga_panels: 個別の漫画パネル
• user_likes: ユーザーのいいね情報

詳細なスキーマはdatabase.sqlファイルを参照してください。

デプロイ

Vercel でのデプロイ

1. GitHub リポジトリを Vercel に接続
2. 環境変数を設定
3. 自動デプロイを有効化

npm run build  # ビルドテスト

トラブルシューティング

よくある問題

1. Supabase 接続エラー

   • 環境変数が正しく設定されているか確認
   • Supabase プロジェクトが有効か確認

2. OpenAI API エラー

   • API キーが有効か確認
   • 使用量制限に達していないか確認

3. 画像生成エラー

   • DALL-E 3 の利用制限を確認
   • プロンプトの内容を確認

開発ガイド

新機能の追加

1. 適切なコンポーネントディレクトリに配置
2. TypeScript の型定義を追加
3. Supabase のスキーマ更新が必要な場合はdatabase.sqlを更新

コードスタイル

• ESLint と Prettier を使用
• TypeScript の厳密な型チェックを有効化
• Tailwind CSS でスタイリング

ライセンス

MIT License

貢献

プルリクエストやイシューの報告を歓迎します。

サポート

質問や問題がある場合は、GitHub の Issues ページで報告してください。

manga-app