当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【YouTube】最初からすべてではなく関連動画にするJavaScript

JavaScript

YouTubeのアイコン

この記事では、PC版ウェブサイト「YouTube（ユーチューブ）」の関連動画があるサイドバーを、最初から本当の「関連」に絞り込むJavaScriptについて書きます。

任意のウェブサイトに自分で作成したJavaScriptを実行できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。

【YouTube】最初からすべてではなく関連動画にするJavaScript

読者様から、PCウェブサイト版「YouTube」で動画を見ている時、右側に表示されるサイドバーから、おすすめとか新着を排除できませんか？と質問をいただきました。ありがとうございます。

言われて気づいたんですが、確かに2023年のどこかのタイミングから、関連動画のサイドバーにタブが実装されて、初期は「すべて」のタブになっています。「すべて」のタブになっていると、新着とかおすすめ動画がごちゃまぜに表示されます。もはやここは関連動画のコーナーではなくなっているようです。

PCウェブサイト版「YouTube」のサイドバー画像

上部にある「関連動画」タブを押すと、これまで通り関連する動画だけに絞り込まれます。

PCウェブサイト版「YouTube」のサイドバーを「関連動画」に切り替える手順画像

調べた感じ、対応するChrome拡張機能やFirefoxアドオンもなさそうでした。でもクリックするくらいなら…ということで、「ChatGPT」にお願いして、自動的に「関連動画」タブを押してくれるJavaScriptを作成してもらいました。

本記事では、とりあえず記事にします。動作の安定性とかもっといい方法とかは、きっとあります。正直なところ、JavaScriptができる方が本記事を見て、何かアドバイスをいただけないかと、やらしい気持ちで公開しています。

任意のウェブサイトに自分で作成したJavaScriptを実行できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。（Firefoxはこちら）本拡張機能以外にも、JavaScriptを実行できる拡張機能はいくつかあります。どれでもOKです。

Tampermonkeyのインストール方法

Chromeウェブストアから「Tampermonkey」をインストールします。

「Chromeに追加」をクリックします。

「Tampermonkey」のインストール手順画像

Firefoxをご利用の方は、以下からインストールできます。

詳しい使い方については、以下の記事を参考にしてみてください。本記事は、既にインストールして、ある程度使い方を知っている前提です。

スクリプトの適用方法

「YouTube」にアクセスします。Tampermonkey拡張機能アイコンをクリックして、「新規スクリプトを追加」をクリックします。

「Tampermonkey」にYouTubeのサイドバーを最初から「関連動画」にするコードを書き込む手順画像1

新しいタブで、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 });
「Tampermonkey」にYouTubeのサイドバーを最初から「関連動画」にするコードを書き込む手順画像2
本コードの注意点

本コードは、僕が作成したわけではありません。僕が「ChatGPT（AI）」に頼んで作ってもらったコードです。心配な方は利用しないようにしましょう。

JavaScriptが全くできない僕ですが、なーんとなく大丈夫そうなコードに見えます。そもそも、そんな複雑なコードではないと思います。「MutationObserver」で監視して、「div#related iron-selector#chips yt-chip-cloud-chip-renderer:has(#text[title="関連動画"]」を、ポチッとクリックするコードです。

書き込めたら、上部のファイルタブ→「保存」をクリックします。この時、コードの左上に、黄色い警告マークが表示されると思いますが、無視してOKです。「UserScript内の項目が足りない！」というエラーですが、なくても動作します。

「Tampermonkey」にYouTubeのサイドバーを最初から「関連動画」にするコードを書き込む手順画像3

YouTubeを開いて、自動的に「関連」がクリックされるか確認する

「YouTube」に戻ります。一度再読み込みします。Tampermonkey拡張機能を押すと、登録した「YouTubeの関連動画を「全て」ではなく「関連」にする」がオンになっていると思います。オンになっている間は有効になっています。

「Tampermonkey」に追加した「YouTubeの関連動画を「全て」ではなく「関連」にする」を有効にする手順画像

一時的に無効化したい場合は、トグルをクリックしてオフにします。オフにした後は、一度ページをリロードする必要があります。

オンにしている時、YouTubeで動画再生ページを開くと、わずかな遅延があって、その後「関連動画」タブが自動的にクリックされると思います。

PCウェブサイト版「YouTube」のサイドバーを最初から「関連動画」タブに絞り込んだ画像

他の動画を開いても、YouTubeの仕様が変わらない限りは、ずっと「関連」タブにしてくれると思います。

ただし、本コードには大きな欠陥があります。他のサイドバーにあるタブが選択できなくなる点です。「今は、すべてのタブにしたいなぁ」という場合、無理です。「すべて」を押しても、すぐに「関連動画」タブがアクティブになります。

本記事で紹介した「YouTubeの関連動画を「全て」ではなく「関連」にする」の注意点画像

「MutationObserver」でずっと監視しているが原因なんでしょうけど、JavaScriptができない僕には、良い方法が分かりません。もうずっと「関連動画」タブでいいという方には、支障にならないと思います。

どうしても解除したい場合は、一度JavaScriptをオフにして、ページをリロードします。

感想

以上、PC版ウェブサイト「YouTube（ユーチューブ）」の関連動画があるサイドバーを、最初から本当の「関連動画」に絞り込むJavaScriptでした。

YouTubeは仕様をころっと変えてくるので、いつか使えなくなる可能性も大いにあります。余談ですが、同じ時期くらいに変わった一行に表示されるサムネイル数も同様にJavaScriptで変更できます。

JavaScript