EndRoll - はしろぐ

Q: 各セクションのタイトル表記を変更したい

OBSのカスタムCSSを設定することで可能です。OBSのEndRoll用ソースのカスタムCSSに、下記のサンプルソースコードを張り付けてみてください。（すでに記載されている他のカスタムCSSがある場合は上書きしないように気を付けてください。）[crayon-67f00a518af06155794972/]あとは自分の好きなように、表示する言葉を変えてみましょう！

Q: 各セクションのタイトルを装飾したい

OBSのカスタムCSSを設定することで可能です。OBSのEndRoll用ソースのカスタムCSSに、下記のサンプルソースコードを張り付けてみてください。（すでに記載されている他のカスタムCSSがある場合は上書きしないように気を付けてください。）[crayon-67f00a518af0b708921422/]あとは自分の好きなように、デザインを変えてみましょう！下記にいくつかサンプルを載せておきます。（気が向いて時間があれば増やしていきたい気持ち。。）下線[crayon-67f00a518af10064280091/]斜めテープ風[crayon-67f00a518af14763783195/]

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

Contents

1 要件
2 ディレクトリ構造
3 使い方
- 3.1 OBS
  - 3.1.1 ブラウザソースの追加（endroll.html）
- 3.2 EndRollの設定
  - 3.2.1 EndRoll Monitorの設定
  - 3.2.2 動作確認（EndRoll）
4 よくあるお問い合わせ
- - 4.0.1 下線
  - 4.0.2 斜めテープ風
5 ライセンス
6 さいごに

要件

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

ディレクトリ構造

https:&#47;&#47;84log.xii.jp/EndRoll/
├── index.html
├── monitor.html
├── monitor.js
├── script.js
└── style.css

https://84log.xii.jp/EndRoll/

├── index.html

├── monitor.html

├── monitor.js

├── script.js

└── style.css

使い方

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

OBS

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

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

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

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

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

[URL] に「https://84log.xii.jp/HASSHY_TOOLS/endroll.html」と入力します。
[幅] に「1920」と入力します。
[高さ] に「300」と入力します。
[表示されていない時にソースをシャットダウンする] と[シーンがアクティブになったときにブラウザの表示を更新する] にチェックを入れます。
[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～」が一番上になるようにします。

@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
#contents-line {
  font-family: "Yomogi", cursive;
}
/* 元の記述は残しておく */
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

#contents-line {

font-family: "Yomogi", cursive;

}

/* 元の記述は残しておく */

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

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

各セクションのタイトル表記を変更したい

OBSのカスタムCSSを設定することで可能です。

OBSのEndRoll用ソースのカスタムCSSに、下記のサンプルソースコードを張り付けてみてください。（すでに記載されている他のカスタムCSSがある場合は上書きしないように気を付けてください。）

#streamer div.title span:after {
    content: "★主★" !important;
}
#participants div.title span:after {
    content: "★チャットありがとう★" !important;
}
#newfollowers div.title span:after {
    content: "★フォローありがとう★" !important;
}
#subscribers div.title span:after {
    content: "★サブスクありがとう★" !important;
}
#cheeres div.title span:after {
    content: "★チアーありがとう★" !important;
}
#raiders div.title span:after {
    content: "★レイドありがとう★" !important;
}
#creater div.title span:after {
    content: "★EndRoll Tool★" !important;
}

#streamer div.title span:after {

content: "★主★" !important;

}

#participants div.title span:after {

content: "★チャットありがとう★" !important;

}

#newfollowers div.title span:after {

content: "★フォローありがとう★" !important;

}

#subscribers div.title span:after {

content: "★サブスクありがとう★" !important;

}

#cheeres div.title span:after {

content: "★チアーありがとう★" !important;

}

#raiders div.title span:after {

content: "★レイドありがとう★" !important;

}

#creater div.title span:after {

content: "★EndRoll Tool★" !important;

}

あとは自分の好きなように、表示する言葉を変えてみましょう！

各セクションのタイトルを装飾したい

OBSのカスタムCSSを設定することで可能です。

div.title>span {
    padding: 5px 10px;
    border: 2px solid #2589d0;
    box-shadow: 5px 5px #2589d0;
    color: #2589d0;
    background-color: white;
    text-shadow: none;
}

div.title>span {

padding: 5px 10px;

border: 2px solid #2589d0;

box-shadow: 5px 5px #2589d0;

color: #2589d0;

background-color: white;

text-shadow: none;

}

あとは自分の好きなように、デザインを変えてみましょう！下記にいくつかサンプルを載せておきます。（気が向いて時間があれば増やしていきたい気持ち。。）

下線

div.title span {
    padding:0 .4em .2em;
    border-bottom: 3px solid #2589d0;
}

div.title span {

padding:0 .4em .2em;

border-bottom: 3px solid #2589d0;

}

斜めテープ風

div.title span {
    display: inline-block;
    position: relative;
    transform: rotate(-5deg);
    padding: .3em .5em;
    border-left: 2px dotted rgba(0, 0, 0, .1);
    border-right: 2px dotted rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    background-color: #fff;
    color: #333333;
    text-shadow: none;
}

div.title span {

display: inline-block;

position: relative;

transform: rotate(-5deg);

padding: .3em .5em;

border-left: 2px dotted rgba(0, 0, 0, .1);

border-right: 2px dotted rgba(0, 0, 0, .1);

box-shadow: 0 0 5px rgba(0, 0, 0, .2);

background-color: #fff;

color: #333333;

text-shadow: none;

}

ライセンス

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

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

さいごに

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