各種の表示要素の割り込み
「Ameblo Lightbox JS Movie」はアメブロに掲載された動画を、ブログを表示したウインドウ内に暗転拡大表示(Lightbox表示)するツールです。 動画には「全画面」拡大のボタンがたいていありますが、これを使うと他のウインドウは全部隠れてしまいます。 この「JS Movie」を使えば、モニターに余裕がある場合は他のウインドウが同時に使えます。
同様の静止画版ツール「Ameblo Lightbox JS」に比べると、実際の出番は多くありません。 そのため、この「Ameblo Lightbox JS Movie」は、未完成な部分が残っている様です。 今回、たまたま動画を掲載したブログで「コロナに関する…」のバナー表示が、動画内に割り込んで表示されました。
こういうのは常に表示されないので気付かなかったのですが、この機会に色々なブログを調べて見ました。 その結果、以下の3種類の表示が割り込み表示される場合を確認しました。
① 旧タイプスキンの「上に戻るボタン」
➁ 「コロナ」「ウクライナ」に関するバナー
➂「サイドバー」の表示内容の割り込み
「iframe」を別に用意して動画を再呼び込みすれば、割り込みに強い「Lightbox」を作れます。 しかし、動画の再読込みはかなりの通信ストレスになるので、これはしていません。 その結果、このツールは割り込みを見つけては抑止する必要があります。
気付いたら更新をしますが
今回の補強で、上記の様な割り込みは抑止できたと思いますが、色々なスキンがある事や、ADの追加でページ上のHTMLが変更されたりもするので、こういった更新は今後も必要になりそうです。
「Ameblo Lightbox JS Movie」を利用するには
「Ameblo Lightbox JS Movie」(動画)の取扱い説明は、以下のページにあります。
このツールは Chrome / Edge / Firefox 版の「Tampermonkey」上で動作させる事が出来ます。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Ameblo Lightbox JS Movie 〕ver. 0.8
// ==UserScript== // @name Ameblo Lightbox JS Movie // @namespace http://tampermonkey.net/ // @version 0.8 // @description ブログ掲載動画のウインドウ内の暗転拡大表示 // @author Ameba Blog User // @match https://ameblo.jp/* // @match https://static.blog-video.jp/* // @match https://www.youtube.com/* // @grant none // ==/UserScript== if(document.domain=='ameblo.jp'){ let target=document.querySelector('head'); let monitor=new MutationObserver(catch_mov); monitor.observe(target, { childList: true }); catch_mov(); function catch_mov(){ box_env3(); function box_env3(){ let css= '.mov_player { position: fixed; top: 0; left: 0; z-index: 5000; '+ 'padding: 10vh 2vw; width: 96vw !important; height: 80vh !important; '+ 'background: #000; box-shadow: 0 0 0 2px #000; border: none !important; '+ 'box-sizing: content-box !important; outline: none !important; } '+ '.c_o { position: relative; } '+ '.c_o:hover .pre_player { border: 5px solid #2196f3; box-sizing: border-box; '+ 'outline: 1px solid #fff; outline-offset: -5px; } '+ '.c_i { position: relative; top: 0; width: 100%; height: 100%; } '+ '.c_i:hover { cursor: pointer; } '+ '#close_header { position: fixed; top: 0; left: 0; z-index: 5001; '+ 'width: 100%; height: 60px; display: none; } '+ '#close_header:hover #close_mov { opacity: 1; } '+ '#close_mov { position: absolute; top: 20px; left: 30px; opacity: 0; '+ 'font: bold 21px Meiryo; padding: 5px 12px 1px; background: #fff; '+ 'color: #000; border: 2px solid #000; border-radius: 6px; cursor: pointer; }'; let style=document.createElement('style'); style.setAttribute('id', 'light_style_y'); style.textContent=css; if(!document.querySelector('#light_style_y')){ document.body.appendChild(style); } let close=document.createElement('div'); close.setAttribute('id', 'close_header'); close.innerHTML='<p id="close_mov">✖ Close Movie</p>'; if(!document.querySelector('#close_header')){ document.body.appendChild(close); }} let y_iframe=document.querySelectorAll('#entryBody iframe[src*="youtube.com"]'); for(let k=0; k<y_iframe.length; k++){ cover_sw(y_iframe[k]); } let s_iframe=document.querySelectorAll('#entryBody iframe[src*="static.blog-video"]'); for(let k=0; k<s_iframe.length; k++){ cover_sw(s_iframe[k]); } let c_iframe=document.querySelectorAll('#entryBody iframe[src*="static-clipblog.blog-video"]'); for(let k=0; k<c_iframe.length; k++){ cover_sw(c_iframe[k]); } function cover_sw(video){ let cover_out=document.createElement('div'); cover_out.setAttribute('class', 'c_o'); if(video.parentNode.className!='c_o'){ cover_out.appendChild(video.cloneNode(true)); video.parentNode.replaceChild(cover_out, video); let cover_in=document.createElement('div'); cover_in.setAttribute('class', 'c_i'); cover_out.appendChild(cover_in); }} document.addEventListener('keydown', (event)=>{ if(event.ctrlKey){ box_view(); }}); document.addEventListener('keyup', (event)=>{ if(!event.ctrlKey){ cover_off(); }}); let amb_header=document.querySelector('#ambHeader'); let skinBody=document.querySelector('.skinBody'); let skin_page=document.querySelector('.skin-page'); let main=document.querySelector('#main'); let html_=document.querySelector('html'); function box_view(){ let cover=document.querySelectorAll('.c_i'); for(let k=0; k<cover.length; k++){ cover[k].style.position='absolute'; let player=cover[k].previousElementSibling; if(player){ player.classList.add('pre_player'); } cover[k].onclick=function(event){ event.stopImmediatePropagation(); let player=cover[k].previousElementSibling; if(player){ player.classList.add('mov_player'); amb_header.style.zIndex="0"; if(skinBody){ skinBody.style.position="relative"; skinBody.style.zIndex="3001"; } if(skin_page){ skin_page.style.position="relative"; skin_page.style.zIndex="2001"; } main.style.position="relative"; main.style.zIndex="2"; zoom_reset(player); } let close_header=document.querySelector('#close_header'); if(close_header){ html_.style.overflow='hidden'; close_header.style.display='block'; zoom_reset(close_header); } normal_view(); }}} function zoom_reset(player){ let zoom_f=window.getComputedStyle(document.body).getPropertyValue('zoom'); if(zoom_f || zoom_f!=1){ // bodyで拡大ツールによるのzoom指定がある player.style.zoom=1/zoom_f; }} function normal_view(){ let close_header=document.querySelector('#close_header'); let close_mov=document.querySelector('#close_mov'); if(close_header && close_mov){ close_mov.onclick=function(){ html_.style.overflow='visible'; amb_header.style.zIndex="2000"; if(skinBody){ skinBody.style.position="inherit"; skinBody.style.zIndex="inherit"; } if(skin_page){ skin_page.style.position="inherit"; skin_page.style.zIndex="inherit"; } main.style.position="inherit"; main.style.zIndex="inherit"; close_header.style.display='none'; let m_iframe=document.querySelectorAll('#entryBody iframe'); for(let k=0; k<m_iframe.length; k++){ if(m_iframe[k].classList.contains('mov_player')){ m_iframe[k].classList.remove('mov_player'); }}}}} function cover_off(){ let cover=document.querySelectorAll('.c_i'); for(let k=0; k<cover.length; k++){ cover[k].style.position='relative'; } let pre_player=document.querySelectorAll('.pre_player'); for(let k=0; k<pre_player.length; k++){ pre_player[k].classList.remove('pre_player'); }} } // catch_mov() } // ameblo.jp if(document.domain=='static.blog-video.jp'){ // スマホ動画プレーヤー window.addEventListener('load', function(){ let css= '<style id="ALJM">'+ '#js-video-bg { filter: opacity(0) !important; }</style>'; if(!document.querySelector('#ALJM')){ document.documentElement.insertAdjacentHTML('beforeend', css); }}); } // static.blog-video.jp if(document.domain=='www.youtube.com'){ // YouTube動画プレーヤー window.addEventListener('load', function(){ let css= '<style id="ALJM">'+ '.ytp-ad-module { display: none; }</style>'; if(!document.querySelector('#ALJM')){ document.documentElement.insertAdjacentHTML('beforeend', css); }}); } // www.youtube.com
〔追記〕 2023.09.01
ブログ編集画面での動作を抑止のために「@noframes」を追加しました。
〔追記〕 2023.11.26
スマホ動画のボカシ背景の削除が無効化するので、「@noframes」を削除しました。
「Ameblo Lightbox JS Movie」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS Movie」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。