【Stream Overlay Bar｜Twitch対応 配信情報カスタムオーバーレイ】 Twitchと連携するだけで、 配信時間・配信カテゴリ・配信タイトル・視聴者数などの情報を自動取得し、 OBS上に配信情報バーとして表示できるツールです。 毎回タイトルやカテゴリを手動で入力し直す必要がなく、 Twitch側の配信情報に合わせて自動で表示内容を更新できます。 さらに、色・フォント・レイアウト・表示項目なども自由にカスタマイズ可能。 自分で用意した装飾素材をアップロードして、 配信バー上の好きな位置に配置することもできます。 「配信画面に情報を表示したいけど、毎回手動で更新するのは面倒」 「自分の配信に合ったオリジナルの情報バーを作りたい」 という方に向けたOBS用配信ツールです。 ━━━━━━━━━━━━━━━━━━ ■ 主な機能 ━━━━━━━━━━━━━━━━━━ ・Twitch配信情報の自動取得 ・配信時間表示 ・配信カテゴリ表示 ・配信タイトル表示 ・視聴者数表示 ・LIVE / OFFLINE表示 ・現在時刻表示 ・一言メッセージ表示 ・各項目の表示 / 非表示 ・レイアウト変更 ・フォント変更 ・文字サイズ変更 ・カラー変更 ・背景透明度調整 ・装飾素材アップロード ・アップロードした素材の自由配置 ・OBSブラウザソース対応 ━━━━━━━━━━━━━━━━━━ ■ Twitchと連携して自動取得 ━━━━━━━━━━━━━━━━━━ Twitchアカウントと連携することで、 現在の配信情報を自動で取得して表示します。 主な取得情報： ・配信時間 ・配信カテゴリ ・配信タイトル ・視聴者数 ・LIVE / OFFLINE状態 Twitch側でタイトルやカテゴリを変更すると、 Stream Overlay Bar側にも反映されます。 毎回OBS側の文字を変更する必要はありません。 ━━━━━━━━━━━━━━━━━━ ■ 自由にカスタマイズ ━━━━━━━━━━━━━━━━━━ 表示内容だけでなく、 配信バーのデザインも変更できます。 設定可能な項目の例： ・レイアウト ・フォント ・文字サイズ ・文字色 ・メインカラー ・サブカラー ・背景色 ・背景透明度 ・バーのサイズ ・角丸 ・各項目の表示 / 非表示 ・一言メッセージ ・装飾 自分の配信画面やVTuberモデルに合わせて、 オリジナルの配信バーを作成できます。 ━━━━━━━━━━━━━━━━━━ ■ 自分の装飾素材も使用可能 ━━━━━━━━━━━━━━━━━━ 自分で用意した画像素材をアップロードし、 配信バー上に配置することもできます。 例えば、 ・キャラクター ・マスコット ・花 ・葉 ・ロゴ ・アイコン ・季節装飾 ・フレーム装飾 ・その他PNG素材 などを追加できます。 自分の配信デザインに合わせて、 よりオリジナリティのある見た目にできます。 ━━━━━━━━━━━━━━━━━━ ■ 起動方法 ━━━━━━━━━━━━━━━━━━ 本商品は、 同梱されている 「start.bat」 をダブルクリックして起動します。 基本的な流れ： 1. ダウンロードしたファイルを展開 2. フォルダ内の「start.bat」をダブルクリック 3. Stream Overlay Barのサーバーが起動 4. 管理画面をブラウザで開く 5. Twitch連携やデザイン設定を行う 6. OBS用URLをコピー 7. OBSのブラウザソースへ貼り付け 8. 完了 基本的に、 ・VS Code ・PowerShell ・コマンドプロンプト ・コード編集 ・JSON編集 などの操作は必要ありません。 「start.bat」を起動して、 管理画面から設定するだけで使用できます。 ━━━━━━━━━━━━━━━━━━ ■ 初回起動について ━━━━━━━━━━━━━━━━━━ 初回起動時は、 必要な準備処理などにより通常より少し時間がかかる場合があります。 「start.bat」を起動したあと、 すぐに管理画面が表示されない場合は少しお待ちください。 起動時に黒い画面が表示される場合があります。 この画面はStream Overlay Barを動作させるためのサーバー画面です。 使用中は基本的に閉じないでください。 この画面を閉じると、 OBS上のStream Overlay Barも停止します。 ━━━━━━━━━━━━━━━━━━ ■ OBSへの追加方法 ━━━━━━━━━━━━━━━━━━ 1. 「start.bat」をダブルクリック 2. Stream Overlay Barを起動 3. 管理画面でTwitch設定を行う 4. レイアウトやデザインを設定 5. OBS用URLをコピー 6. OBS Studioを開く 7. 「ソース」の「＋」を押す 8. 「ブラウザ」を選択 9. コピーしたURLを貼り付け 10. 幅・高さを設定 11. OKを押して完了 以降はStream Overlay Barを使用する際に、 「start.bat」を起動 ↓ OBSを起動 という流れで使用してください。 ━━━━━━━━━━━━━━━━━━ ■ OBSで表示されない場合 ━━━━━━━━━━━━━━━━━━ まず以下をご確認ください。 ・start.batが起動しているか ・黒いサーバー画面を閉じていないか ・管理画面がブラウザで表示できるか ・OBSのブラウザソースURLが正しいか ・OBSブラウザソースを再読み込みしたか Stream Overlay Bar本体が終了している場合、 OBS上のバーも表示されません。 ━━━━━━━━━━━━━━━━━━ ■ Twitch連携について ━━━━━━━━━━━━━━━━━━ Twitchとの接続には、 Device Code Grant Flowを使用しています。 購入者側で必要なのは、基本的に ・Twitch Developer ConsoleでClient IDを取得 ・Stream Overlay BarへClient IDを入力 ・表示された認証コードを使ってTwitch側で認証 という流れです。 Client SecretやAccess Tokenを手動で取得・入力する必要はありません。 難しいToken発行作業をできるだけ減らし、 画面の案内に沿って接続できるようにしています。 ━━━━━━━━━━━━━━━━━━ ■ Twitch接続の流れ ━━━━━━━━━━━━━━━━━━ 1. Twitch Developer Consoleでアプリを作成 2. Client IDを取得 3. Stream Overlay Barを起動 4. 管理画面へClient IDを入力 5. 「Twitchと連携」を選択 6. 認証用コードを確認 7. 表示されたTwitch認証ページを開く 8. Twitchへログイン 9. 認証コードを入力 10. 連携を許可 11. Stream Overlay Bar側で接続完了 これでTwitchの配信情報を自動取得できるようになります。 Client SecretやAccess Tokenを自分で発行して、 設定ファイルへ直接入力する必要はありません。 ━━━━━━━━━━━━━━━━━━ ■ Client IDの取得方法 ━━━━━━━━━━━━━━━━━━ Twitch連携にはClient IDが必要です。 Client IDはTwitch Developer Consoleから取得できます。 基本的な流れ： 1. Twitchへログイン 2. Twitch Developer Consoleを開く 3. Applicationsを開く 4. 「Register Your Application」からアプリを作成 5. 任意のアプリ名を入力 6. OAuth Redirect URLなど必要な項目を設定 ※OAuth Redirect URLには、以下のURLを登録してください。 http://localhost:4317/auth/twitch/callback 7. Categoryを選択 8. アプリを作成 9. 作成したアプリの「Manage」を開く 10. 表示されているClient IDをコピー 11. Stream Overlay Barの管理画面へ貼り付け Client ID取得後は、 Stream Overlay Bar側からDevice Code Grant Flowによる認証を進めます。 詳しい入力場所や設定方法については、 同梱の説明または管理画面内の案内をご確認ください。 ━━━━━━━━━━━━━━━━━━ ■ 手動モードについて ━━━━━━━━━━━━━━━━━━ Twitch APIを使用せず、 手動で情報を入力して使用できる機能が含まれている場合があります。 手動入力可能な項目例： ・ゲーム / カテゴリ ・配信タイトル ・視聴者数 ・LIVE / OFFLINE Twitch連携を使用しない場合にも利用できます。 ━━━━━━━━━━━━━━━━━━ ■ 一言メッセージ ━━━━━━━━━━━━━━━━━━ 配信バー内に、 任意の一言メッセージを表示できます。 例： 「初見さん歓迎！」 「参加型配信中！」 「ゆっくりしていってね」 「今日はまったり雑談」 など。 配信内容や告知に合わせて自由に変更できます。 ━━━━━━━━━━━━━━━━━━ ■ こんな方におすすめ ━━━━━━━━━━━━━━━━━━ ・Twitch配信者 ・VTuber ・ゲーム配信者 ・雑談配信者 ・参加型配信をしている方 ・OBSを使用している方 ・配信画面を少し豪華にしたい方 ・配信情報を自動表示したい方 ・毎回タイトルを手動入力するのが面倒な方 ・自分だけの配信情報バーを作りたい方 ・配信画面に合わせて細かくカスタマイズしたい方 ━━━━━━━━━━━━━━━━━━ ■ 対応 ━━━━━━━━━━━━━━━━━━ ・Twitch ・OBS Studio ・OBSブラウザソース ・Windows PC ※本商品はTwitch公式の商品・サービスではありません。 ※OBS Studio公式の商品・サービスでもありません。 ━━━━━━━━━━━━━━━━━━ ■ 商品内容 ━━━━━━━━━━━━━━━━━━ ・Stream Overlay Bar 本体 ・起動用 start.bat ・管理画面 ・OBS表示用オーバーレイ ・各種デザイン素材 ・設定ファイル ・導入説明 ・Twitch設定説明 ・OBSへの追加方法 内容はアップデートにより変更・追加される場合があります。 ━━━━━━━━━━━━━━━━━━ ■ 今後のアップデート ━━━━━━━━━━━━━━━━━━ 今後、 ・レイアウト追加 ・テーマ追加 ・フォント追加 ・カスタマイズ機能追加 ・UI改善 ・装飾追加 ・使いやすさの改善 ・不具合修正 などを行う場合があります。 要望が多い機能についても、 今後のアップデート候補として検討します。 ━━━━━━━━━━━━━━━━━━ ■ 使用前の注意 ━━━━━━━━━━━━━━━━━━ ・PC環境によって動作が異なる場合があります。 ・OBS Studioの基本操作が必要です。 ・Twitch側の仕様変更により一部機能が使用できなくなる場合があります。 ・インターネット接続が必要な機能があります。 ・セキュリティソフトによってstart.bat等が警告される場合があります。 ・配信前に必ず正常に表示されることをご確認ください。 ━━━━━━━━━━━━━━━━━━ ■ 終了方法 ━━━━━━━━━━━━━━━━━━ Stream Overlay Barを終了する場合は、 「stop.bat」を起動しサーバーを閉じてください。 サーバーを終了すると、 OBSブラウザソース上のStream Overlay Barも停止します。 ━━━━━━━━━━━━━━━━━━ ■ 商用利用について ━━━━━━━━━━━━━━━━━━ 以下の用途で使用できます。 ・Twitch配信 ・YouTube配信 ・ゲーム配信 ・VTuber活動 ・収益化済み配信 ・収益化済み動画 本商品を使用した配信・動画の収益化について、 追加料金は必要ありません。 ━━━━━━━━━━━━━━━━━━ ■ 禁止事項 ━━━━━━━━━━━━━━━━━━ 以下は禁止します。 ・本商品の転載は禁止転載 ・本商品の再配布 ・購入データの第三者への共有 ・本商品そのものの再販売 ・素材データを抜き出して販売する行為 ・本商品を自作したと偽る行為 ・本商品をほぼそのまま流用した類似商品の販売 ・購入者以外へのファイル配布 ・認証情報が含まれた状態での第三者への共有 改変した場合であっても、 本商品自体の再配布・再販売は禁止です。 ━━━━━━━━━━━━━━━━━━ ■ 免責事項 ━━━━━━━━━━━━━━━━━━ 本商品の使用によって発生した、 ・配信トラブル ・OBS設定トラブル ・Twitchアカウントに関する問題 ・認証情報の流出 ・データ損失 ・PC環境による不具合 ・Twitch / OBS等の外部サービス仕様変更による動作不良 などについて、 作者は責任を負いかねます。 重要な設定やデータについては、 必要に応じて各自バックアップをお願いいたします。 ━━━━━━━━━━━━━━━━━━ ■ 商品リンク・関連リンク ━━━━━━━━━━━━━━━━━━ ▼ Twitch 【https://www.twitch.tv/asuasu__yura】 ▼ X / Twitter 【https://x.com/asuasu_yura】