pixivの見たくないユーザのコメントを消す


*注意

*追記にStylusを使った実用に耐える方法を載せました(2019年8月16日22:00)

適当に試したらできた。
こんなもんでよかったんですね。遠回りしました。
使いたい人は追記から読むといいと思います。
追記までのところは私的な記録用に残しておきます。

これは私的な備忘録です

現時点(2019年8月16日21:00)で実用に耐えるものにはなっていません。
すぐに使えるものを求めている方は読まないでください。
ただ、読んでくださった方が改造して実用に耐えるものにすることはできるかもしれません。
そうなったらこちらがその方法を逆に教えていただきたいです。
コメント欄で直接教えてくださったり、書いた記事のURLなどを貼っていただけるれば幸いです。

補足情報や突込み等歓迎します。マサカリはごめんなさい。

経緯

ユーザを指定してイラストに投稿されたコメントを非表示にしたかったのですが、
既存の方法でそれが見つかりませんでした。
最初はfirefoxアドオンのStylusでCSSを編集して
そのコメントのdivを指定し消そうとしましたが、
ユーザIDが書かれた要素の兄弟要素としてコメント本文が書かれていたので消せませんでした。
CSS4のhasを使えば親要素を指定できるのですが、StylusではCSS4が使えないようでした。
なので他の方法を思いつきました。TampermonkeyでJS使ってCSSを書き替えようと思いました。
少し詰まりました。
多少工夫して乗り越えました。しかし、実用的には使い物にならなくなってしまいました。それをこの記事に書きます。
ただ、見たくないユーザのコメントを一目でも目に入れたくないなら、この方法しかないのかなと思います(寛大にスルーしたほうが楽)。
改修していきたいですが今は時間とヤル気がないです。
そもそもJSやらHTMLやらCSSは最近調べ始めたばかりでよくわかりません。
わかってきたら改修できるという希望だけを頼りに書き残していきます。

環境

firefox68.02,tampermonkey,

本文

Userscript本体や、使い方について。

準備

1.Tampermonkeyをインストールする。
2.Tampermonkeyのユーザスクリプトを新規作成。
3.ユーザスクリプト内のコードを全部消して、上記のコードをコピペ。

使用法

1.Pixivで見たいイラストのページを開く。
2.コメント欄を開く(この時点では消したいユーザのコメントが見えるので注意)。
3.ページトップに戻って、Pixivのロゴ画像などが書かれたあたりをマウスでなぞる。
4.コメント欄に戻ると消したいユーザのコメントが消えている。
(見ての通り、実用には耐えられない。
マウスでなぞるのを許して百歩譲ってもページの上下往復移動は耐えられない。)

UserScript

Tampermonkeyのユーザスクリプト本体。

// ==UserScript==
// @name         DeleteUserComment
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  見たくないユーザーのコメントを消す
// @include      https://www.pixiv.net/*
// ==/UserScript==

var deleteSwitcher = document.querySelector('._13vRyPl');
deleteSwitcher.addEventListener ('mouseover', function () {
    var targetUserId = 'XXXXXXX';//XXXXXXXを見たくないユーザのIDと書き替える(*要修正:リストで指定できるようにする)
    var targetClassPopUps = document.getElementsByClassName('_2AkUSrI ui-profile-popup');
    for (var i = 0; i < targetClassPopUps.length; i++){
        if(targetClassPopUps[i].href.match(targetUserId)){
           targetClassPopUps[i].parentNode.remove();
        }
    }
}, false);

見たくないユーザのIDとは、
http://pixadversaria.web.fc2.com/user-mute/css-work.htm
に書いてあるのと同じURL内の数字のことを指しています。

挙動の説明

ソースがアレなので説明が必要かと。
しかし詳しいことは私もよくわかっていませんので、間違っているかもしれませんがざっと書きます。
また、なぜこのような回りくどいやり方になっているのかの経緯の説明もできる限りしたいな、と。

シンプルな方法は失敗

最初に思いついたのは、Tampermonkeyを使う場合のおそらく最もシンプルな方法です。
ページの画像やらがすべて読み込まれてから、コメント欄から消したいユーザのIDで対象となるdivを消す方法です。
window.onloadイベントにフックする形でやろうとしました。

しかし、失敗しました。

失敗の原因

開発ツールのデバッガでユーザスクリプトにブレークポイントを設定しました。
見ると、
このユーザスクリプトが呼び出されるタイミングがHTMLが完全に読み込まれる前になっているようでした。
それに、後からわかったことですが、コメント部分のHTMLが生成されるのはページ表示時ではなく、
「._1Hom0qN」というクラス名(現時点で)が付けられたbuttonのonclickイベント発生時のようでした。
なので、window.onloadの時には消したいコメント自体が存在しないので指定できないのです。

解決

ガリガリとコーディングすることでページ読み込み時に自動的に目的とする挙動をするようにできると思うのですが、JSには慣れていません。
今回目的とすることを達成すること以外(JSの勉強とか)へのモチベーションも大してありません。

なので、
ユーザスクリプトが読み込まれたときに存在する要素を使って何とかできないかと思いました。
そこで目についたのが一番目立つPixivロゴです。安直です。
このロゴのホバーイベントに、処理を追加してしまうことにしました。
処理内容ですが、コメントが読み込まれていると仮定して、コメントの格納されたdivを親ごと削除することにしました。
少し詳しく説明します。
対象とするイラストがあるページでは

イラストがあるページ.html
<div class="_1efxis9">
    <a class="_2AkUSrI ui-profile-popup" href="/member.php?id=XXXXXX">省略</a>
    <div class="aRr02hb">省略</div>

て感じの構造で、「._1efxis9」がコメントの親divで、その子の「._2AkUSrI」云々のhref属性に消したいユーザのIDが書かれ、「.aRr02hb」にコメント本文が書かれています。
なので、「._2AkUSrI」云々のhref属性を調べて、消したいユーザのIDとマッチした場合のみ、「._1efxis9」をremove()で削除します。
これで「._1efxis9」の子である「._2AkUSrI」云々や「.aRr02hb」が消えます。
そう、消したいユーザのコメントが消えてくれたのです。

こうして、前述したユーザスクリプトが完成しました。
先に書いた「._1Hom0qN」ボタンの挙動についてはこれを書く過程で気づきました。
なので、これが出来上がった時にはすでに実用に耐えないものとなっていたのです。
そして、私のヤル気も尽きていました。

今後

改善できたらいいなと思っていますが放置の可能性大。
誰かに教えてもらうか、
また見たくないユーザのコメントに耐えられなくなったときに書き直すでしょう。

参考URL

追記

2019年8月16日22:00

firefoxのアドオンである「Stylus」を使ったやり方できましたので書いときます。
Stylusは
http://pixadversaria.web.fc2.com/htuao/stylus.htm
のページなどを参考にして導入してください。
でユーザスタイルシートとしてpixivのページに以下を設定します。


a[data-user_id="XXXXXX"],a[data-user_id="XXXXXX"] div[class="_2fj9Unu _3HZmrVs"], div[class="aRr02hb"]
{
    right: -100000px;
    width: 100000px;
    height: 0px;
}

XXXXXXは消したいユーザのIDです。
IDとは
http://pixadversaria.web.fc2.com/user-mute/css-work.htm
に書いてあるのと同じURL内の数字のことです。
これで消えました(ページの表示範囲外に行った)。
消したいコメントの投稿ユーザが増えるたびに、これをコピペして、同じように追記していけば精神衛生に役立ちます。

残念なお知らせ

ただ、最後に一つ残念なお知らせがあります。
他のユーザへの返信として書かれたコメントは、Stylusを使った方法では干渉できません。
返信を開くと消したいユーザのコメントが表示されてしまいます。
これについては現時点で対策できません。どうしてもというなら他の方法を考える必要があります。

あと、他のユーザAのコメントにスタンプがあると、そのスタンプと他のユーザBのコメントとが被って表示されてしまいます。
これは仕様です。StylusでやるならCSS4のhasが使えなくてはなりませんが、Stylusの仕様上使えません。
これに関する対策として、スタンプを小さく表示することで被ることは避けられました。
しかし、その設定すると
1.関係ないユーザのスタンプも小さく表示することになる
2.ユーザスタイルシートに余計な記述が増える
3.スタンプを小さくするより被っていてもスタンプが視認できるほうが私の感覚では受け入れられる
ので、
これについては今後も改修しないつもりです。

以上です。