Streamlabs + OBS
FrameWorkのアラートは、どれも同じ方法で導入できます。OBSのBrowser Sourceをひとつ、StreamlabsのText Over Imageバリエーションをひとつ、そしてダウンロードに含まれるCustom Fields。動画を見るか、下の手順に沿って進めてください。
動画ガイドは英語です · Streamlabs + OBS
パート1
OBSでBrowser Sourceを設定する
アラートプラットフォーム（Streamlabs）を開き、Alertsのセクションに移動します。
設定するアラートの種類（Followers、Subscribers、Donationsなど）を選び、フルスクリーンアラートに使わない種類のチェックはすべて外します。
プラットフォームが表示するWidget URLをコピーします。
OBSを開く → 新しいソースを追加 → Browser Sourceを選択 → わかりやすい名前を付けます（例：Alerts - Fullscreen）。
コピーしたURLをURL欄に貼り付けます。
WidthとHeightをキャンバスの解像度と同じに設定します：
- OBSのSettings → Video → Base (Canvas) Resolutionで確認できます
「Shutdown source when not visible」をオンにします。
OKをクリックし、このBrowser Sourceがソース一覧のいちばん上、ほかのすべてのソースより上にあることを確認します。
パート2
アラートバリエーションを設定する
アラートプラットフォームで、選んだアラートの種類に新しいバリエーションを追加し、わかりやすい名前を付けます。
Layoutを「Text Over Image」に設定します（アラートを正しく表示するために必要です）。
Imageのセクションにアラートファイルをドラッグし、Selectをクリックします。
Alert Durationを設定します：
- アラートを再生し、全体の長さを確認します。
- その長さから1秒引いた値をAlert Durationの欄に入力します。
- 例：アラートの長さが35秒 → 34秒と入力。
Sound → 既定のまま（触る必要はありません）。
Alert Animation → Fade In / Fade Outに設定（おすすめ）。
Text AnimationとFont → お好みでカスタマイズ。
パート3
カスタムHTML / CSS / JSを追加する
Custom HTML/CSSのスイッチをオンにします。
アラートのフォルダーに戻り、「Custom Fields — For Full Screen Alerts」という名前のファイルを開きます。
それぞれのファイルを、プラットフォームの対応するセクションにコピーして貼り付けます：
- HTML → HTMLタブに貼り付け
- CSS → CSSタブに貼り付け
- JS → JSタブに貼り付け
「Custom Fields」→「Edit Custom Fields」をクリック → Custom Fieldsファイルの内容を貼り付けます。
「Update Custom Fields」をクリックし、Save（右下）をクリックします。
パート4
Custom Fieldsで微調整する
保存したら、Custom Fieldsを開くと次のオプションが使えます：
| 設定 | 説明 |
|---|---|
| Text Delay | アラートを再生し、画面が暗転したところで一時停止して、その時点を確認します。どのアラートも最後に約4秒の暗転があります。ここにその正確な時点を入力します。 |
| Text Horizontal Position | テキストの左右の位置を調整します。50で中央になります。 |
| Text Vertical Position | テキストの上下の位置を調整します。50で中央になります。 |
| Alert Volume | 既定値はあらかじめ最適化されています。必要に応じて下げてください。 |
すべて設定したら、Test Alertをクリックして、すべて正しく動くことを確認します。
パート5
同じカテゴリーの小さいアラートを直す
同じカテゴリーにフルスクリーンアラートと小さいアラートの両方がある場合（例：フルスクリーンのFollowerアラート＋小さいFollowerアラート）、両者が同じウィジェットリンクを共有するため、小さいアラートの拡大縮小がおかしくなります。次の手順で直してください。
小さいアラートのバリエーションを開きます。
Custom HTML/CSSをオンにします。
アラートのフォルダーに戻り、「Custom Fields — For Non-Full-Screen Alerts」を開きます。
それぞれのファイルを正しいタブにコピーして貼り付けます：
- HTML → HTMLタブ
- CSS → CSSタブ
- JS → JSタブ
「Edit Custom Fields」をクリック → Custom Fieldsファイルの内容を貼り付け → 「Update Custom Fields」をクリック → Saveをクリックします。
このバリエーションのCustom Fieldsを開き、次のように設定します：
- Horizontal Position：50に設定
- Vertical Position：25に設定
- Image Size：アラートの表示サイズを調整します
- Alert Layout：プラットフォーム自体のレイアウト設定（Custom Fieldsのものではありません）でImage Aboveに設定
これでアラートの導入と設定はすべて完了です。問題が発生した場合は、サイトからチケットを作成してください。できるだけ早く返信します。