【配信】休憩中と終わりの画面 第2弾 12デザイン｜休憩の残り時間と「次回はいつ」を1本で｜分数でも戻る時刻でも指定できる・全画面・OBS用・設定ボタン(⚙)つき

配信の途中で席を外すときの「ちょっと休憩します」と、配信の最後の「今日はここまで」。この2つを1本のHTMLでまかなう全画面の第2弾です。同じ機能のまま、見た目だけ違うものを12デザインそろえました。題材は第1弾の12種と1つも重ねていません。

設定の名前は第1弾とそろえてあります。第1弾をお持ちの方は、URLのHTMLの名前を差し替えるだけでそのまま移れます。

どれも動きは静かなほうに振ってあります。時計塔と柱時計の針は、お使いのPCの時刻を指します。

動画ファイルではありません。背景はその場で計算して描いているので、容量はごくわずかで、ループの継ぎ目もありません。文字はHTMLの文字なので、どんな大きさでもにじみません。

単一HTML・インストール不要・アカウント不要・オフライン動作。ブラウザソースに入れて、ソース一覧のいちばん下（いちばん奥）に置くだけです。日本語／English 切替対応。

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

◆ 2つの場面

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

・休憩中（初期）… 「少し休憩します」＋ 戻るまでの残り時間 ＋ 減りかたの帯

・きょうはここまで … 「本日はここまで」＋「次回 ○月○日(○) ○○:○○」。大きい数字と帯は出ません

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

◆ できること

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

・休憩の長さを「何分で戻るか」（0〜600分・初期10分）で入れられる

・休憩の終わりを「戻る時刻」（21:30 など）で入れられる。こちらを入れると分数より優先されます

・0時をまたぐ休憩も入れられる。入れた時刻がもう過ぎていれば、最初から終わりの文字になります

・0になると残り時間が文字に変わる。出す文字は自分で書けます。マイナスにはなりません

・残り時間や、減りかたの帯を出さないこともできる

・次回の予定は「2026-09-05 21:00」「9/5 21:00」「金 21:00」「金曜日」「21:00」などで書ける

・曜日や時刻で書いた場合は、その日時を過ぎると次の週・次の日へ自動で進みます

・年月日で書いた場合は、その日時を過ぎると「調整中」に変わります（行ごと消すこともできます）

・「次回」の見出し語は書き換えられる

・見出し・上の小さい行・下の一行は自由に書ける（| で改行できます）

・札の位置（中央／左／右）、文字の大きさ、背景の速さを変えられる

・背景を沈める濃さ、札の地の濃さを変えられる（札の地を0にすると文字だけになります）

・背景を描かず、札と文字だけにすることもできる

・画面の下にいまの時刻を出せる（24時間制／12時間制）

・配色はデザインごとに3色

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

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

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

・projector.html … 映写機（埃の舞う光の筋がスクリーンへ伸び、リールが回ります）

・elevator.html … エレベーターの階数表示（数字が1階ずつ降りていきます）

・vending.html … 夜の自販機（蛍光灯がときどきちらつき、缶が並んでいます）

・crossing.html … 踏切（遮断機が下りていて、警報灯が交互に光ります）

・clocktower.html … 時計塔（夜空にうかぶ文字盤。針はいまの時刻を指します）

・windmill.html … 風車（羽根が回り、麦の穂が波打ちます）

・balloon.html … 気球（夜明けの空をゆっくり昇り、バーナーが時どき灯ります）

・fountain.html … 噴水（水が上がって落ち、水面に波紋がひろがります）

・radar.html … レーダー（掃引の線がひとまわりし、拾った点が残ります）

・tunnel.html … トンネル（天井の照明が奥から手前へ流れてきます）

・bridge.html … 夜の吊り橋（ケーブルの灯が端から端へ波のように光ります）

・pendulum.html … 柱時計の振り子（ガラス越しに振り子が振れます。針は実時刻）

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

◆ 設定ボタン（⚙）

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

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

見出し・上の小さい行・下の一行・0になったら出す文字は、空欄にすると場面ごとの既定文に戻ります。

設定の保存先はブラウザごとに別々です（localStorage の仕様）。Chromeで開いて設定してもOBS側には反映されませんので、OBSで使うぶんは対話の画面の中で設定してください。1つのデザインを休憩用と終了用に使い分けるときは、URLの末尾に ?key=a ?key=b を付けて保存先を分けてください。

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

◆ ご注意

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

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

・残り時間はこの画面を開いた時から数えます。シーンの切り替えで読み直すと、そこから数え直しになります（?backat= で戻る時刻を決めておくと数え直しになりません）

・「戻る時刻」は時と分だけです。日付の指定はできません

・時計はお使いのPCの時計を見ています

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

・生き物の絵は入っていません（物・風景・光・機械だけです）

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

◆ 動作環境

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

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

書いた文字が長いときは、画面に収まるところまで版面が自動で縮みます。背景は「その時刻の絵」を毎回計算しているだけで、過去のコマを溜め込みません。

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

◆ 同梱

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

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