CSS – ノマへの扉

おすすめ動画に面白そうな動画が多すぎるがいけないんやｯ…… それもありますが、見たくもない動画もまた多く表示されます。興味なしやチャンネルをおすすめに表示しないなどである対策できますが、それでもある程度AIを調整できるだけ。 それならばもう登録チャンネルだけ見られればよいではないか！ さあ、どうしよう おすすめ動画を消したい！ 一番に思いついたのは、ホーム画面から登録チャンネル以外の動画を消すことです。 クラス分けとかされてるだろうから、適当にcssでdisplay : noneしたらいいかな～なんて気楽に思ってましたが、天下のYouTubeさん。そんな単純なわけないですね。 なにで仕分けているのかわかりませんが、私はhtmlとcss以外のことが本当に本当に1mmもわからないのでこの方法は断念。 他に使えるものはないもんかとYouTubeをぶらぶらしていたら左のメニューに登録チャンネルという欄を見つけたのでした。 CSSとJSで登録チャンネルにしかいけないようにする やることは単純です。 左のメニューから新しい動画を見つけるようなもの(ホーム・探索・ショート)をcssで消す。YouTubeロゴをクリックしたときの行き先をホームから登録チャンネルのページへ設定。外のサイトからYouTubeへ飛んできたときは登録チャンネルのページへリダイレクト。 これをすれば実質登録チャンネルしか見れないことになります。 もっと極めたければ、サイドにでてくる関連動画を消すこともできますが、流石に新しい動画に出会わなすぎたので私はそこまではしてないです。(一応css書いておきます。) YouTubeをカスタムしよう！ CSS/JSをいじれるChrome拡張機能を導入 CSSとJSを追加できる拡張機能なら何でもいいのですが、ことYouTube専用ならTweaks for YouTubeがおすすめです。画面上でマウスホイールをクルクルすると、音量を調整したり早送りしたりできるスグレモノです。 ダウンロード : Tweaks for YouTube https://blog.nomadoor.net/youtube%E3%81%AE%E9%9D%A2%E5%80%92%E3%81%8F%E3%81%95%E3%81%84%E6%93%8D%E4%BD%9C%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E3%83%9E%E3%82%A6%E3%82%B9%E3%83%9B%E3%82%A4%E3%83%BC%E3%83%AB%E3%81%A7/ CSS/JSを書きこむ ブラウザ右上にあるTweaks for Youtubeのアイコンを右クリックし、オプションを選びます。 Custom CSS And JavaScriptの欄を選択すると、CSSとJSを書き込めるのでこちらに以下のコードをコピペしてください。 注：PC限定かつJS歴3日がお送りしているためナンセンスなコードとなっております。よっぽど壊れるようなことは書いてないですが、ご注意ください。 ミニマリスト向け 登録チャンネルとライブラリ以外のアイコンを消します。 #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer[title=&quot;ホーム&quot;],#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer[title=&quot;探索&quot;],#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer[title=&quot;ショート&quot;]{ display : none; } #endpoint.ytd-mini-guide-entry-renderer[title=&quot;ホーム&quot;],#endpoint.ytd-mini-guide-entry-renderer[title=&quot;探索&quot;],#endpoint.ytd-mini-guide-entry-renderer[title=&quot;ショート&quot;]{ display : none; } //関連動画を消す #related{ display : none; } //youtube.comから登録チャンネルページにリダイレクト※1 var url = location.href; window.addEventListener('DOMContentLoaded', function() { if(url == &quot;https://www.youtube.com/&quot;) { if (window.name != &quot;xyz&quot;) { location.replace(&quot;https://www.youtube.com/feed/subscriptions/&quot;); window.name = &quot;xyz&quot;; } } }); //youtubeロゴをクリックした時登録チャンネルページに飛ばす document.querySelector(&quot;#logo&quot;).addEventListener(&quot;mousedown&quot;, function() { location.replace(&quot;https://www.youtube.com/feed/subscriptions/&quot;); }, false); もうちょっと利便性を求める方向け しばらく使っていると、高く評価した動画や履歴ページを使うことが多くなりました。なので、左メニューの探索・ショートのリンクを高く評価した動画・履歴に置き換えてます。 #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer[title=&quot;ホーム&quot;],#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer[title=&quot;探索&quot;],#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer[title=&quot;ショート&quot;]{ display : none; } #endpoint.ytd-mini-guide-entry-renderer[title=&quot;ホーム&quot;]{ display : none; } #endpoint.ytd-mini-guide-entry-renderer[title=&quot;探索&quot;] span{ font-size : 0; } #endpoint.ytd-mini-guide-entry-renderer[title=&quot;探索&quot;] span:before{ font-size : 1rem ; content:'高く評価した'; } #endpoint.ytd-mini-guide-entry-renderer[title=&quot;ショート&quot;] span{ font-size : 0; } #endpoint.ytd-mini-guide-entry-renderer[title=&quot;ショート&quot;] span:before{ font-size : 1rem ; content:'履歴'; } //youtube.comから登録チャンネルページにリダイレクト※1 var url = location.href; window.addEventListener('DOMContentLoaded', function() { if(url == &quot;https://www.youtube.com/&quot;) { if (window.name != &quot;xyz&quot;) { location.replace(&quot;https://www.youtube.com/feed/subscriptions/&quot;); window.name = &quot;xyz&quot;; } } }); //youtubeロゴをクリックした時登録チャンネルページに飛ばす document.querySelector(&quot;#logo&quot;).addEventListener(&quot;mousedown&quot;, function() { location.replace(&quot;https://www.youtube.com/feed/subscriptions/&quot;); }, false); //mini探索→高く評価した動画 window.addEventListener('load',function(){ setTimeout (function(){ document.getElementsByTagName(&quot;ytd-mini-guide-entry-renderer&quot;)[1].addEventListener(&quot;mousedown&quot;, function() { location.replace(&quot;https://www.youtube.com/playlist?list=LL&quot;); }, false); },2000); }, false); window.addEventListener('focus',function(){ setTimeout (function(){ document.getElementsByTagName(&quot;ytd-mini-guide-entry-renderer&quot;)[1].addEventListener(&quot;mousedown&quot;, function() { location.replace(&quot;https://www.youtube.com/playlist?list=LL&quot;); }, false); },2000); }, false); //miniショート→履歴 window.addEventListener('load',function(){ setTimeout (function(){ document.getElementsByTagName(&quot;ytd-mini-guide-entry-renderer&quot;)[2].addEventListener(&quot;mousedown&quot;, function() { location.replace(&quot;https://www.youtube.com/feed/history&quot;); }, false); },2000); }, false); window.addEventListener('focus',function(){ setTimeout (function(){ document.getElementsByTagName(&quot;ytd-mini-guide-entry-renderer&quot;)[2].addEventListener(&quot;mousedown&quot;, function() { location.replace(&quot;https://www.youtube.com/feed/history&quot;); }, false); },2000); }, false); ※1 リダイレクトする際無限ループしてしまう問題を、OpenSpace様の1回だけリロードさせるを丸パクリして解決しました。本当にありがとうございます！ 探索から高く評価した動画へ飛ばすJSが意味不明なことになっている経緯についてはこちらを御覧くださいませ…… https://scrapbox.io/road2noma/.addEventListener('load'_%E3%81%A7%E3%81%AF%E6%97%A9%E3%81%99%E3%81%8E%E3%82%8B きっとおそらく絶対もっと美しい解決策があるはずなのでもうちょっと考えてみます。 色々ある。問題点 JS歴3日の浅い知識でゴリ押ししているので問題点がたくさんあります。その中で大きなものが2つ。 一つは探索・ショートのクリックしたとき、高く評価した動画・履歴へ飛ばす動作がうまく行かないとこがある点。これはやり方がゴリ押しなので仕方ないです。 もう一つが致命的で、youtube.comに訪れた際、登録チャンネル欄にリダイレクトするのですが、リダイレクトしてほしくない場面でもお構いなく飛ばされます。 例を上げればきりないですが、動画への直リンクにも反応しますし、チャンネルページもダメ。そしてなぜかプレミア公開のチャット欄の中に登録チャンネルが表示されるおもしろ現象まで起きます。 最初にURLを取得し、https://www.youtube.com/のときだけリダイレクトするようにしました。意外と簡単でしたね…… まとめ「とりあえずできた」 おすすめ動画に生活を支配されないという目的でいえば一応の達成と言えましょう。 ただ方法もコードも美しいものではないのが悔しいところ… ホーム画面からおすすめ動画を消せるChrome拡張機能を開発されたプロの方がいらっしゃいましたら教えて下さい！頑張って布教します！

登録チャンネル欄にしかいけないYouTubeを作り出す。