作ったもの：現在時刻と配信の経過時間を、ひとつのHTMLファイルで並べて出す
OBS のブラウザソースに置く時計を書きました。時計といっても、出すのはふたつの数字です。ひとつは今の時刻。もうひとつは、配信が始まってからの経過時間です。OBS のブラウザソースで時計を表示したい、というところから作りました。
作ったのは HTML ファイルひとつです。中に CSS と JavaScript が入っていて、外から読み込むものはありません。時計の文字を出すだけなので、ネットにつながっていなくても動きます。
先に、画面の上に何が出るのかを書いておきます。形を文字で置き換えると、こうです。
┌──────────────────────────────┐
│ 現在時刻： 21:04:37 │
│ 配信時間： 01:23:45 │
└──────────────────────────────┘
背景は透明です。数字の後ろにだけ、うすい黒の板が敷いてあります。角は丸くして、内側に余白を取りました。
見出しの文字は白です。数字も白ですが、経過時間だけ淡い黄色にしました。いま何時かより、どれくらい話したかのほうが気になって見に行くものだと思ったので、そちらを少し目立たせています。
数字は等幅の書体にしました。0 から 9 までの幅が揃うので、秒が変わっても桁が動きません。これは地味ですが、effect の有無より先に効いてくる部分です。
すみません、いま「effect」と書いてしまいました。日本語で書き直します。数字の幅が揃うと、1 秒ごとに文字がずらずら動かない、という意味です。
見出しの言葉は略していません。「現在時刻：」「配信時間：」と書いてあります。短くしたくなる気持ちはありますが、初めて見た人が読んで分かる語のほうがいいと思っています。
置くコード：HTMLとJavaScriptの全文
下の全文をコピーして、拡張子を .html にしたファイルとして保存してください。文字の符号化は UTF-8 にします。保存したら、OBS のブラウザソースからそのファイルを指定するだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配信時計</title>
<style>
html, body {
margin: 0;
padding: 0;
background: transparent;
overflow: hidden;
}
body {font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;color: #ffffff;}
.panel {display: inline-block;padding: 20px 30px 22px 30px;border-radius: 20px;background: rgba(10, 12, 16, 0.45);text-shadow:0 2px 6px rgba(0, 0, 0, 0.9),0 0 2px rgba(0, 0, 0, 0.95);}
.row {display: grid;grid-template-columns: auto auto;align-items: baseline;column-gap: 16px;}
.row + .row {margin-top: 6px;}
.label {font-size: 20px;letter-spacing: 0.08em;opacity: 0.9;}
.value {font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;font-variant-numeric: tabular-nums;font-feature-settings: "tnum" 1;line-height: 1.1;text-align: right;}
#clock {
font-size: 52px;
font-weight: 700;
}
#elapsed {
font-size: 44px;
font-weight: 600;
color: #ffe9a8;
}
</style>
</head>
<body>
<div class="panel">
<div class="row">
<span class="label">現在時刻：</span>
<span class="value" id="clock">--:--:--</span>
</div>
<div class="row">
<span class="label">配信時間：</span>
<span class="value" id="elapsed">--:--:--</span>
</div>
</div>
<script>(function () {"use strict";
// 配信の開始時刻。空のままにすると、このページを読み込んだ時刻から数えます。// 例: "2026-09-24T20:00:00"var START_TIME = null;
// ブラウザソースのURLに ?start=2026-09-24T20:00:00 を付けた場合は、そちらを使います。var params = new URLSearchParams(window.location.search);var startText = params.get("start") || START_TIME;var startDate = startText ? new Date(startText) : null;if (!startDate || isNaN(startDate.getTime())) {startDate = new Date();}
var clockEl = document.getElementById("clock");var elapsedEl = document.getElementById("elapsed");
function pad2(n) {return (n < 10 ? "0" : "") + n;}
function draw() {var now = new Date();
clockEl.textContent =pad2(now.getHours()) + ":" + pad2(now.getMinutes()) + ":" + pad2(now.getSeconds());
var total = Math.floor((now.getTime() - startDate.getTime()) / 1000);if (total < 0) {total = 0;}var hours = Math.floor(total / 3600);var minutes = Math.floor((total % 3600) / 60);var seconds = total % 60;
elapsedEl.textContent =pad2(hours) + ":" + pad2(minutes) + ":" + pad2(seconds);}
draw();
window.setInterval(draw, 200);
})();
</script>
</body>
</html>
あとで触ることになる場所を、先に挙げておきます。
START_TIMEの行。ここに開始時刻を書きます。空のままにすると、読み込んだ時刻から数えます。?start=を読む 3 行。ブラウザソースの URL に開始時刻を付けたとき、そちらを優先します。pad2のところ。1 桁の数字を 2 桁にそろえます。draw()の中。時刻と経過時間を計算して、画面の文字を入れ替えます。- いちばん下の
setInterval(draw, 200)の行。200 ミリ秒ごとにdraw()を呼びます。1 秒に 5 回です。
200 ミリ秒という半端な数字にしたのは、秒が飛ばずに変わるようにするためです。1 秒ぴったりにすると、読み込みの timing によっては 1 秒を 2 回出してしまうことがあります。
経過時間の数え方は、次のようになります。
START_TIMEか?start=のどちらかがあれば、その時刻を開始時刻にします。- どちらも無いとき、または書いた時刻が読み取れないときは、読み込んだ時刻を開始時刻にします。
- 開始時刻から今までの秒数を出して、時・分・秒に分けます。
- 経過時間がマイナスになったときは、0 にします。
ここで覚えておいていただきたいことがあります。何も指定せずに使うと、開始時刻は「読み込んだ時刻」になります。つまり、OBS を閉じて開き直したり、ブラウザソースを読み込み直したりすると、経過時間は 0 から数え直しになります。
それが困るときは、開始時刻を書いておきます。コードの中の START_TIME に書く方法と、ブラウザソースの URL の後ろに ?start=2026-09-24T20:00:00 のように付ける方法があります。後ろに付ける書き方なら、コードを書き換えずに済みます。URL の書き方は置き場所によって変わるので、ここでは触れません。
数字の大きさと背景の透明の具合を決める
この時計は、数字の大きさと背景の透け方で見え方が変わりすぎます。わたくしが決めた値と、そこを変えると何が変わるかを並べます。
| 場所 | いまの値 | 変えると |
|---|---|---|
#clock の font-size | 52px | 現在時刻の数字の大きさ。ここを変えると全体の大きさが変わります |
#elapsed の font-size | 44px | 経過時間の数字の大きさ |
.label の font-size | 20px | 「現在時刻：」「配信時間：」の見出しの大きさ |
.row + .row の margin-top | 6px | ふたつの行の間の広さ |
.panel の padding | 20px 30px 22px 30px | 数字のまわりの余白。上・左右・下の順です |
.panel の border-radius | 20px | 背景の板の角の丸み |
.panel の background の最後の数字 | 0.45 | 背景の透け方。0 で消え、1 で黒く塗ります |
.panel の text-shadow | 2 行 | 文字の後ろの影。明るい画面の上での読みやすさに効きます |
ここに並べたのは、値を変えたときにどう変わるかの説明です。すべてを画面に出して見比べたわけではありません。実際に目で見たのは、上のコードのままの見た目です。
背景の透け方は、迷うところだと思います。0.45 は、うすい黒の板が数字の後ろにある状態です。明るい画面の上でも文字が読めます。0.2 くらいまで下げると、画面の色が数字の後ろから見えるようになります。0 にすると、数字だけが画面に浮きます。
数字だけにすると、暗い画面の上ではきれいに見えます。明るい画面の上では、白い文字が背景に溶けます。溶けるのが困るなら、text-shadow の行を増やすか、#elapsed の色をもう少し濃くするか、黒い背景をうすく残すかです。わたくしは、うすく残す形を選びました。
OBSのブラウザソースに読み込んでみた
読み込みの手順です。
- 保存した .html ファイルを用意します。
- OBS の「ソース」のところで「+」を押し、「ブラウザ」を選びます。
- 名前を聞かれるので、分かりやすい名前をつけて「新規作成」にします。
- 「プロパティ」の中の「ローカルファイル」に印をつけます。
- 「参照」を押して、保存したファイルを選びます。
- 幅と高さを入れます。置きたい大きさに合わせます。
- 「OK」を押すと、キャンバスの上に出ます。
下の一枚が、そのときに撮った画面です。
書いた HTML の要素は 14 個で、閉じ忘れはありませんでした。表示の確認は、このブラウザソースに読み込んで行いました。数字の大きさを変えたときは、ブラウザソースの幅と高さも合わせて変えます。合っていないと、数字が切れたり、余白が広く残ったりします。
はっきり書いておきます。わたくしは配信をしていないので、実際の配信の画面でこの時計がどう見えるかは分かりません。確かめたのは、手元の OBS の画面までです。ここから先の使い方は、提案として読んでください。
こういう使い方はいかがですか：画面の隅に小さく置く
画面の右下あたりに小さく置いて、ほかの要素と一緒に映す使い方です。
大きさを決めるときに触るのは、このあたりです。
#clockのfont-sizeを 52px から 26px くらいに下げる#elapsedのfont-sizeを 44px から 22px くらいに下げる.labelのfont-sizeを 20px から 14px くらいに下げる.panelのpaddingを 10px 14px 12px 14px くらいに狭める.panelのbackgroundの 0.45 を 0.3 くらいに下げる
隅に置くときは、見出しの文字をどうするかで迷います。小さくすると「現在時刻：」の 4 文字が読みにくくなります。それでも言葉は残しておくほうがいいと思います。数字だけだと、どちらが何の数字か分からなくなるからです。
気をつけることがあります。背景をうすくしすぎると、明るい画面の上で白い文字が読みにくくなります。背景を 0 にするなら、文字の影を濃くするか、文字の色を変えてください。色や明るさが動く画面の上では、数字が消えやすいです。
こういう使い方はいかがですか：待機の一枚に大きく出す
待機画面や休憩の一枚に、時刻と経過時間を大きく出す使い方です。
#clockのfont-sizeを 52px から 96px くらいに上げる#elapsedのfont-sizeを 44px から 72px くらいに上げる.panelのpaddingを 30px 50px 32px 50px くらいに広げる.panelのbackgroundの 0.45 を 0.6 くらいに上げる- ブラウザソースの幅と高さを大きく取る
この使い方で面白いのは、開始予定の時刻を ?start= に入れておいたときです。コードの中に、経過時間がマイナスになったら 0 にする行があります。そのため、始まる時刻までは 00:00:00 のまま止まって見えます。始まる時刻になると、そこから数え始めます。
待機の一枚に「まだ始まっていません」という意味の 00:00:00 が出ている、という見え方になります。時計が止まって見えるのは壊れているからではない、と分かっていれば、そのまま置いておけます。
ただし、これはコードを読んだうえでの説明です。待機画面として映したところは、わたくしは見ていません。
こう広げられます：出す項目を増やす・減らす
経過時間だけにするなら、現在時刻の行を消します。HTML のこの 4 行です。
<div class="row">
<span class="label">現在時刻：</span>
<span class="value" id="clock">--:--:--</span>
</div>
ここで気をつけてください。HTML の行だけを消すと、JavaScript が「現在時刻」の場所を探せなくなります。その行で止まってしまい、経過時間も動かなくなります。消すときは、JavaScript の中の 2 か所も一緒に外します。
var clockEl = document.getElementById("clock");
clockEl.textContent =
pad2(now.getHours()) + ":" + pad2(now.getMinutes()) + ":" + pad2(now.getSeconds());
日付を足すときは、次のようにします。まず HTML に 1 行を足します。
<div class="row">
<span class="label">今日の日付：</span>
<span class="value" id="today">----/--/--</span>
</div>
次に JavaScript の、var clockEl の行の下に 1 行を足します。
var todayEl = document.getElementById("today");
そして draw() の中に、日付を入れる行を足します。
todayEl.textContent =
now.getFullYear() + "/" + pad2(now.getMonth() + 1) + "/" + pad2(now.getDate());
月は 0 から数える決まりなので、+ 1 をします。ここを忘れると、1 月が 0 と出ます。
この日付の例は、わたくしの手元で読み込んで確かめてはいません。触る場所を示したものです。曜日を出したいときも、同じ場所に足すことになります。
こう広げられます：色と書体を自分の配信に合わせる
自分の配信の色に寄せたいときに触る行を並べます。
bodyのfont-family。見出しの書体です。.valueのfont-family。数字の書体です。等幅の書体を並べています。数字の幅が揃うので、秒が変わっても桁が動きません。ここを普通の書体に変えると、数字が動いて見えます。#elapsedのcolor。#ffe9a8です。現在時刻と色を分けています。同じ白にしても構いません。.panelのbackground。rgba(10, 12, 16, 0.45)です。はじめの 3 つが赤・緑・青、最後が透け方です。青みを強くすると冷たい感じになります。.panelのtext-shadow。影の濃さと広がりです。#clockと#elapsedのfont-weight。数字の太さです。
縁取りをはっきりさせたいときは、text-shadow の行を増やします。上下左右に 1 行ずつ足す書き方があります。ここは確かめていませんので、やってみて見え方を決めてください。
コードは全文を載せました。そのまま使っても、数字を変えても構いません。時計は地味なものです。画面のすみに置いておいて、たまに目をやるためのものです。それでも、いま何時かと、どれくらい話したかがその場で分かるのは、少し気が楽だと思っています。
コメント