AbemaTV TVチャンネルツール「 AmbTV OnAir」（9）/ JavaScript

「ミュート」機能のトリガーコードの更新 

前ページの調査を受けて、「ミュート」機能のトリガーコードを更新しました。

「動画コンテンツ」⇄「CM」の切り換わり時に、「ABEMA」のロゴのアニメーションが画面の左上隅に表示されます。

この「ロゴ」は「ミュート」機能のメイントリガーですが、「ロゴ」の表示なしで「動画コンテンツ」➔「CM」方向に切り替わる場合が出て来ました。 これに対応するため「動画タイトル」の表示を「ミュート」のトリガーに追加しました。

実装上で問題になった事 

今回の対策コードは、チャンネル変更時に動作すると、移動先の通常の動画が「ミュート」される誤動作を生じました。 そこで、チャンネルを移動した最初の 400msecは、この対策コードが機能しない工夫をしました。

以下の太字が、今回に追加した「ミュート」処理のコードです。

「AmbTV OnAir」 ver.0.7   41行～

m_filter=1;
setTimeout(()=>{
    m_filter=0;
}, 400);

「m_filter」は、動画チャンネルを変更した最初の「400msec」だけ「1」の値になるコントロール用の変数で、「1」の場合は下の「ミュート」機能を無効にします。

「AmbTV OnAir」 ver.0.7   63行～

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')){
                        v_vol(0);
                    }}, 8200); }
        }, 200); }}

上のコードの「200」の遅延は、とても重要な設定です。 この遅延が無いと、チャンネルを何回か切換えていると、「m_filter」の抑止をすり抜けて「ミュート」が発動し始めます。

これは「con_vol2()」を「MutationObserver」で常駐しているためと思われます。 チャンネル切換え後にプレーヤがセットされ「m_filter=1」が設定されるより先に、「con_vol2()」が動作する様です。「200」の遅延を指定すると、この過剰反応を抑止できました。

 「ミュート」までの遅延の設定について

「動画タイトル」をトリガーにした「ミュート」は、「ロゴ」表示なしで「CM」へ移動した場合の対策です。 前ページで書きましたが、「消失」と同時に「ミュート」を適用すると「動画コンテンツ」が再生中に「ミュート」に入ってしまいます。 これを救う目的で遅延を設けると、今度は「CM」の「ミュート」が遅れます。

実際にコードを実装してテストしたのですが、遅延「3sec」の設定では「CM」に切り替わる前の動画末尾がカットされる場合がありました。「動画コンテンツ」のカットはやはり残念です。 それは「CM」の一部が流れてしまう事より、避けるべき事だと判断しました。

そこで、前ページで計測した最大の「8sec」を遅延時間に設定しました。 現在までのテストでは、これで「動画コンテンツ」がカットされる事はなさそうです。 これは、実使用で更に調整するかも知れません。

「 AmbTV OnAir」

このツールは「 AmbTV Comfy」のサブツールで、両方を同時に併用できます。

「ミュート」機能の設定方法は、以下のページを参照ください。

AbemaTV TVチャンネルツール「 AmbTV OnAir」（5）/ JavaScript

「 AmbTV OnAir」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔  AmbTV OnAir 〕 ver. 0.7

// ==UserScript==
// @name         AmbTV OnAir
// @namespace    http://tampermonkey.net/
// @version      0.7
// @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 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')){
                            v_vol(0);
                        }}, 8200); }
            }, 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);


        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='all .5s';
                    if(oa_opac==0){
                        TVS.style.opacity='0.5'; }
                    else if(oa_opac==1){
                        TVS.style.opacity='0'; }
                    else{
                        TVS.style.opacity='1'; }
                    if(oa_size==0){
                        TVS.style.transform='scale(0.5)'; }
                    else{
                        TVS.style.transform='scale(1)'; }}
                else{
                    TVS.style.transition='';
                    TVS.style.opacity='1';
                    TVS.style.transform='scale(1)'; }}}

    } // button
} // v_vol()



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+'; Max-Age=2592000';

    oa_size=get_cookie('oa_size');
    if(oa_size!=1){
        oa_size=0; }
    document.cookie='oa_size='+oa_size+'; 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+'; Max-Age=2592000';

} // check_cookie()



function cm_setting(){
    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">コマーシャルの表示設定　'+
                    '<input type="button" id="oa_close" value="×"></div>'+
                    '<div>　音声：'+
                    '<input name="mute" type="radio" id="m0">ミュート　'+
                    '<input name="mute" type="radio" id="m1">通常'+
                    '</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></div>'+
                    '<style>#amboa { position: fixed; z-index: 100; top: 60px; left: 40%; '+
                    'font: 16px/24px Meiryo; color: #000; padding: 8px 10px 6px; '+
                    'border: 1px solid #aaa; border-radius: 6px; background: #fff; } '+
                    '#oa_head { margin: 0 0 10px; padding: 5px 8px 3px 15px; '+
                    'font-weight: bold; color: #fff; background: #2196f3; text-align: center; } '+
                    '#oa_close { padding: 0 2px; height: 20px; line-height: 16px; } '+
                    'input[type="radio"]{ margin: 0 .2em; }'+
                    '</style>'+
                    '</div>';
                if(!document.querySelector('#amboa')){
                    document.body.insertAdjacentHTML('beforeend', panel); }

                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+'; Max-Age=2592000';

                    m0.onchange=function(){
                        mute(0);
                        document.cookie='oa_mute=0; Max-Age=2592000'; }

                    m1.onchange=function(){
                        mute(1);
                        document.cookie='oa_mute=1; Max-Age=2592000'; }


                    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+'; Max-Age=2592000';

                    s0.onchange=function(){
                        document.cookie='oa_size=0; Max-Age=2592000'; }

                    s1.onchange=function(){
                        document.cookie='oa_size=1; Max-Age=2592000'; }


                    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+'; Max-Age=2592000';

                    o0.onchange=function(){
                        document.cookie='oa_opac=1; Max-Age=2592000'; }

                    o1.onchange=function(){
                        document.cookie='oa_opac=0; Max-Age=2592000'; }

                    o2.onchange=function(){
                        document.cookie='oa_opac=2; 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');
                        if(n==0){
                            s0.disabled=false;
                            s1.disabled=false;
                            o0.disabled=false;
                            o1.disabled=false;
                            o2.disabled=false; }
                        else{
                            s0.disabled=true;
                            s1.disabled=true;
                            o0.disabled=true;
                            o1.disabled=true;
                            o2.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()

「AmbTV OnAir」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「AmbTV OnAir 」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）