フォロワー・チャンネル登録・スパチャ…配信の「目標」を、画面にきれいに出せる透過ゴールバーです。 OBSに置くだけ。難しい設定は要りません。 ★ わんコメ（OneComme）連携に対応しました コメントやスパチャが来るたび、バーが自動で伸びます。配信中に数字を打ち直す必要はありません。 わんコメを使っていない方は、今まで通り手入力で使えます（設定は初期状態でオフ）。 ▼ まずは無料版でお試しできます（下のバリエーションで選べます） ・無料版：横バー1本のシンプル版／個人利用向け ・Pro版（¥500）：下の全機能 ＋ 商用利用OK ━━━━━━━━━━━━━━━━━━ ◆ 1つで何用にもなる ━━━━━━━━━━━━━━━━━━ フォロワー目標／チャンネル登録／スパチャ目標／今日のノルマ／なんでもカウンター。 名前・今の数・目標を書き換えるだけで、用途を切り替えられます。 ━━━━━━━━━━━━━━━━━━ ◆ Proでできること ━━━━━━━━━━━━━━━━━━ ・背景は透過。OBSの「ブラウザ」ソースに置くだけで映像に重なります ・デザインテーマ6種を内蔵（ネオン／ミニマル／かわいい／クール／レトロ／ゲーミング） 　→ 貼り替えるだけで雰囲気が一変。既定のネオン系の色は同シリーズの時計・タイマーと 　　共通なので、並べたときに色の系統が合います ・バーの形を3種から選べる（横バー／目盛りバー／縦バー）＋グラデーション対応 ・複数目標のローテ：達成した目標の演出を見せてから、約3秒後に次の目標へ進みます ・達成演出4種（発光／拡大／紙吹雪／色変化）＋「達成！」の文字も出せます ・読み込むとバーが伸びて、％がカウントアップ（動きが出る） ・単位（人／円 など）、数字の書式（「あと80」表示）、％や数字のON/OFF ・書体をGoogle Fontsから自由に変更／表示位置・背景パネル・光の強さも調整可 ・設定は同梱の config.js の値を書き換えるだけ（コード知識ゼロでOK） ━━━━━━━━━━━━━━━━━━ ◆ わんコメ連携（Proのみ・任意） ━━━━━━━━━━━━━━━━━━ わんコメ（OneComme）を起動していれば、config.js を1行 true にするだけで自動カウントが始まります。 　・コメント数を数える（今日のコメント100件目標 など） 　・スパチャ/ギフトの件数を数える 　・スパチャ/ギフトの金額を合計する（「あと3,000円」のような表示もできます） 配信中にファイルを開いて数字を打ち直す作業がなくなります。 わんコメが無い／起動していない場合は何も起きず、いつも通り手入力で動きます（エラーも出ません）。 つなぐ先は同じパソコンの中だけで、インターネットへは何も送りません。 ━━━━━━━━━━━━━━━━━━ ◆ 使い方（3分） ━━━━━━━━━━━━━━━━━━ 1. OBSでソース → ブラウザ → 「ローカルファイル」で goalbar.html を選ぶ 2. config.js の label（名前）・current（今の数）・target（目標）を書き換えて保存 3. 生放送中に数を増やすときは、OBSのURL欄に「?current=850」と付けて数字だけ直すのが速いです 　（テキストエディタを開かずに済みます。デザインは config.js のまま保たれます） 4. 同梱の「README_使い方.txt」に、設定項目とテーマの例をぜんぶ載せています ━━━━━━━━━━━━━━━━━━ ◆ 利用について ━━━━━━━━━━━━━━━━━━ ・Pro版（¥500）は収益化配信・動画・お仕事の配信で使えます（商用OK） ・無料版は個人利用向けです（商用で使う場合はPro版を） ・いずれもファイルの再配布・転売・素材集への同梱は不可 ・クレジット表記は不要です ━━━━━━━━━━━━━━━━━━ ◆ 動作環境・通信について ━━━━━━━━━━━━━━━━━━ OBS Studio の「ブラウザ」ソース向けに作っています（Chromium系のブラウザで表示を確認済み）。 ※フォロワー数の自動取得はしません（手動設定式・軽量なのが利点）。 ※広告・解析・外部への送信は一切ありません。唯一の外部通信は、Webフォントを使う設定 　（useWebFont:true）のときの Google Fonts の読み込みだけです。 　useWebFont:false にすれば、完全にオフラインで動きます。 ━━━━━━━━━━━━━━━━━━ ◆ 3点セットもあります（33%OFF） ━━━━━━━━━━━━━━━━━━ 時計＋タイマー＋このゴールバーのPro版をまとめた「配信ウィジェット3点セット」を ¥1,000で出しています（単品で買うと¥1,500）。3つとも config.js を書き換える同じ操作で、 既定の色も共通なので、画面に並べたときに統一感が出ます。 → https://techmeparty.booth.pm/items/8729346 ────────────────── ※本ウィジェットはAIと共同で制作しています。 ※作者の実験ログはこちら → https://note.com/techmeparty/n/n5970cd6273bd