わんコメにプリインストールされているテンプレート「slim」をベースとした、YouTube専用のYouTubeのチャット欄風にコメントを表示させることができる配布テンプレートです。
「slim-youtube-custom」についてよくご確認の上、ご利用をお願いいたします。
slim-youtube-customとは
「slim-youtube-custom」は、わんコメのテンプレートとして動作し、YouTube Liveのチャット欄風にコメント欄を流すテンプレートになっています。
簡単な動作状況は、以下の動画をご確認ください。
更新情報
1.4.4 ギフト類背景のスタイル調整(2023/07/01)
1.4.3 マイルストーンチャットのスタイル調整(2023/06/24)
1.4.2 スポンサーシップギフトのスタイル調整(2023/06/24)
1.4.1 マイルストーンチャットのバッジサイズ調整(2023/05/17)
1.4.0 わんコメ5.0オープンβテスト中の細かな変更に対応(2023/05/15)
1.3.3 メンバー加入時のスタイルを微調整(2023/04/23)
1.3.2 レスポンシブ幅の調整とスタイルの微調整(2023/04/09)
1.3.1 YouTubeマーク背面をホワイトに変更と通常版のcolor-white.cssをcolor-light.cssにリネーム(2023/04/06)
1.3.0 giftTypeに対応(2023/04/06)
1.2.1 メンバーシップギフト受け取りした人のスタイル調整と4Kへの対応(2023/04/05)
1.2.0 ダークモードバージョンの追加(2023/04/04)
1.1.0 フォントサイズの調整とスタイル調整(2023/03/29)
1.0.11 コメントが複数行になった際のスタイル調整(2023/03/27)
1.0.10 コメントのスタイル調整(2023/03/26)
1.0.9 枠下部のスタイル追加(2023/03/26)
1.0.8 コメント背景色とギフト類のスタイル調整(2023/03/26)
1.0.7 枠タイトルのスタイル調整(2023/03/25)
1.0.6 幅が極端に狭くなった際の崩れを調整(2023/03/25)
1.0.5 枠のチラつきを防止(2023/03/25)
1.0.4 幅が狭くなった際のアイコンサイズ調整(2023/03/25)
1.0.3 とりあえず枠のスタイルを実装(2023/03/24)
1.0.2 メンバーシップギフトのスタイル見直し(2023/03/24)
1.0.1 ステッカーのスタイル見直し(2023/03/17)
1.0.0 公開版（2023/03/15）
ご利用条件
「slim-youtube-custom」テンプレートご利用にあたっては、以下の条件に同意できる方のみご利用をお願いいたします。
- 再配布をしないこと
- 自作等のご自身で作成されたものと誤解される発言をなさらないこと
- ご自身でカスタマイズされた場合にも配布をなさらないこと
- いかなる問題が生じた場合にも当方が責任を負うものではないことをご理解いただくこと
- 直接のダウンロードリンク（直リンク）を公開しないこと
（再配布を伴わないご自身でのカスタマイズ利用は自由です）
再配布は禁止とさせていただくため、テンプレートをご友人や企業間などいかなる場合でも、配布はなさらないようお願いいたします。
テンプレートは直接配布なさらず、必ず当ページからダウンロードしていただきたいです。
また、ダウンロード用のリンク（直リンク）は公開なさらないようにご紹介をお願いいたします。
ダウンロード
ダウンロードにあたっては、ご利用条件の確認をいただいた上で、同意できる方のみご利用をお願いいたします。
1.3.0でgiftTypeを実装させたため、現状は「コメントテスター」だとスパチャなどのギフト関連動作を正常に見ることができない点にご留意ください。
他所様の枠を借りれば、どのような表示になるのか試すことが可能です。
もしくは、コメントテスターを使ってブラウザに表示させたテンプレートのHTMLを、デベロッパーツールなどで直接いじってください。
動作におかしな点がありましたら、ページ下部にあるコメント欄や作者のTwitterにお知らせいただけると嬉しいです。
通常版
slim-youtube-custom 1.4.4ダウンロード
ダークモード版
slim-youtube-custom-dark 1.4.4ダウンロード
ダウンロードしましたら解凍ののち、わんコメのテンプレートフォルダに入れてください。
わんコメバージョン4.Xまでとバージョン5.0以降では、カスタムテンプレートを入れるフォルダが異なるため、注意が必要です。
また現状、わんコメに搭載されているコメントテスターでのスパチャやステッカー（ギフト類）の表示は崩れてしまうため、心配な場合は枠をお借りして動作をご確認ください。
わんコメ4.Xにも対応している「basic-twitter-custom」も、ぜひご一緒にどうぞ。
要望が多ければ作るかもしれませんが、YouTubeっぽい再現度は確実に下がります。
テンプレートのカスタマイズ
このテンプレートのカスタマイズは、ご利用条件の確認を守っていただける限り自由です。
もっと高度に調整をして使用されても、もちろん構いません。
簡単にではありますが、内蔵しているファイルの紹介やおすすめのカスタマイズを紹介しておきます。
ファイルの編集にはどのようなソフトを利用するのも自由ですが、Visual Studio Codeのような、入力補助もあるようなツールがあると便利です。
そうしないと、本テンプレートのアップデートをする際に、上書きされてしまいます。
内蔵しているファイル
テンプレートとして内蔵しているファイルは、以下のとおりです。
- color-light.css | color-dark.css
- custom.css
- index.html
- responsive.css
- script.js
- style.css
- thumb.png
color-light.cssとcolor-dark.cssだけ、通常版かダークモード版かで、名称が異なっています。
custom.css
slimから変更しているCSSの基本ファイルです。
どのような処理をしているのか、コメントを書き込んでいるので、好きなように変更しやすいはずです。
color-light.css|color-dark.css
custom.cssから色を変更するためのCSSになっています。
新しいバージョンでは、color-white.cssは使わないため、削除してしまって問題ありません。
主にダークモードのために用意しているものです。
index.html
OBSなど配信ツールに投げ込むファイルです。
giftTypeの取得も書き込んであるため、一行コピペすれば他のテンプレにもgiftTypeを付与することができます。
細かなカスタマイズが必要ないのであれば、基本的にいじる必要はありません。
responsive.css
横幅によって文字サイズや位置などが変更されるよう、調整するためのCSSになっています。
@media screen and (min-width: 701px)
や
@media screen and (max-width: 700px)
などのサイズを変更すれば、どの横幅でサイズ変更が実行されるか、指定が可能です。
調整を行えば、横幅を変えても文字サイズなどが変更されないように指定することも可能です。
細々したスタイルの位置やサイズ調整は、このファイルで行っていることが多くなっています。
script.js
4Kサイズに対応するために、一行だけ変更してあります。
ただし、その影響で負荷が高くなっているため、大きなモニターを使わない、配信画面を大きくしないのであれば、ファイル内の2行目を以下のように変更してください。
const LIMIT = 30
この変更で、わんコメのデフォルトに戻ります。
style.css
増やしてあるCSSを読み込むため、デフォルトに追記してあります。
カスタマイズしてファイルが増減する、名称が変更するようなことがなければ、変更する必要はありません。
thumb.png
わんコメのテンプレート一覧に出てくる、テンプレートのサンプル画像です。
カスタマイズして見た目が変わらない限り、差し替える必要はありません。
テンプレートの情報
ベーステンプレートとして、わんコメにプリインストールされている「slim」が使われています。
また、参考にわんコメにプリインストールされている「ktx-quick-starter」も一緒に使われています。
「slim-youtube-custom」テンプレートは無料でご利用いただけますが、ご利用条件にあるとおりの利用や紹介をしてください。
YouTubeのチャット欄を完全再現しているわけではないため、利用の前にコメントテスターや配信枠をお借りした上で、配信画面の調整をおすすめします。
また、YouTube専用に作ってあるため、カスタマイズいただかないとYouTube以外の配信サイトではコメントの表示をすることができません。
コメント