独自のソーシャル ストリーム オーバーレイをデザインする

再デザインしたいオーバーレイを選択します

既存のページの色、フォント、レイアウト、アートワーク、モーションを変更できます。の HTMLファイル はページです。の OBS URL はそれをポイントし、セッションと表示の設定を提供します。小規模なスタイル変更の場合は、ホストされるページで OBS カスタム CSS を使用します。より詳細な変更を行うには、ソースをダウンロードして独自のコピーを実行します。

これらのガイドでは、テーマを含むオーバーレイ ファミリについて説明します。使用する機能の受信者を選択します。チャット ページ、選択メッセージ ページ、およびアンケートは、すべて同じ入力を消費するわけではありません。

既製のデザインの場合は、 オーバーレイギャラリー または テンプレートギャラリー。既存の StreamElements/Streamlabs チャット スキンの場合は、 輸入ガイド。インポートされた自己完結型 HTML には、独自のエクスポート/セットアップ手順があります。

1. 実際のファイルをダウンロードする

1. ベータ版のソース ZIP をダウンロード、または ベータ版リポジトリ を開き、次を選択します： コード→ZIPをダウンロード.
2. ZIP を保存できるフォルダーに解凍します。 C:\SSN\social_stream-beta\。圧縮されたアーカイブ内を編集しないでください。これらはページ ソース ファイルです。別のコピーを編集する場合、SSN を再インストールする必要はありません。
3. 上の表に示されているファイルを見つけます。それを元の横に複製します。たとえば、 poll.html は次になります： my-poll.html。対象： themes/featured-styles/featured-modern.html、コピーを保管してください themes/featured-styles/.
4. コピーをテキスト/コード エディタで開きます。 AI ツールに、そのファイルおよび必要な参照スタイル/スクリプトへのアクセスを許可します。 HTML に名前を付けて保存 .htmlではありません .html.txt.

解凍したフォルダー構造を保持します。 ダウンロードされた 1 つの HTML ファイルには、その横にスクリプト、スタイルシート、フォント、画像、オーディオ、または JSON がロードされる場合があります。 GitHub のページ ビューとブラウザの「ページの保存」は、信頼できる完全なバンドルではありません。各タイプ ガイドでは有用なファイルが特定されていますが、完全に抽出されたフォルダーが依存関係を保持する最も簡単な方法です。

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

などの参考資料 ../../shared/utils/chatHtml.js は、それをロードするページに対する相対値です。そのページをルートに移動すると、パスが壊れます。ローカルのアートワークとフォントもプロジェクトにコピーし、相対 URL を使用します。ダウンロードしたバージョンをまとめて保管します。編集したコピーは、将来の SSN 修正を自動的に受け取ることはありません。

2. セッションと接続の設定を維持します

SSN を起動し、ソースを接続し、元のオーバーレイが動作することを確認します。をコピーします 生成された完全なリンク 関連する SSN ツールから。後の値 session= SSN セッションを識別します。これは、YouTube チャンネル、Twitch ユーザー名、ファイル名、または投票のタイトルではありません。

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

この例ではプレースホルダーを使用しています。 SSN とページでは、同じ実際のセッションと設定されたパスワードを使用する必要があります。ファイル名を変更してもセッションは変更されません。 SSN を維持してキャプチャを実行します。オーバーレイはデータを受信します。それ自体ではプラットフォーム チャットをキャプチャしません。

• ? クエリを開始します。 以降の設定は使用します &。値を再入力する代わりにコピーします。 HTML ソース属性に次のように記述します。 &;ブラウザ/OBS URL フィールドでは、通常のアンパサンドを使用します。
• トランスポート設定を保存します。 server, server2, server3、ローカル エンドポイント、ラベル、バージョン値はページ固有です。別のオーバーレイがサポートしているという理由だけでサーバー フラグを追加しないでください。
• フラグメントも保存します: その後のすべて # が重要になる可能性があります。たとえば、AI イベント オーバーレイはプライベート #aieventauth=... トークンを表示します。
• 共有例ではプレースホルダーを使用します。 実際のセッション リンク、パスワード、プライベート ディスプレイ トークンを公開スクリーンショット、リポジトリ、AI プロンプト サンプルに含めないようにしてください。

コピーが空白のままの場合は、最初に元の生成されたリンクを確認してください。一部のページでは、不足している設定を要求するプロンプトが表示されます。他のものは非表示のままか、リダイレクトされます。正しいセッションを明示的に指定すると、ページ固有のデフォルトに依存することがなくなります。

3. OBS でファイルを開きます

編集した HTML をコンピュータから直接開きます。インストールまたは起動するサーバーはありません。

1. コピーしたHTMLファイルをChromeまたはEdgeにドラッグします。アドレスバーから完全なアドレスをコピーします。それはから始まります file:///.
2. からすべてをコピーします ? 作業中の SSN オーバーレイ リンク内に移動し、そのファイル アドレスの末尾に追加します。これにより、セッション、パスワード、その他の設定、およびその他の設定が保持されます。 # エンディング。
3. 結合されたアドレスをブラウザで開いてテストします。
4. OBSで次を追加します： ブラウザソース。次の設定はそのままにします： ローカルファイル チェックを外し、完全なアドレスを貼り付けます。 URL。デザインの幅と高さを設定します。

たとえば、次の SSN リンク:

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

は、Windows 上でダウンロードされた投票コピーのアドレスになります。

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

実際のファイル アドレスとコピーされた設定を使用します。 On macOS the address starts with file:///Users/...; Linux では通常、次で始まります file:///home/...。ブラウザのアドレスをコピーすると、スペースとスラッシュが自動的に処理されます。

一度設定します。 OBS はアドレスをソースとともに保存します。オーバーレイを使用するときは、ダウンロードしたフォルダーを同じ場所に保持し、SSN とチャット ソースを実行したままにしてください。デザインの変更を保存した後、 現在のページのキャッシュを更新（Refresh cache of current page） 。

ローカル ファイルのチェックを外したままにするのはなぜですか? URL フィールドには次の内容を含めることができます。 ?session=...。ファイル ピッカーだけで HTML を選択しても、これらの設定は追加されません。

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS は、そのファイル/URL モード、ディメンション、カスタム CSS、および更新コントロールを文書化しています。 ブラウザソースリファレンス.

4. デザインを変更するか、AI に変更してもらいます

CSS のみの変更の場合は、ホストされたリンクを保持し、OBS のリンクを使用します。 カスタムCSS フィールド。これはそのソースにのみ適用されるため、同じ URL を開いた通常のブラウザではこれらのオーバーライドは表示されません。編集された HTML ファイルの場合は、既存のスタイルの後にオーバーライドを追加するか、その後にローカル スタイルシートをリンクします。ロゴ、フォント ファイル、ブランド カラー、キャンバス サイズ、視覚的な参照を指定します。

一部ページ対応 &css= または &b64css=;サポートはページごとです。 poll.htmlはどちらも読みません。 URL オプションを使用する前に、ページのパーサーを確認してください。通常、Web ページは、別のコンピュータのローカル ディスクから任意のフォントや画像を読み込むことができません。

マークアップを変更する場合、スクリプトによって参照される ID/クラスを保持します。 JavaScript が更新のたびに要素を再構築する場合、永続的なアートワークはその要素の外側に存在するか、レンダラーによって再作成される必要があります。編集内容をデザインのみに反映させたい場合は、共有スタイルシート/スクリプトをコピーし、ページの参照を変更します。

上記のガイドのタイプ固有のプロンプトを使用するか、次の一般的なプロンプトから開始します。

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

タイプ ガイドには、保存する実際のトリガーが記述されています。サンプル メッセージをハードコーディングするだけで機能する設計は受け入れないでください。元のファイルのコピーを保存し、同じテスト入力を使用して編集した表示を比較します。

5. 受信チャットがコードにならないようにする

メッセージ、名前、タイトル、金額、メタデータ、およびメディア リンクは、視聴者または外部サービスから発信される可能性があります。カスタム レンダラーがそれらを挿入する時点でサニタイズします。 SSN を通じて受信した文字列には、それを実行する権限がありません。プレーンフィールドにはプレーン DOM テキストを使用します。メッセージ本文のサポートされている HTML に対してパッケージ化されたサニタイザーを使用します。参照 OWASP による安全なシンクと HTML サニタイズについての説明.

SSNでは、 textonly にのみ適用されます。 chatmessage。 true の場合、その本文をリテラル テキストとしてレンダリングします。それ以外の場合は、エモートや許可された書式設定が含まれる可能性があります。他の通常のフィールドをテキストとしてレンダリングします。メディア分野など chatimg および contentimg は URL/データであり、HTML スニペットではありません。

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

2 つ目の消毒剤を追加するのではなく、既存の同等の消毒剤を維持します。ネストされたファイルの場合は、相対スクリプト パスを調整します。ページの既存のメディア/リンク ポリシーに基づいて URL を検証した後、DOM プロパティを使用してアバターとリンクを構築します。生の名前を属性文字列に挿入したり、生の色をスタイル マークアップに挿入したりしないでください。個々のプロパティを設定する前にスタイルを検証してください。 HTML サニタイズでは、文字列を JavaScript または AI 命令として安全に実行できるわけではありません。

個別のプレビューでレンダラーをテストする

• などのわかりやすい名前を使用します。 Guest <b>One</b>: 括弧はテキストのままにする必要があります。
• 試す項目： chatmessage: "<b>Hello</b>" 付随する値： textonly: true、その後は false。リテラル マークアップと許可された書式設定されたコンテンツは、それぞれのパスを取る必要があります。
• 安全性の変更によってそれらの機能が削除されないように、サポートされているエモートと画像のみのメッセージを確認してください。
• AI に次のような無害なプローブをテストさせます。 <img src=x onerror="window.__ssnInjectionProbe=1"> 変更されたレンダラーで。実行したり、マーカーを設定したり、実行可能なイベント属性を残したりしてはなりません。スクリプト スキームのリンクもテストします。公開チャットではなく、ローカルでプローブを実行します。

通過するプローブは、実行されたパスのみをチェックします。デザインによって変更されたレンダラーとフィールドにテストを集中させてください。

6. レイアウト、接続、OBS を個別にテストする

1. レイアウト: 可能な場合はページの文書化されたプレビュー/デモ モード、または架空のローカル サンプルを使用します。長い名前/メッセージ、欠落しているアバター、空のデータ、および予想される行数をテストします。
2. SSN 配信: SSN をアクティブのままにして使用します テストメッセージを作成（Create Test Message） 同じセッションで。通常の拡張 API 取り込みモードには次のものが必要です 拡張機能のリモートAPI制御（remote API control of extension） が有効になります。独立したテスト設定を使用します。送信されたテストは、構成された自動化をトリガーできます。
3. 実際のトリガー: 注目のカードのドック メッセージを機能させたり、アンケートの投票を送信したり、プレゼントの勝者を選択したり、ティッカーのテキストを変更したり、タイマーのタイマーを開始したりします。単純なチャットは普遍的なテストではありません。
4. 実際のキャプチャ: 実際のソースメッセージ/イベントが元の編集済みページに到達することを確認します。モック イベントは、プラットフォーム キャプチャではなくレンダリングを証明します。
5. OBS： ソースの最終的なサイズ、透明度、アニメーション、オーディオ、フォント、レイヤーを確認します。表示/非表示、クリア/リセット、リフレッシュを実行します。ブラウザと OBS には別のストレージとセッションがあります。ブラウザのログインまたは localStorage は自動的に共有されません。

メモリ内でデータを収集するページの場合、アンロードまたはリフレッシュによって状態が失われる可能性があります。自動更新または非表示時のシャットダウンを有効にする前に、タイプ ガイドを確認してください。ホスト管理のディスプレイには異なる回復動作があります。削除 demo/preview はライブ データを期待する前にフラグを立てます。 その後の MP4 の場合は

Useful files and references to give your AI

• docs/event-reference.html: 正規フィールド、名前付きイベント、メタデータ、メディア、および寄付値。
• docs/customoverlays.md: カスタム受信機と接続例。
• イベントとアラートの互換性: デザインがソースから期待できるイベント/フィールド。
• テストメッセージガイド および createtestmessage.html: サンプルのペイロードと配信モード。
• libs/objects.js および shared/utils/chatHtml.js: パッケージ化されたディスプレイのサニタイズ。
• shared/utils/chatBadges.js および shared/utils/contentImage.js: 既存のバッジと画像の処理。
• js/transport-dedupe.js, js/local-server-url.js、および shared/overlay-control-transport.js: ページによって読み込まれるときの既存のトランスポート サポート。
• currency.js: 保存 hasDonation 表示用であり、有効な数値の USD を尊重します donoValue、ゼロを含む。
• Event Flow および コマンドとAPI: デザインでトリガーが必要な場合は、既存のコントロールを再利用します。

実際のオーバーレイ ソースとその参照先の CSS/JS、およびこれらのドキュメントを提供します。イベント参照だけでは、投票の制御状態やすべてのオーバーレイのプライベート レンダリング構造を記述しません。

コピーがうまくいかないときは

確認された最小の問題で停止します。スタイルを変更する場合、キャプチャ スクリプトを変更したり、新しいイベント フィールドを作成したりする必要はありません。パブリック フォークを共有する場合は、そのサポート アセットを含め、プライベート ランチャーがアップロードされないようにしてください。