ドーモ、リコメンドバニッシャーです。

【これまでのあらすじ】
「閲覧履歴にもとづくおすすめ」に妻子を殺されたのかってくらいキレるサラリマン、モモノジ・ケンジ。彼自身のモチベが死の淵にあったそのとき、その身にエンジニア・ソウルが憑依。一命をとりとめたモモノジは「リコメンドバニッシャー」――閲覧履歴にもとづくおすすめを消し去る者となり、復讐のためのコーディングに身を投じるのであった。

　そういうわけだ。わかったか。

　┌●＜ドーモ、桃之字です。

　気にしないように心がけてはいたものの「やっぱり邪魔だァッ」と割とマジオコニンジャソウル大爆発だったので、爆発四散する前に作ることにしました。

【目的】
　・快適なnoteホームを取り戻す
　・Chrome拡張を作成する練習

　Chrome拡張機能でブラウザを弄るだけなので、note規約的には怒られないと踏んでます。が、「裏技の流布はやめろ」と常々CXOが仰ってたりするので、なんらか怒られが発生する可能性はあります。そうなったらこの記事は爆破しますので、ごようしゃください。

　この記事はリコメンドバニッシャー作成にあたって色々と調べたり考えたことをメモ的にまとめています。半分以上忘備録ですがお付き合いください。

　それでは行ってみよう。

要件定義

◆目的
　noteタイムライン中に表示される「閲覧履歴にもとづくおすすめ」を消し去る

◆解決策
noteのホームタイムライン上から「閲覧履歴にもとづくおすすめ」ブロックのみを消し去るChrome拡張を作成・導入する
　※消し去る：当該ブロックのdisplay要素をnoneにする

◆対象ページ
　noteのトップページ(メインのタイムライン)

手法の検討

「閲覧履歴にもとづくおすすめ」のブロック構造は通常の記事ブロックと同様（class名も含む）。違いは「閲覧履歴にもとづくおすすめ」の言葉のみ。そのため、JSを使って一度条件分岐を挟む必要があると考えている。

o-timeline__itemクラスを持つdiv要素がターゲット

◆分岐条件

　当該div要素のHTMLのについて、以下2つの文を含むものをスレイ対象とします。

①”閲覧履歴にもとづくおすすめ”
②div class="o-timelineNotificationMessages__text"

　条件を2つにしているのは、①だけでは「閲覧履歴にもとづくおすすめ」という言葉が含まれる記事をフォロワーが書いたときに消えちゃうからです。フォロワーの記事は見たいんだよ。見たくないもんだけスレイする。狙い撃ちだ。

　ちなみに「o-timelineNotificationMessages__text」クラスのdiv要素はこの領域のフォント設定とかが含まれています。「○○マガジンより」とかそういう案内の文章も同様のクラスが設定されています。

処理内容のまとめ

①o-timeline__itemクラスを持つdiv要素を取得
②①で取得したものに対し、「div class="o-timelineNotificationMessages__text"」と「閲覧履歴にもとづくおすすめ」の文言が含まれているかを確認
③含まれている場合、当該ブロックのstyleに"display:none"を追加
④①に戻り、次のdiv要素へ。おすすめが全滅するまでループ。

懸念点

①ブラウザの処理負荷

　このやり方だとページ全体に対して「閲覧履歴にもとづくおすすめ」の文字を探すことになる。表示速度の低下は懸念点のひとつ。

→結果：大した不可にならなかったのでそのままいくことにした。

②エンドレススクロールに対応できるか

　→結果：そのままだと対応できなかった。「スクロールしたときに実行」することにして対応（故に、処理負荷が心配である）

JSの実装

var html='';
var element = document.getElementsByClassName('o-timeline__item');

element = document.getElementsByClassName('o-timeline__item');
for(var i=0;i<element.length;i++){
    html = element[i].outerHTML;
    if(html.indexOf('閲覧履歴にもとづくおすすめ') != -1 && html.indexOf('o-timelineNotificationMessages__text') != -1){
        element[i].style.display = 'none';
    };
};

　この状態でも、Chromeでコンソール開いて実行すればとりあえず消えます。すっきりする。なんかこれだけで割と満足する。にんまり。

　element.styleは初めて使ったんですが便利ですねぇこれ。この辺りを参考にしました。

拡張機能にする

　こちらの記事を参考に、拡張機能を作ります。

[Chrome拡張] よく見るサイトのデザインを自由に変えよう! 自作のCSSとJSを読み込ませる方法 [Stylish削除記念]

　マニュフェストファイルはこの記事にあるものをそのまま使えばok。サンプルも配布してくれているのでチョーたすかりました。

　また、今回は「ページ読み込みの最後に、上記コードが自動実行される」ようにするのに加え、懸念点②の対策として、「スクロールしたとき」にもコードが実行されるようにしました。

　この辺りの処理はchrome拡張の中でやれるのかなーと思ってたらそんなことなかった。あくまでJSでの制御になるようです。てなわけでこちらを参考にソースコードを追加しました。

$(function(){}) と $(window).on('load',function(){}) の違い - Qiita

拡張機能のオプションを作る

　今回、「閲覧履歴にもとづくおすすめ」のついでに、邪魔なサイドバーを消す機能もつけました。

　そのあたりのオン・オフができるように、オプションメニューを作成しました。

オプションもちゃんとあるよ！ pic.twitter.com/1VE7ViGWTB

— 桃之字🍑文フリ：コ-06 (@tate_ala_arc) November 10, 2019

　この辺りは以下を参考にしました。結構簡単にできるもんですね。

イマドキのChrome拡張機能のオプション画面の作り方 - drilldripper’s blog

完成品

　動画でどうぞ

よし pic.twitter.com/652DkSqCBO

— 桃之字🍑文フリ：コ-06 (@tate_ala_arc) November 10, 2019

　スッキリ。

いじょうだ

　あーーーー楽しかった。やっぱ仕事関係ないコーディングは楽しい。超楽しい。公開するかは考え中です。怒られたらヤだし！

　次は「note記事を縦書き明朝体にする拡張機能」とか作りたい。そこいら辺はまたの機会に！　ちゃお！

▼以前作ったもの▼

▼普段やってること▼