なんとか及第点？
前ページで、複数の動画を開くと次第に重たくなる問題について書いていますが、キー押下の連続入力が原因のひとつの様です。「カバー」を表示する操作でキーを長めに押しますが、これは同じ文字を連打しいてる事になります。 押されたキーを判断するプログラムは、連続したキー入力を1個ずつ処理するので、簡単なプログラムでは気付きませんが、複雑な処理では判断が遅れ始めます。
この問題は、ネットを調べるとたまに報告されていて、キー入力を使うゲームプログラムでは、素早い反応を維持する特別なコードを使う様です。 今回は根本的な対処ができなかったのですが、キー判定コードを修正する事で少し改善をしました。
また、操作対象の「iframe」とそれに付加した「カバー」は、すぐ隣の別要素です。この「カバー」の取得と、その隣の「iframe」を操作するコードを最適化する事で、「カバー」のクリック ➔「iframe」の拡大の動作が、かなり改善されました。
しかし、上記より根の深い原因がある様で、複数の動画を拡大操作して行くと、やはり数個目で動画の拡大が出来なくなります。 これはページのリロードで正常になるので、他のブログに移動すれば問題に気付きません。 ひとつのブログで続けて動画を漁ると、何個目かに拡大しなくなるという状態です。
テストは Chromeで行っていますが、Firefoxでは上記の問題が生じない様です。 コードの最適化で幾分改善されましたが、今後も根本的な改善を模索します。
「Ameblo Lightbox JS Movie」として独立
「Ameblo Lightbox」と併合させると、上記の問題が悪化し、分離して両方を動作させると改善します。 詳しい理由は不明ですが、ここは無理をしないで、別ツールとして使う方が良いと判断しました。 但し「Lightbox」の静止画版と動画版という形で、バージョンを揃えることにしました。
「Ameblo Lightbox JS Movie」の仕様と扱い方
「Ameblo Lightbox JS Movie」は「Tampermonkey」に登録して、常時ONで使用します。
◎ 対象は「YouTube動画」「スマホ動画」「クリップ動画」の埋め込み動画です。
◎ サイドバー等の本文以外の場所に配置された動画は、対象になりません。
◎ ページ上の全動画を対象にするには、動画取得コードから「#entryBody」（本文を取得範囲とするセレクタ）を削除すれば可能ですが、テストはしていません。
◎「Ctrl」キーを押すと、全ての動画に半透過グレーの「カバー」が表示されます。
「カバー」は動画の高さで本文の余白部を含む幅です。
〔追記〕2020.10.27
ver. 0.4以降は「Ctrl」キーを押した状態で、マウスポインターを乗せた動画だけに、青枠を表示するデザインに変更しています。
◎「動画のコントロール」を操作するとフォーカスが動画内に移動し、「Ctrl」キーを押しても「カバー」が表示できなくなります。 その場合はウインドウ内の動画以外の部分をクリックして、ブログページにフォーカスを戻してください。
◎「Ctrl」キーで「カバー」を表示した状態で動画を「左クリック」すると、動画が暗転拡大します。 暗転時は、アメブロヘッダーとスクロールバーは非表示になります。
◎ 動画の再生/停止の状態にかかわらず、拡大または復帰の操作が出来ます。
◎ 本来のページの表示に戻るには、「× Close Movie」ボタンをクリックします。
このボタンは通常は非表示で、マウスを画面上部の範囲に乗せると表示されます。
テスト用の動画サンプル
以下は「Ameblo Lightbox JS Movie」のテスト用の動画です。
●「YouTube動画」
●「クリップ動画」（投稿用のスマホアプリ提供は終了しました）
●「スマホ動画」 著作権の関係で掲載できないのでリンクです。
「Ameblo Lightbox JS Movie」ver. 0.2
このツールは Chrome / Edge / Firefox 版の「Tampermonkey」上で動作させる事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Ameblo Lightbox JS Mpvie 〕ver. 0.2 動画テストコード
// ==UserScript==
// @name Ameblo Lightbox JS Movie
// @namespace http://tampermonkey.net/
// @version 0.2
// @description ブログ掲載動画のウインドウ内の暗転拡大表示
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @noframes
// @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 body=document.querySelector('body');
let css=
'.y_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; } '+
'.c_o { position: relative; } .c_i { position: relative; top: 0; '+
'width: 100%; height: 100%; background: #00000020; } '+
'#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')){
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')){
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(); }});
function box_view(){
let cover=document.querySelectorAll('.c_i');
for(let k=0; k<cover.length; k++){
cover[k].style.position='absolute';
cover[k].onclick=function(event){
event.stopImmediatePropagation();
if(cover[k].previousElementSibling){
cover[k].previousElementSibling.classList.add('y_player'); }
let html_=document.querySelector('html');
let close_header=document.querySelector('#close_header');
if(html_ && close_header){
html_.style.overflow='hidden';
close_header.style.display='block'; }
normal_view(); }}}
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(){
let html_=document.querySelector('html');
html_.style.overflow='visible';
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('y_player')){
m_iframe[k].classList.remove('y_player'); }}}}}
function cover_off(){
let cover=document.querySelectorAll('.c_i');
for(let k=0; k<cover.length; k++){
cover[k].style.position='relative'; }}
} // catch_mov()
「Ameblo Lightbox JS Movie」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS Movie」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
