【YouTube】左側サイドバーを折りたたんで収納状態にする方法

2023年4月16日JavaScript

この記事では、PC版ウェブサイト「YouTube（ユーチューブ）」で、左側サイドバーを最初から折りたたんだ状態で開く方法について書きます。

PCウェブサイト版「YouTube」は、初期で左側サイドバーが展開した状態で開かれます。左側サイドバーとは、登録チャンネル、ライブラリ、履歴などのメニュー項目がある部分です。

読者の方から、「左側サイドバーを最初から閉じた状態にして、好きな時に左上の三本線（≡）を押して展開するという仕様に変えられませんか？」と問い合わせをいただきました。以前から、ちょくちょく同じ質問を貰っていましたが、僕の技術不足で、全く方法が思いつきませんでした。

今回、ChatGPTやインターネット上の友人に聞くことで、JavaScriptを使って実装できることが分かりました。ただ、JavaScript全くできない僕が書いているので、もしできなくても怒らないでください。JavaScriptできる方に聞くのがいいと思います。

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

1. Tampermonkeyのインストール方法
2. スクリプトの適用方法
3. YouTubeを開いて、サイドバーが折りたたんだ状態になるか確かめる
4. スクリプトの削除方法
5. 一行に表示する動画数を増やしたい場合
6. 感想

Tampermonkeyのインストール方法

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

Tampermonkey - Chrome ウェブストア

ユーザースクリプトでウェブを書き換える

https://chromewebstore.google.com/detail/tampermonkey/dhdgff...

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拡張機能アイコンをクリックして、「新規スクリプトを追加」をクリックします。

TampermonkeyにYouTubeの左側サイドバーを折りたたんだ状態にするコードを書き込む手順画像1

新しいタブで、JavaScriptを書き込む画面が表示されます。既に初期コードが記載されていると思いますが、Ctrl+Aで全選択して、全部削除します。代わりに、以下のコードを丸々貼り付けます。

// ==UserScript==
// @name         左側サイドバーのデフォルト状態を収納にする
// @author        ChatGPT、kaonasi_biwa
// @namespace    https://twitter.com/kaonasi_biwa_ar
// @match        *://www.youtube.com/*
// @match        *://youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    if(document.querySelector(`[guide-persistent-and-visible]`) != null){
        document.querySelector("#guide-button").click();
    }
})();

仕組みは、シンプルです。YouTubeにアクセスした時、左上の三本線（≡）を1回クリックするというものです。標準では、左上の三本線を押すことで、左側サイドバーが展開・収納します。この仕様を利用して、自分でクリックするのではなく、JavaScriptで勝手にクリックするようにしています。

既にサイドバーが展開している場合は、何もしないようにしています。

本コードは、僕が作成したものではなく、「ChatGPT」と「kaonasi_biwa」さんに作成していただきました。正確には、AIに作ってもらったコードを、「kaonasi_biwa」さんに見せて、若干修正してもらったという感じです。コード掲載してもいいよ！と許可をいただいたので本記事を公開しています。感謝です。

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

TampermonkeyにYouTubeの左側サイドバーを折りたたんだ状態にするコードを書き込む手順画像2

YouTubeを開いて、サイドバーが折りたたんだ状態になるか確かめる

「YouTube」に戻ります。一度再読み込みします。Tampermonkey拡張機能を押すと、登録した「左側サイドバーのデフォルト状態を収納にする」がオンになっていると思います。オンになっている間は有効になっています。

TampermonkeyにYouTubeの左側サイドバーを折りたたんだ状態にするコードを書き込む手順画像3

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

オンにしている時、YouTubeにアクセスすると、自動的に左側サイドバーが折りたたまれます。サイトを開いて、三本線（≡）をクリックするというJavaScriptなので、一瞬展開された状態のサイドバーが表示されます。その後、すぐに折りたたまれる…という感じです。完全にラグを0にするのは、多分無理です。

動画も貼っておきます。

サイドバーを開きたい時は、通常通り、三本線（≡）をクリックします。再度、ボタンをクリックしないと折りたたまれないようになっています。

一つポイントというか、注意点があります。サイドバーを手動で開いた後、サムネイルをクリックして動画を再生します。その後、トップページへ戻る左上の「YouTube」ロゴをクリックします。この時、トップページが表示されますが、サイドバーは折りたたまれません。直前に、自分自身が手動でサイドバーを開いているためです。

何かしらの条件によっては発動しない可能性もあります。そこまで安定しているものではないということを理解しておきましょう。