【KAMI】OBSブラウザ連携ガイド

はじめに

このページでは、ルーレットメーカー【KAMI】の「配信ツール連携用URL」を使用して、OBS Studioなどの配信ツールにルーレット画面を直接取り込む方法と、取り込んだ画面の見た目をカスタムCSSで調整する方法について説明します。

1. 配信ツール連携用URLの取得

1. オンラインルーレットの「ルーレット設定」ページにアクセスします。（ルーレットを作成した本人のみアクセス可能です）
2. ページ内に「配信ツール連携用URL」というセクションがあります。ここに表示されているURLをコピーしてください。

   【重要】このURLは、ルーレットの公開設定（公開、合言葉、非公開）に関わらず、誰でもルーレットを表示・操作できてしまいます。取り扱いには十分ご注意いただき、関係者以外には公開しないようにしてください。

2. OBS Studioへの取り込み方法

1. OBS Studioを起動し、ルーレットを表示したいシーンを選択します。
2. 「ソース」ウィンドウの「+」ボタンをクリックし、「ブラウザ」を選択します。
3. 「ソースを作成/選択」ダイアログで、新しいソース名（例: KAMIルーレット）を入力し、「OK」をクリックします。
4. プロパティ画面が表示されるので、以下の設定を行います。
   • URL: 先ほどコピーした「配信ツール連携用URL」を貼り付けます。
   • 幅 (width) / 高さ (height): ルーレットの表示に適したサイズを指定します。一般的には1280x720や1920x1080など、配信画面の解像度に合わせると良いでしょう。ルーレット自体はレスポンシブに対応しています。
   • カスタムCSS: （後述）ここでCSSを記述することで、ルーレットの見た目を変更できます。
5. 「OK」をクリックしてプロパティ画面を閉じます。シーンにルーレットが表示されます。
6. 表示されたルーレットソースのウィンドウ上で右クリックし、「対話」を選択すると、ルーレットのスタート・ストップ操作や項目選択が可能です。

※他の配信ツールでも、ブラウザソース機能があれば同様の手順で取り込み可能です。

3. カスタムCSSでのデザイン調整

OBSのブラウザソース設定の「カスタムCSS」欄にCSSを記述することで、ルーレットの各要素の色やフォントなどを変更できます。以下は主要な要素のクラス名と簡単な説明です。これらのクラス名を利用して、独自のスタイルを適用してください。

カスタムCSSの例:

/* 例: 結果テキストを青色にする */
.roulette-stream-output__result-text {
  color: blue !important; /* !important で既存スタイルを上書き */
}

/* 例: スタートボタンの背景をオレンジ色にする */
.roulette-stream-output__button--start {
  background-color: orange !important;
}

/* 例: セルの文字を大きく、白抜き文字にする */
.roulette-stream-output__cell-text {
  font-size: 24px !important;
  color: white !important;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; /* 白抜き文字風 */
}

/* 例: 項目有効化リストの背景を半透明の黒にする */
.roulette-stream-output__item-toggle {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: white !important; /* 文字色も変更 */
}
.roulette-stream-output__item-toggle-label {
  background-color: rgba(50, 50, 50, 0.7) !important;
  border-color: #888 !important;
}

注意: スタイルの優先度の関係で、!important が必要になる場合があります。また、ルーレットのバージョンアップによりクラス名や構造が変更される可能性もゼロではありませんので、ご了承ください。