募金が増えるにつれて別のGIFを表示する
目標バーと画像を1つのカスタムオーバーレイに入れます。バーはすでに進捗を計算しているので、画像側で寄付を別に数えず、同じ進捗に従わせます。この手順にはオーバーレイの編集済みコピーが必要です。追加の組み込み設定ではありません。
- SSNで次を設定します： チップジャーと目標メーター 付随する値： 流動型目標バー（Fluid Goal Bar）、タイトル、目標、寄付フィルターを設定します。この固定500ドルの金額目標では、次の設定を Hypeカップのスコア（Hype Cup Scoring） オフにし、繰り返し目標や段階的な目標も無効にします。カスタマイズする前に、元のリンクが動くことを確認してください。
- フォロー ダウンロードしてファイル構造を保持する を使って次を作成します：
my-goal.html。表にある名前で、5つのGIFをそのファイルと同じ場所に保存します。切り替え時に画像がずれたり伸びたりしないよう、キャンバスサイズを揃えてください。 - コピーしたソースとGIFをエディターやAIツールに渡します。次の手順を使い、 以下の節目切り替え手順 と合わせて 完全なカスタマイズ用プロンプト。既存のバーの横に画像を1つ配置するよう依頼してください。
- 編集済みのコピーを各節目でプレビューし、その後、次の手順に従います： セッションとOBS 。元のリンクの設定で接続します。両方を含むオーバーレイをOBSの1つのBrowser Sourceとして追加してください。
| 目標の進捗 | 500ドルの目標の場合 | GIFファイル |
|---|---|---|
| 0%以上25%未満 | 0ドル以上125ドル未満 | goal-0.gif |
| 25%以上50%未満 | 125ドル以上250ドル未満 | goal-25.gif |
| 50%以上75%未満 | 250ドル以上375ドル未満 | goal-50.gif |
| 75%以上100%未満 | 375ドル以上500ドル未満 | goal-75.gif |
| 100%以上 | 500ドル以上 | goal-100.gif |
ファイル名は例です。画像は自分で用意してください。この金額は固定金額目標の場合に適用されます。件数、Hype、繰り返し、段階的な目標では、バーに表示される割合に基づいて画像を選んでください。
GIFの節目切り替え手順をコピー
Add milestone artwork beside the existing Fluid Goal Bar in my-goal.html.
Use these relative GIF files:
0%: goal-0.gif; 25%: goal-25.gif; 50%: goal-50.gif;
75%: goal-75.gif; 100%: goal-100.gif.
Read the existing getProgressState().percentage from the renderAmount()
update path. Do not add a second donation counter or change goal math.
Select the highest reached threshold. If progress jumps from 20% to 80%,
show goal-75.gif directly. Clamp the artwork selection to 0–100%.
Change img.src only when its selected file changes so ordinary updates
do not restart the GIF. Keep one fixed-size image box with object-fit: contain.
Provide meaningful alternative text and handle a missing image without
hiding or breaking the goal bar.
Update the artwork on first render, donations, manual total changes,
reset, restored totals, and recurring/advancing-goal transitions.
Keep the completion image while a fixed goal remains at or above 100%.
If the configured goal resets or advances, follow its displayed percentage.
Preserve the existing filters, session, password, currency/count/Hype
semantics, persistence, completion rules, and local dependencies.
Use the existing preview mode to test 0, 124, 125, 249, 250, 374,
375, 499, 500, and 600 against a fixed goal of 500. Also test a large
jump, a manual decrease, reset, refresh, and any enabled recurring rules.配信中の合計を変えずにリハーサルする
以下のプレビュー設定で編集済みのコピーを開きます。次の値を変更します： startamount 。プロンプト内の各値にして、その都度再読み込みしてください。プレビューはサンプルデータを使い、ライブ接続、保存済みの合計、音声を無効にします。
file:///C:/SSN/social_stream-beta/my-goal.html?preview&style=bar&goal=500&startamount=125125ドルでは、25%まで進んだバーの横に最初の節目のGIFが表示されるはずです。次の設定を削除します： preview と、リハーサル用の startamount 。実際のセッションと元の設定を使う前に削除してください。プレビューは合計を保存しないため、合計の復元とリセットはテストセッションで別に確認してください。
適切な開始ページを選択する
ヒント ジャー/ゴール メーターは、同じものから異なるメトリクスとスタイルを表示できます。 tipjar.html。まず、SSN で目的のメトリクスを構成し、設計を変更するときにその生成された URL を保持します。このゴールの誇大広告スコアは、次の視聴者/チャットカウンターとは異なります。 hype.html.
ダウンロードしてファイル構造を保持する
- ソースZIPをダウンロードする を選択して抽出します。これらのガイドではベータ ソースを使用します。 1 回のダウンロードで得たファイルをまとめて保存します。
- コピー
tipjar.html→my-goal.htmlオリジナルの横にあります。別のページまたはテーマを選択した場合は、そのコピーをそのファイルの元のフォルダーに保存してください。 - コピーした HTML とその参照先の CSS/JS をエディターまたは AI ツールで開きます。提供されたアートワーク/フォントを同じプロジェクトに追加し、相対パスを使用します。 CSS オーバーライドから始めます。生成されたマークアップを変更するときにレンダラーを含めます。
次のファイルは、設計と動作を見つけるのに役立ちます。これはリーディング リストであり、完全な依存関係バンドルではありません。画像、フォント、スクリプト、データ ファイルなど、抽出されたフォルダーはそのままにしておきます。
| ファイル | なぜそれが重要なのか |
|---|---|
tipjar.html | 目標/瓶のプレゼンテーション、設定、および金額の処理。 |
currency.js | USD の推定値とソースの上書き。 |
thirdparty/matter.min.js | JAR プレゼンテーションで使用される物理学。 |
shared/overlay-control-transport.js | ホストの設定と制御の更新。 |
shared/utils/chatHtml.js | ディスプレイのサニタイズ。 libs/objects.js が必要です。 |
コピーを接続し、OBS で開きます
SSN を起動し、最初に生成された元のオーバーレイ URL が機能するようにします。の session= 値は SSN セッションに接続します。それはあなたのチャンネル名やこのファイルの名前ではありません。 SSN、関連機能、およびそのデータ ソースを実行したままにします。
アップストリームの修正が必要な場合は、
- 編集したHTMLファイルをChromeまたはEdgeにドラッグします。アドレスバーからアドレスをコピーします。それはから始まります
file:///. - からすべてをコピーします
?作業中の SSN オーバーレイ リンク内に移動し、そのファイル アドレスの末尾に追加します。セッション、パスワード、その他の設定を含むすべての設定を保持します。#エンディング。 - 結果をブラウザで開き、OBS ブラウザのソースを設定します。 URL を同じアドレスに ローカルファイル チェックを外します。ソースの寸法を意図したデザインに合わせます。
上記の開始ファイルのローカル アドレスは次のようになります。実際のリンクには追加の必須オプションが含まれている場合があります。
file:///C:/SSN/social_stream-beta/my-goal.html?session=YOUR_SESSIONコンピュータ上の実際のファイル アドレスを使用します。 OBS はソースと一緒に保存します。ダウンロードしたフォルダーを同じ場所に保存します。デザインの変更を保存した後、ブラウザのソースを更新します。の 共通セットアップガイド には、Mac の例と、[ローカル ファイル] チェックボックスのオプションのランチャーが含まれています。
デザインを変更する場所
瓶のアートワーク、塗りつぶしの色、バー トラック、目標ラベル、金額のタイポグラフィー、完了アニメーションを変更します。 「」で説明されている既存のスタイルおよびカラー コントロールから始めます。 目標ガイド。カスタム アートワークの場合は、コピーの横にアセットを保持し、その参照パスのみを更新します。
目標のメトリクス、完了/リセット ルール、永続性、およびドナーのカウントは、その動作に属します。プレゼンテーションを変更する間もこれらを保持してください。生のコイン、ギフトされたサブスクリプション、および USD を 1 つのラベルのない番号に変換しないでください。数値を保存する donoValue 。
この AI プロンプトをコピーします
コピーしたソースファイルと参照アートワークを AI に渡します。括弧で囲まれた詳細を置き換えます。プロンプトにある入力の安全性に関する指示をそのままにしておきます。
プロンプト全体を表示する
Customize my-goal.html, copied from tipjar.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].
Style this tip jar/goal as [design] for [canvas]. Change artwork, colors, layout, labels, and motion while preserving the chosen metric, amount calculation, source filters, streak handling, persistence, and completion/reset rules. Keep hasDonation display units and donoValue USD semantics. Do not fabricate progress when the feed is empty.
Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.
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, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.このオーバーレイ タイプをテストする
最初にプレビューまたはテスト設定を使用します。の テストメッセージガイド SSN を通じて架空のペイロードを送信する方法について説明しています。実稼働セッションに送信されたテストは、既存の自動化をトリガーできます。
- まずページのプレビュー モード (スタイル オプションを使用してプレビュー) を試してください。実際のセッションに接続するときにプレビューを削除します。
- 選択したメトリックに一致するサンプル サポート イベントを使用します。ゼロ、部分的な進捗、目標達成、目標を超えた進捗状況を確認します。
- リセット/キャリーオーバー設定とリハーサル間のソース更新を確認します。 OBS で通貨ラベル、長いタイトル、サウンドや補完効果を検査します。
また、 入力レンダリング チェック 。編集内容を保存した後、リハーサルの合間に OBS ブラウザ ソースを更新し、表示されるインタラクションを繰り返します。ブラウザのプレビューでは、ライブ キャプチャや OBS の動作は確立されません。
その他の資料： 指標と目標管理 · 寄付欄 · イベントリファレンス · ローカルセットアップのトラブルシューティング.