# 🎬 Story Portal **インタラクティブストーリーを美しく管理・起動する次世代ビジュアルランチャー** ## ✨ 概要 複数のインタラクティブゲームを一元管理し、映画のような美しい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 PORTAL_CONFIG = { // 基本設定 settings: { title: "📖 My Story Collection", subtitle: "Interactive Hub", mainTitle: "Discover Your Next Adventure", mainSubtitle: "あなただけの物語体験をお楽しみください" }, // サムネイル画像設定 thumbnails: { "tutorial": "./images/tutorial.jpg", "chapter1": "./images/chapter1.jpg", "chapter2": "./images/chapter2.jpg" }, // 背景画像設定（オプション） defaultBackground: "./images/background.jpg", // ゲーム設定 games: [ { id: "tutorial", title: "Tutorial", description: "ランチャーの使い方を学びます", file: "tutorial.html", estimatedTime: "5分", unlockConditions: [], chapterNumber: "TUT" }, { id: "chapter1", title: "Crimson Memories", description: "記憶の奥底に眠る真実を探る...", file: "chapter1.html", estimatedTime: "30分", unlockConditions: ["tutorial"], chapterNumber: "01" } ] }; ``` ### ゲーム追加手順 1. Interactive Movie Studio でゲーム制作 2. config.js の games 配列に新しいオブジェクトを追加 3. images フォルダにサムネイル画像を配置 4. thumbnails にパスを追加 5. ブラウザでリロードして確認 ## 🎮 UI機能 ### サイドバー統計 - **総コンテンツ数** - 登録されているゲーム数 - **クリア済み** - 完了したゲーム数 - **プレイ時間** - 累計プレイ時間 - **進捗率** - 全体の完了パーセンテージ ### ステータス表示 - 🔒 ロック中（条件未達成） - ⭕ 未プレイ（解放済み・未開始） - 🟡 プレイ中（途中まで進行） - ✅ 完了（クリア済み） ## ⚙️ カスタマイズ機能 ### カラーテーマ（6種類） Cosmic Purple、Ocean Blue、Sunset Pink、Forest Green、Royal Purple、Fire Orange ### パフォーマンス設定 - **パーティクル数調整** - 軽量(20)・標準(40)・高品質(60) - **グリッドレイアウト** - コンパクト・標準・ゆったり - **ホバー効果・ぼかし効果** - 有効・無効切り替え ### 背景設定 - **プリセット背景** - 7種類の美しいグラデーション - **カスタム背景** - 独自画像の設定 - **動的背景** - パーティクルエフェクト ## 🤖 自動進捗検出機能（NEW！） ### 概要 プレイ時間を分析して、ゲームの完了状況を自動判定する革新的な機能です。 ### 設定項目 ```javascript autoCompletion: { enabled: true, // 機能の有効/無効 minPlayTime: 3, // 最低プレイ時間（分） completionThreshold: 0.7, // 完了判定閾値（推定時間の70%） singleSessionThreshold: 0.5, // 一回セッション完了判定（50%） showNotifications: true, // 完了通知の表示 } ``` ### 判定ロジック 1. 最低プレイ時間をクリア 2. 以下のいずれかを満たす： - 累計プレイ時間が推定時間の70%に到達 - 一度のセッションで推定時間の50%に到達 **例：** 推定時間30分のゲーム - 最低3分以上プレイ - 累計21分以上または一度に15分以上で自動完了 ## 🔧 アンロックシステム ```javascript unlockConditions: [] // 条件なし（最初から解放） unlockConditions: ["tutorial"] // 単一条件 unlockConditions: ["chapter1", "chapter2"] // 複数条件（全て完了必要） ``` ## 💻 動作環境 - **ブラウザ:** Chrome, Firefox, Safari, Edge（最新版） - **OS:** Windows, Mac, Linux, Electron アプリ対応 - **必要技術:** HTMLの基本的な編集ができれば十分 ## 📁 推奨フォルダ構成 ``` 📁 story-portal-collection/ ├── 📄 index.html (ランチャー本体) ├── 📄 config.js (設定ファイル ★編集対象) ├── 📁 images/ (画像素材) │ ├── 🖼️ tutorial.jpg │ └── 🖼️ chapter1.jpg ├── 📁 stories/ (ゲームファイル) │ ├── 📄 interactive_tutorial.html │ └── 📄 chapter1.html └── 📄 README.md ``` ## 💡 活用例 - **学習管理システム** - 段階的な教育プログラム - **ゲーム配布パッケージ** - インディーゲームの統合ランチャー - **企業研修プラットフォーム** - 複数の研修コンテンツ統合 - **作品ポートフォリオ** - クリエイターの作品集展示 - **イベント用コンテンツ** - 展示会・体験会での利用 ## ⚡ 技術仕様 - **フレームワーク:** Vanilla JavaScript（軽量・高速） - **データ保存:** localStorage（ブラウザ内永続化） - **レスポンシブ対応** - CSS Grid + Flexbox - **アニメーション:** CSS3 + JavaScript（60fps） - **Electron対応:** デスクトップアプリとしても動作 ## 🤝 Interactive Movie Studio との連携 Story Portal は Interactive Movie Studio で制作したコンテンツと100%連携： 1. Studio でゲーム制作 → 高品質なインタラクティブコンテンツ 2. Portal で統合管理 → 美しいUI での一元管理・進捗追跡 3. シームレス連携 → ゲーム間のデータ共有・アンロック管理 ## 💰 商用利用について ✅ **完全自由** - ランチャーの商用利用・配布に制限なし ✅ **クレジット表記不要** - ツール名の記載は任意 ✅ **改変OK** - HTMLファイルのカスタマイズ可能 ✅ **配布自由** - 設定済みランチャーの配布・販売OK ✅ **企業利用可能** - 研修・マーケティング用途で自由使用 ## 🔒 セキュリティ・プライバシー - **ローカル保存** - 個人データは端末内のみに保存 - **外部送信なし** - インターネット接続不要で完全プライベート - **GDPR準拠** - EU圏でのデータ保護規則に適合 ## ⚠️ 注意事項 - **config.js必須** - 設定ファイルを正しく設定してください - **画像パス** - 相対パスで指定（images/フォルダ推奨） - **ファイル名** - ゲームIDとファイル名の一致に注意 - **JavaScript有効** - ブラウザでJavaScriptを有効にしてください **🚀 今すぐ美しいストーリーポータルで体験を始めよう！** *Story Portal v1.0 | 2025年6月*