# 🎬 Interactive Story Launcher **複数のインタラクティブストーリーを美しく管理・起動するプレミアムビジュアルランチャー** ## ✨ 概要 複数のインタラクティブストーリーを一元管理し、映画のような美しいUIで体験できるプレミアムランチャーです。config.jsにストーリー情報を追加するだけで、プロフェッショナルな配布パッケージが完成します。 **📝 3ステップセットアップ** 1. config.js にストーリー情報を追加（2分） 2. ストーリーファイルを配置（30秒） 3. ブラウザで起動して体験開始（即座） ## 🎯 対象ユーザー - **Interactive Movie Studio ユーザー** - 複数作品の統合管理 - **インタラクティブコンテンツ制作者** - ポートフォリオの美しいプレゼンテーション - **教育機関・企業** - 学習コンテンツのパッケージ化 - **ゲーム配布者** - プロフェッショナルな配布パッケージ作成 - **個人クリエイター** - 作品集の魅力的な展示 ## 🚀 主な機能 - **プレミアムビジュアルUI** - 映画のような美しいカード表示とスライダー - **インテリジェント進捗管理** - プレイ状況を自動追跡・可視化 - **アンロックシステム** - ストーリー間の依存関係とプログレッション管理 - **自動進捗検出** - プレイ時間から自動的に完了を判定 - **config.js 設定方式** - HTMLを触らずに簡単管理 - **リアルタイム統計** - 詳細なプレイデータ表示 - **レスポンシブ対応** - PC・タブレット・スマホ完全対応 - **キーボード・マウス操作** - 直感的なナビゲーション - **商用利用可能** - あらゆる用途で自由使用 ## 📦 セット内容 1. **index.html** - ランチャー本体 2. **config.js** - 設定ファイル（要編集） 3. **interactive_tutorial.html** - 使い方チュートリアル 4. **chapter1.html** - サンプルストーリー 5. **images/** - 背景画像フォルダ 6. **stories/** - ストーリーファイル用フォルダ 7. **README.md** - 詳細マニュアル ## 🔧 基本設定（config.js） ### 設定例 ```javascript const LAUNCHER_CONFIG = { // 基本設定 settings: { title: "My Interactive Stories", subtitle: "Choose Your Adventure", theme: "default" }, // 自動進捗検出設定 autoCompletion: { enabled: true, // 機能の有効/無効 minPlayTime: 3, // 最低プレイ時間（分） completionThreshold: 0.7, // 完了判定閾値（推定時間の70%） singleSessionThreshold: 0.5, // 一回セッション完了判定（50%） showNotifications: true, // 完了通知の表示 }, // ストーリー設定 stories: [ { id: "tutorial", title: "Tutorial", description: "ランチャーの使い方を学びます", file: "interactive_tutorial.html", genre: "チュートリアル", estimatedTime: "5分", difficulty: "★☆☆", background: "./images/tutorial.jpg", unlockConditions: [] // 最初から解放 }, { id: "chapter1", title: "Crimson Memories", description: "記憶の奥底に眠る真実を探る...", file: "chapter1.html", genre: "SF", estimatedTime: "30分", difficulty: "★★★", background: "./images/chapter1.jpg", unlockConditions: ["tutorial"], // チュートリアル完了後 // 個別自動完了設定（オプション） autoCompletion: { threshold: 0.8, // このストーリーのみ80%で完了 minPlayTime: 10, // 最低10分 showNotifications: false // 通知無効 } } ] }; ``` ### ストーリー追加手順 1. Interactive Movie Studio でストーリー制作 2. config.js の stories 配列に新しいオブジェクトを追加 3. images フォルダに背景画像を配置 4. ブラウザでリロードして確認 ## 🎮 操作方法 ### キーボード操作 - **←→ 矢印キー** - ストーリー切り替え - **スペースキー** - ストーリー起動 - **Rキー** - 進捗リセット（確認ダイアログ付き） - **Escキー** - ダイアログを閉じる ### マウス操作 - **ホイール** - ストーリー切り替え - **インジケータークリック** - 直接ストーリーに移動 - **ナビゲーションボタン** - 前後移動 ## 🤖 自動進捗検出機能（NEW！） ### 概要 プレイ時間を分析して、ストーリーの完了状況を自動判定する革新的な機能です。 ### 判定ロジック 1. **最低プレイ時間をクリア** - 設定された最低時間以上プレイ 2. **以下のいずれかを満たす：** - 累計プレイ時間が推定時間の70%に到達 - 一度のセッションで推定時間の50%に到達 **例：** 推定時間30分のストーリー - 最低3分以上プレイ - 累計21分以上または一度に15分以上で自動完了 ### カスタマイズ例 ```javascript // 短時間コンテンツ向け autoCompletion: { minPlayTime: 1, // 1分でOK completionThreshold: 0.9, // 90%完了で判定 singleSessionThreshold: 0.8 // 一度に80%で完了 } // 厳密な完了判定 autoCompletion: { minPlayTime: 5, // 最低5分 completionThreshold: 0.95, // 95%まで必要 singleSessionThreshold: 0.9, // 一度に90%必要 showNotifications: true // 完了時に派手に通知 } ``` ## 📊 進捗管理機能 **4つの状態表示** - ⭕ 未プレイ（白） - 🟡 プレイ中（黄） - ✅ 完了（緑） - 🔒 ロック中（グレー） **統計情報追跡** - 総プレイ時間 - 完了率 - 各ストーリーの進捗状況 ## 🔧 アンロックシステム ```javascript // アンロック条件の設定例 unlockConditions: [] // 条件なし（最初から解放） unlockConditions: ["tutorial"] // 単一条件 unlockConditions: ["story1", "story2"] // 複数条件（全て完了必要） // 段階的なストーリー解放 { id: "final_chapter", unlockConditions: ["chapter1", "chapter2", "side_story"] // 複数条件 } ``` ## 💻 動作環境 - **ブラウザ:** Chrome, Firefox, Safari, Edge（最新版） - **OS:** Windows, Mac, Linux - **必要技術:** HTMLの基本的な編集ができれば十分 ## 📁 推奨フォルダ構成 ``` 📁 my-interactive-stories/ ├── 📄 index.html (ランチャー本体) ├── 📄 config.js (設定ファイル ★編集対象) ├── 📁 images/ (背景画像) │ ├── 🖼️ tutorial.jpg │ └── 🖼️ chapter1.jpg ├── 📁 stories/ (ストーリーファイル) │ ├── 📄 interactive_tutorial.html │ └── 📄 chapter1.html └── 📄 README.md ``` ## 🤝 Interactive Movie Studio との連携 Interactive Story Launcher は Interactive Movie Studio で制作したコンテンツと100%連携： 1. **Studio でストーリー制作** → 高品質なインタラクティブコンテンツ 2. **Launcher で統合管理** → 美しいUI での一元管理・進捗追跡 3. **シームレス連携** → ストーリー間のデータ共有・アンロック管理 ## 🔒 セキュリティ・プライバシー - **ローカル保存** - 個人データは端末内のみに保存 - **外部送信なし** - インターネット接続不要で完全プライベート - **GDPR準拠** - EU圏でのデータ保護規則に適合 ## 💰 商用利用について ✅ **完全自由** - ランチャーの商用利用・配布に制限なし ✅ **クレジット表記不要** - ツール名の記載は任意 ✅ **改変OK** - HTMLファイルのカスタマイズ可能 ✅ **配布自由** - 設定済みランチャーの配布・販売OK ✅ **企業利用可能** - 研修・マーケティング用途で自由使用 ## 🎓 開発者向け情報 ### デバッグ用コンソールコマンド ```javascript // 進捗統計を表示 showProgressStats() // アンロック状況を確認 showUnlockStatus() // 強制リセット（開発時用） launcher.forceReset() // 自動プレイモード（デモ用） launcher.startAutoPlay(3000) // 3秒間隔 launcher.stopAutoPlay() ``` ### カスタマイズ例 ```javascript // カスタム背景の設定 launcher.setCustomBackground('chapter1', './my-images/custom-bg.jpg'); // 進捗の手動設定（テスト用） launcher.gameProgress['chapter1'] = { completed: true, playTime: 25 }; launcher.saveProgress(); ``` ### テーマ変更 ```javascript // config.js内で設定 settings: { theme: "dark", // ダークテーマ theme: "light", // ライトテーマ theme: "custom" // カスタムテーマ } ``` ## ⚠️ 注意事項 - **config.js必須** - 設定ファイルを正しく設定してください - **画像パス** - 相対パスで指定（images/フォルダ推奨） - **ファイル名** - ストーリーIDとファイル名の一致に注意 - **JavaScript有効** - ブラウザでJavaScriptを有効にしてください ## 📈 システム要件 ### 最小要件 - **RAM:** 2GB以上 - **ストレージ:** 100MB以上の空き容量 - **ネットワーク:** 不要（完全オフライン動作） ### 推奨要件 - **RAM:** 4GB以上（大量のストーリー管理時） - **ディスプレイ:** 1366x768以上（最適なUI表示） - **ブラウザ:** Chrome 90+, Firefox 88+, Safari 14+, Edge 90+ **🚀 今すぐ美しいストーリーランチャーで次世代の体験を始めよう！** *Interactive Story Launcher v1.0 | 2025年6月*