ねむすぎノート
ねむすぎノート
#author("2026-01-24T00:07:07+09:00","default:nemusg.pad","nemusg.pad") #title(OBSで使える薄い時計 obs_slim_clock_v3) #author("2026-01-24T00:12:06+09:00","default:nemusg.pad","nemusg.pad") #title(OBSで使える薄い時計 OBS Slim Clock v3) &ref(./obs_slim_clock_banner_slim.png,75%); 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにしたい。なおかつ動画の要素と被りにくい薄い時計です。 ''フォントが見やすい v1・ピクセルフォントが好きな人向け v2'' については [[OBSで使える薄い時計v1-2>output/obs_slim_clock/v1-2]] へ。 #ref(output/obs_slim_clock/preview1.png,50%) #ref(output/obs_slim_clock/preview2.png,50%) ''最新のv3はタイムゾーン表示・土日で色変更・他のフォントに変更できるようになりました'' #ref(output/obs_slim_clock/preview3.png,50%) 表示位置（左上・右上・左下・右下）は設定で変更できます((v3以降)) #ref(output/obs_slim_clock/preview3_haishin.png,25%) - ChatGPT利用 - GoogleFonts利用 [[Roboto:https://fonts.google.com/specimen/Roboto]] [[Silkscreen:https://fonts.google.com/specimen/Silkscreen]] - Day.js利用 [[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.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); 右下サンプル zipからの利用を推奨します。v3からは4ファイルとも同じコードになっていて、137行目の `pos:` の設定だけ変わっています。 ** カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、ファイル内の設定を変更すると、色などの調整ができます。v3から書き方が変わりました。 *** 背景色を変更（透明度あり） [#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%) - 121行目を変更してください((Silkscreenフォントを使用して横幅を固定した場合、秒数が減った分 --width: を減らすと良いかも)) 変更前 .ddd-sec{ display:inline; } 変更後 .ddd-sec{ display:none; } *** タイムゾーンを非表示にする [#v771bcc1] - 115行目を変更してください 変更前 .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側に存在しない場合はフォントも設定されません。)) - 【注意】を選んだ場合、秒数によって時計の幅が変わりやすいので、23行目の `--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年1月23日 -- 海外の人でも読めるように名称を `obs_tokei` から `obs_slim_clock` に変更。 - 2025年12月22日 -- v3 を追加しました。タイムゾーンを表示。土日で色変更。他のフォントに変更できるようになりました。 --- 等幅フォントではない Silkscreen を使用すると少し表示がガタつくので Silkscreen を使うなら v2 のが良いかも((v2の秒が1のときにガタつかない理由がわからず踏襲できませんでした)) - 2025年1月26日 -- v2 を追加しました。Silkscreenの数字の1や曜日によって横幅が異なるので、細かい調整をしています。 --- 忘れないように書いておくと、どのパターンも左寄せになっています。中央寄せ・右寄せにすると10秒ごとに全体の位置がガタつく問題があるためです。（Silkscreenを使う以上仕方ないと思います） -- v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海外の方への配慮） * 今後やりたいこと [#p81c9acb] - コロンの点滅（点滅の間隔を1～60秒で選べるといいかも） - パラメータなどで停止するモードを追加する（1秒ごとに動かれると開発ツールが使いにくい） -- 今も `clearInterval(window.__clockTimer)` をコンソールに打つと止まる #include(parts/feedback,notitle)