特定のユーザーのコメントの色をユーザーIDを使用して変えたい

対象

テンプレートorメイン画面

対象となるサービス

すべて

内容

はじめまして。最近コメビュをわんコメメインに乗り換えさせていただこうと色々調べているのですが、私の配信では使用中のコメビュで「ユーザーIDごとに特定の背景色・文字色を設定する」ということをしています。
過去ログを見るとわんコメのテンプレートでは[data-user=“〇〇〇”]とユーザー名ごとに色を指定できることは確認しているのですが、これではユーザ-
名を変更される、または別のアカウントだけど同名の場合に対応できないという認識で合っていますでしょうか。
そうであれば、ユーザー名でなくユーザーIDごとに設定できるのがベストと考えていますが、調べても方法が見当たりません。
または、テンプレートでなく、メイン画面側のコメントリストなら実はできる、あるいは実装予定といったことはありますでしょうか。

はい。

[data-user="◯◯◯"]

を使うケースでは、単に「名前の一致」だけを見ているため、おっしゃるとおり名前を変えられたり同名の方が現れた場合に、意図した動作にならなくなってしまいます。


これを避けるためには、たとえばYouTubeのIDで見るならば、カスタムするテンプレートを複製したうえでHTMLに

:user-id="comment.data.id"

のようなものを追加する方法です。

スクリーンショット 2024-06-23 200219

仮にこの文字列で追加した場合、YouTubeのコメントならばテンプレートへユーザーごと個別になる「yt-◯◯◯」のようなIDが付与されます。

もしyt-1234567890というIDなのでしたら、CSSには

[user-id="yt-1234567890"] .comment-text {
    color: #0ff;
}

のような形でユーザーIDを指定すれば、名前を変えようが同じ名前の方が現れようが、同一IDには基本的にはなり得ませんので特定の方への設定に絞り込むことが可能です。
(別垢に切り替えられた場合は、もちろん別途設定しないと駄目ですが)

shinkunoshizuku様

ご回答ありがとうございます。
カスタムするテンプレートを複製したうえでindex.HTMLに
:user-id=“comment.data.id”
を追加してからコメント取得してみたところ、デベロッパーツールで確認すると個別のIDが追加されており、OBSのCSSの設定で特定のコメントのみ色を付けることができました。ありがとうございます。

ただし、これらのIDはユーザーごとではなく1コメントごとに個別のIDとなっていたため、少し目的と違うものでした。(youtube配信画面上でデベロッパーツールで確認すると「modern id」の値?)

他のコメビュですとyoutubeの場合、各ユーザーチャンネル個別URL末尾の「UC」から始まる文字列をIDとしてユーザごとの区別をしているのですが、同じようにするには、今回教えていただいた「:user-id=“comment.data.id”」の「“comment.data.id”」の部分を別の値に変えるとそれを取得できるのでしょうか?自分なりに調べてみていますが今のところその値が見つかりません…

というか、わんコメのメイン画面まではリスナーの詳細を見ることで「yt-UC…」と表示されるためユーザーチャンネルURL個別IDを取得できていますね。テンプレートでもこれを使いたいといったところです。

失礼いたしました。おっしゃるとおりですね :sweat_smile:

この部分

:user-id="comment.data.id"

が誤りで、

:user-id="comment.data.userId"

のような形にしてみてください。

スクリーンショット 2024-06-24 014120

その他には変更ありません。


このようなカスタマイズを行う場合、コメントログを残していれば基本的なテンプレートでは取得していない情報でも切り分けができるとわかる場合(今回だとuserIdを読み込ませた)もあるため、コメントログ解析機能も使えますし容量に余裕のある限り残しておいたほうがわんコメ全体が便利に使えるかと思います。

1 Like

shinkunoshizuku様

ご回答ありがとうございます。
:user-id=“comment.data.userId”
に変更することで目的のユーザーIDを取得し、ユーザーごとに着色することができました。ありがとうございます、解決しました。
コメントログ解析では過去コメントのユーザーIDなんかも見れちゃうようで便利ですね!

想定どおりの動作をしたようでなによりです :blush:

ご確認くださりありがとうございました :bowing_man:

1 Like