🚀 アプリケーションの起動

セットアップが完了したら、アプリケーションを起動します。

Windowsでの起動

プロジェクトフォルダ内のstart.batをダブルクリック
黒いウィンドウ（コマンドプロンプト）が開きます
必要なライブラリのインストールが自動で実行されます
「Starting the Discord Bot and WebSocket server...」と表示されれば成功

手動での起動

コマンドプロンプトまたはPowerShellを開く
プロジェクトフォルダに移動

以下のコマンドを実行：

# 仮想環境の作成（初回のみ）
python -m venv .venv

# 仮想環境の有効化
.venv\Scripts\activate

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

# アプリケーションの起動
python main.py

起動確認

正常に起動すると、以下のような情報が表示されます：

============================================================
  Discord to OBS Chat Viewer
============================================================
設定情報:
  監視チャンネル数: 2
  履歴取得件数: 50
  最大保持件数: 100
  WebSocketポート: 8765
============================================================
コマンド:
  /add <チャンネル>   - チャンネルを監視リストに追加
  /remove <チャンネル> - チャンネルを監視リストから削除
  /list              - 監視中のチャンネル一覧
============================================================

📺 OBS Studioでの設定

Discord Chat ViewerをOBSで表示するための設定手順です。

1. ブラウザソースの追加

OBS Studioを起動
「ソース」パネルの+ボタンをクリック
「ブラウザ」を選択
ソース名を入力（例: "Discord Chat"）
OKをクリック

2. プロパティの設定

プロパティ画面で以下の設定を行う：
- ローカルファイルにチェックを入れる
- ローカルファイルの参照ボタンをクリック
- プロジェクトフォルダ内のindex.htmlを選択
- 幅と高さを設定（例: 幅400px、高さ600px）
- FPSを30に設定（推奨）
OKをクリックして設定を完了

3. 表示の確認

設定が正しく完了すると、OBSのプレビューにDiscordチャットが表示されます。

接続状態は右上のステータス表示で確認できます
「接続完了」と表示されれば正常に動作しています
Discordでメッセージを投稿すると、リアルタイムで表示されます

🎮 Discordコマンドの使用

配信中に監視するチャンネルを動的に変更できます。

利用可能なコマンド

/add channel:#チャンネル名 - チャンネルを監視リストに追加
/remove channel:#チャンネル名 - チャンネルを監視リストから削除
/list - 現在監視中のチャンネル一覧を表示

コマンドの実行例

# 雑談チャンネルを追加
/add channel:#雑談

# ゲームチャンネルを追加
/add channel:#ゲーム

# 現在の監視チャンネルを確認
/list

# 不要なチャンネルを削除
/remove channel:#雑談

権限について

これらのコマンドは以下の権限を持つユーザーのみ実行可能です：

サーバー管理者
チャンネル管理権限を持つユーザー

🎨 カスタマイズオプション

表示をより魅力的にするためのカスタマイズ方法です。

フォントの変更

fontsフォルダにフォントファイルを配置
アプリケーションを再起動
新しいフォントが自動で適用されます

CSSのカスタマイズ

より高度なカスタマイズが必要な場合は、index.html内のCSSを編集できます。

背景色の変更
メッセージボックスのデザイン変更
アニメーション効果の追加
レスポンシブデザインの調整

設定ファイルの調整

config.yamlで以下の設定を調整できます：

history_limit: 起動時に取得する過去メッセージ数
max_messages: メモリに保持する最大メッセージ数
port: WebSocketサーバーのポート番号

🔧 トラブルシューティング

よくある問題とその解決方法です。

接続できない場合

Discord Botのトークンが正しく設定されているか確認
Botがサーバーに正しく招待されているか確認
ファイアウォールでポート8765がブロックされていないか確認
OBSのブラウザソースでローカルファイルが正しく指定されているか確認

メッセージが表示されない場合

監視対象のチャンネルが正しく設定されているか確認
Botに必要な権限が付与されているか確認
MESSAGE CONTENT INTENTが有効になっているか確認
ログファイルでエラーメッセージを確認

パフォーマンスの問題

max_messagesの値を小さくする
history_limitの値を小さくする
不要なチャンネルの監視を停止する

🛑 アプリケーションの停止

アプリケーションを安全に停止する方法です。

正常な停止方法

コマンドプロンプトウィンドウを選択
Ctrl + Cを押す
「⛔ 終了処理中...」と表示される
「✅ アプリケーション終了」と表示されたら完了

強制終了

通常の方法で停止できない場合は、タスクマネージャーでプロセスを終了してください。

Discord Chat Viewer for OBS

使用方法