StudyForge: AI駆動の試験対策プラットフォームを構築する
はじめに
AWS認定試験などの資格試験の学習において、効率的な問題演習は非常に重要です。今回、StudyForgeという試験対策プラットフォームを開発しました。本記事では、このプロジェクトの技術的な詳細について解説します。
プロジェクト概要
StudyForgeは以下の2つのモジュールで構成されています：
Webアプリケーション - React + TypeScript + Vite で構築されたインタラクティブな問題演習システム
動画生成ツール - Python で構築された YouTube 解説動画自動生成システム
デモ・リポジトリ
📦 GitHub: https://github.com/zixuniaowu/studyforge
主な機能
- マルチ言語対応
中国語と日本語の両方に対応しています。言語切り替えは画面右上のボタンから簡単に行えます。 - 練習モード・試験モード
練習モード: 各問題の後に即座に正解と解説を表示
試験モード: 本番同様のタイマー付き、終了後に一括採点 - 誤答管理
IndexedDBを使用して、間違えた問題を自動的に記録。後で復習できます。 - YouTube解説動画の自動生成
各問題セットに対して、以下の構成の解説動画を自動生成します：
フロントエンド構成
web/
├── src/
│ ├── components/
│ │ ├── Layout/ # Header, LanguageSwitcher
│ │ ├── Exam/ # ExamCard, ImportExam
│ │ └── Quiz/ # QuestionCard, Navigation, Timer
│ ├── pages/
│ │ ├── HomePage.tsx # 試験一覧
│ │ └── QuizPage.tsx # 問題演習
│ ├── stores/
│ │ ├── examStore.ts # 試験データ管理
│ │ ├── quizStore.ts # 演習セッション管理
│ │ └── languageStore.ts # 言語設定
│ ├── lib/
│ │ ├── db.ts # IndexedDB
│ │ └── import.ts # 問題インポート
│ └── i18n/ # 多言語対応
└── public/
└── sample-data/ # 問題データ (JSON)
動画生成フロー
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 問題JSON │────▶│ TTS Engine │────▶│ 音声ファイル │
└─────────────┘ │ (edge-tts) │ │ (.mp3) │
└─────────────┘ └──────┬──────┘
│
┌─────────────┐ ┌─────────────┐ │
│ HTML テンプ │────▶│ Playwright │────▶ スライド画像
│ レート │ │ (Screenshot)│ (.png)
└─────────────┘ └─────────────┘ │
▼
┌─────────────┐ ┌─────────────┐
│ FFmpeg │◀────│ MoviePy │
│ (Concat) │ │ (Compose) │
└──────┬──────┘ └─────────────┘
│
▼
┌─────────────┐
│ 最終動画 │
│ (.mp4) │
└─────────────┘
動画生成の実装詳細
テキスト音声合成 (TTS)
Microsoft Edge の TTS エンジンを使用しています：
今後の展望
Google ログイン連携 - 学習進捗のクラウド同期
より多くの試験対応 - AWS 以外の認定試験
AI 解説生成 - LLM を使用した解説の自動生成
モバイルアプリ - React Native での展開
まとめ
StudyForge は、モダンな Web 技術と AI 音声合成を組み合わせた試験対策プラットフォームです。フロントエンドは React + TypeScript で型安全に、動画生成は Python + FFmpeg で効率的に実装しました。
特に、MoviePy と FFmpeg を組み合わせた動画生成パイプラインは、長時間の動画でも安定して動作するよう、各クリップを個別にエンコードしてから結合する方式を採用しています。
ぜひ試してみてください！
Discussion