【OBS透過】進捗バー ウィジェット｜原稿○/○ページを配信画面に・ボタン1つで増える【商用可】 ━━━━━━━━━━━━━━━━━━ 作業配信の「いまどこまで進んだか」を、配信画面に出せます。背景は透明です。 原稿○ページ、イラスト○枚、○分の作業——数えるものは何でも大丈夫です。 目標に届くとバーの色が変わり、「完了！おつかれさま」が出ます。 ■ できること ・「原稿 32 / 100 ページ」と、数と目標を表示 ・進捗バーと「32%」 ・バーに目盛り（25% / 50% / 75%）を入れられる ・目標に届くとバーの色が変わる ・届いたら「完了！おつかれさま」を出す／そのまま消すこともできる ・背景は透明。配信画面にそのまま重ねられます ■ 配信中に数を増やすのが、3通りあります 【A】操作パネルのボタンを押す control.html を開いて「＋1」「＋10」を押すだけ。 数字を直接入れて「反映」もできます。目標もその場で変えられます。 OBSの「カスタムブラウザドック」に登録すれば、OBSの中に操作パネルを置くこともできます。 （この組み合わせで連動するかは、お使いの環境によります。こちらではOBS実機で確認できていません） 【B】ウィジェットを直接クリックする OBSの「ソースとの対話」から押すと、1回につき決めた量だけ増えます。 【C】URLの後ろに ?value=32 と付ける ※【A】が連動するのは、ウィジェットと操作パネルが同じブラウザで開かれているときです。 OBSの中のブラウザソースと、外で開いたChromeは別扱いになるため連動しません。 そのときは【B】か【C】で増やせます。この点は正直に書いておきます。 ■ 目標を超えても壊れません 137 / 100 ページ のように、数字は本当の数を出します。バーは100%で止まります。 目標を0にしても、マイナスを入れても、表示は壊れません。 ■ 何を数えるかは、4行だけ config.js の4か所を書き換えるだけです。 title: "今日の作業" label: "原稿" unit: "ページ" goal: 100 「配信時間 0 / 180 分」「イラスト 0 / 5 枚」「筋トレ 0 / 50 回」 数えられるものなら何でも使えます。 ■ 見た目も変えられます 文字の色／数字とバーの色／達成したときのバーの色／見出しの色／書体／文字サイズ／ 数字の表示／％の表示／バーの表示／バーの長さ・太さ・下地の色・角の丸み／ 目盛りの位置／ボタン1回で増える量／左寄せと中央寄せ／背景パネルの有無 ■ 入っているもの ・progress.html（ウィジェット本体） ・control.html（操作パネル） ・config.js（設定ファイル。何を数えるかはここに書きます） ・README_使い方.txt（日本語） ・README_English.txt（English） ■ 使い方 1. zipを解凍します 2. config.js を開いて、title / label / unit / goal を書き換えます 3. OBSで「ソース」→「＋」→「ブラウザ」を追加します 4. 「ローカルファイル」にチェックを入れ、progress.html を選びます 5. 幅700 / 高さ200 くらいにして「OK」 ■ インターネットに繋ぎません 外部のサービスには一切つなぎません。ネット接続がなくても動きます。 数えた内容がどこかに送られることもありません。 ■ 利用について ・個人・法人を問わず、配信での使用は自由です（商用可） ・ファイルの再配布・転売は不可です ・改変しての使用はご自由にどうぞ ■ 動作環境 OBS Studio の「ブラウザ」ソース向けです。 ■ 制作について このウィジェットはAIと共同で制作しています。 （バーの幅が割合と合っているか／目標を超えても壊れないか／目標0やマイナスでも落ちないか／ 操作パネルの変更が届くか、など） うまく動かないときはメッセージをください。