Discord Chat Viewer for OBS

技術仕様

Discord Chat Viewer for OBSの技術的な詳細、API仕様、アーキテクチャについて説明します。 開発者向けの情報も含まれています。

🏗️ アーキテクチャ概要

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

システム構成図

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Discord API   │    │   Discord Bot   │    │ WebSocket Server│
│                 │◄──►│                 │◄──►│                 │
│  - メッセージ取得  │    │  - チャンネル監視 │    │  - リアルタイム通信│
│  - イベント受信   │    │  - コマンド処理   │    │  - クライアント管理│
└─────────────────┘    └─────────────────┘    └─────────────────┘
                                                       │
                                                       ▼
                                              ┌─────────────────┐
                                              │   Web Client    │
                                              │                 │
                                              │  - HTML/CSS/JS  │
                                              │  - OBS表示用     │
                                              └─────────────────┘

コンポーネント詳細

  • Discord Bot - Discord APIからメッセージを取得し、WebSocketサーバーに送信
  • WebSocket Server - リアルタイム通信を提供し、複数クライアントに対応
  • Web Client - OBSで表示するHTMLページ、WebSocketでデータを受信

🔌 WebSocket API

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

接続情報

  • URL: ws://localhost:8765
  • プロトコル: WebSocket
  • エンコーディング: UTF-8

メッセージ形式

すべてのメッセージはJSON形式で送信されます。

初期化メッセージ (type: "init")

クライアント接続時に送信される初期データ

{
  "type": "init",
  "messages": [
    {
      "id": "message_id",
      "author": "ユーザー名",
      "avatar": "avatar_url",
      "content": "メッセージ内容",
      "timestamp": "2024-01-01T00:00:00",
      "channel_name": "チャンネル名",
      "attachments": [...],
      "embeds": [...]
    }
  ],
  "fonts": [
    {
      "name": "フォント名",
      "data": "base64エンコードされたフォントデータ",
      "format": "ttf",
      "mime": "font/ttf"
    }
  ]
}
新規メッセージ (type: "new")

新しいメッセージが投稿された時に送信

{
  "type": "new",
  "message": {
    "id": "message_id",
    "author": "ユーザー名",
    "avatar": "avatar_url",
    "content": "メッセージ内容",
    "timestamp": "2024-01-01T00:00:00",
    "channel_name": "チャンネル名",
    "attachments": [
      {
        "url": "添付ファイルURL",
        "filename": "ファイル名",
        "content_type": "MIMEタイプ"
      }
    ],
    "embeds": [
      {
        "title": "埋め込みタイトル",
        "description": "埋め込み説明",
        "url": "埋め込みURL",
        "color": 16711680,
        "image": "画像URL",
        "thumbnail": "サムネイルURL"
      }
    ]
  }
}

⚙️ 設定ファイル (config.yaml)

アプリケーションの設定はYAML形式の設定ファイルで管理されます。

設定項目詳細

# Discord Bot設定
discord:
  token: "YOUR_DISCORD_BOT_TOKEN_HERE"  # Discord Botトークン（必須）
  channels:                              # 監視するチャンネルIDリスト
    - 123456789012345678
    - 987654321098765432
  history_limit: 50                     # 起動時に取得する過去メッセージ数
  max_messages: 100                      # メモリに保持する最大メッセージ数

# WebSocketサーバー設定
websocket:
  host: "0.0.0.0"                       # バインドするホスト
  port: 8765                            # バインドするポート

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

設定項目の説明

  • discord.token: Discord Botのトークン（必須）
  • discord.channels: 監視するチャンネルのIDリスト
  • discord.history_limit: 起動時に取得する過去メッセージ数（1-100推奨）
  • discord.max_messages: メモリに保持する最大メッセージ数（パフォーマンス調整用）
  • websocket.host: WebSocketサーバーがバインドするホスト（通常は"0.0.0.0"）
  • websocket.port: WebSocketサーバーのポート番号（デフォルト: 8765）
  • logging.level: ログの詳細レベル

📁 ファイル構成

プロジェクトのファイル構成と各ファイルの役割です。

.
├── main.py                    # メインエントリーポイント
├── config.yaml               # 設定ファイル
├── start.bat                 # Windows用起動スクリプト
├── requirements.txt          # Python依存関係
├── index.html                # OBS表示用HTML
├── README.md                 # プロジェクト説明
│
├── src/                      # ソースコード
│   ├── __init__.py          # パッケージ初期化
│   ├── bot.py               # Discord Bot実装
│   └── server.py            # WebSocketサーバー実装
│
├── fonts/                    # カスタムフォント置き場
│   └── (フォントファイル)
│
└── docs/                     # ドキュメント
    ├── index.html           # メインページ
    ├── setup.html           # セットアップガイド
    ├── usage.html           # 使用方法
    ├── api.html             # 技術仕様
    ├── styles.css           # スタイルシート
    └── README.md            # ドキュメント説明

主要ファイルの役割

  • main.py: アプリケーションの起動と設定読み込み
  • src/bot.py: Discord Botの実装、メッセージ監視とコマンド処理
  • src/server.py: WebSocketサーバーの実装、リアルタイム通信
  • index.html: OBSで表示するWebクライアント
  • config.yaml: アプリケーション設定

📦 依存関係

このプロジェクトで使用されている外部ライブラリです。

Python依存関係

discord.py>=2.0.0    # Discord API連携
websockets>=10.0     # WebSocket通信
PyYAML>=6.0          # YAML設定ファイル読み込み

ライブラリの役割

  • discord.py: Discord APIとの通信、Bot機能の実装
  • websockets: WebSocketサーバーとクライアント間の通信
  • PyYAML: 設定ファイル（config.yaml）の読み込みとパース

システム要件

  • Python: 3.8以上
  • OS: Windows, macOS, Linux
  • メモリ: 100MB以上（推奨）
  • ネットワーク: Discord APIとWebSocket通信が可能

🔧 開発者向け情報

プロジェクトの拡張やカスタマイズを行う開発者向けの情報です。

開発環境のセットアップ

# リポジトリのクローン
git clone https://github.com/your-username/Discord-Chat-Viewer-for-OBS.git
cd Discord-Chat-Viewer-for-OBS

# 仮想環境の作成
python -m venv .venv

# 仮想環境の有効化
# Windows
.venv\Scripts\activate
# macOS/Linux
source .venv/bin/activate

# 依存関係のインストール
pip install -r requirements.txt

# 開発用依存関係のインストール（オプション）
pip install black flake8 pytest

コードの構造

  • 非同期処理: asyncioを使用した非同期プログラミング
  • イベント駆動: DiscordイベントとWebSocketイベントの処理
  • 設定管理: YAMLファイルによる設定の外部化
  • ログ機能: 構造化されたログ出力

拡張のポイント

  • 新しいコマンド: src/bot.pyの_setup_commandsメソッド
  • メッセージフォーマット: format_messageメソッド
  • WebSocketメッセージ: src/server.pyのadd_messageメソッド
  • フロントエンド: index.htmlのJavaScript部分

🐛 デバッグとログ

問題の特定と解決のためのデバッグ情報です。

ログレベルの設定

config.yamlでログレベルを変更できます：

  • DEBUG: 詳細なデバッグ情報
  • INFO: 一般的な情報（推奨）
  • WARNING: 警告メッセージ
  • ERROR: エラーメッセージのみ

よくあるエラー

  • Discord Bot接続エラー: トークンが無効または権限不足
  • WebSocket接続エラー: ポートが使用中またはファイアウォール
  • チャンネルアクセスエラー: Botの権限不足
  • メッセージ取得エラー: MESSAGE CONTENT INTENTが無効