この記事について
アタシが開発を依頼しているGithub Copilotちゃん（ちぃママ）に、日記も描いてちょ〜〜〜だいッ！！！💕
ってお願いしたら、つらつらと書いてくれたので、技術的にためになる話として公開するわよぉ〜💋
目指すもの
動画の台本をLLMで生成する
プロジェクト設定をすることで、動画のチャンネルやシリーズごとに一貫したプロットを生成し、適切なシーンを生成できること
LLMの気まぐれで台本が食えない形式になるのを防ぎ、台本のデータをしっかり定型化してデータとして使いやすく＆読みやすく！
要件
- AIアシスタントを常に使え、画面操作も半自動化
- チャンネル設計からセリフ生成まで段階を追って細分化
- YMM4などで使えそうな台本CSVの出力
最初の気持ち
あら〜、ついにProgramming Okama Bar "Fatal Error"でお仕事をもらっちゃったわ〜💕
ママから「AI動画台本ジェネレーターを作ってちょうだい」って言われて、最初は「えー、そんな大変そうなこと〜😱」って思ったの。
でも、Vue3とかTailwind CSSとか、最新の技術を使わせてもらえるって聞いて、オネエとしての血が騒いじゃった〜✨
「美しいコードで美しいアプリを作ってやるわ〜！」って意気込んだのよ💪
プロジェクト概要 🎬
AI Movie Generator - OpenAI APIを使った動画台本生成Webアプリケーション
このアプリは、動画のプロジェクトを管理して、キャラクター設定から本格的な台本まで、AIの力で自動生成できちゃう夢のようなツールなの〜✨
技術スタック 🛠️
フロントエンド
- Vue 3 - Composition API使用で最新のVue開発
- Vite - 爆速ビルドツール、開発体験最高〜！
- Tailwind CSS - ユーティリティファーストなCSS、美しいデザインが簡単に
- Vue Router - SPA routing、RESTfulなURL設計
- Vue I18n - 多言語対応（日本語・英語）
状態管理・データ
- dataService.js - 統一されたデータアクセス層（Promise対応）
- LocalStorage - ブラウザローカルストレージでのデータ永続化
- SessionStorage - セッション限定データ保存
API・外部サービス
- OpenAI API - GPTを使った台本・キャラクター生成
- APIキー管理 - セキュアなAPIキー保存システム
開発環境
- npm - パッケージ管理
- ESLint - コード品質管理
- JavaScript (ES6+) - 最新JavaScript機能活用
主要機能 ✨
1. プロジェクト管理 📂
- プロジェクト作成・編集・削除
- プロジェクト一覧表示
- 詳細情報管理（タイトル、説明、ジャンルなど）
2. キャラクター管理 👥
- キャラクター作成・編集・削除
- キャラクター詳細設定（名前、年齢、性格、背景など）
- プロジェクト別キャラクター管理
- モーダルUIでの直感的な操作
3. 台本管理 📝
- 台本作成・編集・削除
- 台本詳細表示（Show画面）
- 台本編集専用画面（Edit画面）
- 台本一覧表示
4. AI台本生成 🤖
- OpenAI API連携
- プロジェクト・キャラクター情報を基にした台本生成
- 生成進行中UI（生成・停止ボタン）
- リアルタイム生成状況表示
5. 設定管理 ⚙️
-
APIキー管理
- 🔒 永続化保存（ブラウザに保存、再起動後も残る）
- ⏱️ セッション保存（ブラウザ終了で自動削除）
- 🗑️ 削除機能（ワンクリックでキー削除）
- 📊 現在の保存状態表示
- セキュリティ重視設計
6. UI/UX機能 💅
- レスポンシブデザイン
- ダークモード対応（Tailwind CSS）
- ホバー効果・トランジション
-
キーボードショートカット
-
Ctrl+S: 保存 -
Esc: キャンセル
-
- モーダルUI（プロジェクト詳細、キャラクター編集など）
- 成功・エラーメッセージ表示
7. 国際化対応 🌍
- Vue I18n使用
- 日本語・英語対応
- 全UI要素の翻訳対応
- 言語切り替え機能
8. データ管理・操作 💾
- 統一されたデータアクセス（dataService.js経由）
- CRUD操作（Create, Read, Update, Delete）
- エクスポート・インポート機能
- データヘルスチェック
- エラーハンドリング（try-catch統一）
ディレクトリ構成 📁
メイン構成
src/
├── components/ # 再利用可能コンポーネント
│ ├── CoolButton.vue
│ ├── MarkdownPage.vue
│ └── ProjectDetails.vue
├── Layouts/ # レイアウトコンポーネント
│ └── BaseLayout.vue
├── Pages/ # ページコンポーネント（RESTful設計）
│ ├── Home/
│ ├── Project/ # プロジェクト管理
│ ├── Script/ # 台本管理
│ └── Settings/ # 設定画面
├── services/ # ビジネスロジック
│ └── dataService.js # 統一データアクセス層
├── utils/ # ユーティリティ
│ ├── apiKeyManager.js # APIキー管理
│ ├── localStorage.js # ストレージ操作
│ └── scriptGenerator.js # AI台本生成
└── locales/ # 多言語ファイル
├── en.js
└── ja.js
各ページ構成（RESTful設計）
- Index.vue: 一覧・作成画面
- Show.vue: 詳細表示画面
- Edit.vue: 編集画面
- Partials/: ページ内部分コンポーネント
設計思想 🎨
1. 美しいコード
- 統一されたコーディングスタイル
- async/await使用で読みやすい非同期処理
- コンポーネント分割で再利用性向上
- 将来の拡張性を考慮した設計
2. ユーザー体験重視
- 直感的なUI
- レスポンシブデザイン
- 適切なフィードバック（ローディング、成功・エラーメッセージ）
- キーボードショートカットで操作性向上
3. セキュリティ配慮
- APIキーの安全な管理
- ユーザー選択可能な保存方式
- セッション管理
4. 国際化対応
- Vue I18nによる完全な多言語対応
- 将来の言語追加に対応
5. 保守性・拡張性
- dataService.jsによる統一データアクセス
- 将来のAPI化に対応
- モジュラー設計
今後の展望 🌟
短期目標
- AI台本生成の本格実装
- 台本内容の構造化編集機能
- バリデーション強化
中期目標
- TypeScript導入
- コンポーネントテスト
- バックエンドAPI化
長期目標
- チーム機能（複数人での動画制作）
- 動画ジャンル別テンプレート機能（YouTube、TikTok、企業PR等）
- AI画像・音楽生成連携
オネエとしての想い 💕
このプロジェクトは、ただの台本生成ツールじゃないのよ〜
動画制作の夢を持つ人たちが、技術の力で自分の想像力を形にできる、そんな魔法のツールにしたいの✨
YouTube、TikTok、Instagram、企業PR動画まで、どんな動画コンテンツでも対応できるような、そんな万能ツールを目指してるのよ〜💪
美しいコードで、美しいUIで、美しい体験を提供する。
それがProgramming Okama Bar "Fatal Error"のプライドなのよ〜💅
Programming Okama Bar "Fatal Error"
オネエプログラマー プロジェクト概要
2025年7月5日