概要
AIオーバーレイビルダーは、プロンプトからHTMLオーバーレイを作成するための機能です。ビルダー自体がOBS用ページになるわけではありません。使うページ： aiprompt.html で作成とプレビューを行い、その後に使うページ： aioverlay.html を出力ページとして使います。
1. プロンプトページで作成する
- 開く項目：
aiprompt.html?session=YOUR_SESSION. - オーバーレイの動作と見た目を説明してください。
- レイアウト、メッセージの動作、色、アニメーションのタイミング、重要なイベントの種類に絞って指示してください。
- プレビュー操作を使い、チャット、フォロー、サブスク、ギフト、レイド、寄付、独自JSONイベントをシミュレーションします。
- わかりやすいページ名でオーバーレイを保存します。
2. 出力ページをOBSに追加する
保存後、出力ページをOBSのブラウザソースとして追加します。セッションと保存したページ名は同じものを使ってください。
https://socialstream.ninja/aioverlay.html?session=YOUR_SESSION&overlay=chat-overlay
オーバーレイが透明な場合やイベント時だけ表示される場合は、まずビルダーのシミュレーションボタンで描画できることを確認してください。
3. すぐに設定したいときはテンプレートを使う
すぐに安定したものが必要なら、テンプレートから始めてカスタマイズしてください。より独自のものを作りたいときはAIビルダーを使います。
よくある問題の対処
- プレビューが空の場合： シミュレーションボタンをクリックし、コンソールパネルを確認してください。
- OBSで何も表示されない場合： 保存したページ名とセッションがビルダーと一致するか確認してください。
- イベントの動作が違う場合： 通常のチャットだけでなく、実際に使うイベントの種類でテストしてください。
- 生成されたコードが動かない場合： Review & polishを使うか、プロンプトを簡潔にしてください。
- ビルダーでは動くのにOBSでは動かない場合： 同じリンクを開きます：
aioverlay.htmlのURLを、まず通常のブラウザで開いてください。