【無料】 Obs_Widgets ニキシー管時計

==========================================================

ニキシー管時計 (Nixie Clock) — 世界線

OBS / Streamlabs OBS ブラウザソース用ウィジェット

==========================================================

■ これは何?

----------------------------------------------------------

本物のニキシー管を模した時計ウィジェットです。

『STEINS;GATE』の世界線変動率測定器から着想を得ています。

ガラス管の中にオレンジ色に発光する数字が浮かび、

点灯していない陰極が背後にうっすらと残ります。

下には金属製のシャーシ。時・分・秒のあいだにある

小さな管は、実際のニキシー管時計でも使われる

ネオン管(IN-3)で、秒に合わせて点滅します。

・HTML ファイル 1 つだけ。外部ライブラリは一切なし。

メモ帳で開いて中身を確認できます

・背景は透過。そのまま配信画面に重ねられます

・設定はすべて内蔵の設定パネルで完結。

コードを書き換える必要はありません

・時刻はパソコンのシステム時計を読みます。

ネット接続は不要です

ファイル:nixie_clock.html

■ かんたんな始めかた

----------------------------------------------------------

1. nixie_clock.html を普通のブラウザ(Chrome / Edge)で

開きます。URL のうしろに ?preview を付けると

暗い背景になり、配信画面での見えかたに近づきます:

nixie_clock.html?preview

2. マウスを画面上で動かすと、右上に歯車ボタンが

ふわっと現れます。

(3 秒動かさないと自動的に消えます。OBS では

マウスカーソルが存在しないため、配信画面に

写り込むことはありません。)

3. 歯車を押すと設定パネルが開きます。スライダーと

ボタンで好みの見た目に調整してください。

背後の時計にリアルタイムで反映されます。

4. 調整が終わったら、パネル下部の

「複製設定網址(設定 URL をコピー)」を押します。

完全な URL が生成され、クリップボードにコピーされます。

5. OBS で ソース -> 追加 ->「ブラウザ」を選び、

その URL を「URL」欄に貼り付けます。

※「ローカルファイル」にはチェックを入れないでください。

チェックを入れると URL の「?」以降が無視され、

設定が反映されません。

6. 幅 / 高さ(下記の推奨サイズ参照)を入力して完了です。

※ OBS の中で直接パネルを開くこともできます。

ソースを右クリック ->「操作(インタラクト)」。

■ 3 つの表示モード

----------------------------------------------------------

◆ 時・分のみ 0 6 : 3 5

◆ 時・分・秒 0 6 : 3 5 : 5 9

◆ 日付も表示 2026:07:26 06:35:59

日付ありモードでは、さらにレイアウトを選べます:

・1 列 14 本の管を横一列に。原作の測定器に最も近い形

・日付は上段 日付を小さい管で上に、時刻を大きい管で下に。

幅は半分で済み、情報の主従もはっきりします

■ OBS ソースの推奨サイズ

----------------------------------------------------------

デフォルトサイズ(管 1 本の幅 62px)、余裕込み:

時・分のみ 340 x 170

時・分・秒 500 x 170

日付あり・1 列 1110 x 170

日付あり・日付は上段 500 x 270

パネルの「大小(サイズ)」スライダーを動かすと全体が

比例して拡大縮小します。124px(2 倍)にした場合は

上の数値も 2 倍にしてください。

■ 設定パネルの各項目

----------------------------------------------------------

【表示】

表示モード 上記の 3 つから選択

日付レイアウト 日付ありモードのときだけ表示されます

12 時間制 13:00 が 01:00 になります。さらに本物の

ニキシー管時計と同じく、先頭の 0 は消灯します

ネオン区切り 時分秒のあいだの小さなネオン管。不要ならオフに

【外観】

テーマ 6 種類のガス色:

◆ ネオンオレンジ IN-14 管の実際の色(既定)

◆ アンバー 黄色寄りの暖色、レトロ機器風

◆ アルゴンブルー 冷たい SF 感

◆ マーキュリー 落ち着いたティール、実験室の空気

◆ バイオレット 神秘的。暗い画面によく合います

◆ クリムゾン いちばん強い存在感

色相 既定のテーマが好みでなければ、このスライダーで

自由に色を作れます。ガラスの色味・発光・

シャーシの照り返しもすべて連動します

発光 発光の強さ。0% でほぼ消灯、200% で非常に濃厚

サイズ 管 1 本の幅。全体が比例して拡大縮小します

フォント 4 種類:

◆ Nixie One 細いフィラメント感。

最も真空管らしい(既定)

◆ Oswald 縦長で線幅が均一。

実物の IN-14 の字形に最も近い

◆ Share Tech Mono 等幅。冷静なテック感

◆ VT323 古い端末風。発光の質感が最も強い

垂直微調整 管の中での数字の高さ。フォントごとに既定値が

異なるので、上下にずれて見えるときに調整します

【質感】

ガラス管の外殻 オフにすると発光する数字だけが残ります。

最もすっきりした重ねかた

シャーシ オフにすると管だけが浮いた状態になります

陰極スイープ ニキシー管時計の実際のメンテナンス機構です。

長く点灯しない数字は劣化するため、一定時間

ごとに 0~9 をひと通り流します。

オフ / 10 分ごと / 毎正時

■ よくある質問

----------------------------------------------------------

Q: 数字が普通のフォントになってしまいます。

A: フォントは Google Fonts から読み込むため、ネット接続が

必要です。接続がなくても動作はしますが、字形が変わります。

Q: OBS で背景が透過しません。

A: ブラウザソースの「カスタム CSS」欄を確認してください。

OBS は既定で

body { background-color: rgba(0,0,0,0); }

を入れています。これは消さないでください。

ブラウザで確認するときは ?preview を付けます。

Q: URL を貼ったのに設定が反映されません。

A: ほとんどの場合「ローカルファイル」にチェックが

入ったままです。チェックを外して「URL」欄を使って

ください。パラメータは「?」で始め「&」でつなぎます。

Q: 数字が管の中央に来ません。

A: フォントごとに字面の基準が異なります。パネルの

「垂直微調整」スライダー(または URL の &nudge=)で

調整してください。

Q: 時刻がずれています。

A: パソコンのシステム時計を読んでいます。

システムの時刻設定をご確認ください。

Q: パネルで調整した設定は保存されますか?

A: ファイルを直接開いた場合は自動的に記憶されます。

パラメータ付きの URL(OBS に貼ったもの)を使っている

場合は、表示内容がその URL だけで決まります。調整後に

「設定 URL をコピー」を押し、新しい URL を OBS に

貼り直してください。これは意図的な仕様で、設定の

異なる複数のソースを同時に使っても互いに上書きされない

ようにするためです。

Q: 秒が変わるたびに横幅がガタつきませんか?

A: しません。管は 1 本ずつ幅が固定で、10 個の数字は同じ

位置に重ねてあるため、外枠はまったく動きません。

Q: フォントは有料ですか?

A: いいえ。4 種類ともオープンソースの Google Fonts

(SIL OFL)です。商用利用・改変・再配布すべて無料で、

クレジット表記も不要です。

■ 共有について

----------------------------------------------------------

自由に使用・共有していただけます。

TWITCH:https://www.twitch.tv/rein0919

X(TWITTER):https://x.com/Rein55523042

BOOTH:https://reinnier.booth.pm/

==========================================================

ダウンロードしていただき、ありがとうございます。

使用するうえでの注意事項や、プリセットの導入方法を記載していますので、はじめにお読みください。

本プリセットは利用規約の範囲内であれば個人･法人･商用･非商用を問わず無料でご利用いただけます。

==========================================================

利用規約

・本プリセットをそのまま販売、再配布することは禁止します。

・本プリセットを改変しての販売、再配布を禁止します。

・データの編集や加工は自由に行っていただいて構いません。

・使用する際のクレジット表記や事前連絡は不要です。

・プリセットの使用で生じた、いかなる損害やトラブルに対して一切の責任を負いません。

※お仕事などでプロジェクトデータを納品する際は、再配布には該当しません。