Twitchのエンドロールを流します。配信中のチャット参加者やサブスクライバーなどを一覧でチェックでき、エンドロール上で表示します。任意のテキストを追加することも可能です。WEBアプリなのでインストール作業は不要で簡単！

要件

  • HASSHY TOOLSの導入（未導入・初期設定が済んでいない方はこちらを参照してください。）

ディレクトリ構造

使い方

  1. OBS
    1. ブラウザソースの追加（endroll.html）
  2. 動作確認

OBS

ブラウザソースの追加（endroll.html）

OBSを起動し、[ソースの追加] から[ブラウザ] をクリックします。

画像に alt 属性が指定されていません。ファイル名: image-43.png

任意の名称を入力し、[OK] をクリックします。

表示されたブラウザソースのプロパティウィンドウにて、下記の作業を実施します。

  1. [URL] に「https://84log.xii.jp/HASSHY_TOOLS/endroll.html」と入力します。
  2. [幅] に「1920」と入力します。
  3. [高さ] に「300」と入力します。
  4. [表示されていない時にソースをシャットダウンする] と[シーンがアクティブになったときにブラウザの表示を更新する] にチェックを入れます。
  5. [OK] をクリックします。

EndRollの設定

EndRoll Monitorの設定

「HASSHY TOOLS」ドッグから「ツールの起動」をクリックします。

ツールのサイドメニューから「EndRoll」をクリックします。

設定（歯車）アイコンをクリックします。

任意の設定を行い、保存アイコンをクリックします。（詳細な説明は準備中ですが、準備ができるまでは旧ツールの説明ページをご覧ください。）

「プレビュー」をクリックして設定変更後の動作確認をします。

動作確認（EndRoll）

追加した「EndRoll」のブラウザソースを表示状態にします。エンドロールが流れたら動作確認は完了です。

非表示状態

よくあるお問い合わせ

フォントを変更したい

OBSのカスタムCSSを設定することで可能です。ここでは、ダウンロード不要でWeb上から参照可能なWebフォントである「Google Fonts」の設定手順をご紹介します。

Google Fonts へアクセスし、任意のフォントを選択します。（例として、ここでは「Yomogi」フォントを設定していきます。）

画面右上のアイコンをクリックします。

「Get embed code」をクリックします。

「@import」を選択します。

表示された情報のうち、赤枠の部分をOBSのEndRollソースのカスタムCSSに、例を参考にして貼り付けて「OK」をクリックします。

  • カスタムCSS欄に元から記載されている記述body～は残しておきます。
  • font-familyの情報は、「#contents-line {}」の中に記述します。
  • 他に自身でカスタムCSSを追記していた場合は、「@impoft～」が一番上になるようにします。

フォントが変更されることを確認します。フォントの種類によって、HASSHY TOOLSで設定したフォントスタイルが適用されなくなることもあるので、適宜再設定してください。

ライセンス

MITライセンスです。使用報告不要ですが、いただけると嬉しいです。

また、使用された場合は、こちらのツールやブログをご紹介いただけますと、同じように使ってみたい方に広がっていって、配信がより盛り上がっていくと思うので、気が向いたらプロフィール欄等でご紹介ください。

さいごに

仲良くしてね。
（よければフォローもして、コメントもいただければ嬉しいです^^）