suPlayPurchasing GameMinigamesPollSSA
suPlayPoll

suPlay PollをOBSオーバーレイとして使う

PowerPointを使用していない場合や、LibreOffice Impress、OnlyOffice、Keynote、Google Slides、Canva、Prezi、あるいは全画面表示のPDFリーダーなど、あらゆるスライドショーツールで共通して使える単一のワークフローが必要な場合、OBS Studioを使えば、デッキの上に透明なsuPlay Pollオーバーレイを投影できます。Windows、macOS、Linuxで同じセットアップが使えます。

必要なもの

  • OBS Studio 30以降——無料ダウンロード。
  • 少なくとも1つの投票を含むsuPlay Pollイベントと、そのディスプレイリンク。イベントのスライド素材ページを開き、🖥️ ディスプレイ画面の下にあるリンクをコピーしてください——これはhttps://poll.suplay.nl/event/CODE/display?dt=…のような形式です。?dt=トークンによってフィードが認証されるため、OBSはログインなしで読み込むことができます（読み取り専用で、このイベントに限定されています）。
  • 第二のディスプレイ、または単一ディスプレイでのウィンドウ化プロジェクターモード（下記で説明）。

最速スタート——完成済みのシーンをインポート

  1. 事前構築済みのシーンコレクションをダウンロードしてください：suplaypoll-obs-scene.json。
  2. OBSで：Scene Collection > Importを選び、ファイルを選択してImportをクリックし、同じメニューから新しいsuPlay Pollコレクションに切り替えてください。
  3. suPlay Poll Live Feedソースをダブルクリックし、URL全体を、イベントのスライド素材ページからコピーした🖥️ ディスプレイ画面のリンク（トークン付きの完全な…/display?dt=…URL——トークンは必須です）に置き換えてください。
  4. OKをクリックします。これでシーンの準備が整いました。
  5. プレビュー上で右クリック → 外部ディスプレイでFullscreen Projector (Preview)を選択します。その背後で、お好みのプレゼンテーションツールでスライドショーを開始してください。

手動設定（お好みの場合）

所要時間は約2分です。すべてのOSで同じ手順です。

  1. OBSを開きます。Scenesで+をクリックし、シーンにsuPlay Poll Overlayという名前を付けます。
  2. Sourcesで+ → Browserをクリックします。suPlay Poll Live Feedという名前を付けます。
  3. イベントのスライド素材ページにある🖥️ ディスプレイ画面のリンクをURL欄に貼り付けます——トークン付きの完全なURLです。例：
    https://poll.suplay.nl/event/YOUR_CODE/display?dt=…
  4. Widthを1920、Heightを1080に設定してください（お使いの出力解像度に合わせて調整してください）。
  5. ページの背景を透明にし、オーバーレイをスライドショーの上にきれいに重ねて表示するため、以下をCustom CSSに貼り付けてください：
    body, html { background: transparent !important; margin: 0; padding: 0; }
.no-overlay { display: none !important; }
  6. Shutdown source when not visibleはチェックしたままにしておきます（CPUの節約になります）。OKをクリックします。

スライドショーの上に重ねる方法

OBSは標準では自身のプレビュー画面にのみレンダリングされます。実際のデッキの上に重ねて表示するには、次の3つの方法があります——いずれかをお選びください：

A. デュアルディスプレイ・プロジェクター（推奨）

  1. いつもどおり、外部ディスプレイでスライドショーを開始します。
  2. OBSのプレビューを右クリック → Windowed Projector (Preview)を選び、外部ディスプレイにドラッグしてF11キーで全画面表示にします。お好みで位置やサイズを調整してください——透明な背景により、スライドが透けて見えます。
  3. OBSのプロジェクターウィンドウは通常のウィンドウであり、システムレベルのオーバーレイではないため、常にスライドショーの上に浮かんで表示されます。macOSでは、必要に応じてOBSメニューからWindow > Float on Topを有効にしてください。

B. 仮想カメラでZoom / Teams / Webexに接続

  1. OBSでStart Virtual Camera（右下のドック）をクリックします。
  2. Zoom / Teams / Webexで、カメラとしてOBS Virtual Cameraを選択し、いつもどおりスライドショーのウィンドウを共有してください。これで、リモートの観客にもスライドに合成されたsuPlay Pollオーバーレイが表示されます。
  3. これは、リモート会議で確実に機能する唯一の方法です——OSレベルのオーバーレイは画面共有を通しては伝わりません。

C. 録画または配信

OBSの通常の録画／配信ボタンを使用します。オーバーレイは録画やRTMP配信にそのまま焼き込まれます。非同期のワークショップやYouTube／Twitchの配信に便利です。

ヒント

  • 音声：suPlay Pollは音声を出力しません。ブラウザソースの音声モニタリングはオフのままにしてください。
  • 更新時の再読み込み：イベント中に投票の表示状態や結果を変更しても、OBSはSocket.io経由で自動的にそれを反映します。再読み込みは不要です。
  • クロマキー：不要です——上記のCustom CSSによって、背景はすでに透明になっています。
  • 解像度：ブラウザソースの解像度を出力キャンバス（Settings > Video > Base Resolution）に合わせることで、拡大縮小によるぼやけを防げます。
  • CPU：ブラウザソース1つあたりのコストは、Chromeタブ1つ分とほぼ同程度です。2018年製のIntel i5では、オーバーヘッドは5%未満です。

トラブルシューティング

  • オーバーレイが空白／黒くなる：ディスプレイURLは、イベントがLIVEまたはCLOSEDの状態のときのみ描画されます。イベントがまだDRAFTの場合は、少なくとも1つの投票を開始してから再度お試しください。まずは通常のブラウザでURLをテストすることをおすすめします。
  • オーバーレイにログインプロンプトや「ライブ更新を受信していません」というバナーが表示される：トークンなしの/event/CODE/displayURLは所有者のセッションを必要としますが、OBSはこれを保持できません。代わりに、イベントのスライド素材 → 🖥️ ディスプレイ画面からコピーした、トークン付きの…/display?dt=…リンクを使用してください——このトークンによってフィードが認証されます。（リンクの有効期限が切れた場合は、スライド素材ページをもう一度開いてください。開くたびに新しいリンクが表示されます。）
  • Windowsで、PowerPointの全画面スライドショーの上にオーバーレイが表示されない：PowerPointのスライドショーは最前面ウィンドウを使用します。第二のモニターでOBSのWindowed Projectorを使用するか、Slide Show > Set Up > Browsed by an individual (window)モードでプレゼンしてください——後者の方法では、通常のウィンドウをその上に重ねて表示できます。
  • macOSの画面収録権限：プロジェクターウィンドウが最前面に表示されない場合は、システム設定 > プライバシーとセキュリティでOBSに画面収録の権限を付与してください。