初見・再訪によってコメントの背景の色などを変更したい

対象

テンプレート

対象となるサービス

ツイキャス

利用バージョン: Windows、わんコメやOBSのバージョン

Windows: 11
わんコメ: 5.2.5
OBS: 30.2.2

PRO版を利用

している

内容

テンプレート「pop-chat-right」にて、初見さん(リスナーリストの累積コメント数が1の人)の場合は吹き出しの背景や枠線を赤ベースに、再訪さん(リスナーリストの枠コメント数が1の人)の場合は吹き出しの背景や枠線を緑ベースにみたいなことはCSS等で可能なのでしょうか?

可能か不可能かで言えば可能です。

データとしては、リスナーリストを見るというより、metaデータを参照するのがスムーズでしょう。


isFirstTime
isRepeater

この2つのmetaデータをうまく組み合わせれば、このようなイメージにすることは可能でした。

スクリーンショット 2024-08-26 195526

ただし、isRepeaterのデータはテンプレートをカスタムしないと表示されないデータなため、CSSだけの調整では実現できないです。

「いいね!」 1

ありがとうございます。
なるほど、isFirstTimeとisRepeater(コメントログを見るとTrueかFalseが返ってきているやつ)を使うんですね。
そのカスタムはここでご教示いただけるものなのでしょうか、それとも別途誰かに有償依頼等をする必要がありますでしょうか?

有償での依頼も視野に入れて損はありませんが、ご自身である程度は簡易実装可能かとは思います。

編集作業するファイルは、index.htmlとstyle.css(もしくはカスタムCSS)です。

テンプレートをカスタムする場合は、必ずテンプレートを複製したうえで作業をしてください。

忘れると、わんコメのアップデート時にカスタマイズが上書きされ、消失します。


  • index.htmlの編集

isRepeaterの情報をテンプレートとして取るために、

:data-is-repeater="comment.data.isRepeater"

を追記します。

スクリーンショット 2024-08-27 000938


  • style.cssの編集

テンプレートにisRepeaterの情報を追加取得させられたため、希望する色へ変更するため

[data-is-new="true"] .comment-body,
[data-is-new="true"] .comment-body::before,
[data-is-new="true"] .comment-body::after,
[data-is-new="true"] .comment-text::before,
[data-is-new="true"] .comment-text::after {
    --lcv-border-color: #f00;
    background: #f00;
}
[data-is-new="true"][data-is-repeater="true"] .comment-body,
[data-is-new="true"][data-is-repeater="true"] .comment-body::before,
[data-is-new="true"][data-is-repeater="true"] .comment-body::after,
[data-is-new="true"][data-is-repeater="true"] .comment-text::before,
[data-is-new="true"][data-is-repeater="true"] .comment-text::after {
    --lcv-border-color: #0f0;
    background: #0f0;
}

といった形で編集が可能です。

もちろん、もっと効率的な書き方や、色の付け方のイメージなどに合わせて、微調整する必要はあるでしょう。

スクショでは、上から順に「初見」「再訪」「(初見・再訪どちらも)2コメ目以降」で処理が入っています。

スクリーンショット 2024-08-27 000906

このケースでは、わんコメ上で「初見」のラベルがついているコメントは赤、「再訪」ラベルがついているコメントは緑、ラベルがついていないコメントはデフォルトとなっています。

「いいね!」 2

スクリーンショット 2024-08-27 004651
スクリーンショット 2024-08-27 004510

ありがとうございます。
ご教示いただけた方法で無事思った通りの動きを実装することができました。
貴重なお時間をいただき本当に感謝です。

本件とは別のトピックなのでここで話すことではないかもしれませんが、別トピックで質問をしており、このまま回答がつかないようなら優勝の依頼も含めて検討しようと思っているのですが、わんコメ関連の場所(例えばこのフォーラム内やDiscord内など)で依頼を受けて下さる方を募集するなどといったことはルール上可能なのでしょうか?

×優勝 〇有償
です

まず、フォーラムのルール(規約)としては、以下のようなものがあります。

一見抵触していないように見えるかもしれませんが、ルール以前の問題として、トラブル防止の観点からおすすめはいたしません。


というのも、有償依頼となると、少なからず金銭の授受が発生します。

フォーラムやわんコメのDiscord内で募集をされた際、悪意ある方に目をつけられてしまったら、お金だけ取られてなんの成果も渡してもらえないこともあり得ます。

そういったトラブルを防ぐためにも、ココナラなどお仕事として頼めるサービスに仲介してもらい、双方お金や期日なども含めたトラブルの心配を極力減らし、もしトラブルが起こってしまっても一定のサポートをいただけるサイトでのご依頼がスムーズになるかと思われます。

「いいね!」 1

ありがとうございます。
ですよね、おっしゃる通りです。
Discordやフォーラム、もしくはFANBOXのわん10000に一時的にでも入って個別にご相談させていただくこともひとつの方法として視野に入れていたのですが、そういったところを使った方がいいですよね。
今後を考えてどうしても実装を完遂させたいカスタマイズなので、ココナラだとテンプレートや配信画面のデザインやカスタマイズが主のようで依頼できる人を探せるかどうかわからないですが、どうにか探してみようと思います。
まずはこのフォーラムでトピックを立てておりますのでその回答がつくことをしばらく待ってみようと思います。

トピ違いの質問に対しても親切丁寧にご教示いただき、重ねて本当にありがとうございました。
本トピックは解決いたしましたのでクローズをお願いいたします。