ねむすぎノート
ねむすぎノート
#author("2026-08-26T23:49:46+09:00","default:nemusg.pad","nemusg.pad") #author("2026-08-26T23:50:16+09:00","default:nemusg.pad","nemusg.pad") #title(OBSで使える薄い時計 OBS Slim Clock v3) &ref(./obs_slim_clock_banner_slim.png,75%); 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにしたい。なおかつ動画の要素と被りにくい薄い時計です。 表示位置（左上・右上・左下・右下）は設定で変更できます #ref(output/obs_slim_clock/preview3_haishin.png,25%) - [[BOOTH:https://nemusg.booth.pm/items/8740660]]にも置いてみていますが同じものです - [[BOOTH:https://nemusg.booth.pm/items/8740660]]にも同じものを置いています - コーディングにChatGPT利用 - GoogleFonts利用 [[Roboto:https://fonts.google.com/specimen/Roboto]] など //- Day.js利用（v3以下のみ） [[Day.js MIT License:https://github.com/iamkun/dayjs/blob/dev/LICENSE]] * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSのソース追加 > ブラウザ でローカルファイルを読み込んでください -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、縮小/拡大して大きさを調整する場合、幅700 高さ200とかにしたほうが扱いやすいかも * 利用規約 [#h91f29ca] - 改変OK・再配布OK・自作発言NG - 改変したものを配布する場合、「[[OBSで使える薄い時計:https://note.nemusg.com/?output/obs_slim_clock]]を改良しました」と記載しリンクを貼ってください。 * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v3.2.zip); //- &ref(output/obs_slim_clock/obs_tokei_v3.1.zip); -- &ref(output/obs_slim_clock/obs_tokei_v3a.html); 左上サンプル -- &ref(output/obs_slim_clock/obs_tokei_v3b.html); 右上サンプル -- &ref(output/obs_slim_clock/obs_tokei_v3c.html); 左下サンプル -- &ref(output/obs_slim_clock/obs_tokei_v3d.html); 右下サンプル -- clock-time.php 基本的に利用しなくて大丈夫です。 zipからの利用を推奨します。v3からは4ファイルとも同じコードになっていて、`pos:` の設定だけ変わっています。 ** カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、ファイル内の設定を変更すると、色などの調整ができます。v3から書き方が変わりました。 *** 時刻のコロン（：）を点滅【v3.1以降】 [#zf9d3064] blinkColon: true, // 時刻のコロンを点滅させる *** 外部サーバーと時刻同期【v3.1以降】 [#ldd529cd] syncTime: true, // 外部サーバーと時刻同期 通常はお使いのPCの時刻を表示しますが、外部サーバー((nemusg.com))に時刻を同期する機能になります。これでお使いのPCの時刻よりも正しい時刻になる可能性があります。起動時に1回同期し、その後は24時間ごとに再同期。同期に失敗した場合はPCの時刻を表示します。 *** 背景色を変更（透明度あり） [#c832cd15] ここでは[[10進数カラーコード:https://beginners-hp.com/color-code.html]]を使っています((透明度を設定する場合は10進数である必要があります))。`0, 0, 0` で黒になります。 #ref(./v3-sample0.png,50%) --bg: rgba(0, 0, 0, 0.8); /* 透明度あり背景色（1.0で透明なし） */ *** 背景色を変更（透明度なし） [#k4365422] ここでは[[16進数カラーコード:https://beginners-hp.com/color-code.html]]を使っています((透明なしの場合16進数を使うことが一般的ですが、ここも10進数を使うこともできます。)) #ref(./v3-sample2.png,50%) --bg: #6e520d; /* 透明度なし背景色 */ *** 文字色を変更 [#v12eecd6] #ref(./v3-sample1.png,50%) --bg: none; /* 透明度なし背景色 */ --text: #333; /* 文字色 */ *** 角丸をやめる [#b98c4156] #ref(./v3-sample3.png,50%) --corner: 0; /* 角丸の強さ（0にすると角丸なし） */ *** 秒を非表示にする [#tfdda6f2] #ref(./v3-sample4.png,50%) - `.ddd-sec` を変更してください((Silkscreenフォントを使用して横幅を固定した場合、秒数が減った分 --width: を減らすと良いかも)) 変更前 .ddd-sec{ display:inline; } 変更後 .ddd-sec{ display:none; } *** タイムゾーンを非表示にする [#v771bcc1] - `.clock .timezone` を変更してください 変更前 .clock .timezone { color: var(--tzColor); } 変更後 .clock .timezone { display: none; } *** もっと薄くしたい [#a2c54059] #ref(./v3-sample5.png,50%) /* 余白（フォントによっては調整が必要） */ --padT: 2px; --padR: 6px; --padB: 2px; --padL: 12px; もちろんこれは一例なので好きな値を入れてもOKです。 *** 他のフォントを使う [#m1bccf82] #ref(output/obs_slim_clock/v3-sample-font.png,75%) font: 'Roboto', // Google Fontsのフォント名 weight: 700, // 1～1000 - ここでフォントを変更することができます。[[GoogleFonts:https://fonts.google.com/]]にあるものなら多分どれでも設定できます。((注意：weightがGoogle Fonts側に存在しない場合はフォントも設定されません。)) - 【注意】を選んだ場合、秒数によって時計の幅が変わりやすいので、`--width` を固定したほうがいいです。 - フォントによっては `--letterSpacing` の変更も必要です。 // Roboto / 700（デフォルト・v1と同じ） // Noto Sans / 400 // Noto Sans Mono / 400 // DotGothic16 / 400 // Doto / 900 // Silkscreen / 400 （v2と同じ） 【注意】 // Bytesized / 400 // VT323 / 400 // Cutive Mono / 400 // Syne Mono / 400 // Tiny5 / 400 // LINE Seed JP / 400 【注意】 * 変更履歴 [#tb2be69e] - 2026年8月26日 -- v3.2 公開。フォントを変更する箇所が間違いやすかったので、CONFIGを上部に移動＆変更できない個所を目立たないように変更。フォントのweightの設定に問題があったときに自動補正を試みるようになりました。ファイルの末尾に `?debug=1` でデバッグモード（時計が動かない）になります。 - 2026年8月20日 -- v3.1 公開。時刻のコロン（：）を点滅、外部サーバーと時刻同期に対応しました。（いずれもデフォルトではオフです） -- 時刻同期機能の追加に伴い日時処理をJavaScript標準のDateへ変更したため、Day.jsへの依存がなくなりました。 - 2026年1月23日 -- 海外の人でも読めるように名称を `obs_tokei` から `obs_slim_clock` に変更。 - 2025年12月22日 -- v3 公開。タイムゾーンを表示。土日で色変更。他のフォントに変更できるようになりました。 --- 等幅フォントではない Silkscreen を使用すると少し表示がガタつくので Silkscreen を使うなら v2 のが良いかも((v2の秒が1のときにガタつかない理由がわからず踏襲できませんでした)) - 2025年1月26日 -- [[v2>output/obs_slim_clock/v1-2]] 公開。Silkscreenの数字の1や曜日によって横幅が異なるので、細かい調整をしています。 --- 忘れないように書いておくと、どのパターンも左寄せになっています。中央寄せ・右寄せにすると10秒ごとに全体の位置がガタつく問題があるためです。（Silkscreenを使う以上仕方ないと思います） -- [[v1>output/obs_slim_clock/v1-2]] の西暦表示を 「YY」から「YYYY」に変更しました。（海外の方への配慮） * デバッグモード [#p81c9acb] - 1秒ごとに時計が動くと開発ツールが使いにくいため、下記のいずれかの方法で時計を止めることができます -- `clearInterval(window.__clockTimer)` をコンソールに打つ -- ファイルの末尾に `?debug=1` を付けた状態でファイルを開くと時計を停止した状態になります【v3.2以降】 #include(parts/feedback,notitle)