再生環境によって「補助ミュート」が使えない
私のプログラム制作は、「おそらく平均的な能力」のPC上で行っています。 一方、現在では陳旧化したサブPC(Win7時代のPCをWin10にアップグレード)でテストをすると、動画や通信の能力が劣るため想定外の問題が露呈しました。
問題が生じるのは「タイミング処理」の部分です。 PCの環境によっては想定したタイミングが通用しないため、目的の動作が得られないのです。 特に「 AmbTV OnAir」は「タイミング処理」を多用するツールです。 通信環境やPCの処理能力に左右される「タイミング処理」は少ない方が理想ですが、このツールでは仕方ありません。
下は標準的なマシンで、チャンネル変更を行った直後の様子です。 画像容量制限のため 4コマ/sec のキャプチャで、コマ落としに見えます。 しかし、スローモーションではなく、表示の時間はリアル進行です。
「●」はチャンネル変更ボタンを押した瞬間で、「▼」は動画タイトルが表示された瞬間です。 上の場合は、動画タイトルの表示まで「7sec」程度の時間を要しています。 これは標準的と思われる再生環境での一例ですが、私の旧いサブPCではもっと時間を要します。
この動画タイトルの表示の遅れは、チャンネル(動画の種類)によって異なり、ブラウザのキャシュの影響もあり、とにかくバラバラな遅れが観測されます。 時間に余裕がある方は、実際にチャンネルを切換えて、この遅れを確かめてみてください。
「ミュート」のトリガー使用は困難
「動画タイトル」の有無で「動画コンテンツ」と「CM」を判別できるのですが、何秒も待たないと表示されないので、「ミュート」のトリガーとしては不適です。 当初はその利用を諦め、「ABEMA」ロゴの表示をトリガーにしていました。
しかし、イレギュラーに「ABEMA」ロゴを表示しないCM移行が増え、対応策で「動画タイトル」の有無をトリガーとする「補助ミュート」機能を追加しました。
苦しい条件を工夫をして「補助ミュート」を実用化しましたが、「タイミング処理」が難点なのは認めざるを得ません。 この処理を制作したメインマシン上では、一応使えるのですが、サブマシンでは酷い結果になる事が判りました。
◎ 処理の遅いPCでは、チャンネル変更後に全ての画面にミュートが適用される。
チャンネル移動時に動画タイトルが遅れて表示される問題は、上の画像の通りですが、動画タイトルが表示されるまでの間は「補助ミュート」がCMと判断してミュートを適用します。 これはチャンネル移動を著しく邪魔するので、それを抑止するコードを実装していますが、遅いPCでは抑止が効かずに無法状態に陥ります。
遅いPC環境に対応する
無理をして、なんとか実用化した「補助ミュート」機能を壊してしまう改変は避ける事にしました。 遅いPC環境に対しては、弥縫策ですが「補助ミュート」機能を無効にするスイッチを作る事にしました。 これを無効にすれば、チャンネル操作を正常に戻せますが、イレギュラーなCM移行の場合には「ミュート」が機能しなくなります。 PCの能力と諦めるしかありませんが。
上は新しい「ミュート設定」のメニューで、最後に「補助ミュート」の「無効」のボタンを追加しました。
下は、「動画タイトルによるミュート」の実行部分です。
「 AmbTV OnAir」ver. 1.1 64行
関数「delay()」は、Cookieに登録した「補助ミュート」の発動タイミングの遅延時間を読み出します。「9sec」の値が Coookieに登録されていたら「補助ミュート」を無効にします。 それ以外の値の場合は「登録された時間」の遅延で「補助ミュート」を実行します。 このCookieの場合は数しか使えなかったので「9000」は合言葉の様なものです。
「補助ミュート」の「無効」指定の要領
「ミュート設定」の「補助ミュート」の項目は、少々判り難いものです。 以下の基準で「無効」を選択してください。
● チャンネルを変更すると、移動先のチャンネル画面に頻繁に「ミュート設定」が適用され、チャンネル変更が困難になる場合は「無効」を選択します。
▪ たまに上記の症状がある程度なら「無効」にする必要はありません。
「 AmbTV OnAir」の操作マニュアル
このツールは「 AmbTV Comfy」のサブツールで、両方を同時に併用できます。
「ミュート」機能の設定方法は、以下のページを参照ください。
「 AmbTV OnAir」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 AmbTV OnAir 〕 ver. 1.1
// ==UserScript== // @name AmbTV OnAir // @namespace http://tampermonkey.net/ // @version 1.1 // @description AbemaTV ユーティリティ // @author Ameba User // @match https://abema.tv/* // @icon https://www.google.com/s2/favicons?sz=64&domain=abema.tv // @grant none // ==/UserScript== let oa_mute; let oa_size; let oa_opac; let oa_delay; let m_filter; let target=document.querySelector('head > title'); let monitor0=new MutationObserver(tv_player_env); monitor0.observe(target, { childList: true }); tv_player_env(); function tv_player_env(){ let retry=0; let interval=setInterval(wait_target, 20); function wait_target(){ retry++; if(retry>100){ // リトライ制限 100回 2secまで clearInterval(interval); } let TP=document.querySelector('.com-tv-TVScreen__player'); if(TP){ clearInterval(interval); player_vol(TP); }} } // tv_player_env() function player_vol(TP){ m_filter=1; setTimeout(()=>{ m_filter=0; }, 400); let monitor1=new MutationObserver(con_vol); monitor1.observe( TP, { childList: true }); con_vol(); function con_vol(){ // ABEMAロゴによるミュート let LF=document.querySelector('.com-tv-LinearFooter__feed-super'); if(TP.querySelector('.com-tv-TVScreen__eyecatch')){ if(LF.textContent){ v_vol(1); }} else{ if(!LF.textContent){ v_vol(0); }}} let LF=document.querySelector('.com-tv-LinearFooter__feed-super'); let monitor2=new MutationObserver(con_vol2); monitor2.observe( LF, { childList: true }); function con_vol2(){ // 動画タイトルによるミュート if(LF.textContent){ v_vol(1); } else{ setTimeout(()=>{ if(m_filter==0){ setTimeout(()=>{ if(!TP.querySelector('.com-tv-TVScreen__eyecatch')){ if(delay()!=9000){ v_vol(0); } }}, delay() ); } }, 200); }} setTimeout(()=>{ let LCLI=document.querySelector('.com-tv-LinearChannelListItem--active a'); if(LCLI){ let monitor3=new MutationObserver(con_vol3); monitor3.observe( LCLI, { attributes: true }); con_vol3(); function con_vol3(){ v_vol(1); }} }, 200 ); setTimeout(()=>{ let side=document.querySelector('.com-tv-FeedSidePanel__close-button'); if(side){ side.click(); } }, 600); setTimeout(()=>{ let HM=document.querySelector('.com-m-HeaderMenu'); let SNc=document.querySelector('.c-application-SideNavigation--collapsed'); if(HM && !SNc){ HM.click(); } }, 700); check_cookie(); cm_setting(); } // player_vol(TP) function v_vol(n){ // 0: ミュート 1: 通常 oa_mute=get_cookie('oa_mute'); let button=document.querySelector('.com-playback-Volume__icon-button'); if(button){ let label=button.getAttribute('aria-label'); if(n==0 && label=='音声をオフにする'){ if(oa_mute==0){ button.click(); }} else if(n==1 && label=='音声をオンにする'){ button.click(); } setTimeout(()=>{ let label_=button.getAttribute('aria-label'); if(label_=='音声をオフにする'){ // 音声ON view(1); } else{ view(0); } }, 20); } // button } // v_vol() function view(n){ // 0: ミュート 1: 通常 oa_opac=get_cookie('oa_opac'); oa_size=get_cookie('oa_size'); let TVS=document.querySelector('.com-tv-TVScreen__player-container'); if(TVS){ if(n==0){ TVS.style.transition='opacity .5s, transform .5s'; if(oa_opac==0){ TVS.style.opacity='0.5'; } else if(oa_opac==1){ TVS.style.opacity='0'; } else{ TVS.style.opacity=''; } if(oa_size==0){ TVS.style.transform='scale(0.5)'; } else{ TVS.style.transform=''; }} else{ TVS.style.transition=''; TVS.style.opacity=''; TVS.style.transform=''; }} } // view() function delay(){ oa_delay=get_cookie('oa_delay'); return oa_delay; } function get_cookie(name){ let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name)); if(cookie_req){ if(cookie_req.split('=')[1]==null){ return 0; } else{ return cookie_req.split('=')[1]; }} if(!cookie_req){ return 0; }} function check_cookie(){ oa_mute=get_cookie('oa_mute'); if(oa_mute!=1){ oa_mute=0; } document.cookie='oa_mute='+oa_mute+'; path=/; Max-Age=2592000'; oa_size=get_cookie('oa_size'); if(oa_size!=1){ oa_size=0; } document.cookie='oa_size='+oa_size+'; path=/; Max-Age=2592000'; oa_opac=get_cookie('oa_opac'); if(oa_opac!=0 && oa_opac!=1 && oa_opac!=2){ oa_opac=0; } document.cookie='oa_opac='+oa_opac+'; path=/; Max-Age=2592000'; oa_delay=get_cookie('oa_delay'); if(oa_delay!=200 && oa_delay!=3200 && oa_delay!=8200 && oa_delay!=9000){ oa_delay=3200; } document.cookie='oa_delay='+oa_delay+'; path=/; Max-Age=2592000'; } // check_cookie() function cm_setting(){ let help_url="https://ameblo.jp/personwritep/entry-12856628930.html"; let help_SVG= '<svg class="oa_help" width="20" height="20" viewBox="0 0 150 150">'+ '<path fill="#fff" d="M66 13C56 15 47 18 39 24C-12 60 18 146 82 137C92 '+ '135 102 131 110 126C162 90 128 4 66 13M68 25C131 17 145 117 81 '+ '125C16 133 3 34 68 25M69 40C61 41 39 58 58 61C66 63 73 47 82 57C84 '+ '60 83 62 81 65C77 70 52 90 76 89C82 89 82 84 86 81C92 76 98 74 100 66'+ 'C105 48 84 37 69 40M70 94C58 99 66 118 78 112C90 107 82 89 70 94z">'+ '</path></svg>'; let TVS=document.querySelector('.com-tv-TVScreen__player-container'); if(TVS){ TVS.onclick=function(event){ if(event.ctrlKey){ let panel= '<div id="amboa">'+ '<div id="oa_head"> CMのミュート設定 '+ '<a href="'+ help_url +'" rel="noopener noreferrer" target="_blank">'+ help_SVG +'</a> '+ '<input type="button" id="oa_close" value="×"></div>'+ '<div class="oa_p">ミュート機能の有効 / 無効</div>'+ '<div> ミュート機能(音声): '+ '<input name="mute" type="radio" id="m0">有効 '+ '<input name="mute" type="radio" id="m1">無効'+ '</div>'+ '<div class="oa_p">ミュート時の画面の設定</div>'+ '<div> 画面サイズ: '+ '<input name="size" type="radio" id="s0">縮小 '+ '<input name="size" type="radio" id="s1">通常'+ '</div>'+ '<div> 画面の明度: '+ '<input name="opacity" type="radio" id="o0">0% '+ '<input name="opacity" type="radio" id="o1">50% '+ '<input name="opacity" type="radio" id="o2">100%'+ '</div>'+ '<div class="oa_p">ロゴ表示のないCM移行に補助ミュート適用</div>'+ '<div> 遅延: '+ '<input name="delay" type="radio" id="d0">0sec '+ '<input name="delay" type="radio" id="d1">3sec '+ '<input name="delay" type="radio" id="d2">8sec '+ '<input name="delay" type="radio" id="d3">無効'+ '</div>'+ '<div></div>'+ '<style>#amboa { position: fixed; top: 60px; left: calc(50% - 190px); '+ 'font: 16px/24px Meiryo; color: #000; padding: 16px 16px 8px; width: 380px; '+ 'border: 1px solid #aaa; border-radius: 6px; background: #fff; z-index: 100; } '+ '#oa_head { margin: 0 0 15px; padding: 5px 15px 3px; '+ 'font-weight: bold; color: #fff; background: #2196f3; text-align: center; } '+ '.oa_help { vertical-align: -5px; } '+ '#oa_close { padding: 0 2px; height: 20px; line-height: 16px; } '+ '.oa_p { padding: 2px 8px 0; margin: 8px 0 4px; border: 1px solid #aaa; '+ 'line-height: 22px; } '+ 'input[type="radio"]{ margin: 0 .2em; }'+ '</style>'+ '</div>'; if(!document.querySelector('#amboa')){ document.body.insertAdjacentHTML('beforeend', panel); } live_mute(); set_radio(); function set_radio(){ oa_mute=get_cookie('oa_mute'); let m0=document.querySelector('#m0'); let m1=document.querySelector('#m1'); if(oa_mute==0){ m0.checked=true; mute(0); } else{ oa_mute=1; m1.checked=true; mute(1); } document.cookie='oa_mute='+oa_mute+'; path=/; Max-Age=2592000'; m0.onchange=function(){ mute(0); document.cookie='oa_mute=0; path=/; Max-Age=2592000'; live_mute(); } m1.onchange=function(){ mute(1); document.cookie='oa_mute=1; path=/; Max-Age=2592000'; live_mute(); } oa_size=get_cookie('oa_size'); let s0=document.querySelector('#s0'); let s1=document.querySelector('#s1'); if(oa_size==0){ s0.checked=true; } else{ oa_size=1; s1.checked=true; } document.cookie='oa_size='+oa_size+'; path=/; Max-Age=2592000'; s0.onchange=function(){ document.cookie='oa_size=0; path=/; Max-Age=2592000'; live_mute(); } s1.onchange=function(){ document.cookie='oa_size=1; path=/; Max-Age=2592000'; live_mute(); } oa_opac=get_cookie('oa_opac'); let o0=document.querySelector('#o0'); let o1=document.querySelector('#o1'); let o2=document.querySelector('#o2'); if(oa_opac==0){ o1.checked=true; } else if(oa_opac==1){ o0.checked=true; } else{ oa_opac=2; o2.checked=true; } document.cookie='oa_opac='+oa_opac+'; path=/; Max-Age=2592000'; o0.onchange=function(){ document.cookie='oa_opac=1; path=/; Max-Age=2592000'; live_mute(); } o1.onchange=function(){ document.cookie='oa_opac=0; path=/; Max-Age=2592000'; live_mute(); } o2.onchange=function(){ document.cookie='oa_opac=2; path=/; Max-Age=2592000'; live_mute(); } oa_delay=get_cookie('oa_delay'); let d0=document.querySelector('#d0'); let d1=document.querySelector('#d1'); let d2=document.querySelector('#d2'); let d3=document.querySelector('#d3'); if(oa_delay==200){ d0.checked=true; } else if(oa_delay==3200){ d1.checked=true; } else if(oa_delay==8200){ d2.checked=true; } else if(oa_delay==9000){ d3.checked=true; } document.cookie='oa_delay='+oa_delay+'; path=/; Max-Age=2592000'; d0.onchange=function(){ document.cookie='oa_delay=200; path=/; Max-Age=2592000'; } d1.onchange=function(){ document.cookie='oa_delay=3200; path=/; Max-Age=2592000'; } d2.onchange=function(){ document.cookie='oa_delay=8200; path=/; Max-Age=2592000'; } d3.onchange=function(){ document.cookie='oa_delay=9000; path=/; Max-Age=2592000'; } function mute(n){ let s0=document.querySelector('#s0'); let s1=document.querySelector('#s1'); let o0=document.querySelector('#o0'); let o1=document.querySelector('#o1'); let o2=document.querySelector('#o2'); let d0=document.querySelector('#d0'); let d1=document.querySelector('#d1'); let d2=document.querySelector('#d2'); let d3=document.querySelector('#d3'); if(n==0){ s0.disabled=false; s1.disabled=false; o0.disabled=false; o1.disabled=false; o2.disabled=false; d0.disabled=false; d1.disabled=false; d2.disabled=false; d3.disabled=false; } else{ s0.disabled=true; s1.disabled=true; o0.disabled=true; o1.disabled=true; o2.disabled=true; d0.disabled=true; d1.disabled=true; d2.disabled=true; d3.disabled=true; }} } // set_radio() let amboa=document.querySelector('#amboa'); let oa_close=document.querySelector('#oa_close'); if(amboa && oa_close){ oa_close.onclick=function(event){ event.preventDefault(); amboa.remove(); }} }}} } // cm_setting() function live_mute(){ let LF=document.querySelector('.com-tv-LinearFooter__feed-super'); if(!LF.textContent){ setTimeout(()=>{ oa_mute=get_cookie('oa_mute'); v_vol(oa_mute); }, 200); }}
「AmbTV OnAir」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「AmbTV OnAir 」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。