シャッターパーティーの導入

English

Twitch の拡張機能の設定画面に並んだ 8 ステップの、詳しい説明です。番号は設定画面と同じです。 作業は最初の一度だけで、あとは OBS を開けばそのまま動きます。

Twitch の拡張機能の設定から来た方へ。連携コードを貼るのはステップ 7 です。先にステップ 1 から、OBS のある PC で進めてください。コードはあとで何度でもコピーできます。

始める前に

OBS 28 以降 obs-websocket はバージョン 28 から OBS に入っています。それより前の バージョンには対応していません。Streamlabs Desktop にも対応していません （写真を撮る操作を外から呼べないため）。
拡張機能を入れてあること Twitch の SHUTTERPARTY のページからインストールしてください （有効にするのはステップ 6 です）。Twitch の画面では、拡張機能の名前は 翻訳されず SHUTTERPARTY と表示されます。
アフィリエイト / パートナー 資格は不要です。 Bits には必要ですが、無料で押すだけでも ゴールバーはたまるので、どのチャンネルでも SHUTTER PARTY は起きます。

導入手順

同じ手順を動画で見られます（3 分）。画像を押すまで、YouTube には接続しません。 YouTube で開く

  1. OBS 用のセットをダウンロードして展開し、フォルダを置く

    どこで: このページ

    シャッターパーティーをダウンロード → zip です。インストーラも常駐アプリもありません。

    OBS のある PC でダウンロードしてください。zip を展開（解凍）してできたフォルダは、好きな場所に置いてかまいません。ただし設定したあとにフォルダを動かしたり名前を変えたりすると、動かなくなります（OBS がオーバーレイのファイルの場所を覚えているためです）。あとで片付けたくなるダウンロードフォルダより、ずっと置いておける場所がおすすめです。動かしてしまったときは、元の場所に戻すか、設定をやり直してください。やり直すときは、新しい場所の SHUTTERPARTY-setup.html を開いて「OBS に一式を作る」を押し、同じ名前のソースがあると聞かれたら「上書きする」を選び、最後に「OBS に反映」を押します。

    フォルダの中で開くのは SHUTTERPARTY-setup.html だけで、overlay フォルダは開く必要がありません。2つは同じフォルダに入れたままにしてください（設定ページはすぐ隣のオーバーレイを探します）。

    なぜダウンロードなのか。 ウェブ上のページは PC の OBS に つなげないので、ファイルを PC に置きます。だからこちらからは、シーンも 画面もパスワードも見えません。

  2. OBS で WebSocket サーバーを有効にし、パスワードをコピーする

    どこで: OBS

    OBS のツール → WebSocket サーバー設定を開き、 WebSocket サーバーを有効にするにチェックを入れて、 接続情報を表示からパスワードをコピーします。

  3. SHUTTERPARTY-setup.html をブラウザで開き、パスワードを貼って接続する

    どこで: 設定ページ（SHUTTERPARTY-setup.html）の「OBS につなぐ」

    フォルダの中の SHUTTERPARTY-setup.html をダブルクリックすると、いつものブラウザ（Chrome や Edge など）で開きます。このファイルを OBS のブラウザソースに追加する必要はありません。OBS に入れるものは、ステップ 4 でこのページが自動で作ります。

    開くと、ページが自動で OBS につなぎにいきます。OBS がパスワードを求めていると、「接続の詳細（ホスト・ポート・パスワード）」の欄が開き、「パスワード」の欄にカーソルが入ります。そこにステップ 2 でコピーしたパスワードを貼り、「接続」を押します。左の列の「OBS」が「接続済み」になれば、この手順は終わりです（OBS 側でパスワードを使わない設定にしていれば、貼らなくてもつながります）。

  4. 「OBS に一式を作る」を押し、撮影用シーンに撮りたいものを入れて、テスト撮影で確かめる

    どこで: 設定ページの「撮影用シーンとオーバーレイを作る」と OBS

    ボタン1つで、撮影用シーン・オーバーレイ・ゴールバーを、重ね順まで揃えて 作ります。縦型シーン用のソースも、オフの状態で一緒に作られます。 横型の配信なら、ブラウザソースを手で足す作業はありません。

    撮影用シーンは空の状態で作られます。ここに入れたものだけが写ります。 写ってもよいカメラの映像やアバターを、OBS で入れてください。

    入れたら、同じ段の「テスト撮影」で、撮りたいものが写るかを確かめます。 テスト撮影は設定ページ自身が撮るので、「OBS に反映」をしなくても成功します。 視聴者のボタンまでつながったかは、ステップ 8 で確かめます。

  5. ボタンが効くシーンを決める

    どこで: 設定ページの「ボタンが効くシーンを決める」

    同じ OBS のタブの、一式を作る段のすぐ下です。ボタンが効くシーンを 選んでください。連携コードはまだ要りません。

    OBS は画面に出していないシーンも描画します。決めていないと、 「すぐ戻ります」を表示しているあいだに撮られてしまいます。

    決めるまでは、どのシーンでも撮影できません。 「すべてのシーンで有効」を選ぶのも決定のひとつです。

  6. 拡張機能を有効にし、連携コードをコピーする

    どこで: Twitch（拡張機能のページと、拡張機能の設定画面）

    Twitch のクリエイターダッシュボード → 拡張機能 → SHUTTERPARTY で、コンポーネント（動画の上）か パネル（動画の下）として有効にしてください。 インストールしただけでは、視聴者にボタンが表示されません。

    続けて SHUTTERPARTY の設定を開き、コピーを押して 連携コードを取ります。これはパスワードと同じものなので、 配信に映さないでください。コードはあとで何度でもコピーできます。

  7. 連携コードを貼る

    どこで: 設定ページの「Twitch 拡張機能につなぐ」

    設定ページに戻り、左の列の「Twitch 拡張」を開いて、 連携コードの欄に貼ってください。 このコードで、チャンネルと視聴者が押すボタンがつながります。

  8. 「OBS に反映」を押し、「30分だけ配信なしで撮れるようにする」で試す

    どこで: 設定ページ

    左の列のいちばん下にある「OBS に反映」を押します。 連携コードと設定は、このボタンを押したときにはじめてオーバーレイへ渡されます。 すぐ上に、まだ反映していない変更があるかどうかが表示されます。

    そのあと、「ボタンが効くシーンを決める」の中の 「30分だけ配信なしで撮れるようにする」を押すと、配信を始めなくても 演出を確かめられます。30分で自動的に元に戻るので、切り忘れる心配はありません。

配信で動くまでの確認

テスト撮影が通っても、視聴者のボタンまではつながっていないことがあります。最初の配信の前に、次の 3 つを確かめてください。

  1. 拡張機能を有効にした（ステップ 6）。インストールしただけでは視聴者に表示されません。クリエイターダッシュボード → 拡張機能 → SHUTTERPARTY で、コンポーネントかパネルを選んでください。
  2. 設定ページの上に「設定完了」と出ている。出ていないときは、ページが次にやることを示しています。
  3. 最後に「OBS に反映」を押した（ステップ 8）。テスト撮影は写っているソースを確かめるためのものなので、OBS に反映しなくても成功します。それだけでは確かめになりません。

次の配信からは、何もしなくて大丈夫です。 OBS を開けば ブラウザソースが自動で接続します。

縦型でも配信するとき

Twitch のデュアルフォーマット（OBS 32 以降と Aitum Vertical プラグイン）でも、同じオーバーレイが 1080×1920 に合わせ、Twitch の ボタンとチャットを避けて描きます。縦型で配信しないなら、この節は読み飛ばしてください。

  1. 「OBS に一式を作る」（または「作り直す」）を押す

    3つ目のブラウザソース <オーバーレイの名前> vertical が 1080×1920 で作られます。ふだんのシーンにはオフの状態で置かれるので、 横型の画面には何も描きません。

  2. 縦型シーンに追加する

    縦型キャンバスの「+」から既存のソースを選び、 <オーバーレイの名前> vertical を追加します。設定ページからは プラグインのキャンバスに触れないので、ここだけ手で足します。

  3. キャンバス上で大きさを変えない

    大きさはそのままにしてください。キャンバス上で引き伸ばすと、 縦型に切り替わらず、横型の絵が潰れて描かれます。寸法は既に 1080×1920 です。

  4. Twitch で確かめる

    配信マネージャーの配信プレビューで、歯車の隣にある向きアイコンから 縦型が見られます。写真とコンタクトシートが、画面の上下に寄りすぎていなければ大丈夫です。

ゴールバーは別のソースです。縦型シーンにも出したいときは、 同じやり方で <オーバーレイの名前> bar を追加し、画面の真ん中 70% ほどの中に置いてください（上は Twitch のボタン、下はチャットが重なります）。

縦型用のソースを消してしまったら、設定ページで 「作り直す」を押すと、また作られます。

アップデート

もう一度ダウンロードして、同じ場所に上書きしてください。 フォルダごと削除して置き換えないでください（overlay/ に ご自分で入れたものは残ります）。そのあと SHUTTERPARTY-setup.html を開き、 「OBS に反映」を1回押します。押すまで OBS は古いファイルのままで、 設定ページがそう知らせます。設定は残ります。

縦型用のソースがまだ無いときは、「作り直す」を1回 押してください。それを足すだけで、ほかは変えません。

うまくいかないとき

設定ページにログがあります。ボタンは左の列のいちばん下、 「OBS に反映」の隣です。開くと、たいていは理由がそのまま 書かれています。よくある原因は次のとおりです。

OBS につながらない WebSocket サーバーが無効、パスワードが違う、または OBS が起動していません。 ステップ 2・3 を確認してください。
ボタンに「いまは撮れません」と出る 配信していない、シーンを決めていない、または画面に出ているシーンが許可した ものではありません。ステップ 5・8 を確認してください。配信せずに試すときは、設定 ページの「30分だけ配信なしで撮れるようにする」を使ってください。オーバーレイ のログに「配信中かどうかを確かめられません」と出ているときは、配信を始めるか OBS に繋ぎ直してください（分からないあいだは撮りません）。
視聴者が押しても OBS に届かない 連携コードが OBS に反映されていません。設定ページで 「OBS に反映」を押してください（ステップ 8）。テスト撮影は設定ページ自身が 撮るので、反映していなくても成功します。
配信画面に何も出ない オーバーレイのブラウザソースが、ゲームキャプチャより下にあります。OBS で 一番上に移動してください。
写真が止まった映像になる 撮影用シーンがどの配信シーンにも入っていないので、OBS が描画していません。 配信シーンの中に入れてください。

OBS のログファイルを人に見せるときは注意してください。 OBS はオーバーレイのアドレスをログに書くことがあります。そこに載る OBS のパスワード・ 連携コード・Discord の webhook は暗号化されていますが、最初に設定を反映した 1 回（と、オーバーレイの鍵が失われたあとの送り直し）だけは、OBS のパスワードが 暗号化されずに載ります。OBS の「ログファイルをアップロード」は誰でも読める URL を作るので 使わないでください。そのログを見せてしまったときは、OBS のパスワードを変えてください。

データの扱い

ダウンロードしたファイルが、そのままソースです。 普通の HTML なので、パスワードを入力する前に、テキストエディタで中身を確認できます。 プライバシーポリシーの全文を読む。