Skip to content

Tom8810/newvoice

BranchesTags

Repository files navigation

NewVoice 📻

音声ニュースプラットフォーム - AI による日々のニュース音声配信と解説コンテンツ

🚀 概要

NewVoice は、日々のニュースを音声で配信し、重要なトピックについて AI が生成した詳細な解説音声を提供する Web アプリケーションです。忙しい現代人が移動中や作業中でも効率的にニュースを把握できるよう設計されています。

主要機能

  • 📰 日々のニュース音声: 過去 1 週間のニュース音声を自動取得・配信
  • 🎯 解説コンテンツ: ニュース内の重要なキーワードやトピックに対する AI 生成解説音声
  • 🎵 シームレス再生: ニュース → 解説 → 次のニュース → 次の解説の自動遷移
  • 🔐 認証システム: AWS Cognito による安全なユーザー認証
  • 💳 サブスクリプション: Stripe による VIP プラン管理
  • 📱 レスポンシブデザイン: デスクトップ・モバイル両対応
  • ⏯️ 高機能プレイヤー: 再生速度調整、シーク操作、前後スキップ
  • 🎨 モダン UI: Tailwind CSS + shadcn/ui による洗練されたインターフェース

🛠️ 技術スタック

  • フレームワーク: Next.js 15 (App Router)
  • 言語: TypeScript
  • UI: Tailwind CSS + shadcn/ui
  • アイコン: Lucide React
  • 認証: AWS Cognito + AWS Amplify
  • 決済: Stripe (サブスクリプション管理)
  • インフラ: AWS S3 (音声ファイル配信)
  • コンテナ: Docker + Docker Compose
  • Web サーバー: Nginx (リバースプロキシ)

🏗️ アーキテクチャ

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Next.js App   │────│   API Routes    │────│     AWS S3      │
│                 │    │                 │    │                 │
│ ・UI Components │    │ ・/api/audio    │    │ ・news-sound-   │
│ ・Audio Player  │    │ ・/api/stripe   │    │   dev           │
│ ・Auth System   │    │ ・/api/account  │    │ ・description-  │
│ ・State Mgmt    │    │ ・Proxy & Cache │    │   sound-dev     │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                ↓                ↓                      ↓
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│  AWS Cognito    │    │     Stripe      │    │   DynamoDB      │
│                 │    │                 │    │                 │
│ ・User Auth     │    │ ・Subscriptions │    │ ・User Data     │
│ ・OAuth Flow    │    │ ・Payments      │    │ ・Account Mgmt  │
│ ・JWT Tokens    │    │ ・Webhooks      │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘

📦 セットアップ

前提条件

  • Node.js 18 以上
  • npm または yarn
  • Docker & Docker Compose (本番環境)

開発環境

  1. リポジトリのクローン
git clone <repository-url>
cd newvoice
  1. 依存関係のインストール
npm install
  1. 環境変数の設定

環境変数を設定します。

  1. 開発サーバーの起動
npm run dev

アプリケーションは http://localhost:3000 で利用できます。

本番環境 (Docker)

  1. 環境変数の設定
cp .env.production.example .env.production
# 本番用の値に編集（特にリダイレクトURLを本番ドメインに変更）

⚠️ 重要な注意事項:

  • .env.local は開発環境専用です
  • 本番デプロイ前に .dockerignore に .env.local を追加してください
  • NEXT_PUBLIC_COGNITO_REDIRECT_SIGN_IN は本番ドメインに変更が必要です
# .dockerignore に追加
echo ".env.local" >> .dockerignore
  1. ビルド & 起動
# 本番環境でビルド・起動
docker-compose --profile prod up -d --build

開発環境の場合:

# 開発環境でビルド・起動
docker-compose --profile dev up -d --build
  1. アクセス

📁 プロジェクト構造

newvoice/
├── app/                          # Next.js App Router
│   ├── api/                      # API Routes
│   │   ├── audio/                # 音声プロキシAPI
│   │   │   ├── route.ts          # 音声ファイル配信
│   │   │   └── metadata/         # メタデータ取得
│   │   ├── stripe/               # Stripe決済API
│   │   │   ├── create-checkout-session/
│   │   │   ├── create-portal-session/
│   │   │   ├── cancel-subscription/
│   │   │   └── webhook/
│   │   ├── account/              # アカウント管理API
│   │   │   └── delete/
│   │   └── health/               # ヘルスチェック
│   ├── auth/                     # 認証ページ
│   │   └── callback/             # OAuthコールバック
│   ├── components/               # UIコンポーネント
│   │   ├── auth/                 # 認証関連コンポーネント
│   │   │   ├── login-button.tsx
│   │   │   ├── user-menu.tsx
│   │   │   └── protected-route.tsx
│   │   ├── modals/               # モーダルコンポーネント
│   │   ├── audio-console.tsx     # 音声コントロール
│   │   ├── news-card.tsx         # ニュースカード
│   │   └── ui/                   # 基本UIコンポーネント
│   ├── contexts/                 # React Context
│   │   ├── auth-context.tsx      # 認証状態管理
│   │   └── audio-player-context.tsx # 音声プレイヤー状態管理
│   ├── lib/                      # ユーティリティ
│   │   ├── amplify-config.ts     # AWS Amplify設定
│   │   ├── stripe.ts             # Stripe設定
│   │   ├── utils.ts              # 共通関数
│   │   └── news-generator.ts     # ニュースデータ生成
│   └── globals.css               # グローバルスタイル
├── public/                       # 静的ファイル
│   └── icons/                    # アイコンファイル
├── nginx/                        # Nginx設定
├── .env.local                    # 開発環境用
├── .env.production               # 本番環境用
├── docker-compose.yml            # Docker構成
├── Dockerfile                    # 本番用Dockerファイル
├── Dockerfile.dev                # 開発用Dockerファイル
└── README.md                     # このファイル

🎯 主要コンポーネント

AuthContext

ユーザー認証状態を管理する React Context。

主要機能:

  • AWS Cognito との連携
  • ユーザー情報の取得・更新
  • サブスクリプション状態管理
  • アカウント削除機能

AudioPlayerContext

音声プレイヤーの状態管理を行う React Context。

主要機能:

  • 再生状態管理 (再生/停止/読み込み)
  • プレイリスト管理 (ニュース + 解説の統合)
  • 自動遷移制御
  • 音声メタデータ管理

NewsCard

各ニュース項目を表示するカードコンポーネント。

特徴:

  • スクロールタイトルアニメーション
  • 再生状態の視覚的フィードバック
  • プログレスバー表示
  • 解説音声の自動検出・表示

AudioConsole

画面下部の音声コントロールバー。

機能:

  • 再生/一時停止/停止
  • 前/次スキップ
  • シークバー操作
  • 再生速度調整
  • レスポンシブ対応

🔧 API 仕様

GET /api/audio

音声ファイルのプロキシ配信

パラメータ:

  • filename: 音声ファイル名
  • bucket: バケットタイプ (description | undefined)

レスポンス:

  • 音声ファイルのバイナリデータ
  • 適切なキャッシュヘッダー

POST /api/stripe/create-checkout-session

Stripe チェックアウトセッションの作成

パラメータ:

  • priceId: Stripe 価格 ID
  • mode: 支払いモード (subscription)

POST /api/stripe/webhook

Stripe ウェブフック処理

機能:

  • サブスクリプション状態の同期
  • ユーザー属性の自動更新
  • 決済完了通知の処理

🎨 デザインシステム

カラーパレット

  • Primary: ピンク系グラデーション (#e11d48 to #ec4899)
  • Accent: 紫系アクセントカラー (#a855f7)
  • Background: ダーク/ライトモード対応
  • Text: 適応的コントラスト比で読みやすさを確保

アニメーション

  • スムーズなトランジション (300ms)
  • スクロールタイトルアニメーション
  • ホバーエフェクト
  • ローディングインジケーター

🔐 認証システム

AWS Cognito 設定

  1. ユーザープールの作成

    • AWS Cognito でユーザープールを作成
    • 必要な属性（email など）を設定
    • パスワードポリシーを設定

  2. アプリクライアントの設定

    • OAuth フロー有効化
    • 許可されるスコープ: openid, email, profile, aws.cognito.signin.user.admin
    • コールバック URL: https://your-domain.com/auth/callback (本番), http://localhost:3000/auth/callback (開発)
    • サインアウト URL: https://your-domain.com/ (本番), http://localhost:3000/ (開発)

    ⚠️ 重要: 本番環境では必ず HTTPS のコールバック URL を設定してください。

  3. ドメイン設定

    • Cognito ホストドメインまたはカスタムドメインを設定

認証フロー

  1. ユーザーがログインボタンをクリック
  2. Cognito ホスト型 UI にリダイレクト
  3. ユーザーがログイン後、コールバック URL に戻る
  4. AuthContext がユーザー情報を取得・保存
  5. 保護されたコンテンツにアクセス可能

🔒 セキュリティ

  • AWS Cognito: 企業グレードの認証・認可
  • JWT Token: セキュアなトークンベース認証
  • Stripe: PCI DSS 準拠の決済処理
  • API Rate Limiting: 過度なリクエストの制限
  • CORS 設定: 適切なオリジン制限
  • 環境変数: 機密情報の適切な管理
  • Input Validation: ユーザー入力の検証
  • HTTPS 強制: 本番環境での暗号化通信

📊 パフォーマンス

  • Next.js 最適化: 自動コード分割、画像最適化
  • キャッシュ戦略: S3 ファイルの適切なキャッシュ
  • Lazy Loading: コンポーネントの遅延読み込み
  • Bundle Analysis: 不要なライブラリの除去

🧪 テスト

# 開発環境でのテスト
npm run test

# 開発環境の起動
npm run dev

🚀 デプロイ

本番環境 (Docker)

# 本番ビルド & デプロイ
docker-compose --profile prod up -d --build

SSL 証明書の設定

本番環境では HTTPS が必要です。Let's Encrypt 等で SSL 証明書を取得し、nginx の設定に追加してください。

監視とメンテナンス

  • ログ監視: docker-compose logs -f
  • コンテナ状態確認: docker-compose ps
  • リソース使用量: docker stats

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages