OBSでは「ブラウザソース」を利用することで、自作HTMLをオーバーレイとして表示できます。しかし、実際にHTMLを読み込ませると、「表示はされるのに動かない」「CSSアニメーションが止まる」「JavaScriptが反応しない」と困るケースがあります。
特に乙女ゲーム風ゲージや好感度メーター、動くUI演出を作りたい場合、通常の画像表示ではなくHTML＋CSS＋JavaScript連携が必要になります。
この記事では、OBSで自作HTMLを正常に動かすための基本知識や、ブラウザソースでアニメーションが止まる原因について整理して解説します。
OBSのブラウザソースではHTML表示自体は可能
まず前提として、OBSのブラウザソースはHTML表示に対応しています。
そのため、以下のような演出は基本的に実装可能です。
- ゲージUI
- アニメーション
- CSSエフェクト
- JavaScript演出
- リアルタイム更新
実際、配信オーバーレイやVTuber配信画面でもHTMLベース演出はかなり使われています。
つまり、「OBSでHTMLが動かない」のではなく、設定や読み込み方法が原因になっているケースが多いです。
「表示されるのに動かない」時によくある原因
OBSで最も多いのが、「静止表示だけされる」ケースです。
主な原因としては以下があります。
| 原因 | 内容 |
|---|---|
| JavaScript無効 | 処理が動かない |
| ローカル制限 | file://制限 |
| 読み込みタイミング | DOMContentLoaded問題 |
| OBSキャッシュ | 更新反映されない |
| 外部ライブラリ失敗 | CDN未読込 |
特に初心者が多く遭遇するのが、「HTMLだけ読み込まれてJavaScriptが動いていない」状態です。
CSSだけなら表示されても、動的処理が停止しているケースがあります。
OBSは通常ブラウザと完全同じではない
OBSのブラウザソースはChromium系ですが、通常のChromeブラウザと完全一致ではありません。
そのため、普通のブラウザで動いていても、OBS内では動作しないことがあります。
例えば以下のような違いがあります。
- 一部API制限
- ローカルファイル制限
- セキュリティ制限
- GPU描画差
- 音声再生制限
特にローカルHTMLを直接読み込む場合、JavaScript制限に引っかかることがあります。
ローカルHTML読み込みで起きやすい問題
OBSでは「ローカルファイル」を指定してHTMLを読み込めます。
しかし、ローカル読み込みでは以下の問題が起きやすいです。
- fetchが動かない
- JSON読込失敗
- 外部JS制限
- 画像パスエラー
例えば、JavaScript内で別ファイルを読み込もうとしている場合、OBS側でブロックされることがあります。
特にfile://パス関連はかなりハマりやすいです。
一番安定しやすいのは「ローカルサーバー経由」
HTML演出を安定動作させたい場合、ローカルサーバーを利用する方法がかなり一般的です。
例えば以下の方法があります。
| 方法 | 特徴 |
|---|---|
| Live Server | VSCode定番 |
| XAMPP | ローカルWeb環境 |
| Node.js server | 開発向け |
| Python SimpleHTTPServer | 軽量 |
例えば「http://localhost:5500」のように読み込むと、通常ブラウザに近い動作になりやすいです。
OBSへ直接HTMLファイルを投げるより、localhost経由の方が安定するケースがかなり多いです。
CSSアニメーションだけなら動く場合もある
JavaScript無しのCSSアニメーションなら、比較的動きやすいケースがあります。
例えば以下です。
- transform
- transition
- keyframes
- opacity変化
乙女ゲーム風ゲージ程度なら、JavaScript不要で実装できる場合もあります。
そのため、「まずCSSのみで動作確認」すると原因切り分けしやすくなります。
OBS側設定で改善するケース
OBSのブラウザソース設定も重要です。
特に以下は確認したいポイントです。
| 設定 | 確認内容 |
|---|---|
| ブラウザソース更新 | キャッシュ再読込 |
| FPS設定 | アニメ滑らかさ |
| ハードウェアアクセラレーション | 描画安定性 |
| ページ再読込 | JS再実行 |
特にOBSはキャッシュが強めに残ることがあり、「コード修正しても変わらない」ことがあります。
その場合はブラウザソースを再読み込みすると改善する場合があります。
乙女ゲーム風ゲージならHTML＋CSS＋JSで実装可能
質問にあるような乙女ゲーム風ゲージ演出は、実際かなりHTMLとの相性が良いです。
例えば以下の演出が可能です。
- 好感度ゲージ
- ハート演出
- 会話UI
- アニメーションバー
- キャラクター演出
最近はVTuber配信でもHTMLオーバーレイ文化が広がっており、OBS＋HTML演出はかなり一般的になっています。
まとめ
OBSではブラウザソースを使って自作HTMLを表示できますが、「表示されるのに動かない」場合は、JavaScript制限やローカル読み込み問題が原因になっているケースが多くあります。
特にfile://直読み込みでは制限が発生しやすく、localhostサーバー経由の方が安定することがあります。
また、CSSアニメーションだけなら比較的動きやすいため、まずはCSSのみで動作確認すると原因切り分けしやすくなります。
乙女ゲーム風ゲージや配信UIはHTMLとの相性が良く、OBSでも十分実装可能なので、ローカルサーバー環境やブラウザソース設定を見直すと改善するケースがあります。
コメント