Noteの記事タイトルでNGフィルターをかける方法をchat gptに聞いてみた

【追記】タイトルに依らず投稿者を指定してフィルタリングすることができたので文末に追記しておきます。

　こんにちは。ところでnoteにはフィルタリング機能がありません、興味の無い記事を手軽にミュートできるといいんですけどね。

　自分は「ホロライブ」の記事をメインで見ているので、今回も例として使ってみます。下の画像を見ると個人の意見や感想を含まないまとめ記事が何種類かあるのがわかります。（他タグでもこういうのってあるのかな）

chat gptに聞いてみた

　自分が読みたいのは個人の感想なので、一覧でまとめ記事を表示しない方法を探るためにchat gptにchromeのデベロッパー機能からコピペした構造を適当に投げてみます。

　合ってるか間違っているか知りませんがそれらしき解説をしてくれます。どうやら構造を理解したようです。今回は「ホロライフ」をタイトルに含む記事を非表示にできるか聞いてみることにします。

　あっさり答えてくれました。java scriptをどこで使えばいいのかはよくわかりませんがどこかでこれを使えば記事が消えるはずです。なんとなくデベロッパーツールの下のコンソール欄がいけそうだったのでコピペして放り込みます。「貼り付けを許可」を求められたので許可しておきます。

　無事消えました。こうなると何種類かの条件を指定して消す方法がないか探してみたくなります。「ホロライフ」「夕刊V」を例に聞いてみます。

　なんか書き方変わったな…title includeみたいなのが含まれるのは同じですが。試してみます。

　ダメでした。多分上手く書き替えたら機能するのでしょうが自分にそんな能力はない。ということで上手く行った一つ前のコードをベースにこの if (title.includes('ホロライフ') || title.includes('夕刊V')) {みたいな表現を組み込んでみます。完成品がこちらです

完成品と手順

①ctr+shift+i（macは別のキーになります）でデベロッパーツールを開いてください。
②下のコードをコピーしてツール最下部のコンソールに打ち込みenterを推してください。includes('ああああ')の部分を好きな文字にすることで複数のタイトルフィルターで記事を非表示にできます。

// 全てのaタグを取得　
var elements = document.getElementsByTagName('a');　

// 各aタグをループ　
for(var i = 0; i < elements.length; i++) {　
if(elements[i].getAttribute('title') &&　
(elements[i].getAttribute('title').includes('ああああ') ||　
elements[i].getAttribute('title').includes('ああああ') ||　
elements[i].getAttribute('title').includes('ああああ'))){　
// 親要素を非表示にする　
elements[i].parentNode.style.display = 'none';　
}　
}

　これで複数の条件で非表示が可能になります。

　こういう「わかんないもの」を「わかんないまま」いじくることは従来もネットの知識に頼れば可能でしたが、紹介されているモデルケースに現状がハマらなかったり使う側の知識を必要としたりする場合も多々ありました。AIの進歩がそこをうまくフィットさせてくれるようになるのなら色々と面白いですね。

　

余談

ただし、この方法は静的なページでしか機能しません。もしページが動的に更新され、新たな記事が追加される場合、新たに追加された記事に対してはこのコードが適用されません。その場合は、MutationObserverなどのAPIを利用して、DOMの変更を監視し、新たに追加された記事にも同様の処理を適用する必要があります。

　という注釈がついていました。試すとわかると思いますがこのコードによる非表示は「すでに読み込まれ表示されている記事」にしか適応されません。手動である程度スクロールしてから使ってください。

　本当はアドオンなどを使って動的にずっと実行させられればいいなと思ったのですがそっちはどうもうまく出来上がりませんでした。素人の超アナログですが一応こういうことできたよ、とAI君でこんなことできたよ、という日記として書いてみました。

　noteを開いた時だけ自動でスクリプトを実行させる、また読み込みに応じて繰り返し実行させる方法が分かる人はぜひコメントで教示いただきたいところです。

【追記】
　投稿者名で判定するコードができたので置いておきます。

// 全ての記事を取得
var articles = document.getElementsByClassName('m-largeNoteWrapper__card');

for (var i = 0; i < articles.length; i++) {
    var article = articles[i];
    // 投稿者情報を取得
    var author = article.getElementsByClassName('o-noteItem__userText')[0].innerText;
    // 投稿者情報に「ああああ」または「いいいい」が含まれている場合、記事を非表示にする
    if (author.includes('ああああ') || author.includes('いいいい')) {
        article.style.display = 'none';
    }
}