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を利用してメッセージを取得します。
- Botの作成:
- Discord Developer Portalにアクセスし、ログインします。
New Applicationボタンを押し、好きな名前(例: OBS Chat Bot)でアプリケーションを作成します。- 左側のメニューから
Botを選択し、Add BotをクリックしてBotを作成します。
- インテントの有効化:
- Botのページで、
Privileged Gateway Intentsという項目を探します。 - MESSAGE CONTENT INTENT のトグルをオン(有効)にしてください。これがないとメッセージの内容を読み取れません。
- Botのページで、
- Botトークンの取得:
- Botの名前の下にある
Reset Token(またはView Token) をクリックして、Botのトークンをコピーします。 - ⚠️ このトークンは絶対に他人に教えたり、公開しないでください。
- Botの名前の下にある
- Botをサーバーに招待:
- 左側のメニューから
OAuth2→URL Generatorを選択します。 SCOPESでbotとapplications.commandsの両方にチェックを入れます。BOT PERMISSIONSで以下の権限にチェックを入れます:View Channels(チャンネルを見る)Read Message History(メッセージ履歴を読む)Send Messages(メッセージを送信) ※必須ではないが推奨
- 生成されたURLをコピーし、ブラウザで開いて、Botを追加したいあなたのDiscordサーバーに招待します。
- 左側のメニューから
- チャンネル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. フォントの準備 (任意)
チャットの表示フォントをカスタマイズできます。
- プロジェクトフォルダに
fontsという名前のフォルダがあることを確認します。(なければ作成してください) - お好きなフォントファイル(
.ttf,.otfなど)を、このfontsフォルダの中に入れます。 fontsフォルダにファイルが置かれている場合、プログラムが自動で読み込み、チャットの表示に適用します。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への設定
- OBSを起動し、「ソース」パネルの
+ボタンから「ブラウザ」を選択します。 - プロパティ画面で、以下のように設定します:
ローカルファイルにチェックを入れる。ローカルファイルの参照ボタンを押し、このプロジェクトフォルダ内のindex.htmlを選択する。幅と高さを配信画面に合わせて調整します。(例: 幅400, 高さ600)
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 - 設定ファイル読み込み