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

「CMのミュート設定」を開くボタンを設置

「動画表示部分」を「Ctrl+左Click」する事で「設定パネル」を開き「CMのミュート設定」を変更できます。 しかし、液晶TVにPCの画像出力を表示して AbemaTVを閲覧していると、キーボードが無いために「設定パネル」が開く事が出来ません。

PCの前で操作していた時には気付かなかった事で、無線マウスだけで遠隔操作する場合は「Ctrl+」「Shift+」の操作が出来ないのです。（可能なマウスもありますが）

これは「設定パネル」を開くボタンを設置すれば、従来の「Ctrl+左Click」の操作と兼用できます。 これは簡単な追加なので、早速ボタンを設置しました。

TVチャンネル画面のヘッダー部に設置しました 

「TVチャンネル」の動画プレーヤーの画面は余裕があり、色々とボタンを設置する場所の候補がありますが、ヘッダー部の検索窓の左にボタンを設置しました。

「検索窓」の左側に「CM Mute」のスイッチがあります。

●「CM Mute」を「左Click」すると「設定パネル」が表示されます。

▪「CM Mute」を再度「左Click」して「設定パネル」を消す事ができます。

「 AmbTV OnAir」の操作マニュアル

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

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

AbemaTV TVチャンネルツール「 AmbTV OnAir」 操作マニュアル

「 AmbTV OnAir」を利用するには

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

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法

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

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

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

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

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

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

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

〔  AmbTV OnAir 〕 ver. 1.6

// ==UserScript==
// @name         AmbTV OnAir
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  AbemaTV ユーティリティ
// @author       Ameba User
// @match       https://abema.tv/*
// @icon          https://www.google.com/s2/favicons?sz=64&domain=abema.tv
// @noframes
// @grant        none
// ==/UserScript==


let oa_mute;
let oa_size;
let oa_opac;

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){
    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 });

    con_vol2();

    function con_vol2(){ // 動画タイトルによるミュート
        if(LF.textContent){
            v_vol(1); }
        else{
            setTimeout(()=>{
                ad_check();
            }, 200); }}


    function ad_check(){
        let cvs=
            '<canvas id="cvs" style="position: fixed; z-index: -1; visibility: hidden;">'+
            '</canvas>';
        if(!document.querySelector('#cvs')){
            document.body.insertAdjacentHTML('beforeend', cvs); }
        let canvas=document.querySelector('#cvs');


        let retry_s=0;
        let interval_s=setInterval(cv_check, 1000);
        function cv_check(){
            retry_s++
            if(retry_s>15){ // リトライ制限 15sec
                clearInterval(interval_s); }
            capture(canvas);


            function capture(canvas){
                let video=
                    document.querySelector('.com-a-Video__video video[src]');
                if(video){
                    canvas.width=1;
                    canvas.height=1;
                    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                    if(canvas.getContext('2d')){
                        let imageData=canvas.getContext('2d').getImageData(0, 0, 1, 1);
                        let data=imageData.data;

                        if(data[0]+data[1]+data[2]!=0){
                            v_vol(0);
                            retry_s=16; }}}} // capture()

        } // cv_check()

    } // ad_check()



    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);
                con_vol2(); }}
    }, 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();
    cm_setting_sw();

} // 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 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';

} // check_cookie()



function cm_setting(){
    let TVS=document.querySelector('.com-tv-TVScreen__player-container');
    if(TVS){
        TVS.onclick=function(event){
            if(event.ctrlKey){
                cm_pannel(); }
            else{
                let button=document.querySelector('.com-playback-Volume__icon-button');
                if(button){
                    let label=button.getAttribute('aria-label');
                    if(label=='音声をオフにする'){
                        v_vol(0); }
                    else{
                        v_vol(1); }}}}}

} // cm_setting()



function cm_pannel(){
    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 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>'+

        '<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(); }


        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_pannel()



function cm_setting_sw(){
    let header_right=document.querySelector('.com-application-Header__right');
    if(header_right){
        let sw=
            '<div class="cms_sw">CM Mute</div>'+
            '<style>'+
            '.com-application-Header__right { display: flex; flex-basis: 334px; } '+
            '.cms_sw { font: 14px Meiryo; align-self: center; cursor: pointer; '+
            'padding: 12px 6px 0; margin-right: 30px; height: 46px; white-space: nowrap; '+
            'color: #fff; border: 1px solid #333; border-radius: 4px; background: #212121; } '+
            '.cms_sw:hover { background: #373737; } '+
            '</style>';

        if(!header_right.querySelector('.cms_sw')){
            header_right.insertAdjacentHTML('afterbegin', sw); }

        let cms_sw=document.querySelector('.cms_sw');
        if(cms_sw){
            cms_sw.onclick=function(){
                let amboa=document.querySelector('#amboa');
                if(!amboa){
                    cm_pannel(); }
                else{
                    amboa.remove(); }}}}

} // cm_setting_sw()



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 」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

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