【配信】いまの状態バー 第2弾 12デザイン｜休憩が伸びたら赤くなる目安時間つき｜作業中・休憩中をキー1つかクリックで切替・経過時間つき・OBS用・設定ボタン(⚙)つき

配信画面のすみに常駐して「いま何をしているか」を1行で出す帯の第2弾です。状態は自分で好きなだけ登録できます。同じ機能のまま、見た目だけ違うものを12デザインそろえました。題材は第1弾の12種と1つも重ねていません。

キーボードの 1〜9 でその番号の状態に、→ / ← で順送りに切り替わります。第2弾では帯をクリックしても次に送れます。切り替えた状態と時刻は覚えるので、ソースを更新しても経過時間は続きから数えます。

もうひとつ第2弾で増えたのが「目安の時間」です。「休憩中 f59e0b 10m」のように書いておくと、経過時間のとなりに「/ 10:00」と出て、過ぎると数字と丸が赤くなります。休憩が伸びているのが自分の画面で分かります。

動画ファイルではありません。その場で描いているので、容量はごくわずかです。文字はHTMLなので、どんな大きさでもにじみません。

単一HTML・インストール不要・アカウント不要・オフライン動作。OBSのブラウザソースに入れるだけ。背景は透過で、帯の下だけ色が乗ります。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ できること

━━━━━━━━━━━━━━━━━━

・状態を好きなだけ登録できる（名前＋丸の色）

・1〜9 キー／→ ← キー／帯のクリック で切り替え

・状態ごとに目安の時間を書ける（10m / 90s / 1h30m / 10分 / 1時間30分）

・目安を過ぎると、経過時間と丸が赤くなり、点滅が速くなる

・その状態になってからの経過時間を出せる

・切り替えた状態と時刻を覚える（ソースを更新しても続きから）

・画面の9か所のどこにでも置ける／帯の濃さも変えられる

━━━━━━━━━━━━━━━━━━

◆ 収録している12デザイン

━━━━━━━━━━━━━━━━━━

・door.html … ドアプレート（ねじで留めた真鍮の板）

・slate.html … カチンコ（上に白黒の斜め縞）

・traffic.html … 信号機（3つのランプのうち、いまの色だけ点く）

・toggle.html … トグルスイッチ（右の機械式スイッチが光る）

・meter.html … アナログの計器（象牙色の文字盤と目盛、赤い指針）

・flip.html … 反転フラップ（駅の案内板。札を割る横線と左右の軸）

・desknote.html … 卓上の立て札（机に置く三角の名札）

・vhs.html … 録画中のOSD（ビデオの画面に出る文字と走査線）

・banner.html … のぼり（竿から下がる布。右端が三角に切れる）

・keycap.html … キーキャップ（押し込んだキー1つ）

・panel.html … 操作盤のランプ（ビスとガラス覆いのランプ）

・radio.html … 無線機の窓（バックライトの窓と電波のバー）

配色はデザインごとに3〜4色。⚙から切り替えるだけで、文字も帯も差し色も一緒に変わります。

━━━━━━━━━━━━━━━━━━

◆ 状態の書きかた

━━━━━━━━━━━━━━━━━━

⚙の「状態」の欄に、1行に1件書きます。

　作業中 22c55e

　休憩中 f59e0b 10m

　まもなく戻ります 38bdf8

　配信準備中 a855f7

　雑談中 f43f5e

名前のうしろの6桁がその状態の丸の色、いちばんうしろが目安の時間です。どちらも省けます。欄を空にすると購入時の5件に戻るので、帯が空っぽになることはありません。

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

OBSでソースを右クリック →「対話」→ 画面にマウスを乗せると右上に ⚙ が出ます。状態も色も置き場所も、そこから変えて「保存して閉じる」だけです。普段 ⚙ は見えないので配信画面には映りません。歯車が見つからないときは、対話ウィンドウ内で S キーでも開きます。設定はOBSを再起動しても残り、「設定を初期化」でいつでも元に戻せます。

⚙のパネルを開いている間と入力欄を触っている間は、キーもクリックも効きません（設定を書いている最中に状態が飛ばないようにしてあります）。

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・効果音はありません（表示のみです）

・状態は自分で切り替えるものです。OBSのシーン切替や配信サイトとは連動しません

・目安の時間を過ぎても、止まったり鳴ったりはしません。色が変わるだけです

・経過時間はPCの時計を見ています。PCの時計を大きく動かすと、その分ずれます

・視聴者コメントの集計や、外部アプリ・APIとの連携はありません

━━━━━━━━━━━━━━━━━━

◆ 動作環境

━━━━━━━━━━━━━━━━━━

OBSのブラウザソース（Chromium）で使うために作っています。こちらでの動作確認は Chrome / Edge で行いました。Streamlabs など、ブラウザソースがある配信ソフトでも同じ形で読み込めます。ネット接続は不要で、外部へは一切通信しません（Webフォントも広告も入っていません）。書体はお使いのPCに入っているものを使います。

━━━━━━━━━━━━━━━━━━

◆ 同梱

━━━━━━━━━━━━━━━━━━

HTML 12本 ／ はじめにお読みください.txt ／ READ ME FIRST (English).txt ／ 利用規約.txt ／ Terms of Use (English).txt