Webサイトを(自分好みに)見やすくする

環境

• Windows 10
• Google Chrome (Tampermonkey)
• Mozilla Firefox (Greasemonkey)

※ここでは Tampermonkey, Greasemonkeyの基本的な導入方法や設定方法は記述していません。またJavascriptコードを載せていますが、全く技術的に凄いことなどはありません。

はじめに

現在リモート勤務なのですが、仕事で画面共有して説明している時に同僚に画面を見られて聞かれたので。説明するのも面倒なので書いておこうかと。

例1

このサイト、qiitaですが、見づらくないですか？個人的に読み物サイトは1カラムの構成が好ましいのですが、カラム数に限らず横幅制限されているサイトが非常に多くて開くたびに溜息が出ます。

// ==UserScript==
// @name         qiita max width
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://qiita.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    window.onload = function(){
        var cssElm = document.getElementsByClassName('css-ss68gx');
        for (var i=0; i < cssElm.length;i++){
            cssElm[i].style.maxWidth = 'unset';
        }
    }
})();

横幅固定、または横幅が異様に狭いサイト等は簡単に解決できます。noteとか日経とか某自作のなんちゃらタージュとか。

例2

わたし、爬虫類が大嫌いなんです。亀が大丈夫なくらいで他のはほぼダメで、イラストですら見たくないのです。余談ですが、現在みたいに猫も杓子もパイソンパイソン言われるより遥か昔。新宿紀伊國屋書店でオライリー本¹を棚から抜き出したときの衝撃。股関節が攣ったあの激痛をいまだに忘れられないのでPythonにだけは近づかないと決めています。

閑話休題。

はてなブックマークで蛇だのなんだののニュースが出るたびに寿命が減るので、このようにして見たくないものを非表示にしています。レンダリングされてから削除するので一瞬見えるんですけどね。

// ==UserScript==
// @name         hatebu killer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://b.hatena.ne.jp/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const killWords = [
        'マムシ', '蛇', '爬虫類', 'のヘビ', 'ヘビが', 'ヘビの', 'Python', 'python'
    ];
    window.onload = () => {
        let isLoop = true;
        while(isLoop){
            let entries = document.getElementsByClassName('js-keyboard-selectable-item');
            for(let entry of entries){
                let eraceIt = false;
                for(const word of killWords){
                    if(~entry.innerHTML.indexOf(word)){
                        console.log('kill:' + word);
                        eraceIt = true;
                        break;
                    }
                }
                if(eraceIt){
                    entry.remove();
                }
            }
            let checkEntries = document.getElementsByClassName('js-keyboard-selectable-item');
            let isExists = false;
            for(let checkEntriy of checkEntries){
                for(const word of killWords){
                    if(~checkEntriy.innerHTML.indexOf(word)){
                        isExists = true;
                        break;
                    }
                }
            }
            if(isExists === false){
                isLoop = false;
            }
        }
    }
})();

変なループしてるのはなんだったか忘れましたが、adblockとかち合って間に合わなかったかなんだったか。覚えていません。

はてなブックマーク以外にもよく見るニュースサイトなどは同じようなものを作っています。嫌いなもののニュースを見たくない場合に配列に名前を入れておけばよいです。はあ●ゅうとかホリ●モンとか。キーワードは参考例です。

例3

書きませんが、夜によく見るサイトで動画サイズとか気になるじゃないですか。「スクリーンサイズは大きくしたいけどフルスクリーンじゃないんだ！ブラウザいっぱいに拡げたいんだ！」みたいな。そういうの。あとiframeを皆殺しにすると捗るとか。

おわり。

1. オライリー本だったと思うのですが、10年以上前の話なので覚えていません。また、調べたくもありません。 ↩