【OBS】時計を配信に表示させる設定方法

はじめに

みなさんは、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)のフォローをお願いします。