ツールについて
Discord Streamkit Overlayで出力するオーバーレイの見た目を改変するツールです。
ツールでできること
各ユーザのアバター位置を完全固定
このツールのメイン機能で、Discordでの通話に参加しているメンバーや人数、ユーザの名前にかかわらず、各ユーザのアバター画像が表示される位置や並び順を固定できます。
参加していないユーザの位置が空欄のままになるため、メンバーと役割が決まっているゲームなどを遊ぶ配信や録画などを行う際に効果を発揮します。
背景やアバター画像の見た目を簡単に変更
アバター画像に付与される装飾や、アバター画像の下に背景として表示されるhtmlファイルの見た目を、設定項目を変更するだけで簡単に変更できます。
表示されるユーザ名を変更
各ユーザがDiscordのアカウントに設定している名前を上書きする形で、各ユーザのアバター画像と共に表示される名前を変更できます。
ツールを使用したデザイン例
こちらはFCで開催された滅アラ固定活動で実際に使用していた、身内向けアーカイブ動画の配信レイアウト用のデザインです。
参加していたアライアンスのメンバー8人の非常にかわいいイラストをSS1さんが描いてくださったため、そのイラストの利用許可をいただきました。
テスト運用していた際のものなので見た目がすこし異なりますが、動画ではこのように表示していました。
枠の並び方を縦にしたり、枠の大きさの変更を行ったりすると、このようなデザインも使用可能です。（こちらのサンプルは画像に色付きのグラデーションをつけています。近いうちツールだけで再現できるようにする予定です）
導入難易度
Discord Streamkit Overlayを使用したことが……
⭕ある方
エディタの使い方さえご理解いただければヌルいはずです
❌ない方
まずはDiscord Streamkit Overlay単体で、OBSにオーバーレイを表示できるか試してみてください！
そこさえ突破できればどうにかなると思います。
導入がちょっと手間であることは重々承知しておりますので、どのような方にせよ分からないことがありましたらお気軽にご質問ください！
後述の「よくありそうな質問」の欄に連絡先を詳しく記載しておりますので、そちらからお願いします！
ツールの使用方法
必要動作環境の確認
以下の環境で正常に動作するように制作しておりますので、これらの条件を満たしているかご確認ください。
- Windows 10/11
- OBS バージョン31.0以降
OBSのバージョンは、OBSのウィンドウ上部のヘルプ > OBS Studioについてからご確認いただけます。
必要なファイルのダウンロード
以下のリンクより、背景画像の表示に使用するファイルを纏めたzipファイルをダウンロードしてください。いずれかのバージョンのリンクをクリックすると、自動的にダウンロードが始まります。
その後、ダウンロードしたzipファイルをお好きな場所に解凍・展開してください。
v0.2.0ダウンロード（26/06/06）
- FF14向けの追加装飾用のhtmlファイル2種を追加しました。追加装飾については「OBS上でのソースの作成」の項目をご覧ください。v0.1.0で同梱していた試作品のFF14用ポジション画像をご利用くださっていた方は、今後は
bg_xiv_8p.htmlをご使用ください。 - 枠の整列方向を横と縦で指定できるようになりました。背景/追加装飾ソースの整列方向は
config.txtを、オーバーレイソースの整列方向はカスタムCSS内の「–direction」の項目をご変更ください。 - 背景ソースの背景画像は、
config.txtで指定する仕様に変更しました。これにより、背景ソースはbg_xiv_〇〇.htmlを除き削除いたしました。 - 設定に関連する処理に改修を行っているため、v0.1.1以前の設定をそのまま使用すると正しく動作しない可能性があります。ファイルを使用されていた方は大変お手数をおかけしますが、以下の対応をお願いいたします。
- config.txt：v0.2.0の配布ファイルに同梱されているものを使用、改めて設定変更したい項目の数値を変更してください。
- カスタムCSS：エディタでカスタムCSSのインポートを選択してインポートを行い、クリップボードにコピーを選択してください。編集の有無に関わらず、エディタを通すと新規で追加された設定項目が補完されます。
オーバーレイのURLを取得
Discord Streamkit OverlayのページでオーバーレイのURLを取得してください。
Discord Streamkit Overlayの基本的な使用方法については、すみませんが他サイトさんをご覧ください。
（今後こちらのページに解説を追加するかも）
OBS上でのソースの作成
以下の2つもしくは3つのブラウザソースを作成してください。
オーバーレイ用ブラウザソース（以下オーバーレイソース）
ユーザのアバター画像を表示するために使用するソースです。作成したStreamkitのURLを読み込んでください。
背景用ブラウザソース（以下背景ソース）
オーバーレイソースの背景として表示するためのソースです。配布ファイルの中に含まれるbg.htmlやbg_○○.htmlをローカルファイルとして読み込みます。
追加装飾用ブラウザソース（以下追加装飾ソース）※省略可
オーバーレイ用ブラウザソースの上へ、さらに装飾を表示する際のためのソースです。配布ファイルの中に含まれるfg.htmlやfg_○○.htmlをローカルファイルとして読み込みます。こちらは必要に応じてご使用ください。
追加装飾ソースを含めた3つのソースを作成した場合は、以上のようにソースを並べてください。
グループ化は必須ではありませんので、必要に応じてご利用ください。ただ、2つもしくは3つのソースを重ねて表示する仕様上、グループ化した方が移動などを行う際に取り回しが楽になります。
オーバーレイソース用のCSSの作成
以下の専用エディタへプレイヤー名やアバター画像などの情報を入力して、CSSを作成してください。
作成したCSSの貼り付け
OBSで作成済みのオーバーレイソースのプロパティを開き、プロパティウィンドウ下部のカスタムCSSのテキストボックスを選択してください。
そして先ほど専用エディタで作成したCSSをこのテキストボックスにペーストしてください。
見た目の変更可能部分と変更方法
オーバーレイソースと背景/前景ソースの見た目はある程度自由に変更できるようにしています。
将来的に簡単に見た目の編集ができる専用のエディタを用意するつもりではあるのですが、現状はファイルを直接編集することでのみ変更が可能です。
オーバーレイソース
オーバーレイソース用のカスタムCSS内にある「詳細な見た目の設定」の範囲内の項目を編集し、プロパティを更新してください。
オーバーレイソースは以下の見た目が変更可能です。
- アバター画像の整列方向
- アバター画像の大きさ・間隔・角の丸み
- 喋っていない時・喋っている時・ミュート時の枠線の色や太さ
- 喋っていない時のアバター画像の明るさ
- ミュート時に表示されるミュートアイコンの色と大きさ
- ユーザ名の表示自体の有無、文字の大きさ・色、背景色の色や不透明度
背景ソース/追加装飾ソース
配布ファイル内にある「config.txt」をメモ帳などのテキストエディタで開き、各設定項目を編集して保存してください。保存が完了したら、OBS上のブラウザソースを再読み込みしてください。
背景ソースは以下の見た目が変更可能です。
- 枠の整列方向
- 枠の数
- 枠の大きさ・間隔・角の丸み
- 枠線の太さ・色・不透明度
- 背景の色や不透明度
- 背景画像のファイル
- 背景画像の色や不透明度
背景画像は以下のサンプル画像（配布ファイルにも同梱しております）をご参考いただいた上、使用したいファイル名をbg-img-name-commonの欄にご記載ください。
カスタムCSS作成＆再編集エディタについて
エディタの使用方法
初めて使用する場合
- ユーザリストの「名前」「ユーザID」「アバター画像URL」に情報を入力する
- 入力が完了したらクリップボードにコピーボタンを選択して、OBSのブラウザソースにペーストする
内容の再編集をする場合
- CSSをインポートボタンを選択する
- 表示されたウィンドウ内のテキストボックスにCSSを貼り付け、読み込むボタンを選択する
- ユーザリストにCSSの情報が読み込まれるので、その情報を再編集する
- 再編集が完了したらクリップボードにコピーボタンを選択して、OBSのブラウザソースにペーストする
エディタで入力する各項目について
名前
好き放題設定してください。ただ、文字数が多いと省略されてしまうので、ほどほどの文字数に収めることを推奨します。
ユーザID
Discordの設定で開発者モードをオンにしていると、ユーザを右クリックした際に開くメニューでユーザーIDをコピーという項目が選択できるようになります。（最下部に表示されます）
この項目を使用して各ユーザのIDをコピーし、エディタのユーザID欄にペーストしてください。
アバター画像URL
Streamkitのセキュリティ上の仕様により、Discordにアップロードした画像のURLのみ使用できます。
Discordのチャットにアバター画像をアップロードし、その画像のURLをコピーして使用してください。
URLを取得する際は、アップロードしたアバター画像を右クリックし、開いたメニュー内の下のほうにある画像リンクをコピーボタンを選択して取得してください。
各々にアバター画像を用意してもらう場合は、アバター画像アップロード専用のチャットを用意し、そこにアップロードしてもらうのが楽だと思います。
また、画像について1つだけ注意しなくてはいけないことがあります。
Discordにアップロードした画像は不定期にURLが変更されます。
それにより、何日か経過してから再びOBSを開くと、画像のリンクが何人か切れてしまっている人が出てきたりします。
そういった時はそのリンクが切れた画像のURLを再び取得する必要がありますので、前述の「再編集をする場合」を参考に、アバター画像のURLを更新してください。
カスタム例
思いつき次第適当に更新します。
よくある質問
表示できていたアバター画像が一部/全て表示されなくなった
直前の「アバター画像URL」の項目でもご説明しましたとおり、Discordにアップロードした画像は不定期にURLが変更されます。（Discordをストレージとして使用させないための処置であると思われます）
画像を削除していないのにもかかわらず、これまで表示できていたアバター画像が表示されなくなってしまった場合は、この不定期なURL変更による可能性が非常に高いです。
その際は画像リンクをコピーから対象の画像のURLを再び取得し、エディタを用いて再設定を行ってください。
ブラウザソースが正しく表示されない
OBSのバージョンが31.0未満である場合と、config.txtやカスタムCSSの設定ミスによる表示不良である場合があります。
【共通】OBSのバージョンによる表示不良
OBS本体のバージョン更新にあわせて、OBS内部に実装されているブラウザも更新が行われています。
ツールで使用している内容にバージョン31.0未満のOBSでは動作しないものがあるため、OBSを31.0以降のバージョンに更新してください。
【背景/前景用ソース】config.txtの設定ミスによる表示不良
config.txtの設定項目に無理な数値が入力されていたり、設定項目を削除したりすると、表示が崩れてしまうことがあります。
config.txtで設定している数値などを控えた上でSKFitを再度ダウンロードし、OBS上で背景/前景用ブラウザソースを再作成してください。
【オーバーレイソース】 カスタムCSSの設定ミスによる表示不良
カスタムCSSの設定項目に無理な数値が入力されていたり、設定項目を削除したりすると、表示が崩れてしまうことがあります。
StreamkitのURLやカスタムCSSで設定している数値などを控えた上で、エディタでカスタムCSSを改めて作成し、そのカスタムCSSをオーバーレイソースに追加してください。
とにかく○○の設定方法がよくわからない
この記事のコメント欄や僕のXのアカウントへお気軽にご質問ください！質問が多かった事柄はこちらか別の記事で詳しく解説させていただく予定です。
注意事項
- 本ツールの使用によって生じたいかなる損害についても、作者は責任を負いかねます。
- 本ツールの無断転載・再配布を禁じます。
このツールを気に入っていただけた方へ
このツールを求めていそうなご友人や配信者さんにぜひお勧めいただけたら大変助かります。
作者本人も趣味の配信をする時に使っていますが、自分では気づけないことがアホほどあると思っています。
様々な方にご使用いただき、使用感についてのご意見を伺いたいと考えているので、ご紹介いただけましたら嬉しいです。
コメント