今日は13日の金曜日！UEC2 Advent Calender 13日目の記事です。よろしくお願いします。

UEC19 -> 23 (M2)のazarasingです。調布祭実行委員会に所属していた人で、去年まではなんやかんやで調布祭実行委員会での活動をしていましたが、今年はついに！仕事がゼロになりました()ので、のんびり調布祭を満喫していました。M2なので、修論の合間にコツコツ記事を書いています。

今年はmaccha advent calenderというのもやっています*1。maccha君と愉快な仲間たちによるadvent calenderになっているはずです。まだ枠が残っているのでなんか記事を載せたい人は載せてみてください。

今回は「Youtube プレイヤーのサイドに出てくる動画群が気に入らないので常に「関連動画」が出てくるようにする拡張機能を雑に作った。」という雑談記事をお送りいたします。

動機

僕がYoutubeを見るときは、専ら音楽を聴くとか、ゲームの攻略を見るとか、ゲーム実況をみるとか、、、とにかく目的があって見ています。僕は調べものをするときはとことん深読みするタイプなので、同じような動画を短期間でたくさん見ることがあります。あとで別のジャンルの動画を見るときに、この短期間で見た動画がいつまでも関連動画としてサイドバーに君臨し始めるのです。とにかく、目的もなしに見る動画サイトはニコニコ、そうでないときはYoutubeの稀有な人間ですから、こういった現象ははっきり言って不愉快です。

こうなるのはご親切にYoutubeさんが「あなたに合った最新動画」とやらを表示しているからです。僕はそもそもYoutubeの再生履歴はOFFにしているため、一体どこから学習しているのが疑問でしょうがないですが*2、かといってこのサイドバーを非表示にするというのも、関連動画をクリックして別の動画をみるという使い方はしますので、困ります。そもそも、僕が表示してほしいのは関連動画だけなので、関連動画というボタンが常に押されてればいいとうことになります。

「Youtubeを開けば、関連動画ボタンを読み取って、自動で選択状態にする...　そんな拡張機能を作ればいい」

方針は決まりました。

実装

まずは、このボタンのセレクターを調べましょう。F12を押して調べます。すると、'yt-chip-cloud-chip-renderer'という名前のタグが使われているのが分かります。この中の'yt-formatted-string'中のtitleに当たるテキストが一致すればいいということになりますね。

なんか、おそらくこの入れ替えは何ら頭の実行コードが組まれているはずで、それを実行すればいいのですが、それだとYoutube君に怒られてしまいそうなので、クリックイベントを発生させる方式にします。その方が手軽でいいですからね。

あと気を付けなければならないのは、この関連動画はYoutubeを見始めてすぐ出るものではなく、時間差があることです。おそらく自分の情報をもとにレコメンド(w)をしているのだと思いますが、これを待たないといけません。この処理を加えて完成です。

大体の何となくのコードと、仕様を詳しく書いて、ChatGPTに投げれば出来上がります。便利な時代ですね。

function initiateObserver() {
    const observer = new MutationObserver((mutations, observerInstance) => {
        const filterButtons = document.querySelectorAll('yt-chip-cloud-chip-renderer');

        filterButtons.forEach(button => {
            const buttonText = button.querySelector('yt-formatted-string').getAttribute('title');
            if (buttonText === '関連動画') {
                const event = new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    view: window
                });

                setTimeout(() => {
                    button.dispatchEvent(event);
                    observerInstance.disconnect();
                }, 1000);
            }
        });
    });

    const targetNode = document.body;
    const config = { childList: true, subtree: true };
    observer.observe(targetNode, config);
}

window.onload = function() {
    initiateObserver();
};

window.addEventListener('popstate', function() {
    initiateObserver();
});

window.addEventListener('yt-navigate-finish', function() {
    initiateObserver();
});

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        initiateObserver();
        return pushState.apply(history, arguments);
    };
})(window.history);

これにて、悪はさり、平和が訪れた...　というわけでもなく、関連動画というボタンがない場合などの対応ができません。動画の内容によって(多分ジャンルなどを推定できなかった場合とか？)は関連動画という動画リストは作成されないようです。そりゃそうだという話ですが、独自の関連動画のリストの作成を拡張機能として実装するとか、関連動画の呼び出しが強制的にできないか試すとか、そういうことをすればいいと思うので、そのうちやろうかなと思います。いつになるんでしょうか。Youtubeを見なくなるより前にはやろうと思っています。

*1:UEC2が10198で、macchaが10199です。お隣同士仲良くしましょう。来年はUEC 老害adventが立ちそうな気配がありますね。

*2:Youtubeは再生履歴がOFFだとトップページにおすすめ動画が表示されない仕様にしている。これについてYoutbeは

おすすめ動画を選定するのにYouTubeが再生履歴に依存していることを明確にしおすすめ動画の視聴ではなく検索で好みの動画を探すことを好むユーザー向けに、機能を合理化するためのリリース

https://gigazine.net/news/20230809-youtube-show-blank-page-none-watch-history/ より

としているが、再生履歴に関しての配慮なら、今回対処しているサイドバーにも同様におすすめ動画を乗せるべきじゃないと思うのだが。結局は再生履歴をONにしろという圧力なんだろうなぁと思っています。