【配信】配信の情報ドック 第2弾 12デザイン｜時刻・日付・配信の経過時間・状態の一言を1枚に｜要らない欄は消せる・横並びと縦積み・背景透過・OBS用・設定ボタン(⚙)つき

配信画面の隅に置きっぱなしにする、小さな情報の板です。「いまの時刻」「日付」「配信の経過時間」「いまの状態」の4つを1枚にまとめました。ブラウザソースを4つ並べる代わりに、これ1つで済みます。要らない欄は消せます（消すと、その幅ごと詰まります）。同じ機能のまま、見た目だけ違うものを12デザインそろえました。

題材は第1弾（すりガラス・電光掲示板・端末・ドット絵・ネオン・金属・紙のラベル・極細の線）と1つも重ねていません。第2弾は板の材質をキャンバスに描いています（木目・打ち出し・織り目・電球など）。設定の名前は第1弾と同じなので、第1弾のURLをそのまま貼り替えられます。

単一HTML・インストール不要・アカウント不要・オフライン動作。背景は透過しているので、そのまま画面のすみに置けます。日本語／English 切替対応。

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

◆ 先に、大事なところが2つ

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

時刻はお使いのPCの時計をそのまま読みます。ネットから時刻を取りません。表示がずれているときは、Windows / Mac 側の時刻設定をご確認ください。

経過時間は「開いている間だけ」の物で、溜め込みません。ブラウザソースを更新したり、OBSを閉じて開き直すと 0:00:00 に戻ります。何日もぶんの記録が勝手に積み上がらないよう、わざとそうしてあります。配信の開始時刻が決まっているときは、⚙の「配信の開始時刻」に 20:00 のように入れてください。そこからの経過を出すので、途中で開き直しても数え直しになりません。

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

◆ 4つの欄

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

・時刻 … いまの時刻。秒あり／なし、24時間制／12時間制を選べます

・日付 … 月・日・曜日。日本語と英語で書き方が変わります

・経過 … 配信を始めてからの時間（0:00:00 から）。差し色で出ます

・状態 … 自分で書く一言（「雑談中」「休憩中」「そろそろ終わり」など）

欄は⚙でひとつずつ消せます。状態の一言は、空にするとその欄ごと消えます。小さな見出し（時刻・日付・経過・状態）の文字も自由に変えられます。並べ方は「横に並べる」と「縦に積む」の2通りです。

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

◆ ほかに変えられるところ

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

・ゆっくりした動きを止める

・画面の九か所から置き場所を選ぶ（初期は左上）

・大きさ（0.3〜4倍）

・板の下地の濃さ（0〜100。0にすると文字だけになります）

・配色はデザインごとに3色。文字・差し色・板の色を自分で指定することもできます

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

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

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

・wood.html … 木の板（木目と節。面取りした縁に、留めの釘が4本）

・brass.html … 真鍮の銘板（縦の磨き目。彫った罫とリベット）

・slate.html … 石板（ざらついた石。堆積の筋が走り、四隅が欠けています）

・leather.html … 革（しぼの入った革。ふちを一周する糸のステッチ）

・enamel.html … ホーロー看板（厚い塗りと白いふちどり。縁が少し欠けています）

・carbon.html … カーボン（綾織りの繊維が市松に組まれ、樹脂のつやが乗ります）

・tile.html … タイル（目地で割れた白いタイル。ときどき色違いが1枚）

・acrylic.html … アクリル板（半透明の板。小口が光り、四隅にねじが通ります）

・cardboard.html … 段ボール（紙の繊維と、上のふちに出た波の断面）

・labeltape.html … ラベルテープ（つやのあるテープ。上下に送り穴が並びます）

・marquee.html … 電飾（ふちを電球が一周し、光が順に流れます）

・sailcloth.html … 帆布（太い織り目の布。四隅にハトメが打ってあります）

中身と機能は12種とも同じです。違うのは板の材質だけです。

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

◆ 設定ボタン（⚙）

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

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

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

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

◆ 使いかたの例

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

・画面の上に細い帯として置く

・時刻と経過だけの小さな札にする

・耐久配信で経過時間を大きく出す

・作業配信の状態を出しっぱなしにする

・縦に積んで、画面の左端に寄せる

・板を敷かずに文字だけ乗せる

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

◆ ご注意

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

・視聴者数・フォロワー数・コメントは出ません（配信サイトには繋ぎません）

・外部アプリ・API・配信サイトとの連携はありません

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

・時刻はPCの時計そのままです。世界の都市の時刻や、時差の表示はできません

・経過時間は止められません（ストップウォッチではありません）。開き直すと 0:00:00 に戻ります（開始時刻を入れておけば数え直しになりません）

・カウントダウン（残り時間）はできません。数えるのは経過だけです

・状態の一言は手で書きます。自動では変わりません

・枠からはみ出しそうなときは、板ごと自動で縮んで収まります。小さくなりすぎたときは、ブラウザソースの幅・高さを広げてください

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

◆ 動作環境

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

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

文字も線もHTMLの図形なので、どんな大きさでもにじみません。書き換えるのは1秒に1回だけです。動画ではないので、容量はごくわずかです。

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

◆ 同梱

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

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