🎮 コメントビューワー セットアップ手順書
くるみじたんLABOのコメントビューワーを使うために必要な設定です。一度だけやれば完了します。
① ファイルをサーバーにアップロード
ダウンロードしたファイルをレンタルサーバーの public_html にアップロードしてください。
public_html/
├── index.html ← トップページ
├── multistream.html ← 同時配信ツール
├── streampixel.html ← アバターツール
└── comment/
├── index.php ← コメントビューワー本体
├── callback.php ← Twitch認証コールバック
└── config.php ← ← ← ★ここを編集する
⚠ FTPソフト（FileZillaなど）かレンタルサーバーのファイルマネージャーを使ってアップロードしてください。
② Twitch Developer ConsoleでClient IDを取得
2
「アプリケーションを登録する」をクリック
右上の「+ アプリケーションを登録する」ボタンを押します。
3
アプリ情報を入力
名前: くるみじたんLABO（なんでもOK）
OAuthリダイレクトURL: https://あなたのドメイン/comment/callback.php
カテゴリ: Website Integration
4
Client IDとClient Secretをコピー
作成後に表示される
Client ID と、「新しいシークレット」ボタンで生成した
Client Secret をメモしておきます。
⚠ Client Secretは一度しか表示されません。必ずメモしてください。
③ YouTube APIキーを取得（任意）
YouTubeのコメントも表示したい場合のみ必要です。Twitchだけでよければスキップしてください。
1
Googleアカウントでログインし、新しいプロジェクトを作成します。
2
YouTube Data API v3 を有効化
「APIとサービス」→「ライブラリ」→「YouTube Data API v3」を検索して有効にします。
3
APIキーを作成
「APIとサービス」→「認証情報」→「認証情報を作成」→「APIキー」でキーを発行します。
④ config.phpを編集
サーバーにアップロードした comment/config.php をテキストエディタで開いて編集します。
define('TWITCH_CLIENT_ID', '← ここにStep2で取得したClient IDを貼り付け');
define('TWITCH_CLIENT_SECRET', '← ここにStep2で取得したClient Secretを貼り付け');
define('TWITCH_REDIRECT_URI', 'https://あなたのドメイン/comment/callback.php');
define('YOUTUBE_API_KEY', '← YouTubeを使う場合はここにAPIキーを貼り付け（使わない場合は空でOK）');
⚠ config.phpは絶対に公開しないでください。GitHubなどにアップロードするのも危険です。
⑤ 動作確認
1
https://あなたのドメイン/comment/ にアクセス
ログイン画面が表示されれば成功です。
2
「Twitchでログイン」をクリック
Twitchの認証画面が開き、許可するとコメントビューワーが起動します。
✅ チャンネルポイント報酬はログイン後に自動で取得が始まります。配信中に視聴者がポイント交換するとすぐに表示・読み上げされます。
⑥ VOICEVOXの設定
1
配信前にVOICEVOXを起動しておくだけでOKです。
2
コメントビューワーを開いたとき自動で検出されます
VOICEVOXが起動していれば「🎙 VOICEVOX」と表示されます。起動していない場合は「🔊 ブラウザ音声」に自動で切り替わります。
読み上げちゃんの場合
読み上げちゃんもVOICEVOXと同じポート（50021）で動作するため、どちらを起動しても自動で使われます。
✅ これで設定完了です！配信前にVOICEVOXを起動してコメントビューワーを開くだけで使えます。
← くるみじたんLABOに戻る