ADブロックツールの試作
最近の YouTubeのAD強制の傾向には、またかと思ってしまいますが、学習がてらにささやかなブロックツールを試作しました。 ネット上には沢山のADブロックツールが公開されていて、有名なツールは高度な技術で制作されていますが、自分で作って見ると、その技術の一端を垣間見る事が出来て無駄ではないと感じます。
今回制作したツール「YT AD-Mute」は、非常にシンプルなコードです。 しかし、これを纏めるのにかなり色々なコードを試し、効能をチェックしました。 その過程で、以下の様な事で躓きました。
◎「動画プレーヤー」や「video要素」を削除すると、ブロックが働いた後は、動画の非表示の状態から戻れない。(黒画面)
◎ ADの動画データを削除する事でブロックが出来るが、補う様に何度もADデータが読み込まれ、却って通常の表示に戻るまでに時間がかかる。
◎ 2-3件のADが続けて表示される場合が多く、動画データの削除では、1件目のADが流れてしまう。 その後の2件目以降は非表示になるが。
◎ 動画データを削除せずに、ADの表示速度を上げて早く終わらせる方が、通常表示に復帰する時間が短かくできる。
高度なブロックツールは、この様なベタな手法を使わないので、さすがに全くADの存在を感じさせません。 ADに関わる通信部分をブロックしている様です。
「YT AD-Mute」の仕様
「YT AD-Mute」は、「Tampermonkey」に登録して常時「ON」にしておくと、YouTube動画が表示されると自動的に機能します。(常駐型ツール)
通常動画にAD動画がインポーズされると、それを感知してブロック動作をします。
▪ ブロックは、16倍速でAD動画を早送りしますが、通常のADは2~3sec程度で通常の動画に復帰します。 ただし、中には長いAD動画があり、その場合は復帰まで時間が必要です。
▪ 復帰するまで「黒画面」で「無音」になりますが、ブロック中を示すために画面の左上に小さな「🟢」マークを表示します。
「ブロック返し」の影響を受けない
「YT AD-Mute」は試作ツールで、人気のあるADブロック拡張機能のスマートなブロック動作には、とても及びません。
ただし、現在のブロック拡張機能は、サイトを開いた最初に「OFF」にリセットされる(ブロック返し)場合が多いです。 その点、このツールは影響されず便利です。
▪「YT AD-Mute」はとてもシンプルなので、他のブロックツールと一緒に使用しても問題は無いと思います。
「YT AD-Mute」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 YT AD-Mute 〕 ver. 0.1
// ==UserScript== // @name YT AD-Mute // @namespace http://tampermonkey.net/ // @version 0.1 // @description YouTubeのADを非表示ミュートする // @author everyone // @match https://www.youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // @grant none // ==/UserScript== let disp= '<div class="adled">🟢</div>'+ '<style>.adled { position: fixed; top: 21px; left: 6px; z-index: 3000; '+ 'font-size: 10px; opacity: 0; }</style>'; document.body.insertAdjacentHTML('beforeend', disp); function check(){ let adled=document.querySelector('.adled'); if(adled){ adled.style.opacity='1'; setTimeout(()=>{ adled.style.opacity='0'; }, 2000); }} let target=document.querySelector('head'); let monitor=new MutationObserver(main); monitor.observe(target, { childList: true }); main(); function main(){ let container=document.querySelector('.video-ads'); if(container){ container.remove(); } let player=document.querySelector('#movie_player'); let monitorp=new MutationObserver(main_p); monitorp.observe(player, { attributes: true, attributeFilter: ['class'] }); main_p(); function main_p(){ if(player.classList.contains('ad-showing')){ check(); player.style.zIndex='-1'; let video=player.querySelector('.video-stream'); if(video){ video.playbackRate=16; video.volume=0; }} else{ player.style.zIndex='0'; }} } // main()
「YT AD-Mute」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「YT AD-Mute」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。