live チャット欄で疲れないためにツールを作った
ライブストリーミングのチャット欄で荒らしを見るとツライ気持ちになるので、対抗しようということで今回 Chrome 拡張を作ったので紹介します！
モチベーション
僕は主に Youtube のライブストリーミングを見ていて、荒らしが発生するたびにユーザーをブロックするということを繰り返していて中々ツライ気持ちになっていました。
Youtube には「モデレータ」と呼ばれるコメント欄の治安を確保する人(or ボット)を配置することができ、基本的にはその人達によって治安が維持されています。
しかし、このモデレータを設置するかどうかは全て配信者に委ねられています。 そのため、視聴者からするとモデレータがいない(or 少ない)場合には荒らされ放題のコメント欄を見て頑張ってブロックしていくかコメント欄を閉じるしかないという課題があります。
そこで、視聴者側からいい感じに荒らしコメントを非表示に出来るといいなと思って今回のツールを作成しました。
いい感じに荒らしを非表示にするために、まずは荒らしの特徴を考えていきましょう。
荒らしの特徴
僕が見つけた中では、荒らしは大まかに 4種類 に分けられると思います。
1. 連投
全く同じコメントを短時間に投稿しまくるタイプ
(例)
user X: こんにちは user X: こんにちは user X: こんにちは
2. 繰り返し
1回のコメントで同じような文章を繰り返すタイプ
(例)
user X: 猫です猫です猫です猫です
3. NG ワード
自分にとって不快に感じる NG ワードを含んだコメントを投稿するタイプ
4. 罵詈雑言
コメント内容の toxicity (毒性?) が高いタイプ
この 4種類 の荒らしに対抗しよう & 視聴者側から制御できるようにしよう ということで Chrome拡張 として作りました。
作ったもの
コード github.com
結論から述べると、1 ~ 3 の荒らしには対抗することが出来ましたが、4 の荒らしについてはまだ対応できていません。
利用環境
現在は、Youtube と Mildom の2サイトのみサポートしています。
また、2 の荒らしである「繰り返し」に対しては日本語のコメントのみ動作を確認しています。
使い方
デフォルト値のままで良ければ、インストールしたあとに Youtube または Mildom のライブストリーミング(or アーカイブ) を見に行けば自動で荒らし判定されたコメントを非表示にしてくれます！
動いているかわからない場合は、連投閾値を 1 にしてみてください。おそらく全てのコメントが非表示になると思います。
パラメータの設定
拡張機能のアイコン(スパナのアイコン)をクリックするとポップアップが表示されます。
ここでお好みに「荒らし具合」を調節することが出来ます。
簡単にそれぞれのパラメータについて説明しておきます。
連投閾値制御対象コメント数の中で何個以上、同じユーザーから同じコメントが投稿されたら非表示にするか
単語繰り返し閾値- コメント内の 名詞・動詞・形容詞・感動詞 のいずれかの繰り返しの最大値が何回以上出現したら非表示にするか
対象コメント数- 最新のコメントから上位何件を制御対象にするか
実行間隔- 何 ms 間隔で制御するか
それでは最後に、1 ~ 3 の荒らしについてどのように対抗していたかをご紹介します。
どのように作ったか
1 の荒らし
実装は至ってシンプルで、対象コメント数 内の同一ユーザーによる重複コメントをカウントして閾値を超えていないかをチェックすることで制御しています。
少しの工夫としては、カタカナをひらがなと見なしたり、記号を除去して正規化するようにしています。
2 の荒らし
素朴に出現頻度をカウントすると助詞などがカウントされてしまい誤判定されてしまう可能性があります。
そのため、形態素解析をして 名詞・動詞・形容詞・感動詞 に絞って出現頻度をカウントするようにしました。
形態素解析器
まずブラウザ上で形態素解析しようということでツールを探しました。
そこで見つけたのが、日本語の形態素解析器を JavaScript で実装した takuyaa/kuromoji.js: JavaScript implementation of Japanese morphological analyzer です。
kuromoji.js を Chrome拡張で動かす
形態素解析の処理は重いことが予想できたので、素朴に動かすと単一スレッドの制限から処理をブロックしてしまう可能性があります。
そのため、Web Worker を使用して形態素解析処理を別スレッドに逃がすようにしました。
ただ意外とハマりポイントがあったので 2つ 紹介します。
worker を上手く作れない
この記事を見てもらうのが早いのですが、manifest.json の web_accessible_resources に worker のファイルを指定してもエラーになってしまいました。
記事にある通り、worker の ファイルを fetch してくることで問題を解決することが出来ました。
kuromoji.js でモリモリメモリ
kuromoji.js が tokenize するときに毎回辞書データを読み込む実装になっています。
辞書データは圧縮時で約20MB、無圧縮で約100MB ほどあり、実行間隔 ごとに tokenize することになるのでメモリがどんどん増えていく様子がわかりました。
どうしたもんかなーと思っていたところ、同じ課題感を持って(おそらく)、辞書データをキャッシュするようにした kuromoji.js wrapper の kuromojin という実装を見つけました！
kuromoji.js -> kuromojin にしたところメモリが安定して助かりました。ありがたい。
3 の荒らし
こちらも実装は至ってシンプルで NG ワードを chrome.storage に保存しておいて、登録された NG ワードを含んでいたら非表示にするようにしています。
パフォーマンス
ブラウザのタスクマネージャで拡張機能の有無によるパフォーマンスの変化を見ました。Youtube で計測した結果が次のようになりました。
オフのとき
メモリ: 330MB, cpu: 50%
オンの時
メモリ: 425MB, cpu: 55%
※ 連投閾値=2, 単語繰り返し閾値=3, 制御対象コメント数=50, 実行間隔=3000 で計測
まとめ
- 視聴者側からいい感じに荒らしコメントを非表示にする Chrome 拡張を作りました
- 4 の荒らしの対応は未定ですが、効果的な対策を打つには TensorFlow.js で頑張ることになるのかなと漠然と考えています
- tfjs-models/toxicity at master · tensorflow/tfjs-models を日本語でも使えるようにするとか？
- 処理は重そうなので時間対効果があるかは不明
