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

4手順でプラットフォームごとにチャットを分ける

例：一方のオーバーレイにはTwitchチャットだけ、もう一方にはYouTubeチャットだけを表示します。自分は1つのDockですべてを読めます。

1. すべてのチャットをSocial Stream Ninjaに追加します。各チャットの新しいメッセージが次に表示されることを確認します： Streaming Chatドック。このDockにはフィルターをかけないでください。自分用の表示として使います。
2. 生成された次のリンクをコピーします： dock.html のリンクを2つ用意します。コピーすればセッション、パスワード、バージョン、サーバー設定が維持されます。
3. それぞれのリンクの末尾にフィルターを追加します。例： &onlyfrom=twitch&hidemenu （以下を参照： 下の表).
4. 各リンクをOBSに個別の次のソースとして追加します： ブラウザソース。分かりやすい名前を付けてください。例： Twitchチャット および YouTubeチャット.

チャットオーバーレイのフィルター

全体の例：

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

Featured Chat（選択したメッセージ）を分ける

1. 生成された次のリンクをコピーします： featured.html のリンクを2つ用意します。
2. 追加する項目： &onlyfrom=twitch を一方に、 &onlyfrom=youtube をもう一方に追加します。
3. メッセージを選べるようにDockを開いておきます。

フィルターが決めるのは、選んだメッセージをそのページが受け付けるかどうかだけです。別々のキューは作られず、拒否されたメッセージで画面が消えることもありません。コーナーを切り替えるときは、古いメッセージが残らないよう自分でクリアしてください。

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

onlyfrom=twitch はTwitch全体を意味し、特定のTwitchチャンネルではありません。チャンネル名や配信タイトルはフィルター名に使えません。

各表示をテストする

1. テストセッションにTwitchとYouTubeのテストメッセージを送ります。使用するもの： テストメッセージを作成.
2. 両方がDockに表示され、各チャットオーバーレイには対象プラットフォームだけが表示されることを確認します。
3. 各メッセージを選んで表示し、クリアを押します。プラットフォームを切り替えた後は、すべてのFeatured Chatページを確認してください。
4. 各ソースの実際のメッセージでも確認します。テストメッセージには実際のタブIDがありません。

チャットとアラートを1つのブラウザータブに表示

オーバーレイを組み合わせる はオーバーレイのリンクを1つのタブやOBSブラウザーソースに重ねます。外配信中にスマートフォンでチャットを読むのに便利です。

1. 次のリンクを貼り付けます： Streaming Chatドック のリンクを最下段のレイヤーに貼り付けます。
2. 次のリンクを貼り付けます： 複数配信対応アラートボックス のリンクを最上段のレイヤーに貼り付けます。セッション、パスワード、接続オプションを含む完全なリンクを使ってください。
3. 次はそのままにします： SSNの背景を透明にする が有効になっていることを確認してください。
4. オンにする項目： このレイヤーでタップとスクロールを許可する をチャットで有効にします。アラートではオフにして、チャット操作を妨げないようにします。
5. を押す プレビュー（Preview）、次に QRコードを表示 をスマートフォンで読み取ります。または次を押します： 結合したリンクをコピー を押してブラウザーソースに貼り付けます。

結合表示には設定用の操作部はなく、オーバーレイだけが表示されます。

レイヤー設定

ピクセル指定のサイズはブラウザーのサイズ変更後も固定です。パーセント指定はブラウザーに合わせて変わります。各オーバーレイの内容と設定は維持されます。

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

CSSは不要です。 各レイヤーは独立した領域です。OBSのブラウザーソースを次のサイズに設定します： 1920×1080。下に置くレイヤーから追加し、各レイヤーの次の欄には数値だけを入力します（カンマや「px」は不要）： サイズと位置.

上部80ピクセルにHypeを置き、その下にチャット列を配置します。Hypeの背後にチャットを全高表示する場合は、Live Chatの高さを次に設定します： 1080 、上位置を次に設定します： 0。シーンのサイズが違う場合は数値を調整します。

1. オーバーレイの完全なリンクを貼り付けます。 既存のブラウザーソースからコピーすると、セッション、パスワード、スタイル、接続設定も引き継がれます。次は有効のままにします： SSNの背景を透明にする をオンのままにします。OBSのクロップ、変換、フィルター、カスタムCSSはリンクに含まれず、引き継がれません。
2. Hypeを列の中央に配置します。 次の画面で： hype.html のリンクでは、次を使います： &align=center。次の値をすべて置き換えます： align=left または align=rightを置き換え、さらに次を削除します： alignright。コンパクトにするには、次を試してください： &combineall&hidetitle&style=compact&scale=0.75 （既存の値を置き換えます）。スタイルに合わせて、Hypeレイヤーの高さを広げてください。
3. Featured Chatをチャット列の横に配置します。 設定する項目： 左位置 = 450 および 幅 = 1470 を組み合わせます（450 + 1470 = 1920）。幅1920のレイヤーを右へずらすと端が切れます。追加： &center → featured.html で、その領域内の短いメッセージを中央に配置します。シーン全体の中央にするには左位置0、幅1920にして、次を使います： &center.
4. NinjaBackerを最後に配置します（任意）。 ビューアー用オーバーレイのリンクを最上段に貼り、右から入るアニメーションを設定します。結合ツールは領域と順番を、NinjaBackerはアニメーションを制御します。背景を透明にし、サイト側で埋め込みを許可する必要があります。このレイヤーは検証例には含まれていません。
5. 1920×1080でプレビューします。 絵文字付きのチャットを送り、Dockからメッセージを選んで表示し、SSNのHypeデータを有効にします。通常のチャットだけではFeatured Chatのメッセージは選ばれません。
6. 新しい結合リンクをOBSにコピーします。 そのブラウザーソースの幅を1920、高さを1080に設定します。プレビューのサイズはこの設定には反映されません。切り取らずにシーンに合わせます。レイアウトを変えるたびにリンクをコピーし直してください。古いリンクは古いレイアウトのままです。

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