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

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

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

JavaScript

YouTubeのアイコン

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

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

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

YouTubeの左側サイドバーを展開した画像

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

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

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

Tampermonkeyのインストール方法

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

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

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

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

スクリプトの適用方法

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で勝手にクリックするようにしています。

YouTubeの左側サイドバーを展開する手順画像

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

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

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

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

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

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

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

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

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

YouTubeの左側サイドバーを最初から折りたたんだ状態にしたGIF画像

動画も貼っておきます。

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

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

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

スクリプトの削除方法

Tampermonkeyアイコンを左クリック→「ダッシュボード」をクリックします。

インストールしているスクリプトが一覧表示されるので、消したいスクリプトの右端にあるゴミ箱アイコンをクリックします。削除されます。

一行に表示する動画数を増やしたい場合

「左側サイドバーを最初から閉じたいって、どういった目的があるんだろう?」と考えた時、「もしかしたら、一行に表示される動画サムネイル数を増やしたいのかな?」と思いました。

以前、当サイトで一行に表示されるサムネイル数を好きな数に増やす記事を書いていたので、ここに貼っておきます。気になる方は、参考にしてみてください。

ドリルを売るには穴を売れ」的な感じで、本質的な目的を考えてみたナポリタン寿司でした。全然違ったらすみません。ちなみに、僕はこの本読んだことがないので、タイトルからの勝手な想像です。

感想

以上、PCウェブサイト版「YouTube」で、左側サイドバーのデフォルト状態を折りたたむようにする方法(JavaScript)でした。

できなかったことができるようになるってなんだか嬉しいですね。僕は、何にもしていませんが…。

JavaScript