先日OBS Studioを使った録画案件でリアルタイムの日時（時計）を入れてほしいという要望がありました。
以前も紹介しましたが、Windowsの場合はSnazという時刻やストップウォッチをテキストデータとして保存しつづけるユーティリティを動かし、そのファイルをテキストソースで読み込む方法がありました。
[blogard url=”https://do-gugan.com/blog/archives/2020/12/telopping_while_remote_ut.html”]
しかし最近MacBook Proを使うようになり、改めてmacOSでも同様のツールがないか探してみたんですが見付からず。ちょっとしてスクリプトを書けば済みそうな気がしたんですが、ならばと思いついてWebページとしてJavaScript + CSSでデザインも込みで実装しOBSの「ブラウザ」ソースで読み込んでしまえと。
同様の考え方は既にあったみたいで、こちらなど表示形式もカスタマイズできていい感じです。
ただ今回要望のあった日付は入れられないし、CSSもOBS上に設定が必要だったので、URL一発で日時表示ができるページを作ってしまいました。
URLはこちら。＞https://do-gugan.com/obs_clock/
デザインはこんな感じです。位置やサイズはOBS側で好きに変更可能。
OBS Studioの「ブラウザ」ソースをシーンに追加し、上記URLを指定するだけです。
OBSの内蔵ブラウザでJavaScriptを実行するので、最初に読み込んで表示されてしまえばあとはインターネット通信はなくても良いはず。1秒毎にサーバーに読みに行ったりすることはありません。フォントはGoogleフォントで丸ゴシック系のものを使ってます。白い背景でも見えるよう黒縁をつけています。
現状カスタム性はまったくありませんが、要望があれば日付のON/OFFや曜日表示、カラー変更くらいはつけてもいいかも知れません。あとローカルにファイル一式をおいて読み込むこともできそうな気がするので、GitHubにでも公開しましょうかね。
取り急ぎ現状のものでよろしければご自由にお使いください。（サーバー不調などで予告なく停止していたらごめんなさい）