# 📺 発表用コントロールパネル (Presentation Control Panel)

HTML・画像・動画ファイルをサブモニター（プロジェクターや大型ディスプレイ）へシームレスに投影し、手元画面（LIVE MONITOR）でリアルタイム確認・リモート操作できるプレゼンテーション支援ツールです。

---

## 🚀 起動方法

解凍したフォルダ内のファイルをダブルクリックするだけで起動できます。

### 方法 1: `index.html` をダブルクリック（推奨・一番簡単）
- フォルダ内の **`index.html`** をお使いのWebブラウザ（Google Chrome / Safari / Microsoft Edge 等）で開いてください。
- Mac / Windows どちらの環境でもそのまま起動します。

### 方法 2: 起動スクリプトを使用
- **Mac の場合**: `start.command` をダブルクリック
- **Windows の場合**: `start.bat` をダブルクリック

---

## 📖 使い方・操作手順

### 1. 発表用フォルダの選択
1. 画面左上の **「発表フォルダを選択」** ボタンをクリックします。
2. 発表で使用するスライド・画像・動画・HTMLファイルが入ったフォルダを選択します。
3. フォルダ内のファイル（HTML / 画像 / 動画）が自動検出され、サムネイル一覧が表示されます。

### 2. 投影スクリーン画面を開く
1. 画面右上の **「投影スクリーン画面を開く」** ボタンをクリックします。
2. 開いたウィンドウ（`display.html`）をプロジェクターやサブモニター側に移動し、**フルスクリーン表示（F11 または Command+Ctrl+F）** にします。
3. ステータスが **「投影画面: 接続中 (緑色)」** に変われば連動準備完了です。

### 3. スライド・メディアの切り替え
- **サムネイルをクリック**: 選択したコンテンツが即座に投影画面へ反映されます。
- **「次へ」「前へ」ボタン**: 手元バナーのボタンで順番に切り替えられます。
- **キーボードショートカット**: 
  - `Alt` + `→` : 次のファイルへ切り替え
  - `Alt` + `←` : 前のファイルへ切り替え

---

## ⚡ リアルタイム LIVE MONITOR & 特殊機能

### 1. HTMLスライドの操作とリアルタイム同期
- **スクロール・キー操作**: 手元のキーボードの **`↑` `↓` `←` `→` `Space`** キーを押すと、投影画面のHTMLがスクロール・進みます。
- **LIVE MONITOR完全同期**: 投影画面のスクロール位置が、手元の「LIVE MONITOR（ミニプレビュー画面）」にもリアルタイムで全く同じ表示位置として反映されます。

### 2. 動画のリアルタイム連動 & リモート操作
- **再生位置の完全同期**: 投影画面側で動画を再生・一時停止すると、手元のLIVE MONITORもミリ秒単位で全く同じ再生時間に追従します。
- **手元からの動画操作**: 動画選択時、手元バナーに **「最初に戻る」「再生」「一時停止」** ボタンが自動出現し、手元から投影動画を自由にコントロールできます。

### 3. ファイルフィルター & フォルダツリー
- 左側のサイドバーで **HTML / 画像 / 動画** のファイル種別フィルターや、サブフォルダ構造での絞り込みが可能です。

---

## 📁 動作環境
- **OS**: macOS / Windows 10 & 11 / ChromeOS
- **推奨ブラウザ**: Google Chrome / Microsoft Edge / Safari (最新版)
- **インターネット接続**: 不要（完全オフラインで動作します）

---

## 💡 トラブルシューティング
- **投影画面が開かない**: ブラウザのポップアップブロックが作動している可能性があります。アドレスバー付近の警告から「このサイトのポップアップを許可」を選択してください。
- **画面が連動しない**: 投影画面(`display.html`)を一回閉じ、再度「投影スクリーン画面を開く」を押してください。
