やりたいこと
FirefoxでYouTubeを見ていると、短いコメントでもスクロールバーと「続きを読む」が表示されて気になる。
→Firefoxの拡張機能で、任意のJavascriptを実行できるTampermonkeyを使えば、削除できるかも
ちなみに私はJavascriptを書いたことがないので、賢いChatGPTのちからを借りてコーディングする。
環境(追記:2023/06/19)
この記事を書いた段階では、Windows10の入ったSurface Pro 4で、Firefox 114.0.1を使っている。
方法(追記:2023/06/20)
記事を公開してからもう一度考えてみると、単にスクロールバーを消せばいいのでは?と思ったので試してみるとうまく行ったので追記。
スクロールバーを消す方法は、スクロールを引き起こす要素にCSSでoverflow: hidden
を指定する。こうすると、はみ出た要素を隠したままスクロールバーを消せる。
開発者ツールで調べると、コメントのytd-expander
タグがスクロールバーを作り出す原因のようなので、これにスタイルを適用する。スクリプトは以下の通り。
// ==UserScript==
// @name Delete Comment's Scrollbar on YouTube
// @namespace http://tampermonkey.net/
// @version 0.4
// @description Delete Comment's Scrollbar on YouTube
// @author
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=rightcode.co.jp
// @grant none
// ==/UserScript==
(function() {
'use strict';
let scrollCount = 0;
window.addEventListener("scroll", function(){
scrollCount++;
if(scrollCount % 4 == 0){
var elements = document.getElementsByTagName('ytd-expander');
console.log(elements);
for(var i=0; i < elements.length; i++) {
elements[i].style.overflow = "hidden";
}
}
}, false);
})();
これを実行したところ、きれいにスクロールバーが消えた。
また、スクロールバーが表示されていたときはコメントの上でマウスホイールを動かしてもスクロールが効かなかったのだが、スクリプト実行後はコメントの上でスクロールができるようになった。「続きを読む」の表示が残っているが気にならないだろう。
このスクリプトの方が確実かつ簡単に消せるのだが、前の方法も試行錯誤の跡として残しておく。
方法(旧)
開発者ツールでスクロールバーを表示している要素を探したところ、「続きを読む」を表示しているtp-yt-paper-button
タグがスクロールバーを表示しているようだ。
Tampermonkeyでこれらの要素をすべて削除する。
削除できてない
しかし、スクリプトを実行しても、要素が削除できていない。色々調べてみると、どうもページを読み込んだときにしかスクリプトを実行していないことが原因だった(YouTubeはスクロールしないとコメントをロードしない)。
→スクロールするごとにスクリプトを実行する
ただし、毎回実行する必要はないので、4回に1回だけ実行する。
コメントが見れない
しかし、「続きを読む」を削除すると、普通に長いコメントの続きが見れなくなる。
→削除する前にコメントを展開する
そのために、ytd-expander
タグのcollapsed
属性を削除する。
コード(旧)
最終的なTampermonkeyのコードはこのようになった。
// ==UserScript==
// @name Delete Comment's Scrollbar on YouTube
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Delete Comment's Scrollbar on YouTube
// @author You
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=rightcode.co.jp
// @grant none
// ==/UserScript==
(function() {
'use strict';
let scrollCount = 0;
window.addEventListener("scroll", function(){
scrollCount++;
var expanders = document.getElementsByTagName('ytd-expander');
for( var i=0; i < expanders.length; i++){
expanders[i].removeAttribute('collapsed');
}
if(scrollCount % 4 == 0){
var elements = document.getElementsByTagName('tp-yt-paper-button');
console.log(elements);
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
}
}, false);
})();
結果
Tampermonkeyを使って、Firefoxで見るYouTubeの煩わしいスクロールバーを削除した。まったく知らない言語でもチャットボット様のおちからを借りればコーディングできた。