Discord Chat Viewer for OBS

DiscordチャットをOBSで可愛く表示

Discordの特定チャンネルのチャットを、OBSのブラウザソースにリアルタイムで可愛く表示するためのツールです。 配信者向けに最適化された、使いやすいDiscord連携ツールです。

✨ 主な特徴

リアルタイム更新

Discordのチャットが投稿されると、即座にOBS上の表示に反映されます。

📺

複数チャンネル対応

複数のチャンネルを同時に監視し、一つのビューに表示できます。

🎮

スラッシュコマンド

/add /remove コマンドで、配信中に表示するチャンネルを動的に変更できます。

🎨

カスタムフォント

fonts フォルダにお好きなフォントを入れるだけで、見た目を簡単にカスタマイズできます。

📎

メディア対応

テキストだけでなく、画像、動画、URLの埋め込み(Embed)も表示できます。

🚀

簡単セットアップ

Windowsユーザー向けに、ダブルクリックで起動できるバッチファイルを用意しています。

🔧 セットアップ手順

1. 必要なもの

  • Python 3.8 以上
  • Discordアカウント
  • OBS Studio

2. Discord Botの準備

このツールはDiscord Botを利用してメッセージを取得します。

  1. Botの作成:
    • Discord Developer Portalにアクセスし、ログインします。
    • New Applicationボタンを押し、好きな名前(例: OBS Chat Bot)でアプリケーションを作成します。
    • 左側のメニューから Bot を選択し、Add Bot をクリックしてBotを作成します。
  2. インテントの有効化:
    • Botのページで、Privileged Gateway Intents という項目を探します。
    • MESSAGE CONTENT INTENT のトグルをオン(有効)にしてください。これがないとメッセージの内容を読み取れません。
  3. Botトークンの取得:
    • Botの名前の下にある Reset Token (または View Token) をクリックして、Botのトークンをコピーします。
    • ⚠️ このトークンは絶対に他人に教えたり、公開しないでください。
  4. Botをサーバーに招待:
    • 左側のメニューから OAuth2URL Generator を選択します。
    • SCOPESbotapplications.commands の両方にチェックを入れます。
    • BOT PERMISSIONS で以下の権限にチェックを入れます:
      • View Channels (チャンネルを見る)
      • Read Message History (メッセージ履歴を読む)
      • Send Messages (メッセージを送信) ※必須ではないが推奨
    • 生成されたURLをコピーし、ブラウザで開いて、Botを追加したいあなたのDiscordサーバーに招待します。
  5. チャンネルIDの取得:
    • Discordの設定で「詳細設定」を開き、「開発者モード」をオンにします。
    • OBSに表示したいチャンネルを右クリックし、「チャンネルIDをコピー」を選択します。

3. 設定ファイルの編集

config.yaml をテキストエディタで開き、あなたの情報に書き換えます。

# Discord Botのトークンを""で囲んで貼り付け
discord:
  token: "ここに先ほどコピーしたBotトークンを貼り付け"
  # 初期監視チャンネルID(複数可)
  channels:
    - 123456789012345678 # ここにコピーしたチャンネルIDを貼り付け
  # 起動時に取得する過去メッセージ数
  history_limit: 50
  # メモリに保持する最大メッセージ数
  max_messages: 100

# WebSocketサーバー設定
websocket:
  host: "0.0.0.0"
  port: 8765

# ログ設定
logging:
  level: "INFO"  # DEBUG, INFO, WARNING, ERROR

4. フォントの準備 (任意)

チャットの表示フォントをカスタマイズできます。

  1. プロジェクトフォルダに fonts という名前のフォルダがあることを確認します。(なければ作成してください)
  2. お好きなフォントファイル(.ttf, .otfなど)を、この fonts フォルダの中に入れます。
  3. fonts フォルダにファイルが置かれている場合、プログラムが自動で読み込み、チャットの表示に適用します。
  4. fonts フォルダが空、または存在しない場合は、Windowsの標準フォント(游ゴシックやメイリオなど)で表示されます。

💡 使い方

1. 起動

start.bat をダブルクリックして実行します。

黒いウィンドウが開き、必要なライブラリのインストールとサーバーの起動が自動的に行われます。「Starting the Discord Bot and WebSocket server...」というメッセージが表示されれば成功です。

サーバーを停止するには、この黒いウィンドウを選択した状態で Ctrl + C を押してください。

2. チャンネルの管理 (Discord上)

Discordのサーバーで、以下のスラッシュコマンドを実行して、OBSに表示するチャンネルをリアルタイムで変更できます。(このコマンドは「チャンネルの管理」権限を持つユーザーのみ実行可能です)

  • /add channel:#雑談 - #雑談 チャンネルを監視対象に追加します。
  • /remove channel:#雑談 - #雑談 チャンネルを監視対象から削除します。
  • /list - 現在監視中のチャンネル一覧を表示します。

3. OBSへの設定

  1. OBSを起動し、「ソース」パネルの + ボタンから「ブラウザ」を選択します。
  2. プロパティ画面で、以下のように設定します:
    • ローカルファイル にチェックを入れる。
    • ローカルファイル の参照ボタンを押し、このプロジェクトフォルダ内の index.html を選択する。
    • 高さ を配信画面に合わせて調整します。(例: 幅 400, 高さ 600
  3. OK をクリックしてソースを追加します。

これで、Discordにメッセージが投稿されるとOBSの画面にリアルタイムで表示されるようになります。

🔧 技術仕様

アーキテクチャ

このツールは以下の3つの主要コンポーネントで構成されています:

  • Discord Bot - Discord APIからメッセージを取得
  • WebSocket Server - リアルタイム通信を提供
  • Web Client - OBSで表示するHTMLページ

WebSocket API

クライアントとサーバー間の通信はWebSocketを使用します。

接続

ws://localhost:8765

メッセージ形式

初期化メッセージ (type: "init")
{
  "type": "init",
  "messages": [...],
  "fonts": [...]
}
新規メッセージ (type: "new")
{
  "type": "new",
  "message": {
    "id": "message_id",
    "author": "ユーザー名",
    "avatar": "avatar_url",
    "content": "メッセージ内容",
    "timestamp": "2024-01-01T00:00:00",
    "channel_name": "チャンネル名",
    "attachments": [...],
    "embeds": [...]
  }
}

設定ファイル (config.yaml)

# Discord Bot設定
discord:
  token: "YOUR_DISCORD_BOT_TOKEN_HERE"
  # 初期監視チャンネルID(複数可)
  channels:
    - 123456789012345678
    - 987654321098765432
  # 起動時に取得する過去メッセージ数
  history_limit: 50
  # メモリに保持する最大メッセージ数
  max_messages: 100

# WebSocketサーバー設定
websocket:
  host: "0.0.0.0"
  port: 8765

# ログ設定
logging:
  level: "INFO"  # DEBUG, INFO, WARNING, ERROR

ファイル構成

.
├── main.py                # プログラムの起動ファイル
├── config.yaml            # 設定ファイル
├── start.bat              # Windows用簡単起動スクリプト
├── requirements.txt       # Pythonの依存ライブラリリスト
├── index.html             # OBSで表示するチャット画面
├── README.md              # このファイル
│
├── src/                   # ソースコード用フォルダ
│   ├── __init__.py
│   ├── bot.py
│   └── server.py
│
└── fonts/                 # カスタムフォント置き場
    └── (例: MyKawaiiFont.ttf)

依存関係

  • discord.py - Discord API連携
  • websockets - WebSocket通信
  • PyYAML - 設定ファイル読み込み