各種の表示要素の割り込み
「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」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
