[体験版]Story Portal 「ゲーム統合ハブ - 映画風UIでマルチ作品を一元管理」

🎬 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月*