# 🎬 Interactive Movie Studio **既存動画にワンクリックで選択肢・QTEを追加するノーコードツール** ## ✨ 特徴 プログラミング知識不要で誰でもインタラクティブ動画を制作できます **📝 3ステップで完成** - **Step1:** エディターに動画をドラッグ&ドロップ（2分） - **Step2:** 選択肢タブで分岐・QTEを設定（3分） - **Step3:** 3つの方法から選んで簡単配布（30秒） ## 🎯 こんな人におすすめ - **VTuber・配信者** → 視聴者参加型コンテンツ制作 - **企業研修担当者** → インタラクティブな教育コンテンツ - **教育コンテンツ制作者** → 学習効果の高い動画教材 - **個人クリエイター** → オリジナルゲーム制作 ## 🚀 主な機能 ✅ **3つの設定方法に対応** - 技術レベル問わず誰でも ✅ **自動ファイル検出機能** - ドラッグ&ドロップで即動作 ✅ **選択肢で物語分岐** - マルチエンディング対応 ✅ **QTE（Quick Time Event）** - リアルタイム操作 ✅ **変数管理** - 複雑な条件分岐も簡単 ✅ **リアルタイムテストプレイ** - 作りながら確認 ✅ **タイムライン表示** - 視覚的な編集 ✅ **親切なエラー対応** - 問題解決まで丁寧にガイド ✅ **字幕・テキスト表示** - 動画に合わせてタイミング制御可能 ✅ **8種類の字幕スタイル** - 標準/強調/警告/成功/実況/エレガント/ホラー/グラフィティ ✅ **変数置換機能** - 字幕内で{{変数名}}による動的テキスト表示 ✅ **動画終了時ジャンプ** - 条件付き自動遷移機能 ✅ **モバイル完全対応** - タッチ操作でQTE実行可能 ✅ **ドラッグ&ドロップ並び替え** - 動画順序を直感的に変更 ✅ **不足ファイル自動検出** - 設定に必要な動画の過不足を警告 ✅ **3段階設定読み込み** - 自動検出→ファイル選択→手動貼り付け ✅ **商用利用可能** - あらゆるコンテンツに使用OK ## 💻 動作環境 - **ブラウザ:** Chrome, Firefox, Safari, Edge（最新版） - **OS:** Windows, Mac, Linux - **動画形式:** MP4, WebM, OGG対応 - **必要な技術知識:** なし（HTMLの基本的な扱いができれば十分） ## 📦 セット内容 1. **interactive_movie_engine.html** - エディター本体（字幕・変数・高度な分岐機能付き） 2. **game_player.html** - プレイヤー本体（フルレスポンシブ・3段階読み込み対応） ## 🔧 使い方（詳細） ### エディターでの制作 1. **動画アップロード** - ドラッグ&ドロップで簡単追加 2. **選択肢設定** - 表示タイミングと分岐先を指定 3. **QTE設定** - キーと制限時間を設定 4. **変数管理** - HP、スコアなどのゲーム要素 5. **字幕設定** - 表示タイミング・スタイル・変数置換を設定 6. **高度な設定** - 動画開始/終了時アクション・条件付きジャンプ 7. **テストプレイ** - リアルタイムで動作確認 ### 配布・公開（3つの方法から選択） #### 🥇 **方法1: 自動ファイル検出（推奨）** 1. **設定エクスポート** - ワンクリックでJSON出力 2. **ファイル配置** - game_data.json として保存 3. **完成** - プレイヤーHTMLと同フォルダに配置で自動認識 #### 🥈 **方法2: ドラッグ&ドロップ配布** 1. **設定エクスポート** - JSON形式で出力 2. **ファイル選択** - プレイヤー起動時にJSONファイルを選択 3. **完成** - 誰でも簡単に設定読み込み #### 🥉 **方法3: 埋め込み配布（確実動作）** 1. **設定エクスポート** - JSON形式で出力 2. **貼り付け** - プレイヤーHTMLの指定箇所に貼り付け 3. **完成** - ダブルクリックで起動（技術知識不要） ### 特徴 - **自動対応** - 環境に応じて最適な方法を自動選択 - **段階的サポート** - ファイル検出→ UI表示→手動貼り付け - **エラー回避** - CORS制限も完全クリア - **親切ガイド** - 問題発生時は解決方法を具体的に表示 ## 💡 活用例 - **企業研修:** 接客シミュレーション、安全教育 - **教育:** 歴史IF動画、語学学習コンテンツ - **エンタメ:** 推理ゲーム、恋愛シミュレーション - **マーケティング:** 商品紹介インタラクティブ動画 - **字幕活用:** 多言語対応、視覚的効果演出、変数表示（スコア・HP等） - **複雑な分岐:** RPG風ステータス管理、条件付きエンディング分岐 ## ⚡ 技術仕様 - **フレームワーク:** Vanilla JavaScript（軽量・高速） - **対応環境:** ローカルファイル・HTTPサーバー両対応 - **レスポンシブ対応** - スマホ・タブレットでも快適 - **フルスクリーン対応** - 没入感のある体験 - **自動保存機能** - 編集データが自動で保存 - **エラー検出機能** - 設定ミスを自動で警告 - **3段階フォールバック** - 環境問わず確実動作 - **CORS制限回避** - ローカル環境でも安心 - **タッチ対応** - QTE操作をPC/モバイル自動判定 - **動的レイアウト** - 字幕位置を動画サイズに自動調整 - **メモリ管理** - 大量動画でも安定動作（URL自動解放） - **リアルタイム編集** - タイムライン上でインタラクティブ要素を視覚確認 ## 🎨 字幕・演出機能 - **8種類のスタイル** - コンテンツに合わせた視覚演出 - **変数表示** - リアルタイムでゲーム状況を表示 - **タイミング制御** - 0.1秒単位での精密な表示制御 - **レスポンシブ対応** - デバイスサイズに応じて自動調整 ## 🎮 QTE・インタラクション - **クロスプラットフォーム** - PC（キーボード）・モバイル（タッチ）自動対応 - **視覚フィードバック** - プレイヤーに分かりやすい操作ガイド - **失敗・成功分岐** - それぞれ異なる動画ジャンプ・変数操作が可能 ##⚠️ 注意事項 - 動画ファイルは別途ご用意ください - 大容量動画は読み込みに時間がかかる場合があります - **環境に関係なく動作** - ローカルファイル・サーバー環境問わず - **技術知識不要** - 3つの設定方法で誰でも利用可能 ## 💰 商用利用について ✅ **完全自由** - 制作したコンテンツの商用利用・配布に制限なし ✅ **クレジット表記不要** - ツール名の記載は任意 ✅ **改変OK** - HTMLファイルのカスタマイズ可能 ❌ **ツール自体の再配布** - エディター・プレイヤーの転売は禁止 --- **🎬 今すぐインタラクティブ動画制作を始めよう！** *バージョン 2.0 | 最終更新: 2025年 6月*