「エンドロール機能」のタイミング調整
「エンドロール機能」を色々と調節して来ましたが、これはただ動けば良いというものではありません。 エンドロールの表示仕様を3種類に纏めましたが、次の動画への移動で、少し杜撰な切換えが気になる場合があります。
エンドロールの最後まで表示する設定の場合や、エンドロールの最後に「次のエピソード」が出る動画の場合、動画の一番末尾を見る事になります。 この部分が、本編の「落ち」になっている場合や、予告編になっている場合などは、ちゃんと最後まで表示する必要を感じます。 最後の数秒であっても、表示しないまま次の動画に移ったり、音声が途中で切れたりというのは、出来るだけ避けたいのです。 下はタイミングの模式図ですが、「停止フレーム」に入ってからボタンを押すのが最適です。
動画によって「次のエピソード/カウントダウン」の表示タイミングが微妙に異なる様で、「カウントダウン」が出て直ぐにボタンを押すコードでは、僅かに「尻切れ」が生じる場合があります。 余裕を多く設定すると「カウントダウン」を待つのと同じになります。 そこから色々とテストして「4sec」というタイミングを決めました。
動画を切り換えるコード
「next.click();」が「▶ 次のエピソード」や「▶ 投稿まで」 を押す操作です。 その操作を行う前に、青文字のコードを実行しています。「player_type(3)」は2個のボタンで、それをあらかじめ非表示にします。 更に「player_type(4)」は動画サムネイルを含む部分です。
上記の要素がスライドインする瞬間に非表示にして、4sec待ってからボタンをクリックして、スムーズで尻切れの無い動画の切換えをしようというコードです。
「AmbTV Comfy」 ver.3.3 343行~
4secは長いと感じる場合がありますが、「カウントダウン」の表示タイミングは、実際の動画末尾より手前に設定されている様で、この程度でないと「尻切れ」が発生します。
「AmbTV Comfy」のマニュアル
「AmbTV Comfy」の操作に関しては、以下のマニュアルを参照ください。
このツールで「サブウインドウ表示」を指定した上で、ブラウザのショートカット「F11」で「全画面表示」を指定すると、シリーズ動画が見易くなります。 他の方法では、1話ごとに動画サイズが初期値に戻りますが、この方法は全画面表示が途切れる事がありません。
「AmbTV Comfy」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 AmbTV Comfy 〕 ver. 3.3
// ==UserScript== // @name AmbTV Comfy // @namespace http://tampermonkey.net/ // @version 3.3 // @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' if(window.location.search!='?atv'){ // 通常の画面 let target=document.querySelector('head > title'); let monitor=new MutationObserver(player_env); monitor.observe(target, { childList: true }); time_table_env(); disp_list(); light_box(); } else{ // 動画リストiframe内のみ list_link_if(); set_iframe(); quiet(); } function player_env(){ 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){ 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; overflow: hidden; '+ ' --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; } '+ '.c-tv-TimeshiftSlotContainerView-breadcrumb { display: none; } '+ // slots playrer '.c-tv-TimeshiftPlayerContainerView-outer { height: 100vh; } '+ // slots playrer '</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; } '+ '.com-vod-VODScreen__video-control-bg { height: 60px !important; '+ 'background: rgba(0,0,0,0.5) !important; }'+ '</style>'; if(!player.querySelector('.atv_style')){ player.insertAdjacentHTML('beforeend', style); } let atv_style=player.querySelector('.atv_style'); if(atv_style){ if(sessionStorage.getItem('AmbTV_S')!='1'){ sessionStorage.setItem('AmbTV_S', '0'); // 🔵 通常表示 atv_style.disabled=true; } else{ sessionStorage.setItem('AmbTV_S', '1'); // 🔵 サブウインドウ表示 atv_style.disabled=false; }} let atv_style_ex=player.querySelector('.atv_style_ex'); if(atv_style_ex){ atv_style_ex.disabled=true; } ad_block(player); // ADブロック setTimeout(()=>{ let wrap; if(player.querySelector('.c-vod-EpisodePlayerContainer-wrapper')){ wrap=player.querySelector('.c-vod-EpisodePlayerContainer-wrapper'); } else if(player.querySelector('.c-tv-TimeshiftPlayerContainerView')){ wrap=player.querySelector('.c-tv-TimeshiftPlayerContainerView'); } if(wrap){ let monitor1=new MutationObserver(player_tool); // 機能アイコンを設置 monitor1.observe(wrap, { childList: true }); } }, 200); setTimeout(()=>{ let ec_thumbnail= document.querySelector('.c-vod-EpisodePlayerContainer-thumbnail'); if(ec_thumbnail){ reset_subw(); } // プレミアムAD表示時に「サブウインドウ表示」をリセット }, 200); } // set_player() function ad_block(player){ let retry=0; let interval=setInterval(wait_target, 20); function wait_target(){ retry++; if(retry>100){ // リトライ制限 100回 2secまで clearInterval(interval); } let ad_container=player.querySelector('#videoAdContainer > div'); if(ad_container){ clearInterval(interval); ad_container.remove(); }}} function reset_subw(){ let atv_style=document.querySelector('.atv_style'); if(atv_style){ if(atv_style.disabled==false){ atv_style.disabled=true; }}} function player_tool(){ 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(sessionStorage.getItem('AmbTV_S')=='1'){ // 🔵 サブウインドウ表示 atv_style.disabled=false; atv_tp.textContent='デフォルト表示'; atv_help.style.display='inline'; } else{ atv_style.disabled=true; atv_tp.textContent='サブウインドウ表示'; atv_help.style.display='none'; } atv_sw.onclick=function(e){ e.preventDefault(); if(sessionStorage.getItem('AmbTV_S')=='1'){ // 🔵 サブウインドウ表示 sessionStorage.setItem('AmbTV_S', '0'); // 🔵 通常表示 atv_style.disabled=true; atv_tp.textContent='サブウインドウ表示'; atv_help.style.display='none'; } else{ sessionStorage.setItem('AmbTV_S', '1'); // 🔵 サブウインドウ表示 atv_style.disabled=false; atv_tp.textContent='デフォルト表示'; atv_help.style.display='inline'; }}}} ex_view(); end_roll(); document.addEventListener('keydown', function(event){ if(event.keyCode==27){ if(sessionStorage.getItem('AmbTV_E')!='0'){ event.preventDefault(); sessionStorage.setItem('AmbTV_E', '0'); // 🔵 end_roll(); }}}); } // player_tool() 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';}}}}} function end_roll(){ let info=player_type(0); if(info){ let monitor2=new MutationObserver(info_sw); // infoパネルを監視 monitor2.observe(info, { attributes: true, subtree: true, characterData: true}); } let CB_icon=document.querySelectorAll('.com-vod-VideoControlBar__icon'); if(CB_icon[2]){ if(player_type(0) && player_type(1) && player_type(2) ){ CB_icon[2].style.boxShadow='10px -6px 0 -7px #fff'; } else{ CB_icon[2].style.boxShadow='0 -7px 0 -4px #FF9800'; } if(sessionStorage.getItem('AmbTV_E')=='1'){ // エンドロール表示モード 🔵 CB_icon[2].style.color='red'; } else if(sessionStorage.getItem('AmbTV_E')=='2'){ CB_icon[2].style.color='#2196f3'; } else if(sessionStorage.getItem('AmbTV_E')=='3'){ CB_icon[2].style.color='#44ff00'; } else{ CB_icon[2].style.color='#fff'; } CB_icon[2].onclick=function(event){ if(event.ctrlKey){ if(sessionStorage.getItem('AmbTV_E')=='1'){ // 🔵 sessionStorage.setItem('AmbTV_E', '2'); CB_icon[2].style.color='#2196f3'; } else if(sessionStorage.getItem('AmbTV_E')=='2'){ // 🔵 sessionStorage.setItem('AmbTV_E', '3'); CB_icon[2].style.color='#44ff00'; } else if(sessionStorage.getItem('AmbTV_E')=='3'){ // 🔵 sessionStorage.setItem('AmbTV_E', '0'); CB_icon[2].style.color='#fff'; } else{ sessionStorage.setItem('AmbTV_E', '1'); // 🔵 CB_icon[2].style.color='red'; }}}} } // end_roll() function player_type(n){ let player=document.querySelector( '.com-vod-VODRecommendedContentsContainerView__player'); let cancel; if(player){ let pb=player.querySelectorAll('button'); for(let k=0; k<pb.length; k++){ if(pb[k].textContent=='キャンセル'){ cancel=pb[k]; break; }}} let target; if(cancel){ target=cancel.parentNode.parentNode; } let wrap; if(target){ if(target.childElementCount>1){ wrap=target.parentNode.parentNode; } else{ wrap=target; }} if(n==0){ return target; } else if(n==1){ return cancel; } else if(n==2){ let next=player.querySelector('.com-a-Link'); return next; } else if(n==3){ return wrap; } else if(n==4){ let wrap_bg=document.querySelector( '.com-vod-VODScreen__recommend-series-info-bg'); return wrap_bg; } } // player_type() function info_sw(){ let player=document.querySelector( '.com-vod-VODRecommendedContentsContainerView__player'); let cancel=player_type(1); let next=player_type(2); let SeekBar=player.querySelector('.com-playback-SeekBar__highlighter'); let fll_end=sessionStorage.getItem('AmbTV_E'); // エンドロール表示モード 🔵 if(cancel && SeekBar){ let sbw=SeekBar.getAttribute('style').replace(/[^0-9]/g, '').slice(0, 2); sbw=parseInt(sbw, 10); if(fll_end=='1'){ if(sbw!=10 && sbw<99 ){ // エンドロールの最初のみキャンセルを押す cancel.click(); } else{ player_type(3).style.opacity='0'; if(player_type(4)){ player_type(4).style.opacity='0'; } setTimeout(()=>{ next.click(); }, 4000); }} else if(fll_end=='2'){ // エンドロールの最初と最後でキャンセルを押す cancel.click(); } else if(fll_end=='3'){ // エンドロールで次のエピソードを押す if(sbw>90){ player_type(3).style.opacity='0'; if(player_type(4)){ player_type(4).style.opacity='0'; } setTimeout(()=>{ next.click(); }, 4000); }}} } // info_sw() } // player_env() function time_table_env(){ let style= '<style class="tt_style">'+ '.com-timetable-SideSlotDetail__date { font-size: 14px; } '+ '.com-timetable-SideSlotDetail '+ '.com-vod-VodExpiredDateText-ExpiredDateText__text--info { '+ 'font-size: 13px; font-weight: normal; } '+ '.com-timetable-SideSlotDetail__date, '+ '.com-timetable-SideSlotDetail__timeshift-expiration-date, '+ '.com-vod-VodExpiredDateText-ExpiredDateText__text--info { color: #a9dbff; } '+ '.com-a-ProgressBar__bar { background-color: #2196f3; } '+ '.com-m-Thumbnail__shadow { display: none; } '+ '.com-feature-area-NewestLabel__text, '+ '.com-feature-area-EpisodeCardItem__title, '+ '.com-feature-area-SlotCardItem__start-at, '+ '.com-feature-area-FeatureMyListSlotItem__start-at, '+ '.com-feature-area-LiveEventCardItem__start-at, '+ '.com-feature-area-TopNewsItem__elapsed-time { color: #ccc; }'+ // リスト逆順 '.com-content-list-ContentListItemList { display: flex; flex-direction: column-reverse; }'+ '.com-content-list-ContentListSortButton__icon--order-type-normal { '+ 'transform: scaleY(1); } '+ '.com-content-list-ContentListSortButton__icon--order-type-reverse { '+ 'transform: scaleY(-1); } '+ '</style>'; if(!document.querySelector('.tt_style')){ document.body.insertAdjacentHTML('beforeend', style); } } // time_table_env() function disp_list(){ //「配信リスト表示」 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){ set_if(link_elem); } else{ setTimeout(()=>{ if_close(); }, 1000); }} else{ if(event.ctrlKey){ disp_ssd(0); let table_item=elem.closest('.com-timetable-TimetableItem'); if(table_item){ setTimeout(()=>{ let ssd_wrap=document.querySelectorAll( '.com-timetable-TimeTableSideSlotDetail__side-slot-detail-wrapper'); for(let k=0; k<ssd_wrap.length; k++){ if(ssd_wrap[k].style.zIndex=='2'){ let list_link=ssd_wrap[k].querySelector('.com-a-Button--primary-dark'); if(list_link){ let close= ssd_wrap[k].querySelector('.com-timetable-SideSlotDetail__close'); if(close){ close.click(); } let url=list_link.getAttribute('href'); creat_iframe(url); }}} }, 100); }} else{ disp_ssd(1); }} function disp_ssd(n){ let ssd_wrap=document.querySelectorAll( '.com-timetable-TimeTableSideSlotDetail__side-slot-detail-wrapper'); if(n==0){ for(let k=0; k<ssd_wrap.length; k++){ ssd_wrap[k].style.display='none'; }} else{ for(let k=0; k<ssd_wrap.length; k++){ ssd_wrap[k].style.display='block'; }}} }); function set_if(target){ outline_off(); disp_outline(target); let url=target.getAttribute('href'); if(!location.pathname.includes('/timetable')){ if(url.includes('/video/episode/') || url.includes('/video/title/') || url.includes('/channels/') || url.includes('/live-event/')){ creat_iframe(url); } else{ // 上記以外のリンクの場合 if_close(); }} else{ if(!url.includes('/now-on-air/')){ creat_iframe(url); } else{ on_air(target); }} function on_air(target){ let parent=target.closest('.com-timetable-SideSlotDetail'); if(parent){ let list_link=parent.querySelector('.com-a-Button--primary-dark'); let url=list_link.getAttribute('href'); creat_iframe(url); }} function disp_outline(target){ 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'; }} } //set_if() } // disp_list() function creat_iframe(url){ 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; } '+ '.com-timetable-DesktopTimeTableWrapper__channel-content-header-wrapper { '+ 'left: 480px; } '+ '.com-timetable-ArrowButtons__arrow-button-wrapper{ '+ 'left: 480px; width: calc(100% - 480px); } '+ '.com-timetable-ArrowButtons__arrow-button-left { left: 30px; } '+ '</style></div>'; if(document.querySelector('#if_wrap')){ document.querySelector('#if_wrap').remove(); } document.body.insertAdjacentHTML('beforeend', if_elem); // iframe生成 let close_button=document.querySelector('.if_close'); if(close_button){ close_button.onclick=()=>{ outline_off(); if_close(); }} } // creat_iframe() 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(); }} function list_link_if(){ document.addEventListener('mouseup', function(event){ let elem=document.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){ window.parent.location.href=url; }}}); let mov_l=window.parent.document.querySelector('.mov_link'); if(mov_l){ mov_l.onclick=()=>{ let first_link=document.querySelector('.com-content-list-ContentListItem:last-child a'); if(first_link){ let m_url=first_link.getAttribute('href'); if(m_url){ window.parent.location.href=m_url; }}}} } // list_link_if() function set_iframe(){ 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-content-list-ContentListItem '+ '.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; } '+ // リスト逆順 '.com-content-list-ContentListItemList { display: flex; flex-direction: column-reverse; }'+ '.com-content-list-ContentListSortButton__icon--order-type-normal { '+ 'transform: scaleY(1); } '+ '.com-content-list-ContentListSortButton__icon--order-type-reverse { '+ 'transform: scaleY(-1); } '+ '</style>'; document.body.insertAdjacentHTML('beforeend', in_style); } // set_iframe() function quiet(){ 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() function light_box(){ // 動画のサムネイルの「暗転拡大表示」 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'); let thum_elem; if(elem.closest('.com-m-PortraitThumbnail')){ thum_elem=elem.closest('.com-m-PortraitThumbnail'); } else if(elem.closest('.com-m-Thumbnail')){ thum_elem=elem.closest('.com-m-Thumbnail'); } else if(elem.closest('.com-content-list-ContentListEpisodeItem')){ thum_elem=elem.closest('.com-content-list-ContentListEpisodeItem'); } else if(elem.closest('.com-feature-area-SeriesListItem')){ thum_elem=elem.closest('.com-feature-area-SeriesListItem'); } else if(elem.closest('.com-content-list-ContentListItem')){ thum_elem=elem.closest('.com-content-list-ContentListItem'); } else if(elem.closest('.com-feature-area-EpisodeListItem')){ thum_elem=elem.closest('.com-feature-area-EpisodeListItem'); } if(thum_elem){ if(link_elem){ set_link(link_elem); } set_img(thum_elem); close(); }}}); 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">'+ '<a id="photo_link">'+ mov_SVG +' Movie Page</a>'+ '<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_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; } '+ '#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(/\?.*$/,""); 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); }}} } //light_box()
「AmbTV Comfy」最新版について
旧いバージョンの JavaScriptツールは、Abemaサイトのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「AmbTV Comfy」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。