レイン工房レイン工房

【無料】 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/ ========================================================== ダウンロードしていただき、ありがとうございます。 使用するうえでの注意事項や、プリセットの導入方法を記載していますので、はじめにお読みください。 本プリセットは利用規約の範囲内であれば個人･法人･商用･非商用を問わず無料でご利用いただけます。 ========================================================== 利用規約 ・本プリセットをそのまま販売、再配布することは禁止します。 ・本プリセットを改変しての販売、再配布を禁止します。 ・データの編集や加工は自由に行っていただいて構いません。 ・使用する際のクレジット表記や事前連絡は不要です。 ・プリセットの使用で生じた、いかなる損害やトラブルに対して一切の責任を負いません。 ※お仕事などでプロジェクトデータを納品する際は、再配布には該当しません。

「ギフトとして贈る」とは

【無料】 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/ ========================================================== ダウンロードしていただき、ありがとうございます。 使用するうえでの注意事項や、プリセットの導入方法を記載していますので、はじめにお読みください。 本プリセットは利用規約の範囲内であれば個人･法人･商用･非商用を問わず無料でご利用いただけます。 ========================================================== 利用規約 ・本プリセットをそのまま販売、再配布することは禁止します。 ・本プリセットを改変しての販売、再配布を禁止します。 ・データの編集や加工は自由に行っていただいて構いません。 ・使用する際のクレジット表記や事前連絡は不要です。 ・プリセットの使用で生じた、いかなる損害やトラブルに対して一切の責任を負いません。 ※お仕事などでプロジェクトデータを納品する際は、再配布には該当しません。