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

5手順で独自のオーバーレイを作る

1. 対象のオーバーレイを選ぶ のうち変更したいもの。
2. ソースZIPをダウンロードするをダウンロードして展開し、対象オーバーレイのHTMLファイルをコピーします。
3. コピーを編集する は自分で行うか、AIツールに依頼します。
4. コピーをOBSで開く のアドレスにSSNのセッション設定を追加します。
5. 試す を、そのオーバーレイの実際のトリガーで確認します。

変更するオーバーレイを選ぶ

オーバーレイの色、フォント、配置、画像、動きを変えられます。 HTMLファイル がページです。 OBS URL はそのファイルを指し、セッションと表示設定を追加します。

オーバーレイの種類によって受け取る入力は異なります。チャット、選択メッセージ、投票のページは同じ入力を使いません。使う種類のデザインガイドを開いてください：

完成済みのものを使いたい場合は、次を試してください： オーバーレイギャラリー または テンプレートギャラリー。StreamElementsやStreamlabsのチャットスキンを使う場合は、次を参照してください： 輸入ガイド。そのエクスポートには専用の設定手順があります。

ファイルをダウンロードする

1. ベータ版のソース ZIP をダウンロード。または次を開きます： ベータ版リポジトリ を開き、次を選択します： コード→ZIPをダウンロード.
2. 今後も使うフォルダーに展開します。例： C:\SSN\social_stream-beta\。ZIP内のファイルを直接編集しないでください。SSNの再インストールは不要です。
3. 上の表で対象のオーバーレイファイルを探し、元の隣にコピーを作ります。例： poll.html → my-poll.html。たとえば次のテーマでは： themes/featured-styles/featured-modern.htmlの場合はコピーを同じフォルダーに置きます。
4. コピーをテキストエディターやコードエディターで開き、次の名前で保存します： .htmlではありません .html.txt.

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

セッションリンクを維持する

SSNを起動してソースを接続し、元のオーバーレイが動くことを確認します。その後、次をコピーします： 完全なリンク を、そのオーバーレイ用のSSNツールから取得します。

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

次の後にある値： session= がSSNのセッションです。YouTubeチャンネル、Twitch名、ファイル名、投票タイトルではありません。SSNとページで同じセッションとパスワードを使います。オーバーレイは受信するだけで、自分ではチャットを取得しないため、SSNを動かし続けてください。

コピーが空白なら、まず元のリンクを確認します。足りない設定を尋ねるページもあれば、非表示のままやリダイレクトするページもあります。正しいセッションをリンクに入れれば推測せずに済みます。

ファイルをOBSで開く

編集したファイルはコンピューターから直接開けます。サーバーは不要です。

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

macOSでは先頭が file:///Users/...、Linuxでは通常 file:///home/...。ブラウザーからコピーすれば、空白やスラッシュも適切に扱われます。

<!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、再読み込みは、次の資料で説明されています： ブラウザソースリファレンス.

デザインを変更するか、AIに次を依頼します：

ロゴ、フォントファイル、ブランドカラー、キャンバスサイズ、参考画像を用意します。通常、Webページは別のコンピューターのディスクからフォントや画像を読み込めません。

AIプロンプト

各デザインガイドの種類別プロンプトを使うか、これを出発点にしてください。コピーしたファイルと、そのCSS・スクリプトをAIに渡します。

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.

受信チャットをコードとして実行させない

名前、メッセージ、タイトル、金額、リンクは視聴者や外部サービスから届きます。コードではなくテキストとして扱い、描画処理がページに挿入する箇所で無害化してください。

<!-- 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つ目を追加しないでください。
• サブフォルダー内のファイルでは、スクリプトのパスを調整します。
• 生の名前を属性文字列に、生の色をスタイルのHTMLに挿入しないでください。スタイル値を検証し、プロパティごとに設定します。
• 無害化したHTMLでも、JavaScriptとして実行したりAIへの指示として使ったりしてはいけません。

詳しい説明： OWASPの安全な出力先とHTML無害化のガイド.

1つずつテストする

AIに渡すファイル

オーバーレイ自身のファイル、読み込むCSS・JS、および以下をAIに渡してください。イベントリファレンスだけでは、投票の操作方法や各オーバーレイのレイアウトコードは分かりません。

問題を解決する

確認できた最小の問題から直します。見た目を変えるためにキャプチャースクリプトやイベント項目を変更する必要はありません。公開フォークを共有する場合は素材を含め、非公開のランチャーは含めないでください。