StreamlabsからStreamElementsへのドネートウィジェットの移行

移行前に考慮すべきこと

StreamlabsとStreamElementsは異なる管理パネルを使用し、設定の保存方法も異なります。そのため、ドネートウィジェットをボタン一つで完全に移行することは通常できません。安全な方法は、パラメータを手動で保存し、StreamElementsで新しい構成を作成し、それを個別に確認してからOBSのソースを置き換えることです。

古いウィジェットがすぐに消えることはありません。OBSにStreamlabsのブラウザソースを残しておけば、削除・無効化・置き換えをするまで動作し続けます。これにより、次の配信でアラートがなくなるリスクなく、新しいシステムを準備できます。

始める前に、チャンネルで実際に使用されている機能を確認しましょう：

• ドネートページと視聴者向けリンク;
• ドネート、サブスク、フォロワーなどのイベントに関するアラート;
• 目標額、最近のイベント一覧、チャット、その他の追加要素;
• 通知テキスト、画像、GIFアニメーション、サウンド、CSS;
• プロフィール、チャットボットのコマンド、配信説明、SNS内のリンク。

必要がない限り、両方のシステムを同じイベントに接続しないでください。通知の一部がStreamlabsに、一部がStreamElementsに届くと、同じイベントが二重に表示される可能性があります。新しいドネートとアラートの主要サービスをどちらにするか、事前に決めておきましょう。

Streamlabsの設定を保存する

使用している各Streamlabsウィジェットを開き、そのパラメータを記録します。すべてのタブのスクリーンショットを撮り、テキスト値は別のドキュメントにコピーしておきましょう。見た目だけでなく表示条件も保存してください。これらはフォント、色、アニメーションとは別の場所にあることがよくあります。

アラートについては、イベントの種類、メッセージテキスト、表示時間、画面上の位置、要素のサイズ、開始・終了アニメーションの設定を記録します。フォント、テキストのサイズと色、背景色、余白、配置、送信者名とメッセージの表示順も個別に保存しましょう。

イベントごとにデザインが異なる場合は、各バリエーションの設定を保存してください。最低ドネート額、遅延、フィルター、匿名メッセージの表示、テキスト長の制限、アラートが表示されない条件を確認します。新しいエディターではパラメータ名が異なる場合があるため、値そのものと設定の目的が重要です。

デザインに使用されているファイルをダウンロードします：画像、GIF、音声、CSSの断片。ファイルがStreamlabsにのみアップロードされている場合、新しいウィジェットに自動的に表示されることはありません。素材をフォルダに整理し、各ファイルの用途をラベル付けして、ドネートのサウンドとサブスクやフォロワー用の音楽を混同しないようにしましょう。

現在のブラウザソースのURLとOBSのシーン名を保存します。シーン内に複数のStreamlabsソースがある場合は、それぞれが何を担当しているか（アラート、目標額、イベント一覧、チャット）を記録しておきましょう。古いアドレスは、動作するバージョンに戻す際に役立ちます。

移行を始める前に、目標の現在の値を記録します：名前、合計上限、集まった金額、通貨、終了日。進捗のスクリーンショットを別途撮っておきましょう。支払い履歴と現在の目標値が新しいアカウントに自動的に引き継がれることはありません。

インポートとエクスポートを確認する

手動設定の前に、StreamElementsのエディターを開き、お使いのバージョンのインターフェースにImportやExportの項目があるか確認してください。この機能は、Streamlabsの完全な移行ではなく、StreamElements内で作成されたデザインに関するものである可能性があります。エクスポートボタンがあっても、ドネート履歴、支払いデータ、OBSソースがファイルに含まれるわけではありません。

エディターでoverlayをエクスポートできる場合は、まず既に作成したStreamElementsのデザインのバックアップを保存しましょう。互換性のあるファイルやテンプレートのインポートが可能な場合は、形式を確認した後にのみ使用してください。Streamlabsからエクスポートしたファイルは、インターフェースが互換性を明示していない限り、StreamElementsに読み込まないでください。

エクスポートでは、シーンの構造、要素の位置、テキスト設定、カスタムウィジェットのコードが保存される場合があります。ただし、画像、サウンド、外部リンク、CSSは別途アップロードが必要な場合があります。インポート後は、シーンがエラーなく開いたというだけで済ませず、エディター内の各要素を確認してください。

互換性のあるインポートがない場合は、保存したスクリーンショットとパラメータのリストを使用しましょう。時間はかかりますが、どの設定が移行され、どの設定が古いシステムに残ったかを把握できます。

StreamElementsのアカウントとドネートページを設定する

対象のチャンネルがある配信プラットフォームのアカウントでStreamElementsにログインします。設定前にチャンネル名と接続されている権限を確認してください。別のプロフィールでサービスを開くと、新しいウィジェットが期待した場所に保存されない可能性があります。

チャンネルの支援と支払いに関連するセクションで、利用可能なドネート受取方法を設定します。サービスがデータの確認や支払いパラメータの再入力を求める場合があります。新しいリンクを公開する前にこれを行い、通貨、最低金額、匿名ドネートの可否、メッセージ表示ルールを確認しましょう。

StreamElementsのドネートリンクはStreamlabsのリンクとは異なります。送金履歴、保留中の支払い、古いページのパラメータが新しいアカウントに自動的に引き継がれることはありません。未完了の支払いがある場合や、視聴者が既に以前のアドレスを使用している場合は、古いページをすぐに閉じないでください。

新しいフォームが確認されるまで、プロフィールには古いリンクを残しておきましょう。視聴者の側からStreamElementsのページを開き、正しいチャンネルに誘導され、必要な通貨が表示され、メッセージを受け付けることを確認します。確認には、ランダムな実際の送金ではなく、利用可能なテスト方法やリスクの低い方法を使用してください。

アラートとその他のウィジェットを作成する

StreamElementsでは、overlayは通常、個別のウィジェットではなく、1つの共通シーンまたはキャンバスを意味します。このようなoverlayの中に、アラート、目標、最近のイベント一覧、チャットなどの要素が配置されます。そのため、まずOBSシーン用の共通overlayを作成し、次にその中に個別の要素を追加します。

異なるウィジェットセットを持つ複数のシーンがある場合は、それらに個別のoverlayを作成するか、本当に必要な場所にのみ個別のリンクを作成しましょう。理由なくアラートごとに個別のoverlayを作らないでください。そのような構成はソースの置き換えを複雑にし、1つの要素を複数回接続するリスクを高めます。

アラートには以下のパラメータを移行します：

• 通知をトリガーするイベントの種類;
• 名前、金額、コメントの変数を含むタイトルとメッセージのテキスト;
• 表示時間、遅延、出現順序、非表示条件;
• フォント、サイズ、スタイル、色、配置、余白;
• 画像またはGIFのサイズと位置;
• 開始・終了アニメーション、速度、消え方;
• 最低金額、フィルター、メッセージ制限、個別のデザインバリエーション;
• イベントのサウンド、音量、再生方法。

目標額には、名前、合計金額、通貨、終了日、ラベル、プログレスバーの見た目、色、位置を移行します。最近のイベント一覧では、行数、並び順、表示されるイベントの種類、名前の長さ、金額の形式を確認します。チャットについては、領域のサイズ、背景、透明度、フォント、遅延、メッセージ表示ルールを個別に保存しましょう。

Streamlabsから保存した画像とサウンドをアップロードします。CSSが画像やフォントへのリンクを使用している場合は、コード自体だけでなく、すべての外部アドレスも保存してください。CSSをStreamElementsの所定のフィールドに変更を加えずにコピーし、結果を確認します。新しいウィジェットではセレクタとHTML構造が異なる場合があるため、一部のルールは調整が必要になることがあります。

サウンドはイベントの種類ごとに個別に設定します。選択したファイル、音量、再生タイミング、リピートを確認してください。Streamlabsで音声への外部リンクを使用していた場合は、それがアクセス可能で認証が不要であることを確認します。ファイルが古いサービスにアップロードされていた場合は、新しいウィジェットに再度アップロードしてください。

保存後にプレビューを更新します。CSSがテキストを隠していないか、画像がメッセージを覆っていないか、アラートがキャンバスの境界を超えていないかを確認しましょう。長い名前、複数行のコメント、大きな金額、特殊文字をテストしてください。

現在の目標額を手動で移行する

目標の名前と合計上限があっても、集まった金額がStreamElementsに自動的に表示されるわけではありません。保存したスクリーンショットまたはStreamlabsの現在の統計を開き、現在の進捗、目標金額、通貨を記録します。募金が続いている場合は、移行中に新しいドネートを見失わないよう、日時を記録しておきましょう。

StreamElementsで同じ名前、合計上限、終了日を持つ新しい目標を作成します。次に、目標またはウィジェットの設定で、初期値または現在の進捗値に対応するフィールドを探します。フィールド名はインターフェースのバージョンによって異なる場合があります。古いシステムで集まった金額を入力し、変更を保存してください。

初期値の手動設定がサポートされていない場合、テストや実際のドネートで進捗を増やさないでください。これにより送金履歴が歪み、アラートに余分なイベントが発生する可能性があります。その場合は正しい合計上限を指定し、現在の募金にはサポートされている表示方法を選択するか、視聴者にわかりやすい説明を付けて新しい目標を開始しましょう。

保存後、新しいウィジェットを古いものと比較します：数値、パーセンテージ、ラベル、通貨、終了日を確認してください。進捗が正しく表示されない場合は、OBSのソースサイズではなくStreamElementsの目標を修正しましょう。結果が一致したら、目標の名前または識別子を作業ドキュメントに記録します。

そのようなモードが利用可能な場合は、テストイベントで進捗の変化を確認します。金額がリセットされておらず、アラートが二重に表示されていないことを確認してください。その後でのみ、目標を作業シーンに接続しましょう。

競合なくOBSのソースを置き換える

まずテストシーンを作成するか、作業シーンのコピーを使用します。これにより、メインの配信を変更せずに新しいリンクを確認できます。StreamElementsからoverlayのURLをコピーし、以下の手順を実行します：

1. OBSで目的のシーンを開き、新しいBrowser Sourceを追加します。
2. 古いソースと混同しないよう、わかりやすい名前を付けます（例：「SE — アラートと目標」）。
3. アドレス欄にStreamElementsのURLを貼り付けます。
4. OBSシーンのキャンバスに対応する幅と高さを指定します。
5. 位置、表示状態、レイヤーリスト内のソースの順序を確認します。
6. ソースを保存し、overlayが読み込まれるのを待ちます。
7. このシーンで古いStreamlabsソースの表示を一時的に無効にします。
8. テストイベントを実行し、通知が一度だけ表示されることを確認します。

新しいソースを古いソースの上に追加したり、確認中に両方のソースを表示したままにしないでください。そうしないと、1回のドネートで2つのアラートが同時に表示される可能性があります。古いソースを予備として残す必要がある場合は、「古い」というラベルを付けて名前を変更し、非表示にしておきましょう。

同じoverlayが、グループ、スタジオモード、追加のコンポジションを通じて同時に表示される複数のシーンに接続されていないか確認してください。異なる場所にある同じソースは、通知の再表示につながる可能性があります。

overlayが読み込まれない場合は、URL、インターネット接続、ソースのサイズ、選択したシーンを確認します。Browser Sourceを更新してみてください。リンクの置き換えと同時にCSSやサイズを変更しないでください。1つの修正であれば、エラーの原因を特定しやすくなります。

テストシーンで確認した後、新しいソースを残りのシーンに追加します。各シーンごとに、古いBrowser Sourceが非表示または削除されていること、新しいものが正しい位置にあることを確認してください。

イベントとサウンドを確認する

接続した通知タイプごとに、StreamElementsの設定でテストイベントを使用します。ドネート、サブスク、フォロワー、目標の変化、チャンネルで実際に使用されているその他のイベントを確認してください。1つのアラートテストだけでは不十分です。イベントごとに異なるテキスト、画像、サウンドがトリガーされる場合があります。

結果は2か所で確認します：StreamElementsのプレビューと、OBSのシーン内です。テキストの位置、メッセージの読みやすさ、音量、アニメーションの動作、再表示の有無を評価しましょう。長いメッセージ、特殊な文字、大きな金額も個別にテストしてください。

OBSのミキサーと短いテスト録画でサウンドを確認します。音声がオフになっていないか、他のソースでミュートされていないか、正しいチャンネルに送られているかを確認してください。アラートは表示されるが聞こえない場合、問題はファイル自体ではなく、Browser Sourceの設定や音声ルーティングにある可能性があります。

OBSを通じてブラウザソースの音声制御設定を使用している場合は、個別に確認してください。配信時と同じ音量レベルで録音を聴いてみましょう。ヘッドホンでの音だけを基準にしないでください。視聴者は異なるミックスを受け取る可能性があります。

視聴者のメッセージが画面に表示される場合は、望ましくない文字のフィルタリングと不適切なテキストを隠す機能を確認します。表示時間を以前の設定と比較してください。短すぎるアラートは視聴者が読み切れない可能性があり、長すぎるとシーンの一部を覆ってしまいます。

ドネートリンクを置き換える

新しいページ、アラート、目標、サウンドが確認されたら、視聴者が見るすべての場所でリンクを更新しましょう：

• チャンネル説明とプロフィールパネル;
• 固定メッセージとチャットボットのコマンド;
• 配信説明と告知テンプレート;
• SNSプロフィールとコミュニティページ;
• 動画、投稿、その他古いフォームが記載されている素材。

アドレスがアラートのテキスト、パネルの説明、カスタムウィジェットに表示されている場合は、そこでも置き換えてください。ボットのコマンドを個別に確認しましょう。リンクが自動応答に隠れていて、チャンネルのメイン説明に表示されない場合があります。

まずメインプロフィールと固定メッセージを更新し、次に視聴者の側からチャンネルを開きます。新しいリンクが正しいページに誘導し、古いアドレスが目立つ場所に表示されていないことを確認してください。その後、残りのプラットフォームを変更します。

古いドネートページをすぐに閉じないでください。古い投稿に残っている可能性があり、視聴者に未完了の送金があるかもしれません。新しいフォームが確認され、主要なリンクが更新されたら、別の投稿や配信中のメッセージで視聴者に移行を伝えましょう。

移行後の最初の配信は、StreamElementsとOBSのパネルを開いた状態で行いましょう。イベントが表示されない場合やアラートが正しく動作しない場合、問題がドネートフォーム、イベント処理、overlay、ブラウザソースのどこにあるかを素早く把握できます。

予備の構成を保存する

置き換え直後に古いBrowser Sourceを削除しないでください。シーン内で非表示のままにするか、シーンコレクションの個別のコピーを保存しましょう。また、Streamlabsの設定、デザインファイル、CSS、サウンド、画像、古いURLのリストのバックアップも保管してください。

新しいoverlayが読み込まれなくなった場合は、一時的に非表示にして古いソースを復元します。問題が1つの要素だけの場合は、シーン全体を置き換えないでください。URL、表示状態、ソースのサイズ、イベント設定、接続されているoverlayを確認しましょう。

数回の配信で確認した後、作業コレクションから不要なソースを削除できます。アーカイブは別途保存することをお勧めします。以前のデザインを復元したり、パラメータを比較したり、一部の要素を戻したりする必要がある場合に役立ちます。

簡単な手順

1. Streamlabsのドネートページ、アラート、目標、その他のウィジェットのリストを作成します。
2. スクリーンショット、テキスト、CSS、画像、サウンド、目標の現在の値、古いURLを保存します。
3. Streamlabsの完全な移行を当てにせず、利用可能なインポート・エクスポート機能を確認します。
4. StreamElementsで正しいチャンネルを接続し、ドネートページを設定します。
5. シーン用の共通overlayを作成し、アラートとその他の要素を手動で移行します。
6. サウンドと画像をアップロードし、CSSを貼り付け、表示条件と見た目を確認します。
7. 目標を作成し、インターフェースが対応していれば現在の進捗を手動で指定します。
8. OBSのテストシーンに新しいBrowser Sourceを追加し、古いものは削除しません。
9. イベント、サウンド、要素の位置、長いメッセージ、重複の有無を確認します。
10. プロフィール、ボット、説明、SNSのリンクを置き換えます。
11. 予備の構成で数回配信を行い、確認後にのみ古いソースを削除します。