[体験版]Interactive Story Launcher 「インタラクティブ作品ポートフォリオ - 教育・企業向け統合プラットフォーム」

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