マルチテロップシステム

テロップ送出システム（OBS連携マルチチャンネル対応）

OBSと連携して動作するブラウザベースのテロップ送出システムです。複数のテロップチャンネルを1つの操作卓から制御でき、タイムラインや時刻スケジュールによる自動演出に対応しています。

## できること

**テロップ送出**

SVGや画像ファイル（PNG/JPG/GIF/WebP）を複数登録し、スライドのように手動・自動で切り替えてOBSのブラウザソースに表示します。

**アニメーション演出**

スライドごとに入場アニメーション（スライドイン・フェードイン・ズームイン・バウンス・ポップアップなど8種）と退場アニメーション（フェードアウト・スライドアウト・ズームアウトなど7種）を設定できます。速度・イージング・表示位置（上/中央/下）も個別に変更可能です。

**マルチチャンネル**

ポートごとにサーバを立て、1つの操作卓から複数チャンネルを同時操作できます。「ニュース下テロップ」「速報テロップ」のように役割を分けた運用が可能です。

**OBS連携**

OBS WebSocket（OBS 28以降内蔵）を利用して、シーン切替・ソースの表示/非表示・録画の開始/停止を操作卓から直接実行できます。

**タイムライン**

再生ボタンを押してからの経過時間（0:00, 0:30, 1:00...）に連動してテロップTAKE・OBSシーン切替・録画開始/停止・音声再生などを自動実行するキューリストです。

**時刻スケジュール**

PCの時計時刻（14:00, 14:30...）に連動してアクションを自動実行します。翌日も自動でリスケジュールされます。

**効果音・音声**

テロップ表示時のSEをスライドごとに変更可能（カスタム音声ファイル対応）。音量もスライド単位で0〜100%に設定できます。タイムラインやスケジュールからBGM・ナレーション音声の再生/停止も制御できます。

**ショートカットキー**

| キー | 動作 |

|---|---|

| Ctrl+1〜9 | チャンネル切替 |

| Ctrl+←/→ | 前/次のスライド |

| Ctrl+Enter | TAKE（音あり） |

| Ctrl+T | TAKE（音なし） |

| Ctrl+H | 非表示 |

| Ctrl+Shift+H | 非表示＋音声停止 |

| Ctrl+Space | 自動進行ON/OFF |

## 動作環境

- Node.js 18以降

- OBS Studio 28以降（OBS連携を使う場合）

- 対応ブラウザ：Chrome / Edge / Firefox（操作卓用）

## セットアップ

### 1. ファイル配置

ダウンロードしたファイルを以下の構成で配置してください。チャンネルを複数使う場合はフォルダごとコピーしてください。

```

channel1/

├── server.js

├── package.json

└── public/

├── controller.html

├── viewer.html

├── silence.mp3

└── take.mp3 ← デフォルトSE（自分で用意してください）

```

2チャンネル構成の場合：

```

channel1/ ← ポート3000

├── server.js

├── package.json

└── public/

├── controller.html ← ここだけに置く

├── viewer.html

├── silence.mp3

└── take.mp3

channel2/ ← ポート4000

├── server.js

├── package.json

└── public/

├── viewer.html

├── silence.mp3

└── take.mp3

```

### 2. 依存パッケージのインストール

各チャンネルのフォルダで以下を実行してください。

```bash

npm install

```

### 3. サーバ起動

各チャンネルのフォルダで、トークンとポートを指定して起動します。トークンは任意の文字列です。

```bash

TAKE_TOKEN=mysecret PORT=3000 npm start

```

2チャンネル目：

```bash

TAKE_TOKEN=mysecret PORT=4000 npm start

```

### 4. ブラウザで操作卓を開く

```

http://localhost:3000/controller.html

```

### 5. チャンネル設定

操作卓の「チャンネル設定」パネルで「＋ チャンネル追加」を押し、各チャンネルの名前・URL・トークンを入力してください。

- チャンネル1：URL `http://localhost:3000`　トークン `mysecret`

- チャンネル2：URL `http://localhost:4000`　トークン `mysecret`

### 6. OBSの設定

#### Viewerの追加

OBSで「ソース」→「＋」→「ブラウザ」を追加し、以下を設定してください。

- URL: `http://localhost:3000/viewer.html`

- 幅: 1920（配信解像度に合わせる）

- 高さ: 1080

- **「カスタムCSS」を空にする**（デフォルトCSSがあるとレイアウトが崩れます）

2チャンネル目は `http://localhost:4000/viewer.html` で別のブラウザソースを追加してください。

#### OBS WebSocket（任意）

OBSのメニュー「ツール」→「WebSocketサーバー設定」でサーバーを有効にしてください。操作卓のOBSパネルで接続先（通常 `localhost:4455`）を入力して「接続」を押します。

## 基本的な使い方

1. チャンネル詳細パネルで操作したいチャンネルを選ぶ（Ctrl+1〜9でも切替可能）

2. SVGや画像ファイルを「追加」ボタンで登録

3. 「TAKE（音あり）」を押すとViewerにテロップが表示される

4. 「前へ」「次へ」でスライドを切り替え

5. 「非表示」でテロップを消す

## ファイルについて

| ファイル | 説明 |

|---|---|

| server.js | Expressサーバ。静的ファイル配信とテロップAPI |

| package.json | Node.js依存パッケージ定義 |

| controller.html | 操作卓UI。1つのサーバにだけ配置 |

| viewer.html | 表示用。OBSブラウザソースに読み込ませる |

| silence.mp3 | 音声停止用の無音ファイル。全サーバに配置 |

| take.mp3 | デフォルトSE。各自で用意して配置 |

## 注意事項

- `take.mp3`は同梱していません。お好みの効果音をこのファイル名で`public/`に配置してください。

- ポート7000はmacOSのAirPlayレシーバーが使用していることがあります。起動時にエラーが出た場合は別のポートを使ってください。

- 操作卓のデータ（スライド登録・スケジュール等）はブラウザのlocalStorageに保存されます。ブラウザのデータを消去すると設定がリセットされます。

- 大きなSVGファイルを多数登録するとlocalStorageの容量上限（約5MB）に達する場合があります。

## ライセンス

MIT License

本ソフトウェアは以下のオープンソースソフトウェアを利用しています。

- [Express](https://expressjs.com/) - MIT License

- [Multer](https://github.com/expressjs/multer) - MIT License

- [obs-websocket-js](https://github.com/obs-websocket-community-projects/obs-websocket-js) - MIT License (CDN経由で読み込み)

## 開発について

本ソフトウェアはAI（Claude/ChatGPT）を活用して開発しました。

## 問い合わせ

バグ報告や要望がありましたらBOOTHのメッセージ機能よりご連絡ください。