自動「ミュート」を強化する

以下のページの「動画サムネイル」から連続して「配信リスト」を開いていた所、何回か「ミュート」に失敗しました。

 

 

データがキャッシュされると、同じ「動画サムネイル」では問題が再現しい傾向がある様です。 最近のバージョンでは「ミュート」が破れる事が無かったのですが、原因は「配信リスト」の件数が「28件」と多い事が関係している様に思えます。 

 

この様な問題は、PC性能や環境、通信状態に影響され、同じ装置でも生じたり生じなかったりするのではないかと思われ、とにかくより強力な「ミュート」用のコードを考えるしかありません。

 

ここで言う「ミュート」は、動画の「音声」が出ない様にする事が最優先ですが、出来るなら動画の「再生停止」もしたい所です。 おそらく「再生停止」(ポーズを押した状態)にできれば、動画のローディングが止まり、ブラウザのリソースも稼げると思います。「配信リスト」のみが必要で、表示しない「動画」にリソースを費やすのは、出来るだけ避けたいのです.

 

 

 ミュートのトリガーを変更

これまでは、生成した「配信リスト」の「iframe」に、生成と同時にその「body」要素に「if_movie」のクラス名を付ける標識方法を使っていました。

 

この方式を改め、「iframe」を開く時の「src」に、クエリ文字「?atv」を追加する標識方法2にしました。

 

 

後者は「iframe」生成コードにクエリ文字を追加するだけで可能で、「body要素」を取得して操作する手間が無く、確実で素早い動作になります。

 

「iframe」内であるかどうかは、以下の1行のコードで判定できます。

 

 if(window.location.search=='?atv'){ … }

 

他にも「iframe」内で動作するプログラムが、自身の動作場所を判定する方法はありますが、これはなかなか良さそうです。

 

「動画プレーヤー」が読み込まれた際にこの判定を行い、もし「iframe」内なら「ミュート」を行うという操作を行います。

 

ver. 1.6  38行

function set_player(player){
    quiet();
    ~ 以降は 動画プレーヤーに対するアレンジコード ~

 

この関数「quiet()」は以下の部分にあります。

 

ver. 1.6  119行

function quiet(){
    if(window.location.search=='?atv'){
        let retry=0;
        let interval=setInterval(wait, 40);
        function wait(){
            mu();
            retry++;
            if(retry>50){ // リトライ制限 2secまで
                clearInterval(interval); }}

        function mu(){
            let video_el=document.querySelector('video');
            if(video_el){
                video_el.muted=true;
                video_el.addEventListener('timeupdate', function(){
                    video_el.pause(); }); }}
    }} // quiet()

 

関数「quiet()」は力技です。「setInterval()」で 関数「mu()」を「40msec」ごとに「50回」実行します。(2secの間、繰り返し実行)「mu」は音声ミュートと動画プレーヤーの一旦停止(ポーズ)をする関数です。 これは、JavaScriptの動画プレーヤー制御機能を使っています。

 

この関数で「AbemaTV」をミュートすると、ミュートボタンを押さずに「動画プレーヤー」に直に消音が実行されます。 ボタンはミュートで無い表示のままです。 実際はボタンが見えないので問題ありません。

 

「40msec(0.04sec)」はテストして設定した値です。「100msec(0.1sec)」の間隔では一瞬音が出ます。 ポーズのタイミングはミュートに相乗りした形です。

 

下は、「iframe」内の動画を上部に見える様にして、この「quiet()」の動作を確認している所です。 下の動画の場合、実際は1コマ表示された後、ローディングマークが周り続ける状態で停止しています。 背景は黒になっていますが、白になる場合や、2コマ目が表示されて停止する場合があります。 私の環境では、3コマ目が表示される事はありません。

 

 

これまでで一番確実に動画の停止が出来る様です。 色々な「動画サムネイル」でこの「ミュート機能」をテストしましたが、ほぼ確実に動作します。

 

唯一の例外はドラマの「トリック」で、他と異なる反応を示します。 このコンテンツだけは特別で何か理由がありそうです。 試すと判りますが「quiet()」が50回の停止コードを実行し、20秒程度はローディングマークが回り続けます。 他の動画は永久にそのままですが、「トリック」だけはその後に動画が再び読み込まれ、何もなかった様に再生が始まります。 これは上のテスト環境で判る事ですが、通常は「動画プレーヤー」は非表示で、この動画の「配信リスト」だけが20秒経って音が出だすという事になります。「AmbTV Comfy」を使う上で、こういったコンテンツが稀にあり得るという事です。

 

 

 

 「AmbTV Comfy」のマニュアル

「AmbTV Comfy」の操作に関しては、以下のマニュアルを参照ください。

 

 

 

 

「AmbTV Comfy」を利用するには

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

 

❶「Tampermonkey」を導入します

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

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

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

 

 

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

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

 

 

 

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

 

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

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

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

 

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

 

 

〔 AmbTV Comfy 〕 ver. 1.6

 

// ==UserScript==
// @name         AmbTV Comfy
// @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
// @grant        none
// ==/UserScript==


let help_url='https://ameblo.jp/personwritep/entry-12800867556.html'


main();

let target=document.querySelector('head > title');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });


function main(){

    let retry=0;
    let interval=setInterval(wait_target, 20);
    function wait_target(){
        retry++;
        if(retry>100){ // リトライ制限 100回 2secまで
            clearInterval(interval); }
        let player=document.querySelector(
            '.com-vod-VODRecommendedContentsContainerView__player');
        if(player){
            clearInterval(interval);
            set_player(player); }}


    function set_player(player){
        quiet();

        let style=
            '<style class="atv_style">'+
            '.c-common-HeaderContainer-header, '+
            '.c-application-SideNavigation, '+
            '.c-application-SideNavigation--collapsed, '+
            '.com-vod-VODRecommendedContentsContainerView'+
            '__player-aside-recommended { display: none !important; } '+
            '.c-video-EpisodeContainerView-breadcrumb, '+
            '.com-vod-VODRecommendedContentsContainerView__details, '+
            '.com-vod-VODRecommendedContentsContainerView__episode-list, '+
            '.com-feature-area-FeatureRecommendedArea__section, '+
            '.c-video-EpisodeContainerView__page-bottom, '+
            '.c-application-FooterContainer '+
            '{ display: none; } '+
            '.c-application-DesktopAppContainer__content-container { '+
            'align-items: center; height: 100vh; } '+
            '.c-application-DesktopAppContainer__content { '+
            'min-width: 400px !important; } '+
            '.com-vod-VODResponsiveMainContent { '+
            'margin: 0 !important; padding: 0 !important; '+
            ' --com-vod-VODResponsiveMainContent--content-min-width: 500 !important; }'+
            '.com-vod-VODRecommendedContentsContainerView__player-and-details '+
            '{ margin-right: 0 !important; } '+
            '.com-vod-VODRecommendedContentsContainerView__player '+
            '{ margin: 0 6px !important; } '+
            '.com-vod-VODMiniPlayerWrapper:before { display: none !important; } '+
            '.com-vod-VODMiniPlayerWrapper__player--bg { display: none !important; } '+
            '.com-vod-VODMiniPlayerWrapper__player { position: relative !important; } '+
            '.c-vod-EpisodePlayerContainer-inlined:before { display: none !important; } '+
            '.c-vod-EpisodePlayerContainer-wrapper { '+
            'position: relative !important; height: calc(100vh - 12px) !important; } '+
            '.com-vod-VODMiniPlayerWrapper__player--mini { height: 0 !important; } '+
            '.com-vod-FullscreenInBrowserButton__screen-controller { '+
            'display: none !important; } '+
            '</style>'+
            '<style class="atv_style_ex">'+
            '.com-vod-VODScreen__player { '+
            'height: 99% !important; width: 132% !important; margin-left: -16%; }'+
            '</style>'+
            '<style class="atv_style_basic">'+
            '.com-vod-VODScreen-container { background: #000 !important; }'+
            '.com-playback-SeekBar__highlighter, .com-playback-SeekBar__marker, '+
            '.com-a-Slider__highlighter { background-color: #2196f3 !important; }'+
            '</style>';

        if(!player.querySelector('.atv_style')){
            player.insertAdjacentHTML('beforeend', style);

            let atv_style=player.querySelector('.atv_style');
            if(atv_style){
                atv_style.disabled=true; }

            let atv_style_ex=player.querySelector('.atv_style_ex');
            if(atv_style_ex){
                atv_style_ex.disabled=true; }}


        let wrap=player.querySelector('.c-vod-EpisodePlayerContainer-wrapper');
        if(wrap){
            let monitor1=new MutationObserver(play);
            monitor1.observe(wrap, { childList: true }); }

        setTimeout(()=>{
            let wrap_tv=player.querySelector('.c-tv-TimeshiftPlayerContainerView');
            if(wrap_tv){
                let monitor2=new MutationObserver(play);
                monitor2.observe(wrap_tv, { childList: true }); }
        }, 1000);


        setTimeout(()=>{
            let ec_thumbnail=
                document.querySelector('.c-vod-EpisodePlayerContainer-thumbnail');
            if(ec_thumbnail){
                reset_subw(); } // プレミアムAD表示時に「サブウインドウ表示」をリセット
        }, 200);


        function quiet(){
            if(window.location.search=='?atv'){
                let retry=0;
                let interval=setInterval(wait, 40);
                function wait(){
                    mu();
                    retry++;
                    if(retry>50){ // リトライ制限 2secまで
                        clearInterval(interval); }}

                function mu(){
                    let video_el=document.querySelector('video');
                    if(video_el){
                        video_el.muted=true;
                        video_el.addEventListener('timeupdate', function(){
                            video_el.pause(); }); }}
            }} // quiet()

    } // set_player()



    function play(){
        let nav_b=document.querySelector(
            '.com-vod-VideoControlBar__playback-rate');

        if(nav_b){
            let help=
                '<a class="atv_help" href="'+ help_url +'" target="_blank">'+
                '<svg width="20" height="24" viewBox="0 -20 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>'+
                '<style>.atv_help { margin: 0 16px; text-decoration: none; cursor: pointer; '+
                'display: none; }</style></a>';

            if(!document.querySelector('.atv_help')){
                nav_b.insertAdjacentHTML('beforebegin', help); }

            let sw=
                '<button type="button" class="atv_sw com-vod-FullscreenButton">'+
                '<div class="com-vod-FullscreenButton__tooltip">'+
                '<div class="atv_tp com-a-Tooltip com-a-Tooltip--arrow-position-center">'+
                '</div></div>'+
                '<span class="atv_icon">🔳</span></button>'+
                '<style>.atv_icon { padding: 0 0 2px; filter: drop-shadow(2px 2px 0 #fff); } '+
                ':fullscreen .atv_sw { display: none; }</style>';

            if(!document.querySelector('.atv_sw')){
                nav_b.insertAdjacentHTML('afterend', sw); }

            let atv_sw=document.querySelector('.atv_sw');
            let atv_style=document.querySelector('.atv_style');
            let atv_tp=document.querySelector('.atv_tp');
            let atv_help=document.querySelector('.atv_help');
            if(atv_sw && atv_style && atv_tp && atv_help){
                if(atv_style.disabled==false){
                    atv_tp.textContent='デフォルト表示';
                    atv_help.style.display='inline'; }
                else{
                    atv_tp.textContent='サブウインドウ表示';
                    atv_help.style.display='none'; }

                atv_sw.onclick=function(e){
                    e.preventDefault();
                    if(atv_style.disabled==false){
                        atv_style.disabled=true;
                        atv_tp.textContent='サブウインドウ表示';
                        atv_help.style.display='none'; }
                    else{
                        atv_style.disabled=false;
                        atv_tp.textContent='デフォルト表示';
                        atv_help.style.display='inline'; }}}}

        ex_view();

    } // play()



    function reset_subw(){
        let atv_style=document.querySelector('.atv_style');
        if(atv_style){
            if(atv_style.disabled==false){
                atv_style.disabled=true; }}}


    function ex_view(){
        let full=document.querySelector('.com-vod-FullscreenButton__icon');
        let atv_style_ex=document.querySelector('.atv_style_ex');
        if(full && atv_style_ex){
            full.onclick=(event)=>{
                if(event.ctrlKey){
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    if(atv_style_ex.disabled==true){
                        atv_style_ex.disabled=false;
                        full.style.color='red'; }
                    else{
                        atv_style_ex.disabled=true;
                        full.style.color='#fff';}
                }}}}

} // main()




catch_click();

function catch_click(){ // 動画のサムネイルの「暗転拡大表示」と「配信リスト表示」
    let html_=document.documentElement;

    box_env();

    document.addEventListener('contextmenu', function(event){
        if(!event.shiftKey && !event.ctrlKey){
            event.preventDefault();
            let elem=document.elementFromPoint(event.clientX, event.clientY);
            let link_elem=elem.closest('a');

            if(link_elem){
                set_link(link_elem);
                set_img(link_elem);
                close(); }}});


    document.addEventListener('click', function(event){
        if(event.ctrlKey){
            event.preventDefault(); }});


    document.addEventListener('mouseup', function(event){
        let elem=document.elementFromPoint(event.clientX, event.clientY);
        let link_elem=elem.closest('a');
        if(link_elem){
            if(event.ctrlKey){
                if(window.location.search!='?atv'){
                    set_if(link_elem); }}
            else{
                setTimeout(()=>{
                    if_close(); }, 1000); }}});


    function box_env(){
        let mov_SVG=
            '<svg width="26" height="32" viewBox="0 3 83 83" '+
            'style="vertical-align: -9px">'+
            '<path style="fill: #008eff;" d="M18 49C12 43 9 41 1 41L'+
            '1 73C9 73 12 71 18 65L18 79L72 79L72 54C72 50 71 45 72 41C73'+
            ' 38 76 37 77 35C80 32 82 27 82 23C81 13 73 5 63 6C48 8 40 30'+
            ' 55 37C49 39 42 38 35 38C38 36 40 33 41 30C49 10 19 -3 10 16'+
            'C9 18 8 21 8 23C8 31 13 33 17 39C19 42 18 46 18 49z"></path>'+
            '</svg>';

        let lightbox=
            '<div id="lightbox">'+
            '<div id="photo_sw"><a id="photo_link">'+ mov_SVG +' Movie Page</a></div>'+
            '<img id="box_img">'+
            '<style>'+
            '@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}} '+
            '.fin { animation: fadeIn .5s ease 0s 1 normal; animation-fill-mode: both; } '+
            '@keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0}} '+
            '.fout { animation: fadeOut .2s ease 0s 1 normal; animation-fill-mode: both; } '+
            '#lightbox { position: fixed; top: 0; left: 0; z-index: 3000; visibility: hidden; '+
            'background: black; width: 100vw; height: 100vh; text-align: center; } '+
            '#photo_sw { position: absolute; width: 100%; height: 15%; } '+
            '#photo_sw:hover #photo_link { opacity: 1; } '+
            '#photo_link { font: bold 21px Meiryo; position: absolute; top: 20px; left: 30px; '+
            'padding: 4px 12px 3px 10px; color: #000; background: #fff; cursor: pointer; '+
            'border: 2px solid #000; border-radius: 6px; text-decoration: none; opacity: 0; } '+
            '#box_img { width: 100vw; height: 100vh; padding: 2vh 2vw; '+
            'object-fit: contain; } '+
            '.com-home-ChannelCardLinksPanel { '+
            'grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); } '+
            '.com-home-ChannelCardLink__play, '+
            '.com-home-ChannelListReorderButton { font-size: 20px; } '+
            '</style></div>';

        if(!document.querySelector('#lightbox')){
            document.body.insertAdjacentHTML('beforeend', lightbox); }}


    function set_link(target){
        let photo_link=document.querySelector('#photo_link');
        if(photo_link){
            let url=target.getAttribute('href');
            if(url){
                photo_link.setAttribute('href', url); }

            photo_link.onclick=function(event){
                event.stopImmediatePropagation(); }}}


    function set_img(target){
        let lightbox=document.querySelector('#lightbox');
        let box_img=lightbox.querySelector('#box_img');
        let img=target.querySelector('img');
        if(lightbox && box_img && img){
            let img_url=img.getAttribute('src').replace(/%3Fversion%.*$/,"");
            if(img_url){
                box_img.src=img_url;
                html_.style.overflow='hidden';
                lightbox.style.visibility='visible';
                lightbox.classList.remove('fout');
                lightbox.classList.add('fin'); }}}


    function close(){
        let html_=document.querySelector('html');
        let lightbox=document.querySelector('#lightbox');
        let box_img=lightbox.querySelector('#box_img');
        if(lightbox){
            lightbox.onclick=function(event){
                event.preventDefault();
                html_.style.overflow='inherit';
                lightbox.classList.remove('fin');
                lightbox.classList.add('fout');
                setTimeout(()=>{
                    lightbox.style.visibility='hidden';
                    box_img.src='';
                }, 200); }}}



    function set_if(target){
        outline_off();
        let Card=target.closest('.com-feature-area-CardItem');
        if(Card){
            if(!Card.closest('.c-home-HomeContainerView-TvAreaContainer')){
                Card.style.outline='2px solid #fff'; }}

        let Ranking=target.closest('.com-feature-area-FeatureRankingItem');
        if(Ranking){
            Ranking.style.outline='2px solid #fff'; }


        let url=target.getAttribute('href');

        if(url.includes('/video/episode/') || url.includes('/video/title/') ||
           url.includes('/channels/') || url.includes('/live-event/')){

            let help_SVG=
                '<svg class="atv_help" width="20"  height="30" viewBox="0 -35 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 home_SVG=
                '<svg  width="30" height="30" viewBox="0 -5 83 83" '+
                'style="vertical-align: -5px">'+
                '<path style="fill: #fff" d="M31 52L53 52L53 66L53 6'+
                '8L53 70L53.3 72L53.7 72.9L55.1 74.3L56 74.7L57 74.9L58 75L60'+
                ' 75L64 75L66 75L67 75L68 75L70 74.9L71.9 74.3L73.3 72.9L73.7'+
                ' 72L73.9 71L74 69L74 67L74 63L74 43L74 40L74 38L73.9 36L73.3'+
                ' 34L71.9 32.1L71 31.2L69 29.6L67 28.1L65 26.6L64 25.9L63 25.'+
                '1L61 23.6L60 22.8L58 21.2L57 20.4L55 18.9L54 18.1L53 17.4L52'+
                ' 16.6L51 15.9L50 15.1L48 13.7L46 12.4L44 11.5L43 11.3L42 11.'+
                '2L41 11.3L40 11.5L38 12.4L36 13.7L34 15.1L33 15.9L32 16.6L31'+
                ' 17.4L29 18.9L28 19.6L27 20.4L26 21.1L25 21.9L23 23.4L22 24.'+
                '2L20 25.8L19 26.6L17 28.1L16 28.9L15 29.6L13 31.2L12.1 32.1L'+
                '10.7 34L10.1 36L10 38L10 39L10 41L10 56L10 64L10 67L10 68L10'+
                ' 69L10.1 71L10.7 72.9L11.3 73.7L12.1 74.3L13 74.7L15 75L17 7'+
                '5L20 75L23 75L25 75L27 74.9L28 74.7L28.9 74.3L29.7 73.7L30.3'+
                ' 72.9L30.9 71L31 69L31 68L31 66L31 63L31 52z"></path>'+
                '</svg>';

            let mov_SVG=
                '<svg width="26" height="30" viewBox="0 -5 83 83" '+
                'style="vertical-align: -5px">'+
                '<path style="fill: #fff" d="M18 49C12 43 9 41 1 41L'+
                '1 73C9 73 12 71 18 65L18 79L72 79L72 54C72 50 71 45 72 41C73'+
                ' 38 76 37 77 35C80 32 82 27 82 23C81 13 73 5 63 6C48 8 40 30'+
                ' 55 37C49 39 42 38 35 38C38 36 40 33 41 30C49 10 19 -3 10 16'+
                'C9 18 8 21 8 23C8 31 13 33 17 39C19 42 18 46 18 49z"></path>'+
                '</svg>';

            let cross_SVG=
                '<svg width="24" height="30" viewBox="0 0 83 83" '+
                'style="vertical-align: -5px">'+
                '<path style="fill: #fff" d="M30 43C25.7 47.3 21.3 5'+
                '1.6 17 56C14.8 58.2 12.1 60.8 11.5 64C10.7 69.2 16.9 74.8 22'+
                ' 73.2C29 71 36.9 60.8 41 55C45.3 59.3 49.6 63.7 54 68C56.2 7'+
                '0.2 58.8 72.9 62 73.5C67.2 74.3 72.8 68.1 71.2 63C69 56 58.8'+
                ' 48.1 53 44C57.3 39.7 61.7 35.4 66 31C68.2 28.8 70.9 26.2 71'+
                '.5 23C72.3 17.8 66.1 12.2 61 13.8C54 16 46.1 26.2 42 32C37.7'+
                ' 27.7 33.4 23.3 29 19C26.8 16.8 24.2 14.1 21 13.5C15.8 12.7 '+
                '10.2 18.9 11.8 24C14 31 24.2 38.9 30 43z"></path>'+
                '</svg>';

            let if_elem=
                '<div id="if_wrap">'+
                '<div id="if_cont">'+
                '<a class="if_help" href="'+ help_url +'" target="_blank">'+ help_SVG + '</a>'+
                '<a class="if_link" href="https://abema.tv/">'+ home_SVG +
                '<span class="t"> Abema Home</span></a>'+
                '<a class="mov_link">'+ mov_SVG +
                '<span class="t"> Movie Page</span></a>'+
                '<span class="if_close">'+ cross_SVG +'</span>'+
                '</div>'+
                '<iframe id="notify" scrolling="no" src="'+ url +'?atv"></iframe>'+
                '<style>#if_wrap { position: fixed; z-index: 20; top: 0; left: 0; width: 480px; '+
                'height: calc(100% - 22px); border: 2px solid #fff; background: #000; } '+
                '#if_cont { display: flex; justify-content: space-between; align-items: center; '+
                'color: #fff; height: 40px; padding: 0 20px; background: #a7b8c4; } '+
                '.if_help, .if_link, .mov_link, .if_close { text-decoration: none; cursor: pointer; } '+
                '.if_help { margin: 0 -10px; } '+
                '.t { font: 20px Meiryo; } '+
                '.if_close { padding: 2px 10px 0; margin: 0 -10px 0 -20px; } '+
                '#notify { padding: 0; width: 100%; height: calc(100% - 40px); } '+
                '.c-application-SideNavigation { width: 480px; }'+
                '</style></div>';

            if(document.querySelector('#if_wrap')){
                document.querySelector('#if_wrap').remove(); }
            document.body.insertAdjacentHTML('beforeend', if_elem); // iframe生成


            let notify=document.querySelector('#notify');
            notify.onload=()=>{
                let if_body=notify.contentWindow.document.body;
                if(if_body){
                    set_iframe(if_body); }}


            function set_iframe(if_body){
                let in_style=
                    '<style class="in_style">'+
                    '.com-content-list-ContentList, '+
                    '.com-vod-VODRecommendedContentsContainerView__player-and-details { '+
                    'position: fixed; top: 0; left: 0; z-index: 20; width: 476px; '+
                    'height: 100%; overflow-y: scroll; overflow-x: hidden; background: #000; } '+
                    '.com-vod-VODRecommendedContentsContainerView__player-and-details { '+
                    'top: 15px; margin-left: 8px; } '+
                    '.com-content-list-ContentListHeader__sort-button { margin: 0; } '+
                    '.com-content-list-ContentListSortButton__icon-wrapper { '+
                    'border: 1px solid #aaa; border-radius: 4px; } '+
                    '.com-content-list-ContentListSortButton__text { display: none; } '+
                    '.com-content-list-ContentListEpisodeItem, '+
                    '.com-content-list-ContentListLiveEventItem, '+
                    '.com-content-list-ContentListSlotItem { overflow: hidden; padding: 8px; } '+
                    '.com-content-list-ContentListEpisodeItem__watching-icon-container, '+
                    '.com-content-list-ContentListLiveEventItem__watching-icon-container { '+
                    'display: none; } '+
                    '.com-content-list-ContentListEpisodeItem__link, '+
                    '.com-content-list-ContentListEpisodeItem__title, '+
                    '.com-content-list-ContentListLiveEventItem__link, '+
                    '.com-content-list-ContentListSlotItem__link { font-size: 16px; } '+
                    '.com-vod-VODLabel__text--free { box-shadow: 0 0 0 600px #104063; } '+
                    '.com-content-list-ContentListEpisodeItem-ContentListEpisodeItemOverview'+
                    '__supplement, .com-content-list-ContentListEpisodeItem__description { '+
                    'color: #ddd; position: relative; } '+
                    '.com-vod-VodExpiredDateText-ExpiredDateText__text--info { color: #fff; }'+
                    '.com-content-list-ContentListEpisodeItem__thumbnail { margin-right: 8px; } '+
                    '.com-m-Thumbnail__shadow-progress-bar-wrapper { top: 108px; } '+
                    '.com-a-ProgressBar__bar { background-color: #8dc9ff; } '+
                    '.com-content-list-ContentListEpisodeItem__my-list-button, '+
                    '.com-content-list-ContentListLiveEventItem__my-list-button, '+
                    '.com-content-list-ContentListSlotItem__my-list-button { '+
                    'margin-left: 0; width: 24px; } '+
                    '.com-m-NotificationManager { width: 290px; } '+
                    '.com-application-NotificationToast { '+
                    'gap: 0; height: 50px; padding: 0 10px 0 25px; } '+
                    '.com-application-NotificationToast__button-wrapper { display: none; } '+
                    '</style>';

                if_body.insertAdjacentHTML('beforeend', in_style);


                let mov_l=document.querySelector('.mov_link');
                if(mov_l){
                    mov_l.onclick=()=>{
                        let link=if_body.querySelector('.com-content-list-ContentListItem a');
                        let m_url=link.getAttribute('href');
                        if(m_url){
                            location.href=m_url; }}}


                let notify=document.querySelector('#notify');
                let if_doc=notify.contentWindow.document;
                if_doc.addEventListener('mouseup', function(event){
                    let elem=if_doc.elementFromPoint(event.clientX, event.clientY);
                    let link_elem=elem.closest('.com-content-list-ContentListItem a');
                    if(link_elem){
                        let url=link_elem.getAttribute('href');
                        if(url){
                            location.href=url; }}});

            } // set_iframe()
        }

        else{ // "/video/episode/" "/video/title/" "/channels/" "/live-event/" 以外のリンクの場合
            if_close(); }


        let close_button=document.querySelector('.if_close');
        if(close_button){
            close_button.onclick=()=>{
                outline_off();
                if_close(); }}

    } //set_if()



    function outline_off(){
        let cards=document.querySelectorAll('.com-feature-area-CardItem');
        for(let k=0; k<cards.length; k++){
            let style=window.getComputedStyle(cards[k]);
            let out=style.getPropertyValue('outline-width');
            if(out='2px'){
                cards[k].style.outline=''; }}

        let rankings=document.querySelectorAll('.com-feature-area-FeatureRankingItem');
        for(let k=0; k<rankings.length; k++){
            let style=window.getComputedStyle(rankings[k]);
            let out=style.getPropertyValue('outline-width');
            if(out='2px'){
                rankings[k].style.outline=''; }}}


    function if_close(){
        if(document.querySelector('#if_wrap')){
            document.querySelector('#if_wrap').remove(); }}

} // catch_click()




 

 

 

「AmbTV Comfy」最新版について 

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

 

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