# テロップ送出システム（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のメッセージ機能よりご連絡ください。