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

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

始める前に

導入手順

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 で、コンポーネント（動画の上）か パネル（動画の下）として有効にしてください。 インストールしただけでは、視聴者にボタンが表示されません。

   連携コードは、次のステップで Twitch にログインしないときだけ使います。 その場合は、続けて SHUTTERPARTY の設定を開き、コピーを押して 連携コードを取ってください。これはパスワードと同じものなので、 配信に映さないでください。コードはあとで何度でもコピーできます。

7. Twitch でログインして連携する

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

   設定ページに戻り、左の列の「Twitch 拡張」を開いて、 「Twitch でログインして連携」を押してください。 Twitch のページが開きます。そこに出ているコードが設定ページのコードと同じことを確かめて、 「許可」を押します。

   許可を押したら、設定ページに戻ってください。 設定ページに「○○ として連携します。」と出ます。自分のチャンネルの名前なら 「連携する」を、違う名前なら「やめる」を押してください。 これで、チャンネルと視聴者が押すボタンがつながります。 こちらが Twitch から読むのはチャンネルの ID だけで、Twitch のトークンは保存しません。 すでに連携しているチャンネルでログインし直したときは、名前は出ずに、そのまま連携まで進みます。

   自分で押して出したコードだけを許可してください。 チャットやメッセージで送られてきたコードを Twitch で許可すると、送ってきた相手が あなたのチャンネルとして連携できてしまいます。

   ログインを使わないとき・このボタンが無いとき（前の版のセット）は、 すぐ下の「うまくいかないとき・ログインを使わないとき（連携コード）」を開いて、 ステップ 6 でコピーした連携コードを連携コードの欄に貼ってください。

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

   どこで: 設定ページ

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

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

配信で動くまでの確認

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

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

縦型でも配信するとき

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

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

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

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

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

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

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

4. Twitch で確かめる

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

Stream Deck で操作するとき

Elgato の Stream Deck に、撮影のオン／オフと SHUTTER PARTY の 2 つのキーを置けます。SHUTTER PARTY のキーには ゴールバーの進み具合が出て、合図を待っているあいだに押すとパーティが始まります。 いまは Windows だけです（Stream Deck 7.1 以降）。使わないなら、 この節は読み飛ばしてください。

1. プラグインをダウンロードして開く

   配布ページから app.shutterparty.streamdeck.streamDeckPlugin を落とし、ダブルクリックします。 Stream Deck のアプリに入ります。Elgato の Marketplace には、まだ出していません。

2. キーを置き、Twitch でログインする

   操作の一覧の SHUTTERPARTY から 2 つのキーを置き、どちらかのキーの 設定で「Twitch でログインして連携」を押します。ブラウザに Twitch の ページが開くので、出ているコードを入れて許可し、Stream Deck に戻って、出た名前が 自分のアカウントなら先へ進みます。設定ページの連携とは別の連携です。

アップデート

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

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

うまくいかないとき

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

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

連携を切るとき

• Twitch の設定で切る。 Twitch の設定 → リンクで SHUTTERPARTY のリンクを解除すると、ログインで作った連携が切れます。 オーバーレイは止まり、連携し直すまで撮りません。連携コードで作った連携は、これでは切れません。
• 連携コードを作り直す。 Twitch の拡張機能の設定で 連携コードを作り直すと、それより前の連携がすべて切れます （ログインで作ったものも、連携コードで作ったものも）。連携コードやこの PC を 人に見られたかもしれないときは、こちらを使ってください。
• Stream Deck の連携を全て切る。設定ページの Twitch のタブか、 Stream Deck のキーの設定で押すと、もう一度 Twitch でログインしたあと、そのチャンネルの Stream Deck だけが全部切れます。オーバーレイの連携は残ります。 連携コードを作り直しても Stream Deck は切れず、Twitch の設定で切ると Stream Deck も切れます。

どちらのあとも、ステップ 7 と 8（連携して「OBS に反映」）をやり直せば元に戻ります。

データの扱い

• OBS のパスワードは PC の外に出ません。 127.0.0.1 の OBS につなぐためだけに使われます。
• Twitch でログインして連携すると、設定ページは Twitch が出したトークンを 1 回こちらに送ります。求める権限はありません。こちらはそのトークンが誰のものかを Twitch に聞き、チャンネルの ID を読んで、連携の鍵を返します。Twitch のトークンは保存せず、ログにも書きません。ログイン名は、確かめるためにあなたの画面に出します。連携したあとは、誰として連携中かを出すために、設定ページがあなたのブラウザの中にだけ残します。こちらには送りません。
• 新しい連携コードを貼ると、設定ページはチャンネルの ID と連携の鍵をこちらに送ります。どちらの方法でも、連携した時刻を記録します。どこまで設定が進んだかを数え、Twitch の拡張機能の設定画面に済の印を出すためです。OBS のパスワード・シーン・画面は送りません。
• Stream Deck のプラグインも、Twitch のトークンを 1 回送るだけで保存しません。受け取った連携の鍵は、Stream Deck がプラグインに用意する保存場所にだけ置きます（キーごとの設定には置かないので、プロファイルを書き出しても付いていきません）。こちらから送るのはバーの数と局面だけで、視聴者の名前も写真も送りません。
• 写真がこちらに送られることはありません。 OBS が作って配信に 乗せるだけで、こちらには複製がありません。
• ディスクへの保存は既定でオフです。 フォルダを決めるまで、 あなたのフォルダには何も書き込まれません。シャッターから枠つきの 写真ができるまでのあいだ、写真はこの PC の OBS のブラウザ保存領域を通ります —— ページが自分で消せる場所で、描き終わればすぐ消します。異常終了した回は残ることが あり、次の起動で片づけます。
• Discord への送信は既定でオフです。 オンにすると、コンタクトシートと 有料の写真が OBS からあなたの Discord の webhook へ直接送られます（こちらのサービスは 通りません）。保存フォルダは要りません —— 送るためだけに作った写真は、ディスクに 残りません。
• OBS に入れるローカルの HTML は、信頼できるものだけにしてください。 OBS のパスワード・連携コード・Discord の webhook は、この PC の OBS のブラウザ保存領域に 暗号化して保存されます。OBS がディスクから開く他の HTML（file:///）は 同じ保存領域を使えます。Web のオーバーレイ（https://）は使えません。
• OBS の WebSocket サーバーにはパスワードを設定してください。 接続できる人は、秘密を暗号化する鍵を差し替えられます。設定ページが「オーバーレイの鍵が 変わりました」と聞いてきたとき、OBS の設定を消した・別の PC に移したなどの心当たりが 無ければ、続けないでください。

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