ChatSpark
使い方ガイド
Twitchのチャットやチャンネルポイントと連動して、OBS配信画面にパーティクルエフェクトを表示するオーバーレイツールです。
ChatSparkとは
ChatSparkは、Twitch配信中に視聴者のチャット・チャンネルポイントをきっかけにして、OBSの配信画面上にキラキラ・ポップなパーティクルエフェクトを降らせるツールです。
チャットトリガー
特定のキーワードをチャットに書き込むとエフェクトが発動
チャンネルポイント連動
チャンネルポイント報酬と紐づけて視聴者参加型演出に
カスタム画像・GIF
好きな画像やGIFを登録してオリジナルエフェクトを作成
MCV 連携
MultiCommentViewer 経由で YouTube・ニコニコ等の複数プラットフォームにも対応
Effect Craft
ブラウザ上のビジュアルエディタでエフェクトの動きを調整
ChatSparkはTwitchの非公式サードパーティツールです。Twitch公式製品ではありません。
インストール
GitHubのReleasesページへアクセス
https://github.com/zoloat/ChatSpark/releases を開き、最新バージョンの下にある zip ファイルをクリックしてダウンロードします。
zipを解凍する
ダウンロードしたzipファイルを右クリック →「すべて展開」で好きな場所に解凍します。
デスクトップや「ドキュメント」フォルダなど、わかりやすい場所を推奨します。
ChatSpark.exe を起動
解凍したフォルダの中にある ChatSpark.exe をダブルクリックして起動します。
（初回のみ）Windowsの警告が出た場合
「WindowsがPCを保護しました」と表示されたら、「詳細情報」→「実行」の順にクリックしてください。これはWindows Defenderの初回警告で、ChatSpark固有の問題ではありません。
（バージョンアップ後の初回のみ）Node.jsのネットワーク許可ダイアログ
「Node.js: Server-side JavaScript」がネットワークへのアクセスを求めています、という画面が出ることがあります。「アクセスを許可する」をクリックしてください。
Node.jsのダイアログについて
ChatSparkは内部でNode.jsという仕組みを使って、パソコン上に小さなサーバーを立てています。これはOBSのブラウザソースにエフェクト画面を届けるために必要な仕組みで、インターネットへ情報を送信するものではありません。ダイアログが出たら安心して許可してください。なお、このダイアログはバージョンアップ後の初回起動時にのみ表示されます。
解凍後にフォルダを移動・名前変更しても問題ありませんが、フォルダ内のファイルを個別に移動・削除しないでください。起動しなくなる場合があります。
モード選択
ChatSpark を起動するとまずインプット（コメント取得元）の選択画面が表示されます。用途に合わせてどちらかを選んでください。
| モード | コメント取得元 | チャンネルポイント | DEV登録 |
|---|---|---|---|
| 💬 Twitch モード | Twitch チャット | ✅ 対応 | 必要 |
| 🔌 MCV モード | MultiCommentViewer 経由（Twitch・YouTube・ニコニコ等） | ❌ 非対応 | 不要 |
Twitch のみ使う場合は Twitch モード が簡単です。YouTube やニコニコも使いたい場合や、Twitch DEV 登録が面倒な場合は MCV モード が便利です。
Twitch Developer登録 Twitch モード
この手順は Twitch モード を使う場合のみ必要です。MCV モードを使う場合はスキップして MCV セットアップ へ進んでください。
ChatSparkがTwitchのチャットを受信するには、あなた自身のTwitchアカウントでアプリケーションを登録して、専用のClient IDを取得する必要があります。
以前はこの作業が不要でしたが、2025年のTwitchのセキュリティ強化により、サードパーティツールは各自でアプリ登録したClient IDを使う必要があります。少し手間ですが、一度設定すれば以降は不要です。
① 2段階認証（2FA）を有効にする
Twitch Developerコンソールを使うには、Twitchアカウントに2段階認証の設定が必須です。まだの場合は先に設定してください。
Twitchの設定ページを開く
https://www.twitch.tv/settings/security にアクセスします。
「2段階認証を設定する」をクリック
「セキュリティ」の項目から2段階認証を有効にします。認証アプリ（Google Authenticatorなど）またはSMSで設定できます。
② Twitch Developerコンソールでアプリを登録する
Developerコンソールを開く
https://dev.twitch.tv/console にアクセスして、Twitchアカウントでログインします。
「アプリケーションを登録」をクリック
「Applications」タブを開き、「Register Your Application」ボタンをクリックします。
各項目を入力する
以下の通り入力してください。
| 項目 | 入力内容 |
|---|---|
| Name（名前） | なんでもOK。例：ChatSpark-MyApp |
| OAuth Redirect URI | http://localhost:39080/oauth/callback ← そのままコピペしてください |
| Category（カテゴリ） | Chat Bot を選択 |
| Client Type | Public を選択 |
「Create」をクリックして登録完了
登録が完了するとアプリが一覧に表示されます。「Manage」ボタンをクリックすると詳細画面に移ります。
Client IDをコピーする
詳細画面の「Client ID」欄に表示されている文字列をコピーします。これがChatSparkに入力するキーです。
Client IDは他人に教えないでください。GitHubなどの公開リポジトリにも絶対に載せないようにしてください。
③ Client IDをChatSparkに入力する
ChatSparkの設定パネルを開く
ChatSpark.exeを起動して設定パネルを開きます。
「Client ID」欄に貼り付ける
コピーしたClient IDを設定パネルの「Client ID」欄に貼り付けます。
「保存」を押して完了
必ず「保存」ボタンを押してください。次のステップのTwitch認証に進みます。
初期設定 Twitch モード
起動すると設定パネルが開きます。最初にTwitch認証を行います。
🔑 Twitch認証
「Twitch認証」ボタンをクリック
設定パネル上部の「Twitch認証」ボタンを押すと、ブラウザが開いてTwitchのログイン画面が表示されます。
Twitchアカウントでログイン・許可
Twitchのユーザー名とパスワードでログインし、「許可する」ボタンを押してください。
認証完了を確認
設定パネルに「✅ 認証完了」と表示されれば成功です。チャンネル名が自動で入力されます。
⚡ キーワードを設定する
どんな言葉でエフェクトを発動させるか設定します。
| 設定項目 | 内容 | 例 |
|---|---|---|
| トリガーキーワード | チャットに書かれたときに反応する言葉 | !spark / すごい |
| 対応エフェクト | キーワードに対応するエフェクト名 | default / カスタム名 |
設定変更後は必ず「保存」ボタンを押してください。
ChatSparkはすべての設定を「保存」ボタンが押されたタイミングでまとめて記録します。キーワードの入力・エフェクトの選択・画像の紐付けもすべて保存時に確定します。保存せずに画面を閉じたり別の操作をした場合、変更内容はリセットされます。
よくあるミス：画像はアップロードできていても、エフェクトとの紐付けを「保存」していなかったために、いざ配信したら前の画像が出てしまった、ということが起こりやすいです。変更したら必ず保存の習慣をつけてください。
MCV セットアップ MCV モード
MultiCommentViewer (MCV) の MCVCommentRelay プラグイン を使って、ChatSpark にコメントを送信します。Twitch DEV 登録は不要で、YouTube・ニコニコ等にも対応しています。
MCV モードではキーワードトリガーのみ使用できます。チャンネルポイントトリガーは Twitch モードでのみ利用可能です。
① MCV と MCVCommentRelay プラグインを用意する
MultiCommentViewer をインストール
MCV がまだ入っていない場合は公式サイトからダウンロードしてインストールしてください。
MCVCommentRelay プラグインを導入
MCVCommentRelay プラグインを MCV のプラグインフォルダに配置します。
② プラグインの接続先を設定する
ChatSpark を先に起動する
ChatSpark.exe を起動し、モード選択画面で「MCV」を選択しておきます。
MCVCommentRelay の接続先を設定
プラグインの接続先 URL を以下に設定してください：
http://localhost:39080
接続を確認する
設定パネルの「MCV 接続ステータス」が ● 接続中 に変われば成功です。MCV でコメントが流れると ChatSpark がトリガーを検知します。
MCV より先に ChatSpark を起動しておいてください。ChatSpark が起動していないと MCVCommentRelay プラグインが接続できません。
OBS連携
ChatSparkはOBSのブラウザソースを使って配信画面に重ねて表示します。
📺 ブラウザソースを追加する
ChatSparkを先に起動しておく
OBSを開く前に、ChatSpark.exeを起動して認証まで完了させておいてください。
OBSの「ソース」→「＋」→「ブラウザ」
OBSのソースパネル下部にある「＋」ボタンをクリックして「ブラウザ」を選択します。
URLを入力する
ブラウザソースの設定画面が開いたら、URLに以下を入力します：
http://localhost:39080/display
幅・高さを配信解像度に合わせる
幅 1920、高さ 1080 に設定（配信が1080pの場合）。
その他の解像度の場合は配信設定に合わせてください。
「OKをクリック」してソースを追加
ソースリストに追加されたら、ドラッグして一番上のレイヤーに移動させてください。エフェクトが他の映像の上に表示されます。
OBSのブラウザソースは「シャットダウン時に非表示」設定がある場合があります。ChatSparkを起動するたびにOBS上で「更新」を押すか、設定をオフにしておくことを推奨します。
🔍 動作確認方法
ブラウザで http://localhost:39080/display にアクセスすると、OBSのブラウザソースと同じ画面がプレビューできます。設定したキーワードをチャットに入力して、エフェクトが表示されるか確認しましょう。
トリガー設定
MCV モードをお使いの場合：チャットキーワードトリガーのみ利用できます。チャンネルポイントトリガーは Twitch モードでのみ対応しています。
💬 チャットトリガー
チャット欄に特定のキーワードが投稿されたときにエフェクトを発動できます。（Twitch モード・MCV モード 共通）
| 項目 | 説明 |
|---|---|
| 大文字・小文字 | 区別しません。SparkもSPARKも反応します |
| 部分一致 | デフォルトは部分一致。「すごい！」でも「すごい」に反応します |
| 複数キーワード | キーワードは複数登録でき、それぞれ別のエフェクトを設定できます |
🎁 チャンネルポイントトリガー Twitch モードのみ
Twitchのチャンネルポイント報酬と連動させることができます。この機能は Twitch モードでのみ利用可能です。
Twitchダッシュボードでカスタム報酬を作成
Twitchの配信者ダッシュボード →「視聴者への報酬」→「チャンネルポイント」→「カスタム報酬を管理する」から新しい報酬を作成します。
ChatSparkの設定パネルで報酬名を入力
「チャンネルポイントトリガー」の欄に、Twitchで作成した報酬名を正確に入力してください。
対応エフェクトを設定して保存
発動させるエフェクトを選択し、「保存」を押して完了です。
画像・エフェクトの追加
📁 画像ファイルのルール
| 項目 | 詳細 |
|---|---|
| 対応形式 | PNG / JPG / GIF（アニメーションGIF対応） |
| ファイル名 | 英数字・記号のみ推奨（日本語ファイル名は動作しない場合あり） |
| 複数画像のランダム選択 | 同じ名前ベースのファイルを複数置くだけで自動ランダム選択 |
ファイル名に日本語・全角文字・スペースが含まれると正しく表示されません。hoshi.png のように英数字のみにしてください。
⬆️ 画像をアップロードする
設定パネルの「画像管理」タブを開く
ChatSparkの設定パネルから「画像管理」または「アセット」タブを選択します。
「アップロード」ボタンで画像を選択
ボタンをクリックして画像ファイルを選択します。アップロード成功時は「✓」、失敗時は「❌ 失敗」と表示されます。
エフェクト設定と紐づける
アップロードした画像をどのエフェクトで使用するか、設定パネルから選択します。
Effect Craft
Effect Craftは、エフェクトの動き・物理演算・見た目をブラウザ上でリアルタイムに編集できるビジュアルエディタです。プログラムの知識は不要です。
📐 エフェクト設定の全体の流れ
ChatSparkのエフェクト設定は3つの要素が別々に管理されています。それぞれを正しく設定・保存してはじめてエフェクトが動きます。
Effect Craftで作ったエフェクトと、使用する画像は別々に管理されています。Effect CraftをエクスポートしただけではOBSに画像は表示されません。画像のアップロードと設定パネルでの紐付け・保存まで完了させてください。
🚀 Effect Craftを開く
以下の2通りの方法で開けます：
| 方法 | URL / 手順 |
|---|---|
| ChatSpark起動中 | ブラウザで http://localhost:39080/effect-craft にアクセス |
| ChatSpark未起動 | 解凍フォルダ内の effect-craft/index.html をブラウザで直接開く |
🎛 主な設定パラメーター
| パラメーター | 内容 |
|---|---|
| パーティクル数 | 一度に降るエフェクトの個数 |
| 重力 | パーティクルの落下速度。大きいほど速く落ちる |
| バウンス | 床に当たった際の跳ね返り具合 |
| スケール | 画像のサイズ（倍率） |
| 初速 | 登場時の飛び出す速さ・方向 |
| 回転 | 回転速度・ランダム具合 |
💾 エフェクトをエクスポートして使う
Effect Craft上で「エクスポート」ボタンをクリック
パラメーターを調整し終えたら「JSONをエクスポート」ボタンを押します。.jsonファイルがダウンロードされます。
ChatSparkの設定パネルで読み込む
設定パネルの「エフェクト設定」→「JSONを読み込む」からダウンロードしたファイルを選択します。
保存して完了
「保存」ボタンを押せば、次のトリガー発動からカスタムエフェクトが使われます。
Effect Craftはサーバーなしでも動作します。オフラインでエフェクトを作り込んでおいて、配信前にインポートする使い方もOKです。
トラブルシューティング
① ChatSparkが起動しているか確認してください。
② OBSのブラウザソースのURLが http://localhost:39080/display になっているか確認してください。
③ ブラウザソースを右クリック →「更新」を試してみてください。
④ ブラウザソースのレイヤー順が一番上になっているか確認してください。
ファイル名に日本語・スペースが含まれていないか確認してください（例：星.png → hoshi.png に変更）。
また、設定を保存後に image-index.json が生成されているかご確認ください。生成されない場合は最新版にアップデートすることで解消されます。
① Twitch認証が完了しているか確認してください（設定パネルに「✅ 認証完了」と表示されているか）。
② キーワードが設定・保存されているか確認してください。
③ チャンネル名が正しく入力されているか確認してください。
ファイルサイズが大きすぎる可能性があります。目安として1ファイル5MB以下を推奨します。
また、ファイル名に使用できない文字（日本語・特殊記号）が含まれていないか確認してください。
「詳細情報」をクリックし、「実行」ボタンを押してください。これはWindows Defenderによる警告で、初回起動時のみ表示されます。
① ChatSpark が起動しているか確認してください（MCV より先に起動する必要があります）。
② MCVCommentRelay プラグインの接続先が http://localhost:39080 になっているか確認してください。
③ MCV 自体が起動していてコメント受信中かを確認してください。
① 旧バージョンのChatSparkを終了する。
② 新しいzipを解凍する。
③ ChatSpark.exe と effect-craft/ フォルダを上書きする。
設定ファイルはそのまま引き継がれます。
注意事項
ファイル名は英数字のみ使用してください。 日本語・全角文字・スペースを含むファイル名は正しく動作しません。
ChatSparkはローカルでサーバーを起動します（ポート39080）。他のアプリが同じポートを使用している場合は競合することがあります。
ChatSparkはTwitch APIを使用しますが、Twitchの公式ツールではありません。Twitchのポリシー変更により動作に影響が出る場合があります。
ChatSpark 最新版 · © 2026 zoloat · MIT License
GitHub リポジトリ