自作の配信ツール（コメント連動エフェクトなど）を作ったとき、多くの場合「まずYouTube対応から」という順番になると思います。けれど、視聴者やコラボ相手にTwitch配信者がいると、「Twitchでも使いたい」という声が出てくることがあります。

こちらの記事では、YouTube専用として作った配信ツールに、Twitch対応を後から追加する方法を解説します。Electron製のデスクトップアプリを例にしていますが、考え方はWebアプリ等にも応用できます。

必要なライブラリ

YouTubeのチャット取得にはyoutube-chatのようなライブラリを使うことが多いですが、Twitchにはtmi.jsという定番のライブラリがあります。

tmi.jsの大きな利点は、匿名接続（読み取り専用）であれば、OAuthトークンもTwitch側でのアプリ登録も不要な点です。チャンネル名さえわかれば、そのチャンネルのチャットを読み取ることができます。エフェクト用途のように「読むだけ」でよい場合、導入のハードルがかなり低くなります。

npm install tmi.js

設計のポイント：判定ロジックを共通化する

Twitch対応で一番大事なのは、「コメントを受け取った後の処理」と「コメントを取ってくる入口」を、はっきり分けて設計することです。

エフェクトを発火させるかどうかの判定（コマンド一致・クールダウン処理など）は、コメントがYouTubeから来てもTwitchから来ても、本質的には同じ処理のはずです。ここを共通の関数として切り出しておくと、あとから対応プラットフォームを増やすときも、この関数はそのまま使い回せます。

js

// プラットフォーム共通のコメント処理
function handleMessage(message, author) {
  const text = message || "";
  // ここに、コマンド判定・クールダウン処理・発火処理などをまとめる
}

YouTube側・Twitch側、それぞれの接続処理は、コメントを受け取ったら、このhandleMessage()を呼ぶだけにします。

Twitchチャットへの接続（tmi.js）

js

const tmi = require("tmi.js");

async function startTwitchChat(channel) {
  const twitchClient = new tmi.Client({
    options: { skipUpdatingEmotesets: true },
    connection: { reconnect: true, secure: true },
    channels: [channel],
  });

  twitchClient.on("message", (chan, tags, message, self) => {
    if (self) return; // 自分自身の発言は無視
    const author = tags["display-name"] || tags.username || "unknown";
    handleMessage(message, author); // 共通処理へ
  });

  await twitchClient.connect();
}

channelsに指定するのは、Twitchのチャンネル名（URLの末尾の部分）です。https://twitch.tv/チャンネル名の形なら、その部分だけを渡します。

YouTubeとTwitchの振り分け

設定情報に「どちらのプラットフォームか」を持たせ、起動時に分岐させます。

js

const platform = config.platform || "youtube";
if (platform === "twitch") {
  startTwitchChat(config.twitchChannel);
} else {
  startYoutubeChat(config.videoId);
}

こうしておくと、将来さらに別のプラットフォームに対応したくなった場合も、同じパターンで追加できます。

UIに配信先の切り替えを追加する

アプリの画面には、「YouTube」「Twitch」を選ぶタブやトグルを用意し、選んだ方に応じて入力欄（YouTubeならURL、Twitchならチャンネル名）を切り替えます。Twitchのチャンネル名は、URLで貼られても末尾の名前だけを取り出せるようにしておくと親切です。

js

function extractTwitchChannel(input) {
  let v = (input || "").trim();
  const m = v.match(/twitch\.tv\/([^/?#]+)/i);
  if (m) v = m[1];
  return v.replace(/^[#@]/, "").toLowerCase();
}

Twitch連携時に発生しやすいエラーと注意点

Twitch APIや各種ツールを連携させる際、よくあるトラブルと原因は以下の通りです。

• アクセストークンの期限切れ（Token Expired）
  Twitchの認証トークンは定期的に失効します。ツール側で「接続エラー」が出る場合は、一度連携を解除（Revoke）し、再度ブラウザでログイン認証をやり直してください。
• スコープ（アクセス権限）の不足
  チャットの読み上げやチャンネルポイント連動ツールの場合、必要な権限（chat:read や channel:read:redemptions など）が不足していると動作しません。初回認証時の許可画面で全ての要求権限を承認しているか確認してください。

つまずきやすいポイント

エモート（スタンプ）でエフェクトを発火させたい場合

Twitchのエモートは、チャット本文の中に「エモート名の文字列」としてそのまま含まれています。コマンドの判定を「コメントの先頭一致」ではなく「文中に含まれていればよい（部分一致）」にしておくと、エモートを含むコメントでも発火させられます。

匿名接続で十分か

今回の「コメントを読んでエフェクトを出す」という用途では、匿名接続（読み取り専用）で十分です。ただし、将来「ボット側からチャットに返信する」といった、書き込みを伴う機能を追加したくなった場合は、OAuthトークンの取得が別途必要になります。用途に応じて使い分けてください。

再接続の設定を忘れない

配信は長時間になることが多いので、connection: { reconnect: true }のように、接続が切れた場合に自動で再接続する設定を入れておくと安心です。

YouTube用に作ったツールも、コメント判定のロジックさえ共通化しておけば、Twitch対応の追加自体はそれほど大きな作業にはなりません。むしろ、対応プラットフォームが増えるほど、この「共通化」の設計がそのまま効いてきます。