OBSテロップアプリ運用マニュアル（v0.3 改訂）

作成日：2026-08-17

0. 文書情報

文書名：OBSテロップアプリ運用マニュアル
バージョン：0.3（改訂）
作成日：2026-08-17

まず覚える用語（最重要）
画面一覧と役割
ログインとログアウト
送出の基本操作（最重要）
Stockの編集・メモ・履歴
Preview/Program表示の確認
プリセット（見た目）設定
Admin設定（管理者向け）
印刷機能
ショートカット一覧
外部からStock追加（API）
よくあるトラブル
バックアップ/復旧（管理者向け）

1. まず覚える用語（最重要）

Stock（ストック）：テロップの候補一覧。ここから選んで送ります。
Preview（プレビュー）：送出前の仮置き。最終確認の場所。
Program（プログラム）：本番で流れる表示（OBSに出る）。
Preset（プリセット）：見た目（フォント・枠・色・アニメーション）の設定。
Lock（ロック）：同時操作を防ぐ仕組み。ボタンが効かない時はロックが原因です。

2. 画面一覧と役割

2.1 画面

操作画面：/index.html
プリセット設定：/preset.html
管理画面：/admin.html
プログラム表示（OBS）：/obs.html
プレビュー表示：/queue.html
プログラムmemo表示：/obs_memo.html
プレビューmemo表示：/queue_memo.html

2.2 権限とできること

selector：Stock作成/編集/並び替え
sub_operator：+ 削除、Previewセット/クリア、Preset更新
operator：+ 送出、Programクリア、Program → Stock/Previewへの差し戻し、Program表示のON/OFF
admin：+ ユーザー管理、監査閲覧、各種設定

3. ログインとログアウト

3.1 ログイン

操作画面（/index.html）を開く
ユーザーID/パスワードを入力
「ログイン」を押す

3.2 ログアウト

画面右上の「ログアウト」ボタンを押す

4. 送出の基本操作（最重要）

4.1 送出の流れ

Stockにテキストを追加
Stock → Preview に移す
Preview → Program に送出
Programを「クリア」

4.2 Stockに追加

入力欄にテキストを入力
Ctrl + Enter で追加

補足：投稿日時と短縮ID（#で始まる文字列）は、プリントアイコンの右に表示されます。画面幅が狭いときは独立した行に戻ります。

4.3 Previewに送る

ボタンで送る
ドラッグ＆ドロップで送る

補足：Previewにテキストがある状態で上書きすると、元のPreviewはStock先頭に戻ります。

4.4 Programに送出

ボタン「送出（PRV → PGM）」
ショートカット Ctrl + →

4.5 クリア

Preview または Program の内容を捨てる操作です。クリアすると空になります。内容を残したまま一時的に隠したいだけなら、次の「4.6 Program表示のON/OFF」を使ってください。

Preview「クリア」
Program「クリア」

4.6 Program表示のON/OFF

Program (PGM) カードの「クリア」の右にある「表示OFF」ボタンで、内容を保持したまま obs.html の表示だけを消せます。もう一度押す（「表示ON」）と、同じ内容がそのまま再び表示されます。

「クリア」との違いに注意してください。クリアは内容を捨てる操作でProgramが空になります。表示OFFは内容を保持したまま隠すだけなので、表示ONに戻せば元のテロップがそのまま出ます。

表示ONに戻すと、枠のアニメーションと文字のアニメーションが頭から再生されます
表示OFFのまま「送出」しても、OFFの状態は保たれます。Programの中身だけが差し替わり、表示ONにした瞬間に画面に出ます。「先に仕込んでおいて、任意のタイミングで出す」という使い方ができます
OFFのまま送出したときは「PGM非表示のまま送出しました」というトーストが表示されます（送出したのに画面に出ない、という誤認を防ぐためです）
確認ダイアログは出ません。ON/OFFどちらの方向も即座に切り替わります
キーボードの Ctrl + Space（反応しない環境では Ctrl + \）でも切り替えられます。詳しくは「10. ショートカット一覧」を参照してください
操作できるのはoperator以上です（「クリア」と同じ権限）
ON/OFFの状態は保存され、サーバーを再起動してもOFFのまま維持されます（再起動と同時にテロップが復活してしまう事故を防ぐためです）
影響するのは obs.html のみです。obs_memo.html / queue.html / queue_memo.html は影響を受けません

非表示中は、Program (PGM) カード全体が警告色（赤い枠と背景）になり、見出しの横に「非表示中」バッジが出ます。Program表示エリアも薄く表示されるので、一目で分かります。

表示OFF中の obs.html は枠ごと消え、背景（OBS側でキーイングする色）だけが残ります。

5. Stockの編集・メモ・履歴

5.1 テキスト編集

Stockの「編集」ボタンで編集
改行OK

5.2 メモ追加/編集

Stockで「メモを追加/メモを編集」
プレビュー/プログラムでもメモは確認できます

5.3 不要テロップ（履歴）

送出や削除で「不要テロップ」に移動
「すべて/表示済み/未表示」で絞り込み
「Stockに戻す」で戻せます
「表示済み」は送出した時点で付きます。Program表示がOFFの間に送出したテロップも「表示済み」として記録されます（実際に画面に出たかどうかとは連動しません）

補足：投稿日時と短縮IDは操作ボタンの右（行末）に表示されます。画面幅が狭いときは独立した行に戻ります。

6. Preview/Program表示の確認

6.1 Preview表示（queue.html）

プレビューの見た目確認用
左上に「PRV」表示

6.2 Program表示（obs.html）

OBSに出す本番表示
左上に「PGM」表示
Program表示がOFFのときは枠ごと消え、背景（OBS側でキーイングする色）だけが残ります。詳しくは「4.6 Program表示のON/OFF」を参照してください

6.3 memo表示（obs_memo / queue_memo）

カンペ表示用
Adminの「メモ設定」で縦書き/文字サイズを調整

7. プリセット（見た目）設定

7.1 何が変わるか

フォント、サイズ、色、枠、影、揃え、アニメーション

7.2 変更方法

値を変更
「Preset更新」
必要なら「1つ前に戻す」

7.3 プリセット各項目の説明（初心者向け）

Background（背景）

背景色：OBS側でキーイング（抜く色）に使う色です。通常は緑や青を指定します。

Frame（枠）

有効：枠を出すかどうか。
横幅/縦幅：枠全体のサイズです。文字の外側のサイズになります。
Text Padding X/Y：枠の内側の余白です。大きいほど文字が内側に寄ります。
Border Width：枠線の太さです。
Border Color：枠線の色です。
Frame Background：枠の背景色です。
Border Radius：角の丸みです。
Shadow X/Y/Blur/Color：枠の影の方向・ぼかし・色です。

Text（文字）

Font Family：文字のフォント。
Font Weight：太さ。数値が大きいほど太くなります。
Font Size：文字の大きさ。
Text Color：文字の色。
Text Align：左/中央/右寄せ。
Line Height：行の間隔。
Vertical Align：枠の中で上/中央/下に寄せます。

Animation（アニメーション）

Anim Name：動きの種類。
Anim Duration：動く時間（ミリ秒）。
Anim Easing：動きのなめらかさ。
追加の詳細値（移動距離など）は「アニメーション詳細」に入力します。

7.4 保存プリセット

「プリセットを保存」で保存
1〜9キーで呼び出し
ドラッグで並び替え

8. Admin設定（管理者向け）

8.1 ユーザー管理

作成/削除/権限変更

8.2 履歴リセット

送出履歴とPreset履歴をリセット

8.3 プリント設定

メモ/投稿日時/ハッシュを印刷に含める

8.4 メモ設定

縦書き/メモ表示
文字サイズ（+/-で即時反映）

8.5 アナウンス

ポップアップ/トースト/モーダルを送信

8.5.1 各表示の違い（初心者向け）

ポップアップ：左上に小さく出ます。重要なお知らせを「見せつつ作業は続けたい」ときに使います。右上の×で閉じられます。
トースト：画面の下部に大きめの帯で表示されます。操作中でも気づかせたいが、作業を止めたくない時に使います。画面をクリックするか、約6秒で消えます。
モーダル：画面全体を覆う形で出ます。「今すぐ見てほしい」「必ず確認してほしい」内容で使います。画面のどこかをクリックすると閉じます。

8.5.2 使い分けの例

ポップアップ：本番開始5分前の注意
トースト：プレビュー更新のお知らせ
モーダル：送出停止や緊急連絡

8.6 インポート / エクスポート

エクスポート対象

Preview / Program / Stock
保存プリセット
Admin設定値

インポート手順

Adminで「インポート」
JSONを選択
上書き確認で「OK」

9. 印刷機能

9.1 使い方

Stockの「プリント」アイコンを押す
A4用に整形された画面が出る

9.2 印刷に含める内容

Adminの「プリント設定」で切替

10. ショートカット一覧

ショートカットは画面ごとに割り当てが異なります。特に Ctrl + Enter は画面によって動作が違うので注意してください。

操作画面（index.html）

Ctrl + Enter：入力欄でStockに追加
Ctrl + ↑：Stock最上段をPreviewへ送る
Ctrl + →：PreviewをProgramへ送出
Ctrl + Space または Ctrl + \：Program表示のON/OFF（operator以上）
Ctrl + 1〜9：保存プリセットを呼び出す（sub_operator以上）

プリセット画面（preset.html）

Ctrl + Enter：Preset更新
Ctrl + 0：PreviewをProgramへ送出
Ctrl + 1〜9：保存プリセットを呼び出す

同じ Ctrl + Enter でも、操作画面ではStock追加、プリセット画面ではPreset更新と、画面によって意味が異なります。混同すると誤操作につながるので注意してください。

覚えておきたいこと

Ctrl + 1〜9 は、保存プリセットが登録されている番号だけプリセット呼び出しになります。登録がない番号は、ブラウザ本来のタブ切り替えとして動きます（保存プリセットが3件なら、Ctrl + 4〜9 はタブ切り替えです）
Ctrl + Space は、パソコンの設定によっては日本語入力の切り替えに使われていて反応しないことがあります。その場合は Ctrl + \（バックスラッシュ。日本語キーボードでは ¥ のキー）を使ってください。どちらも同じ動作です
テロップの入力欄にカーソルがあるときは、ショートカットは動きません。文字入力を邪魔しないためです

11. 外部からStock追加（API）

11.1 できること

外部システムから POST /api/stock にテキストを送ると、Stockに追加できます

11.2 APIキーの発行

管理者がサーバー上で node scripts/create-api-key.js を実行して発行します
APIキーはSHA-256でハッシュ化して保存され、発行時の一度しか値が表示されません。控えを失った場合は、新しいキーを発行し直してください

11.3 使い方

リクエストヘッダ X-API-Key にキーの値を指定して POST /api/stock に送信します
本文は通常のStock追加と同じ形式（text と任意の memo）です

11.4 権限と通知

APIキー経由の権限は selector 相当の最小権限です。Stockへの追加しかできません（送出やクリアはできません）
Slack通知の設定（SLACK_WEBHOOK_URL）があれば、APIキー経由の追加はSlackにも通知されます

11.5 注意

APIキーはadminが管理します
不明点は管理者へ連絡してください

12. よくあるトラブル

12.1 送出できない

権限不足
ロックが他の人に取られている

対処

画面再読込
もう一度送出

12.2 画面が出ない/崩れる

ブラウザを再読込
OBSブラウザソース再読込

12.3 ログアウトされた

画面の案内に従い再読込

12.4 送出したのにOBSに出ない

Program表示がOFFになっていないか確認してください。操作画面のPGM (Program) カードが赤くなっていればOFFです
「表示ON」ボタンを押すと表示されます

12.5 操作画面の表示と本番のOBSが食い違う

OBSのブラウザソースが古いキャッシュのまま動いている可能性があります
OBSでソースを右クリック→「ソースを更新」を実行してください
複数PCで運用している場合は、すべてのPCで実行が必要です。詳細は「05-OBS運用手順書」を参照してください