必ずお読みください

利用規約・免責事項

注意

ファイルの移動について

解凍したフォルダ内のファイル構成を変えると動かなくなります。 移動する際は必ず「フォルダごと」移動してください。

導入手順

簡単な方法

フォルダ内にあるbubble.html を、そのままOBSの画面上にドラッグ＆ドロップするだけ！ 一瞬でシャボン玉が画面に表示されます。

OBSの操作で導入する方法

1. OBSのソース欄の「+」をクリックし、「ブラウザ」を選択します。
2. 名前を「シャボン玉」などにして「OK」をクリックします。
3. **「ローカルファイル」**にチェックを入れます。
4. 「参照」ボタンをクリックし、解凍したファイル内のbubble.html を選択します。
5. 幅と高さを配信画面のサイズに設定します。
   • 例： フルHDの画面なら幅 1920/高さ 1080
6. 「OK」をクリックして完了です！

カスタマイズ

配置を変更

シャボン玉の配置はランダムです。 OBS上の「シャボン玉」ソースを選択し、プレビュー画面の下（またはプロパティ内）にある**「再読み込み（現在のページを再読み込み）」**ボタンを押すたびに、配置が新しく変わります。お好みの配置になるまで試してください！

シャボン玉の数を増減させる

デフォルトでは50個のシャボン玉が飛んでいますが、お好みの数に変更できます。

1. フォルダ内にあるbubble.js というファイルを、メモ帳などのテキストエディタで開きます。

2. 8行目あたりにある以下のテキストを探します。

   let obj_num = 50;

3. この「50」という数字を、好きな数に書き換えて保存します。

   • 例： 100個にしたい場合： let obj_num = 100;

4. OBS上でソースを再読み込みすると反映されます。

注意

数を増やしすぎるとパソコンやOBSの動作が重くなる可能性があります。ご自身のPCのスペックに合わせて調整してください！

その他・困ったとき

背景が透明にならず、真っ暗（または真っ白）になる

OBSに追加したソースをダブルクリックしてプロパティを開き、「カスタムCSS」欄の一番下に以下のテキストを追加して「OK」を押してください。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }