前バージョンの動作検証
前ページのバージョンでテストを行っていると、幾つか問題がある事が判りました。
① スマホ動画プレーヤーのボカシ背景非表示の動作が不安定で、表示されたままになる事が多い。
➁ スマホ動画プレーヤーの iframe内に、ブログページのHTMLに埋込む styleタグが埋込まれる。
以上の問題に関してコードを修正しました。
① の原因と対策
iframe内の動画プレーヤーは、動的な書換えが頻繁に行われるらしく、要素に対するインラインの「style指定」は、一旦有効になっても、指定した要素が更新されて無効になるのではないかと思われます。
そこで確実な方法として、「styleタグ」を iframe内に埋込み、iframe内を修飾する様にしました。 これで、背景の非表示が確実になりました。
下は、このコードが動画プレーヤーの iframe内に「id="ALJM"」の「styleタグ」を埋込んだ様子です。
➁ の原因と対策
これは、ブログページに適用するコードと、後から追加した iframe内に適用するコードを、動作域の区別なく共存させてしまったためです。
前バージョンから、スクリプトヘッダーは2個の「@match指定」を書き込んでいますが、本来は2個のスクリプトツールを同居させたもので、スクリプトの動作域の厳密な区別が必要でした。 以下のコードで2つのコードをラップして区別しました。
これで、無駄なコードが実行される事がなくなりました。
「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.6 （動画）
// ==UserScript==
// @name Ameblo Lightbox JS Movie
// @namespace http://tampermonkey.net/
// @version 0.6
// @description ブログ掲載動画のウインドウ内の暗転拡大表示
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://static.blog-video.jp/*
// @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 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;
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;
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" type="text/css">'+
'#js-video-bg { filter: opacity(0) !important; }</style>';
if(!document.querySelector('#ALJM')){
document.documentElement.insertAdjacentHTML('beforeend', css); }});
} // static.blog-video.jp
「Ameblo Lightbox JS Movie」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS Movie」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
