出番が少ない「Movie版 Lightbox」
私にとって「Ameblo Lightbox JS」は不可欠なツールですが、それと同期に作り始めた「Ameblo Lightbox JS Movie」の方は、出番が余りありません。
それは、YouTube等の動画プレーヤーに「全画面拡大ボタン」があるからです。
そうなると「JS Movie」がなくてはならない場合は、動画の全画面拡大で他のウインドウが隠れると困る場合だけでしょう。 下の様に、動画をサブウインドウの様に表示したい場合には「JS Movie」が必要になります。
もっとも、最近は動画プレーヤーに「ピクチャー イン ピクチャー」の機能が導入されはじめ、Firefoxなどはこの表示仕様をブラウザ側で実装しているため、ますます「JS Movie」は肩身が狭くなって来ました ^^;
まあでも私は時々は使っていて、今後の発展も全く考えられないわけではありません。 最後に「JS Movie」を更新したのは 2020年11月で、久しぶりの更新です。
更新の内容
基本部分は同じですが、アメブロヘッダーが Lightboxの中に表示される場合があるので、その対策です。 公式スキンでは生じませんが、ユーザーがアレンジをしているスキンでは、アメブロヘッダーの露出は生じ易いので、抑止コードを追加しました。
下は、動画をクリックして Lightbox表示するコードで、太字の部分でアメブロヘッダーが露出し難い様に「z-index」を変更しています。
本来のアメブロヘッダーは「z-index: 2000」に設定されているので、通常の表示に戻す際に、上の変更を元に戻しています。
やはり難航した iframe
スマホ動画の埋込みプレーヤーでは、左側の様に動画像の上下余白部に、ボカシた画像が背景として追加されます。 右側はそれを省いたものです。
「JS Movie」のスクリプトでこのボカシを省きたいのですが、iframe内にはアクセスできませんでした。
これは「Ameblo Lightbox JS Movie」のスクリプト実行ページの指定で、スマホ動画の iframeの SRCの「https://static.blog-video.jp/……」のドメインを指定して、その上でアレンジコードを記述する事で、処理が可能でした。
このバージョンから、スクリプトヘッダーに以下の「@match」を追加しています。
「@match https://static.blog-video.jp/*」
アレンジ処理コードは、以下です。
これは、簡単に背景部の要素の「js_video_bg」を削除する
「js_video_bg.remove();」
でも良いのですが、安全のために要素を残して「opacity: 0;」を指定しています。
「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.5 （動画）
// ==UserScript==
// @name Ameblo Lightbox JS Movie
// @namespace http://tampermonkey.net/
// @version 0.5
// @description ブログ掲載動画のウインドウ内の暗転拡大表示
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://static.blog-video.jp/*
// @grant none
// ==/UserScript==
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()
window.addEventListener('load', function(event){
let js_video_bg=document.querySelector('#js-video-bg');
if(js_video_bg){
js_video_bg.style.filter='opacity(0)'; }});
「Ameblo Lightbox JS Movie」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS Movie」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
