# 【OBS透過】カウントダウン＆ポモドーロ 配信用タイマー ウィジェット｜音と色で時間が分かる・ブラウザソースで動くHTML/JSツール｜商用利用OK 配信画面の作業枠・勉強配信・待機画面・休憩枠をスタイリッシュに彩る、OBS Studioブラウザソース専用の透過タイマーウィジェットです。 HTML/CSS/JavaScript単体で動作し、外部通信を行わないため、配信ソフトに負荷をかけず安定して動作します。 同梱の設定ツール（config.html）で分数・テーマ・チャイム音量を直感的に設定し、「URLをコピー」してOBSに貼り付けるだけで導入完了です。 --- ### ■ 主な機能と特徴 1. **OBSブラウザソースで即透過表示** - 背景はアルファ透過設計。ゲーム画面・雑談背景・イラストの上にそのまま自然に重なります。追加のカスタムCSSは不要です。 2. **2つの動作モードに対応** - **ポモドーロモード**: 作業時間（例: 25分）と休憩時間（例: 5分）を自動で交互にループ進行。作業セット数も自動でカウントします。 - **カウントダウンモード**: 指定した分数（例: 10分、5分）から 00:00 までカウントダウン。配信開始前や小休憩枠に最適です。 3. **Web Audio API による高音質チャイム内蔵** - 外部音声ファイルの読み込みを行わず、ブラウザ内部で透き通ったベルチャイム音を自動合成。音が鳴らないトラブルを防ぎます（ミュート設定や音量調整も可能）。 4. **5種類の洗練されたカラーテーマ** - **Neon**: サイバーパンク風の鮮やかなシアン＆マゼンタ - **Pastel**: 優しいさくらピンク＆パープル - **Coffee**: 落ち着きのある温かいカフェラテ＆アンバー - **Emerald**: 清潔感のあるミント＆ダークグリーン - **Monochrome**: どんな画面にも馴染むミニマルな白黒 5. **設定GUIツール（config.html）同梱** - ブラウザで開くだけで使える設定ツールを付属。リアルタイムプレビューとサウンド試聴を確認しながら、1クリックでOBS用URLを生成できます。 6. **OBS「対話」機能で手元操作が可能** - OBSのソース一覧でタイマーを右クリックし「対話」を開くと、配信中いつでも手元で一時停止・再開・リセット・次フェーズへのスキップが可能です（ショートカットキーにも対応）。 --- ### ■ 収録内容 - `timer.html` : OBSブラウザソース用ウィジェット本体（透過背景・Web Audio自動チャイム搭載） - `config.html` : タイマー設定ジェネレーター（GUI設定・リアルタイム試聴・URL生成） - `sounds/` : 外部連携用スタンドアロン通知音WAV（2点） - `chime_work_finished.wav` : 作業完了・カウントダウン終了チャイム - `chime_break_finished.wav` : 休憩終了チャイム - `README_JA.md` : 詳しい使い方マニュアル - `LICENSE.txt` : 利用規約 --- ### ■ OBS Studio への導入方法（かんたん3ステップ） 1. 同梱の `config.html` をブラウザで開き、お好みの分数やテーマを選んで「URLをコピー」をクリック。 2. OBS Studio の「ソース」パネルで **「＋」 → 「ブラウザ」** を追加。 3. コピーしたURLを貼り付け、**幅 600 / 高さ 220** に設定して「OK」を押すだけ！ ※オフライン環境やローカル運用をご希望の場合は、OBSの「ローカルファイル」指定から `timer.html` を直接読み込むことも可能です。 --- ### ■ 動作環境 - OBS Studio（最新版推奨、Windows / Mac 対応） - 各種モダンブラウザ（Chrome / Edge / Firefox / Safari） - インストールや追加ソフトの導入は不要です。 --- ### ■ 利用規約（商用利用・収益化配信OK） - 個人・法人問わず、YouTube・Twitch等の収益化配信・動画制作・作業配信・商用イベント等で自由にご利用いただけます。 - クレジット表記は任意です。配信画面や概要欄への記載義務はありません。 - ソースコードおよび付属ファイルの再配布・転売は禁止いたします。 - 詳細は同梱の `LICENSE.txt` をご確認ください。 --- ### ■ 制作方法について タイマーのUI描画、カウントダウン制御ロジック、およびWeb Audioによる音声合成は、すべてプログラム（HTML/CSS/JavaScript）により構築されています。本ツールのソースコード作成および調整にはAIコーディングエージェントを活用しています。