時計も経過時間も！同時視聴の機能まで！！機能もりもりの時計オーバーレイです！ ====================================================== 配信画面にピッタリが見つかる！ きせかえ時計オーバーレイ for OBS ====================================================== OBSに入れるだけで使える「全部入り」の時計オーバーレイです。 作りの違うデザイン96種（針の時計45種・数字の時計51種）から選べて、色・フォント・出す中身も自分好みに変えられます。 時計のほかに、経過時間・カウントダウン・ポモドーロ・同時視聴タイマーにもなります。 外部ツールは不要です。 【操作について（はじめにお読みください）】 ・設定などの操作は、すべてOBSの「対話」ウィンドウの上で行います。 ・「対話」ウィンドウの出し方 　　OBSで、追加したソースを右クリック →「対話」を選びます。 　　開いたウィンドウの上で右クリックをすばやく2回すると、設定パネルが開きます。 ・OBSの都合で、「対話」ウィンドウの中で打てる文字は英数字（半角）だけです。 　日本語を入れたいときは、メモ帳など別の場所で打ってからコピーして、 　入力欄に貼り付け〈Ctrl+V〉てください。 ・ソースの大きさ（とくに高さ）を大きくしておくと、設定パネルが広く出て 　設定しやすくなります（おすすめ：幅1920 / 高さ1080）。 ・Chromeなど別のブラウザで開いて設定しても、OBSには反映されません。 【機能】 ・デザイン96種（作りが違う物だけ。見本を見ながら押して選べます。 　「すべて／アナログ／デジタル」で絞れます） 　■ デジタル（数字の時計）51種 　角丸の箱／液晶／LEDの粒／二重枠のウィンドウ／付箋／ビデオの表示／ガラス／ 　パタパタ／ニキシー管／輪／文字だけ／横長の帯／進み具合の棒／たて型／ドット絵／ 　細い明朝／2進の点／ことば／日めくり／チケット／得点板／中継の帯／蛍光表示管／ 　ターミナル／黒板／丸バッジ／3段／大きい時＋小さい分秒／かっこ／下線／短冊／ 　電球の看板／目盛りの輪／7セグ（光る数字）／タイプライター／吹き出し／ 　ネームプレート／回る数字／電卓／発車の案内／案内板の文字／レシート／値札／ 　ナンバープレート／フィルム／ラジオの目盛り／メーター／ステッカー／電池／ 　つり下げ看板／ラベルテープ 　■ アナログ（針の時計）45種 　針の文字盤＋下にデジタル／振り子／駅の時計／ローマ数字の文字盤／針だけ／ 　線の文字盤／点の文字盤／全部の数字／学校の時計／懐中時計／四角い置き時計／ 　四角い壁時計／八角形／パイロット／ダイバー／細い線だけ／細い数字と目盛り／ 　24時間の数字つき／日付の小窓／曜日と日付の小窓／小さい秒針／ 　デジタルの小窓つき／太い針だけ／くさびの目盛り／漢数字／和の角時計／六角形／ 　たる型／クッション型／だ円／輪だけ／数字だけ（面なし）／目盛りだけ（面なし）／ 　レーダー／1本針／24時間で1周／回る文字盤／回る点／分のおうぎ形／ 　まわりの点が点く／日付の札つき／太い枠に数字／時と分の二重の数字／ 　ローマ数字4つ／十字線 ・配色6組（いちご／あんず／わかば／ソーダ／すみれ／和風）。押すだけで、面・文字・枠・帯・ 　差し色がまとめて変わります。そのあと1色ずつカラーピッカーで変えられます（デザインごとに記憶） ・5つの「出すもの」 　　時計　　　　　　… ふつうの時計 　　経過時間　　　　… スタートからの時間（配信の経過時間に） 　　カウントダウン　… 分を決めて数える。終わると点滅して、音も鳴らせます 　　ポモドーロ　　　… 作業○分 ⇔ 休憩○分 をくり返す。何回目か・切り替わりの音つき 　　同時視聴　　　　… 作品がいまどこまで進んだかを出す 　　　　　　　　　　　（再生前の合図・途中から・ずれ直し・作品の長さ・進み具合の棒） ・タイマーは、時計をクリックするだけで開始／一時停止 　時計の上で右クリック1回で「リセットしますか？」→ もう一度右クリックでリセット ・時計の出しかた（24時間／秒／コロンの点滅／日付／曜日（日本語・英語）／日付の形5種／ 　配信の経過時間もいっしょに出す） ・針の動き（カチカチ・なめらか）と文字盤4種（4つの数字／全部の数字／ローマ数字／目盛りだけ） ・面の作り（影3種・質感・色分け・文字を光らせる）／角の丸さ／枠の太さ／面の透明度 ・フォントの切り替え（PCに入っているフォントの名前を入れることもできます） ・時計の大きさ 30〜300％／角度 -180〜180° ・時計は、いつでもつかんで動かせます（設定パネルを開いていなくても動かせます） 　　画面の端やまんなかに、吸いつくようにそろいます（スナップ・マス目） ・デコレーション（自分の画像・動画・スタンプ32種を、時計のまわりに8個まで） ・振り子のおもりを好きな画像に差し替え ・時報（光る＋音。毎時00分／30分ごと／15分ごと。 　キンコン／ポーン／ピッピッピッポーン／自分の音のファイル） ・マイプリセット5つ（今の設定を丸ごと残して切り替え） ・テスト用のボタンつき（設定パネルの下。時報・終了の点滅と音・時計を1分進める） ・設定のバックアップ・引き継ぎ（テキストで出して、貼って読み込む） ・時計を2つ置いて、別々の設定で使えます（下の【時計を2つ置くとき】） 【必要なもの】 ・OBS Studio ※外部ツールは不要です。インターネットにつながっていなくても動きます 【インストール方法】 1. ZIPを展開し、中の「時計オーバーレイ.html」をOBSの画面に ドラッグ＆ドロップします （またはソースの追加 → ブラウザ →「ローカルファイル」で選びます） ※ フォルダの中身（.js や .css、images、sounds）は、同じ場所に置いたままにしてください。 2. ブラウザソースの大きさを 幅1920 / 高さ1080 にします。 3. OBSで、追加したソースを右クリック →「対話」を選びます。 4. 開いたウィンドウの上で、右クリックをすばやく2回すると設定パネルが開きます。 【設定パネルの開き方】 1. OBSで、このソースを右クリック →「対話」を選びます。 2. 開いたウィンドウの上で、右クリックをすばやく2回します。 3. 閉じるときは、右上の「✕」か、キーボードの Esc を押します。 ・はじめて追加したときだけ、設定パネルが開いた状態で始まります。 ・パネルは上の帯をつかんで動かせます。右下の角で大きさを変えられます。 ・パネルの文字の大きさは、上の「文字 － ＋」で変えられます 　（数字を押すと 20 に戻ります。－ と ＋ は押しっぱなしで続けて変わります）。 ・消す・戻す系のボタンは、1回目で「もう一度押すと実行」に変わります。 　もう一度押すと実行、5秒たつと元に戻ります。 【かんたんな使い方】 1. 設定パネルの「かんたん設定」で「出すもの」を選びます。 2. 「デザイン」の見本を押して、好きな物を選びます （「すべて／アナログ／デジタル」で絞れます）。 3. 「時計の大きさ」で大きさを合わせます。色は「見た目」タブの「色」で変えられます。 4. 配信画面の時計をつかんで、置きたい場所へ動かします。 5. 右クリックをすばやく2回（または Esc）で設定パネルを閉じます。 【タイマーの動かし方】 ・「出すもの」が経過時間／カウントダウン／ポモドーロ／同時視聴のとき、 　「対話」ウィンドウの中で時計をクリックすると 　開始 → もう一度クリックで一時停止 → もう一度で再開 になります。 ・カウントダウンが「終了！」のときにクリックすると、開始待ちに戻ります。 ・時計を少しでも動かすと「移動」として扱われ、開始はしません。 ・時計の上で右クリックを1回すると「リセットしますか？」と出ます 　（時計の外で右クリックしても出ません）。 　5秒以内にもう一度右クリックするとリセットします。 　（すばやく2回は、設定パネルの開閉です。リセットするときは、 　　1回押して表示が出てから、もう一度押してください） ・設定パネルの「タイマー」タブのボタンでも、開始・一時停止・再開・最初に戻す ができます。 【同時視聴タイマーの使い方】 1. 「かんたん設定」→「出すもの」で「同時視聴」を選びます。 2. 「タイマー」タブ →「同時視聴」で、再生前の合図（なし／3秒／5秒／10秒）を選びます。 3. 途中から見るときは「はじめの位置」に 時・分・秒 を入れます。 4. 「作品の長さ」を入れると「/ 1:58:00」と進み具合の棒を出せます（0 のままなら出しません）。 5. 作品の再生ボタンを押すのに合わせて、時計をクリック（または「開始」）。 合図ありのときは、0 になったところから数えはじめます。 6. ずれたときは「再生中のずれを直す」の －10秒／－1秒／＋1秒／＋10秒 で合わせます。 【時計を2つ置くとき】 同じ「時計オーバーレイ.html」をもう1つソースに追加して、 2つ目のソースの「ローカルファイル」のチェックを外し、URL の後ろに ?id=2 を付けます。 　例：file:///C:/（置いた場所）/時計オーバーレイ.html?id=2 こうすると、2つの時計が別々に設定を覚えます（id は半角の英数字で好きな名前にできます）。 ?id を付けないで2つ置くと、同じ設定を2つで使います。 【設定パネル】 タブは かんたん設定／見た目／時計／タイマー／その他 の5つです。 各項目の説明は、同梱の README.txt にあります。 デザインによって効かない設定は、その場に黄色い注意書きが出ます。【フォントについて】 フォントは同梱していません。デザインごとに似合うフォントを指定してあり、PCに無いときは別のフォントで出ます。 フォントの名前と入れ方は、同梱の README.txt にあります。【同梱のフォルダ】 ・images … 時計のまわりに置く画像・動画、振り子のおもりの画像を入れるフォルダ ・sounds … 時報などで鳴らす自分の音のファイルを入れるフォルダ ※「時計オーバーレイ.html」と同じ場所に置いたまま使ってください 【更新履歴】 Ver.2 … デザインを作りの違う96種（アナログ45・デジタル51）に入れ替え／配色6組／ 　　　　同時視聴タイマーを追加／ 　　　　設定パネルを作り直し（左にタブ・文字の大きさはボタン）／コロンの点滅／ 　　　　曜日の英語表示／時計といっしょに経過時間を出す／カウントダウン終了の音／ 　　　　ポモドーロの何回目・切り替わりの音／スナップ・マス目／振り子のおもりの画像／ 　　　　時計を2つ置いて別々に設定／時刻が変わっても時計の大きさが変わらないように／ 　　　　位置を端に寄せても画面の外に出ないように／設定パネルを閉じたまま時計を動かせるように Ver.1 … 初版 【注意事項】 ・本商品は OBS Studio のブラウザソース向けに作られています。 　他の配信ソフトでの動作は検証していません。 ・OBSのブラウザソースでは、日本語を直接入力できません（OBSの仕様です）。 　メモ帳などで打ってから、コピーして貼り付けてください。 ・設定はブラウザ（OBS）内に保存されます。キャッシュ削除で消えるため、 　大事な設定はバックアップをおすすめします。 ・OBSでは「ファイルを選ぶ」の画面が開かないことがあります。 　そのときは images／sounds フォルダの方法を使ってください。 ・大きい透過webm（1920×1080など）の動画をたくさん置くと重くなります。 　飾りに使う動画は 480×480 くらいまでの大きさがおすすめです。 ・OBSの仕様変更により、動作しなくなることがあります。 【ライセンス・利用規約】 同梱の「利用規約.txt」をご覧ください。 【不具合について】 不具合を見つけたときは、BOOTHの連絡機能からお知らせください。 【その他】 ほしい機能のご要望もお待ちしています。 ====================================================== 作者：望月シュン X ：https://x.com/mochi_love_V YouTube ：https://www.youtube.com/@mochi_love_V BOOTH ：https://mochizuki-happy.booth.pm/ ======================================================