複数のチャンネルと個別のオーバーレイ

1. 1つのセッションで取得をまとめる

SSNに目的のチャットソースを追加し、それぞれの新しいメッセージが同じフィルターなしの次の表示に届くことを確認します： Streaming Chatドック。そのドックを操作用の表示として使ってください。

セッション、パスワード、バージョン、サーバー設定を保持するため、生成されたリンクをコピーしてください。各視聴者向け表示を、個別のOBSブラウザーソースとして追加します。OBSのソースには、次のような分かりやすい名前を付けます： Twitchチャット および YouTubeチャット.

2. 流れるチャットをプラットフォーム別に分ける

流れるチャットには、生成した次のURLを2つコピーします： dock.html URLを使用します。それぞれのコピーに、次のオプションを追加します：

たとえば、既定の接続の場合：

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu

使う項目： onlyfrom および hidefrom を、これらのページで使用します。次のようなオプションが、 onlytype 別のオーバーレイと同じように使えるとは考えないでください。使用するもの： youtubeshorts を、取得時にそのタイプが報告される場合に別途指定します。参照： ソースの種類.

3. 選択したメッセージを分ける

流れるチャットではなく選択したチャットには、生成した次のURLを複製します： featured.html リンクを複製し、次を追加します： &onlyfrom=twitch を一方のコピーに、次を &onlyfrom=youtube をもう一方に追加します。メッセージを選択できるよう、操作用ドックは開いたままにしてください。

現在のFeatured Chatの onlyfrom はソースタイプを1つ受け付けます。上記のドック用のカンマ区切りの例を、Featured Chatのその欄へコピーしないでください。

4. 同じプラットフォームの2つのチャンネル

onlyfrom=twitch はプラットフォームとしてTwitchを選ぶもので、特定のTwitchチャンネルを選ぶものではありません。チャンネル名と配信タイトルはメタデータであり、URLのフィルター名の代わりにはなりません。次を追加します： &showchannelname で、ソースから提供されたチャンネル名を表示します。

ドックの高度なフィルタリングでは、 &filtertid=123 は発信元タブの数値IDを受け付け、カンマ区切りの複数IDにも対応します。実際に取得したペイロードで、次を確認してください： tid （参照： イベントリファレンス および コマンドとAPI）。ここにプラットフォームのチャンネルIDを使わないでください。ソースを開き直すとタブIDが変わる場合があり、一致するタブIDのないソースは除外されることがあります。これはドックのオプションであり、Featured Chat全般のチャンネルフィルターではありません。

完全に独立した配信には、別の取得インスタンス／プロファイルと異なるセッションを使い、それぞれで対象のソースだけを開いてください。取得側を合わせずにオーバーレイのセッションだけを変えると、何も受信しなくなります。オーバーレイの label はルーティング用にページを識別するもので、チャンネルフィルターではありません。

5. 各視聴者向け表示を確認する

1. 次を使って、独立したセッションに架空のTwitchテストメッセージとYouTubeテストメッセージを送ります： テストメッセージを作成.
2. 操作用ドックには両方が表示され、各チャットオーバーレイには目的のソースだけが表示されることを確認します。
3. 各メッセージを注目表示し、クリアボタンをテストします。プラットフォームを切り替えた後は、表示中のすべての注目表示ページを確認してください。
4. 合成メッセージでは実際のソースタブIDを確認できないため、自分が接続している各ソースから実際のメッセージを送って、同じ確認を行ってください。

表示が空の場合、一時的にフィルターを外してください。チャットが戻れば、正確なソースタイプかタブIDを確認します。空のままなら、次を使用してください： セッションとルーティングのトラブルシューティング。OBSソースの名前を変えても、保存されたURLは更新されません。

6. 1つのブラウザータブにチャットとアラートをまとめる

使う項目： オーバーレイを組み合わせる で既存のオーバーレイURLを、1つのタブまたは1つのOBSブラウザーソースに重ねます。外配信中にスマートフォンでチャットを読む場合に便利です。

1. 生成したStreaming Chat DockのURLを下のレイヤーに、Multi-Stream Alert BoxのURLを上のレイヤーに貼り付けます。両方のリンクで、セッション、パスワード、接続オプションを保持してください。
2. 次はそのままにします： SSNの背景を透明にする を有効なままにします。チャットでは「このレイヤーでタップとスクロールを許可」を有効にし、アラートでは無効にして、チャット操作を妨げないようにします。
3. 選択する項目： プレビュー（Preview）、次に QRコードを表示 を選んで、スマートフォンのカメラで読み取ります。または、次を選びます： 結合したリンクをコピー で結果をブラウザーソースに貼り付けます。結合表示には設定用の操作はありません。

URLを最大8つ追加でき、矢印ボタンでレイヤーを他のレイヤーの後ろや前に移動できます。既定では各レイヤーがブラウザー全体を埋めます。次を展開します： サイズと位置 をレイヤーで開き、幅、高さ、左位置、上位置をピクセル（例： 450）またはパーセント（例： 100%）で設定します。幅と高さを空欄にするとブラウザー全体を埋め、位置を空欄にすると左上から配置します。 全画面にリセット は、そのレイヤーの配置をリセットします。各オーバーレイ自身の内容と設定は維持されます。

1920×1080のOBSブラウザーソースで左にチャット列を置く場合、チャットレイヤーの幅を次に設定します： 450、高さを次に設定します： 1080、左位置を次に設定します： 0、上位置を次に設定します： 0。他のレイヤーは全画面のままで構いません。チャットの上にHypeを置き、Featured Chatを右へ移すには、次を使います： 以下のOBSレイアウト例。ピクセル指定のサイズはブラウザーの大きさが変わっても固定され、パーセント指定はブラウザーの幅や高さに追従します。

編集用リンクを使うと、URLと配置が入力済みの状態で設定を開き直せます。結合リンクを後で編集するには、次を追加します： ?edit=1 を、次の前に追加します： #.

リンクとレイヤー設定は、未完成のものも含め、このブラウザーに自動保存されます。次を開き直してください： オーバーレイを組み合わせる で編集を続けるか、次を選択します： 保存した設定をクリア で最初からやり直せます。プライベートブラウジングでは、ブラウザーの保存領域が使えないか、一時的になる場合があります。

結合リンクとQRコードには、レイアウトとURLがすべて含まれます。デスクトップで設定し、モバイルで一度読み取って、結合表示をブックマークしてください。開くと、スマートフォンのブラウザーにも設定が保存されます。デスクトップで変更しても古いリンクは自動更新されません。編集後は新しいリンクをコピーするか読み取ってください。この機能は、セッションIDによる設定同期を行いません。

結合リンクとQRコードは、個別のオーバーレイリンクと同様に非公開で扱ってください。SSNの取得処理は動いている必要があり、スマートフォンから元のURLで使うサーバーへ接続できる必要があります。 localhost または 127.0.0.1 アドレスは、そのリンクを開いたデバイスを指します。非常に長いURLはQRコードの容量を超えることがありますが、結合リンク自体はコピーできます。

OBSの構成例：左のチャット列と全画面のエフェクト

このレイアウトにCSSは必要ありません。 各レイヤーは独立したブラウザー領域です。OBSブラウザーソース全体を次に設定します： 1920×1080に設定し、各レイヤーの次の欄で、これらの値を使用します： サイズと位置。カンマや「px」を付けず、数字だけを入力します。下のレイヤーから、次の順で追加してください：

最初の80ピクセルをHype用に空け、その下に幅450ピクセルのチャット列を置きます。代わりに、Hypeの背後までチャットを全高で表示したい場合は、Live Chatの高さを次に設定します： 1080 、上位置を次に設定します： 0。シーンの大きさが違う場合、ピクセル値も変える必要があります。

1. オーバーレイの完全なURLを貼り付けます。 既存のブラウザーソースのプロパティからコピーし、セッション、パスワード、スタイル、接続設定を保持します。次はそのままにします： SSNの背景を透明にする を有効なままにしてください。OBSの切り抜き、変形、フィルター、カスタムCSS欄はURLに含まれないため、引き継がれません。
2. 列の中でHypeを中央に配置します。 その次のURLで： hype.html URLで、次を設定します： align=center （既存の align=left または align=rightを置き換え、さらに次を削除します： alignright がある場合）。URLにすでに次がある場合： ?session=...がある場合は、次を追加します： &align=center。コンパクトな初期スタイルとして、任意で次を使えます： &combineall&hidetitle&style=compact&scale=0.75。既存の値は重複して追加せず、置き換えてください。選んだスタイルに余裕が必要な場合、Hypeレイヤーの高さを増やします。
3. Featured Chatをチャット列と重ならないようにします。 設定する項目： Left = 450とWidth = 1470を一緒に設定：450 + 1470 = 1920。幅1920のレイヤーを右へ450移動すると、右端が切れます。Featured Chatは引き続き、自分の領域の下部付近にメッセージを配置します。その領域内で短いメッセージを中央に置くには、次を追加します： &center を次のページの featured.html URLに追加します。代わりにシーン全体でメッセージを中央に置く場合は、Left = 0、Width = 1920と、次を使用します： &center.
4. NinjaBackerをFeatured Chatより上に配置します。 既存の右から入るアニメーション設定を付けたまま、視聴者向けオーバーレイURLを最後のレイヤーに貼り付けます。結合ツールは領域とレイヤー順を制御し、NinjaBackerオーバーレイはアニメーションと内部配置を制御します。背景は透明で、サイトが埋め込みを許可している必要があります。この任意のレイヤーは、4オーバーレイのテスト例には含まれていません。
5. 1920×1080でプレビューします。 絵文字を含むテストチャットを送り、ドックからメッセージを注目表示し、SSNでHypeデータを有効にします。通常のチャットだけではFeatured Chatのメッセージは選択されません。空のままの場合、各オーバーレイが単独で動くか確認してください。
6. 新しい結合リンクをOBSにコピーします。 そのブラウザーソース自身の幅を1920、高さを1080に設定します。結合ツールのプレビューサイズはOBSの寸法を設定しません。新しいソースを切り抜かず、シーンに合わせてください。レイアウトを編集するたびに、新しい結合リンクをコピーし直します。古いOBSリンクには古いレイアウトが残ります。

パフォーマンス： ブラウザーソースを1つにしても、埋め込まれた各オーバーレイとその接続は動きます。結合するとOBSソースの数は減りますが、CPUやメモリ使用量が減るとは限りません。作業後はブラウザーのプレビューを閉じ、以前のソースを無効にしてOBSの性能を比較してください。M1のmacOS／OBSでの性能と、自分のNinjaBacker URLは、自分の環境で確認する必要があります。その方が適していれば、Live Chatは別のままにして、他のオーバーレイだけを結合することもできます。

レイヤーが空、またはチャットを覆う場合

• まず元のURLをそれぞれ単独で開いてください。アラートは、通常イベントが届くまで空のままです。ページを組み合わせても、新しいイベントを取得するようにはなりません。
• 自動透明化に対応するページ： dock.html, featured.html, multi-alerts.html、および minecraft.html。他のページには、それぞれの透明背景設定が必要です。外部サイトの中には、埋め込み自体をブロックするものもあります。
• 透明なレイヤーでも、タップを妨げる場合があります。次をオフにしてください： タップとスクロールを許可 を、チャットより上にある操作不要のレイヤーでオフにしてください。
• モバイルブラウザーでは、音を出す前にページの操作が必要な場合があります。必要ならそのレイヤーの操作を有効にしてタップしてください。ブラウザーの自動再生制限は引き続き適用されます。使う前に、実際のスマートフォンで音声を確認してください。