グラフィカル投票をカスタマイズする

OBS リンクまたは HTML ファイルを編集しますか?

オーバーレイファイルは poll.html. 投票のレイアウト、スタイル、投票コードが含まれています。 OBS にコピーした URL はそのファイルを指し、セッション ID などの接続設定を ?.

https://socialstream.ninja/poll.html?session=YOUR_SESSION

色、フォント、間隔、バーのスタイルについては、ホストされている URL を保持し、追加することができます。 カスタムCSS OBSで。新しいアートワーク、ロゴ、または別のレイアウトを含むデザインの場合は、次のコピーを編集します。 poll.html OBS をコピーにポイントします。カスタムコピーは、SSN のテーマドロップダウンに自動的には表示されません。

ディスクの直接ロード、OBS ローカルファイルランチャー、安全なレンダリングの例、およびサポートされるリファレンスについては、共有オーバーレイ設計ガイド.

まず、次を使用して定期的なポーリングを機能させます。投票設定ガイド。以下の接続手順のために、生成された完全なグラフィカル投票リンクを保管しておいてください。

1. OBS でホストされた投票のスタイルを設定する

SSNで次を開きます： Graphical Poll → Poll Options。次を選択します： デフォルト ／選択欄： 投票スタイル/テーマ をこの例の開始点として選択し、オンにします。 投票を有効化（Enable Poll）.
グラフィカル投票リンクをコピーします。 OBS で、そのファイルを追加するか開きます ブラウザソース、次はそのままにします： ローカルファイル のチェックを外し、リンクを貼り付けます。 URL.
ブラウザのソースサイズをキャンバスサイズに設定します。たとえば、 1920 × 1080。以下の CSS を貼り付けます カスタムCSS、続いてクリックする項目： OK。再利用したい場合は、既存の CSS を保存します。

body {
    margin: 0;
    background: transparent;
    overflow: hidden;
}

#poll-container {
    box-sizing: border-box;
    width: 880px;
    max-width: 90%;
    padding: 28px;
    border-radius: 0;
    border-left: 8px solid #f5c542;
    background: rgba(8, 24, 48, 0.95);
    color: #ffffff;
    font-family: Arial, sans-serif;
}

#poll-container .poll-title {
    color: #ffffff;
    font-size: 36px;
    text-align: left;
    margin: 0 0 24px;
}

#poll-container .poll-option {
    background: #162e50;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 26px;
}

#poll-container .poll-bar {
    background: #3266ad;
}

#poll-container .poll-instruction {
    font-size: 22px;
    margin-bottom: 18px;
}

ネイビーとゴールドの CSS の例と架空のコーヒーと紅茶の投票を使用した実際の投票 — 架空の投票を使用して poll.html に適用される CSS の例。

デザインに合わせて色の値とサイズを変更します。これらのセレクターは、既存のポーリング要素をターゲットとします。バーの幅はポーリングコードによって制御され、 .hidden 動作なので、投票を有効にすることでグラフィックの表示と非表示を切り替えることができます。

OBS カスタム CSS は、そのブラウザソースのみに影響します。通常のブラウザで同じ URL を開くと、元のスタイルが表示されます。参照 OBS のブラウザソースリファレンス。

投票固有の制限: 現在 poll.html は読み取れません &css= または &b64css=。 OBS カスタム CSS を使用するか、このオーバーレイのファイルを編集します。

2. 投票の編集可能なコピーを作成します

ダウンロード Social Stream Ninja ソース ZIP (ベータ版) を選択して抽出します。検査できます GitHub の poll.html ソース.
解凍したフォルダ内に複製します poll.html として my-poll.html。フォルダーの最上位レベルで、オリジナルの横に保管してください。
開く項目： my-poll.html テキスト/コードエディターで、またはそのファイルを参照画像、ブランドカラー、フォント、および目的の OBS キャンバスサイズとともに ChatGPT または Codex に渡します。
CSS のみを編集する場合は、既存のルールの最後にルールを配置します。 <style> ブロックの直前 </style>。上記の例はそこでも機能します。ファイルを保存します。 .html 拡張子。

サポートファイルは保管しておいてください。 現在のポーリングは、独自の場所を基準にしてこれらのスクリプトを読み込みます。 HTML のみを新しいフォルダーにコピーするだけでは十分ではありません。

your-poll-folder/
    my-poll.html
    currency.js
    js/
        transport-dedupe.js
        local-server-url.js
    shared/
        overlay-control-transport.js
    thirdparty/
        NotoColorEmoji.ttf
    favicon.ico

フォントとファビコンは参照アセットです。 4 つの JavaScript ファイルは投票と接続をサポートします。抽出したフォルダーをそのまま残すと、これらのパスが利用可能な状態になります。デザインで使用するロゴやフォントファイルもそこに追加します。

3. AI に既存のファイルと具体的な概要を与える

添付する my-poll.html とデザインリファレンスを保存するか、コーディングツールで抽出したフォルダーを開きます。このプロンプト内の括弧で囲まれた詳細を置き換えます。

Customize this existing Social Stream Ninja poll overlay.

Design: [describe the look or match the attached reference].
Colors: [brand hex colors]. Font: [font name or supplied font file].
Logo: [supplied image filename, if any].
OBS canvas: [1920 x 1080]. Placement: [center / lower third / side panel].
Allow for long questions and up to 10 free-form answers.

Edit my-poll.html, using CSS first. Keep the existing working poll code:
hashtag matching, vote counting, duplicate-vote handling, percentages,
tallies, donation weighting, settings updates, and start/end/reset controls.
Keep session/password/transport URL handling and all supporting script loads.
Preserve #poll-container, #poll-title, #poll-options, and show/hide behavior.
The script replaces #poll-options contents when results update, so put any
permanent logo or decoration outside that element.
Do not hard-code sample results or private session details.
Keep the page compatible with Chrome 80 and OBS Browser Source.

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 poll work directly from disk using a file:/// URL,
without requiring a local web server. Return the complete edited HTML,
list any extra image/font files needed, and include the file URL steps for OBS.

OBS CSS ルートの場合、最後の命令を次のように変更します。「既存の投票セレクターとデフォルトのテーマを使用して、OBS カスタム CSS の CSS のみを返します。HTML タグやスクリプトタグは含めないでください。」

手動編集の場合、主なスタイリングフックは次のとおりです。 #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally、および .poll-instruction。レイアウト変更には、両方で一致する編集も必要になる場合があります。 updatePollOptions() および updatePollResults()、回答行を構築します。

4. OBS で編集したアンケートを開きます

開く項目： my-poll.html コンピュータから直接。インストールまたは起動するサーバーはありません。

ドラッグする項目： my-poll.html Chrome または Edge に接続します。アドレスバーからアドレスをコピーします。それはから始まります file:///.
からすべてをコピーします ? 以降は、SSN からの作業中のグラフィカル投票リンクにあります。ファイルアドレスの末尾に追加します。これにより、セッション、パスワード、その他の設定が保持されます。
結合されたアドレスをブラウザで開いて確認します。次に、それを OBS ブラウザのソースに貼り付けます。 URL フィールド付き ローカルファイル チェックを外します。目的の幅と高さを設定します。

たとえば、次のリンクをコピーしました。

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

は次のようになります。

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

これらはプレースホルダーです。既に存在するオプションのみを含め、実際にコピーしたリンクを使用してください。 SSN を使い続ける 投票オプション 質問、投票照合、および投票コントロールを設定します。

上記のファイルアドレスは Windows の例です。 macOS では次で始まります file:///Users/...。ブラウザの実際のアドレスをコピーして、パスとスペースが自動的に処理されるようにします。

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

ローカルファイルのチェックを外したままにするのはなぜですか? URL フィールドの使用には、その後のセッション設定が含まれます。 ?。 HTML ファイルだけを選択しても、そうではありません。の共通ガイドでは、ファイルピッカーのオプションのランチャーについても説明しています。

5. 実際の投票で設計をテストする

SSN とキャプチャされたチャットソースを実行したままにします。で 投票オプション、投票を有効にし、設定します 自由形式、質問を入力し、選択します 投票の完全一致のみ（Exact vote only）.
送信 #coffee および #tea 、または別の架空のユーザーを使用します。テストメッセージツール。複数投票が無効になっている場合、同じユーザーが投票を繰り返しても、別の投票は追加されません。
OBSのバーと合計を確認します。長い質問、長い答え、そして パーセントの代わりに投票数を表示します テキストの適合性をチェックするオプション。
テスト ハッシュタグの位置は任意（Hashtag anywhere） などの長いメッセージ I vote #coffee today。チェックする 投票を終了（End Poll）, 投票をリセット（Reset Poll）、および 投票を有効化（Enable Poll） なので、カスタムデザインは閉じた状態、空の状態、および非表示の状態を処理します。

空白のオーバーレイ: [ポーリングを有効にする] とコピーされたセッション設定を確認します。自由形式の投票には、投票が到着するまで回答行はありません。
ローカルページが開きません: ファイルを再度ブラウザにドラッグし、現在のアドレスをコピーします。ファイル名が間違っていないか確認してください my-poll.html.txt.
「投票の読み込み中」でスタックします: サポートされているスクリプトとそのフォルダーパス、SSN の実行状態、および動作中のホスト型投票からの完全なクエリ文字列を確認します。
投票はカウントされません: 投票が開始されていること、メッセージが選択した投票モードと一致していること、およびテストユーザーがまだ投票していないことを確認します。
OBS では見た目が異なります: ブラウザソースのサイズ、ファイルのデザインをオーバーライドする古いカスタム CSS がないか、更新が必要かどうかを確認します。
投票後にロゴが消える: 常設作品を屋外に置く #poll-options;その要素は更新時に再構築されます。

編集したコピーは、SSN がホストする投票とは別に管理されます。設計のバックアップを保存し、新しいものと比較します。 poll.html バージョンを使用してください。別のオーバーレイを最初から作成する場合は、カスタムオーバーレイガイド.