OBSの時計を実装する方法
OBSは「Open Broadcaster Software Studio」という名前のライブ配信ツールで、YouTubeなどの配信などで使われています。
その時にOBSの時計を自作で実装したのでその方法の簡単な備忘録です。
OBSで時計を表示させる方法
OBSにはウェブページを表示させる機能があるのでHTMLで時計を実装して、OBSでそれを表示させて時計を表示させます。
様々なフリーの時計が配布されていますが、レイアウトやフォントが使いたいものがなかったので今回自作して作ることにしました。
この記事ように作ったサンプルはこちらに上げておきます。
今回はデザインに関連する説明やあんまり時計の機能に関係ない説明は省略します。
時間の取得
まず時間の取得します。
時間は new Date() で現在時刻を取得でき、月や日などを専用のメソッドを使って取得します。
どのようは情報が取得できるかは以下のページのメソッドを確認するといいでしょう。
2点だけ注意が必要なので説明しておきます。
月は now.getMonth() で取得でき、1月の場合は 0 を返します。
なので正しい月にする場合は +1 する必要があります。
const month = now.getMonth() + 1;
曜日は getDay で取得でき、日曜を 0 として曜日が進むごとに 1 増えます。
曜日を表示させたい場合は曜日の配列から選ぶようにするといいです。
const week = now.getDay();
const week_name = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][week];
ループの設定
ループには setInterval を使用します。
このメソッドは一定間隔で繰り返しメソッドを呼び出させることができます。
引数に設定する値はミリ秒なので注意しましょう。自分は1秒ごとに更新するようにしました。
setInterval(update_clock, 1000);
終わりに
上に上げた2点だけ気をつければ他は普通にHTMLの内容を更新したり、CSSでデザインを整えるだけで時計を実装することが出来ます。
デザインする際にウェブフォントも使えるのでGoogleFontなどを使ってみるのもいいかもしれません。
意外とシンプルでちょっとCSSが触れるデザイナーなら実装することも可能なので挑戦してみてもいいかもしれません。
Discussion