はじめに

みなさんは、OBSに時計を表示させたいと思ったことはありますか？

OBSでは、ローカルのHTMLファイルを配信画面に表示させることができるため、
HTMLファイルで作成すれば、時計を表示させることができます。

この記事では、時計をOBSに表示させる設定方法とHTMLファイルの仕組みについて紹介します。

時計を配信に表示させる設定

1. HTMLファイルをダウンロード

https://github.com/degudegu2510/obs-clock/blob/main/simple/simple-clock.html

まずは、上記のリンクにアクセスし、以下の画像の Download row file ボタンから、HTMLファイルをダウンロードし、任意のフォルダーに格納してください。

2. OBSのソースにブラウザを追加

OBS上で、ブラウザをソースに追加してください。

3. ローカルファイルに設定して、ダウンロードしたファイルを指定する

プロパティの設定で、ローカルファイル にチェックを入れて、ダウンロードしたHTMLファイルを参照させるとOBS上に時計を表示させることができます。

4. デザインをカスタマイズする

時計のデザインを変えるには、ダウンロードしたHTMLファイルをテキストエディタで表示させて、
以下の項目を任意の値にすることで変更することができます。

--font-family
- フォントの種類を変更することができる
--text-color
- フォントの色を変更することができる
--hr-color
- 境界線の色を変更することができる

時計が表示される仕組み

ここからは、現在の時刻を取得・表示している仕組みについて紹介します。

1. 日付の取得

const now = new Date();

// 月の取得
const month = String(now.getMonth() + 1).padStart(2, '0');

// 日の取得
const date = String(now.getDate()).padStart(2, '0');

const now = new Date();
- 現在の時刻を取得している
const month = String(now.getMonth() + 1).padStart(2, '0');
- String(now.getMonth() + 1)で、現在の月を取得
  - getMonth() は、 0~11の値を返すので、+1して、現在の月に治している
- padStart(2, '0')で、2桁に修正している
  - 例：1 → 01
const date = String(now.getDate()).padStart(2, '0');
- String(now.getDate())で、現在の日を取得
- padStart(2, '0')で、2桁に修正している
  - 例：1 → 01

2.曜日の取得

const now = new Date();

// 表示させる曜日
const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

// 曜日を取得
const dayName = dayNames[now.getDay()];

const now = new Date();
- 現在の時刻を取得している
const dayName = dayNames[now.getDay()];
- now.getDay() で曜日が0~6の値で取得できる

3. 時刻を取得する

const now = new Date();

// 時を取得
const hours = String(now.getHours()).padStart(2, '0');

// 分を取得
const minutes = String(now.getMinutes()).padStart(2, '0');

const now = new Date();
- 現在の時刻を取得している
const hours = String(now.getHours()).padStart(2, '0');
- now.getHours() で時を取得している
- padStart(2, '0')で、2桁に修正している
  - 例：1 → 01
const minutes = String(now.getMinutes()).padStart(2, '0');
- now.getMinutes() で分を取得している
- padStart(2, '0')で、2桁に修正している
  - 例：1 → 01

4. 1行ごとに更新させる

function updateTime() {
  // 上記の時刻を取得する処理がまとまっている 
}

// 1秒(1000ms)ごとに updateTime() を実行する
updateTime();
setInterval(updateTime, 1000);

setInterval(updateTime, 1000);
- 1秒(1000ms)ごとに updateTime() を実行する

まとめ

この記事では、OBSの「ブラウザ」ソースを使って、
HTMLファイルで作成した時計を配信画面に表示する方法を紹介しました。

OBSではローカルのHTMLファイルをそのまま読み込めること
シンプルなHTML / CSS / JavaScriptだけで時計が実装できること
Date オブジェクトを使って日付・曜日・時刻を取得し、setInterval で定期更新している仕組み

といったポイントを押さえることで、「なぜ動くのか」「どこを触ればカスタマイズできるのか」も理解できたと思います。

「配信画面にちょっとした情報を出したい」「OBSでHTMLを使ってみたい」
という方は、ぜひこの時計をベースに、自分好みに改造してみてください。

HTMLとJavaScriptが少し書けるだけで、
OBSの表現の幅がぐっと広がるはずです。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。