このツールでできること
各ユーザのDiscordアバター画像の表示位置・並び順を固定できます。ボイスチャンネルの参加メンバーや人数、表示名の順序が変わっても影響を受けません。
メンバーが固定されたグループで、Discordで通話しながら配信・録画を行う方向けに制作しています。
ツールの使用方法
必要なファイルのダウンロード
以下のリンクより、背景画像の表示に使用するファイルを纏めたzipファイルをダウンロードしてください。いずれかのバージョンのリンクをクリックすると、自動的にダウンロードが始まります。
その後、ダウンロードしたzipファイルをお好きな場所に解凍・展開してください。
- v0.1.0（最新版）
とりあえず最低限の機能を実装したので公開
オーバーレイのURLを取得
Discord Streamkit OverlayのページでオーバーレイのURLを取得してください。
Discord Streamkit Overlayの基本的な使用方法については、すみませんが他サイトさんをご覧ください。
（今後こちらのページに解説を追加するかも）
OBS上でのソースの作成
以下の2点のブラウザソースを作成し、背景用のソースの上にオーバーレイ用のソースを重ねてください。
- オーバーレイ用ブラウザソース（以下オーバーレイソース）
作成したStreamkitのURLを読み込みます。 - 背景用ブラウザソース（以下背景ソース）
zipファイルの中に含まれるbg_○○.htmlをローカルファイルとして読み込みます。
背景用のhtmlファイルは以下の背景画像ごとに用意してありますので、お好きなものをご使用ください。
 bg_01.html |  bg_02.html |  bg_03.html | bg_04.html |  bg_05.html |
 bg_06.html |  bg_07.html |  bg_xiv_○.html | ||
2つのソースを作成した時点で、あらかじめ以下のようにグループでまとめつつ、それぞれのブラウザソースの位置や大きさを合わせておくと、表示位置の移動などを今後行う際に楽できると思います。
オーバーレイソース用のCSSの作成
以下の専用エディターへプレイヤー名やアバター画像などの情報を入力して、CSSを作成してください。
作成したCSSの貼り付け
OBSで作成済みのオーバーレイソースのプロパティを開き、プロパティウィンドウ下部のカスタムCSSのテキストボックスを選択してください。
そして先ほど専用エディタで作成したCSSをこのテキストボックスにペーストしてください。
見た目の調整
オーバーレイソースと背景ソースの見た目はある程度自由に変更できるようにしています。
将来的に簡単に見た目の編集ができる専用のエディタを用意するつもりではあるのですが、現状はファイルを直接編集することでのみ変更が可能です。
オーバーレイソースの見た目変更可能項目＆変更方法
オーバーレイソース用のカスタムCSS内にある「詳細な見た目の設定」の範囲内の項目を編集し、プロパティを更新してください。
オーバーレイソースは以下の見た目が変更可能です。
- アバター画像の大きさ・間隔・角の丸み
- 喋っていない時・喋っている時・ミュート時の枠線の色や太さ
- 喋っていない時のアバター画像の明るさ
- ミュート時に表示されるミュートアイコンの色と大きさ
- ユーザ名の表示自体の有無、文字の大きさ・色、背景色の色や不透明度
背景ソースの見た目変更可能項目＆変更方法
配布ファイル内にある「config.txt」をメモ帳などのテキストエディタで開き、各設定項目を編集して保存してください。保存が完了したら、OBS上の背景ソースを再読み込みしてください。
背景ソースは以下の見た目が変更可能です。
- 枠の数
- 枠の大きさ・間隔・角の丸み
- 枠線の太さ・色・不透明度
- 背景の色や不透明度
- 背景画像の不透明度
カスタムCSS作成＆再編集エディタについて
エディタの使用方法
初めて使用する場合
- ユーザリストの「名前」「ユーザID」「アイコン画像URL」に情報を入力する
- 入力が完了したらクリップボードにコピーボタンを選択して、OBSのブラウザソースにペーストする
内容の再編集をする場合
- CSSをインポートボタンを選択する
- 表示されたウィンドウ内のテキストボックスにCSSを貼り付け、読み込むボタンを選択する
- ユーザリストにCSSの情報が読み込まれるので、その情報を再編集する
- 再編集が完了したらクリップボードにコピーボタンを選択して、OBSのブラウザソースにペーストする
エディタで入力する各項目について
名前
好き放題設定してください。ただ、文字数が多いと省略されてしまうので、ほどほどの文字数に収めることを推奨します。
ユーザID
Discordの設定で開発者モードをオンにしていると、ユーザを右クリックした際に開くメニューでユーザーIDをコピーという項目が選択できるようになります。（最下部に表示されます）
この項目を使用して各ユーザのIDをコピーし、エディタのユーザID欄にペーストしてください。
アイコン画像URL
Streamkitのセキュリティ上の仕様により、Discordにアップロードした画像のURLのみ使用できます。
Discordのチャットにアイコン画像をアップロードし、その画像のURLをコピーして使用してください。
URLを取得する際は、アップロードしたアイコン画像を右クリックし、開いたメニュー内の下のほうにある画像リンクをコピーボタンを選択して取得してください。
各々にアイコン画像を用意してもらう場合は、アイコン画像アップロード専用のチャットを用意し、そこにアップロードしてもらうのが楽だと思います。
画像について1つだけ注意点がありまして、Discordにアップロードしたアイコン画像のURLは変わることがあるようです。
Streamkitを使用している際に僕自身が複数回観測している現象なんですが、Discordにアップロードした画像は不定期にURLが変わるようです。
それにより、何日か経過してから再びOBSを開くと、画像のリンクが何人か切れてしまっている人が出てきたりします。
そういった時はそのリンクが切れた画像のURLを再び取得する必要がありますので、前述の「再編集をする場合」を参考に、アイコン画像のURLを更新してください。
よくありそうな質問
正しく表示されなくなってしまった
オーバーレイソースのURLやカスタムCSSをメモ帳などに控えた上で、配布ファイルを再度ダウンロードして導入し直してください。
○○の設定方法がよくわからない
この記事のコメント欄や僕のXのアカウントへお気軽にご質問ください！
注意事項
- 本ツールの使用によって生じたいかなる損害についても、作者は責任を負いかねます。
- 本ツールの無断転載・再配布を禁じます。
コメント