【YouTube】最初からすべてではなく関連動画にするJavaScript
この記事は最終更新から991日以上経過しています。内容が古くなっている可能性があります。この記事では、PC版ウェブサイト「YouTube（ユーチューブ）」の関連動画があるサイドバーを、最初から本当の「関連」に絞り込むJavaScriptについて書きます。
任意のウェブサイトに自分で作成したJavaScriptを実行できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。
読者様から、PCウェブサイト版「YouTube」で動画を見ている時、右側に表示されるサイドバーから、おすすめとか新着を排除できませんか？と質問をいただきました。ありがとうございます。
言われて気づいたんですが、確かに2023年のどこかのタイミングから、関連動画のサイドバーにタブが実装されて、初期は「すべて」のタブになっています。「すべて」のタブになっていると、新着とかおすすめ動画がごちゃまぜに表示されます。もはやここは関連動画のコーナーではなくなっているようです。
上部にある「関連動画」タブを押すと、これまで通り関連する動画だけに絞り込まれます。
調べた感じ、対応するChrome拡張機能やFirefoxアドオンもなさそうでした。でもクリックするくらいなら…ということで、「ChatGPT」にお願いして、自動的に「関連動画」タブを押してくれるJavaScriptを作成してもらいました。
本記事では、とりあえず記事にします。動作の安定性とかもっといい方法とかは、きっとあります。正直なところ、JavaScriptができる方が本記事を見て、何かアドバイスをいただけないかと、やらしい気持ちで公開しています。
任意のウェブサイトに自分で作成したJavaScriptを実行できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。（Firefoxはこちら）本拡張機能以外にも、JavaScriptを実行できる拡張機能はいくつかあります。どれでもOKです。
目次- 1. Tampermonkeyのインストール方法
- 2. スクリプトの適用方法
- 3. YouTubeを開いて、自動的に「関連」がクリックされるか確認する
- 4. 感想
Tampermonkeyのインストール方法
Chromeウェブストアから「Tampermonkey」をインストールします。
Tampermonkey - Chrome ウェブストア
ユーザースクリプトでウェブを書き換える
https://chromewebstore.google.com/detail/tampermonkey/dhdgff...
「Chromeに追加」をクリックします。
Firefoxをご利用の方は、以下からインストールできます。
Tampermonkey – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Tampermonkey をダウンロード。Tampermonkey is the world's most popular userscri ...
https://addons.mozilla.org/ja/firefox/addon/tampermonkey/
詳しい使い方については、以下の記事を参考にしてみてください。本記事は、既にインストールして、ある程度使い方を知っている前提です。
【Tampermonkey】ウェブサイトにJavaScriptを適用できる拡張機能
この記事では、ウェブサイトにJavaScriptを実行できるChrome拡張機能・Firefoxアドオン「Tampermonkey ...
https://www.naporitansushi.com/tampermonkey/
スクリプトの適用方法
「YouTube」にアクセスします。Tampermonkey拡張機能アイコンをクリックして、「新規スクリプトを追加」をクリックします。
新しいタブで、JavaScriptを書き込む画面が表示されます。既に初期コードが記載されていると思いますが、Ctrl+Aで全選択して、全部削除します。代わりに、以下のコードを丸々貼り付けます。
// ==UserScript== // @name YouTubeの関連動画を「全て」ではなく「関連」にする // @match *://www.youtube.com/* // @match *://youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // @grant none // ==/UserScript== const observer = new MutationObserver(() => { const element = document.querySelector('div#related iron-selector#chips yt-chip-cloud-chip-renderer:has(#text[title="関連動画"])'); if (!element) return; if (element.getAttribute('aria-selected') === 'false') { element.click(); } }); observer.observe(document, { childList: true, subtree: true }); 本コードの注意点本コードは、僕が作成したわけではありません。僕が「ChatGPT（AI）」に頼んで作ってもらったコードです。心配な方は利用しないようにしましょう。
JavaScriptが全くできない僕ですが、なーんとなく大丈夫そうなコードに見えます。そもそも、そんな複雑なコードではないと思います。「MutationObserver」で監視して、「div#related iron-selector#chips yt-chip-cloud-chip-renderer:has(#text[title="関連動画"]」を、ポチッとクリックするコードです。
書き込めたら、上部のファイルタブ→「保存」をクリックします。この時、コードの左上に、黄色い警告マークが表示されると思いますが、無視してOKです。「UserScript内の項目が足りない！」というエラーですが、なくても動作します。
YouTubeを開いて、自動的に「関連」がクリックされるか確認する
「YouTube」に戻ります。一度再読み込みします。Tampermonkey拡張機能を押すと、登録した「YouTubeの関連動画を「全て」ではなく「関連」にする」がオンになっていると思います。オンになっている間は有効になっています。
一時的に無効化したい場合は、トグルをクリックしてオフにします。オフにした後は、一度ページをリロードする必要があります。
オンにしている時、YouTubeで動画再生ページを開くと、わずかな遅延があって、その後「関連動画」タブが自動的にクリックされると思います。
他の動画を開いても、YouTubeの仕様が変わらない限りは、ずっと「関連」タブにしてくれると思います。
ただし、本コードには大きな欠陥があります。他のサイドバーにあるタブが選択できなくなる点です。「今は、すべてのタブにしたいなぁ」という場合、無理です。「すべて」を押しても、すぐに「関連動画」タブがアクティブになります。
「MutationObserver」でずっと監視しているが原因なんでしょうけど、JavaScriptができない僕には、良い方法が分かりません。もうずっと「関連動画」タブでいいという方には、支障にならないと思います。
どうしても解除したい場合は、一度JavaScriptをオフにして、ページをリロードします。
感想
以上、PC版ウェブサイト「YouTube（ユーチューブ）」の関連動画があるサイドバーを、最初から本当の「関連動画」に絞り込むJavaScriptでした。
YouTubeは仕様をころっと変えてくるので、いつか使えなくなる可能性も大いにあります。余談ですが、同じ時期くらいに変わった一行に表示されるサムネイル数も同様に変更できます。
【YouTube Row Fixer】一行のサムネイル表示数を増やす拡張機能
この記事では、PCウェブサイト版「YouTube」のデカデカサムネイルを元の小さい画像に戻し、一行に表示 ...
https://www.naporitansushi.com/youtube-row-fixer/