動画の選択を表示するインターフェイス
「iframe」の内側にアクセスできないスクリプト環境で、ページ内の拡大表示を工夫して実現した「Ameblo Lightbox JS Movie」ですが、動画の選択した事をユーザーに示すのも、簡単ではありません。
これまでのデザインは、「Ctrl」キーで淡いグレーのカバーを全ての「iframe」に表示して、その中からユーザーが動画をクリックで選択する形でした。
このインターフェイスは、ページ内に複数の動画がある時は、少々奇異な印象を与えるもので、もう少しスマートで一般的な選択を示すデザインを考えました。
「Ctrl + 左クリック」で動画を拡大表示する操作は全く同じですが、動画上にマウスポインターを乗せた場合に、選択した動画に青枠が表示されます。
前バージョンは、
◎ 全ての動画に グレーのカバーが表示される
◎ マウスポインターを乗せて選択した動画に、選択を示す表示はない
このデザインは、
◎ 選択していない他の動画には、何も表示されない
◎ マウスポインターを乗せ選択した動画だけに、青枠が表示される
この様に、ユーザーの選択状態を明瞭に示すデザインです。
また、青枠内部に細い白枠を追加し、暗い動画でも枠の表示を見え易くしています。
「Ameblo Lightbox JS」と「Ameblo Lightbox JS Movie」
●「Ameblo Lightbox JS」(静止画)の取扱い説明は、以下のページにあります。
●「Ameblo Lightbox JS Movie」(動画)の取扱い説明は、以下のページにあります。
● YouTbe動画のADとスマホ動画のボカシ背景を非表示にする「Stylus」用の補助スタイルは以下のページにあります。
「Ameblo Lightbox JS」ver. 0.4
更新はありませんが、バージョンを静止画・動画で合わせるため掲載しています。
このツールは Chrome / Edge / Firefox 版の「Tampermonkey」上で動作させる事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Ameblo Lightbox JS 〕ver. 0.4 （静止画）
// ==UserScript==
// @name Ameblo Lightbox JS
// @namespace http://tampermonkey.net/
// @version 0.4
// @description ブログ掲載画像の高精細な暗転拡大表示
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @noframes
// @grant none
// ==/UserScript==
let target=document.querySelector('head');
let monitor=new MutationObserver(catch_photo);
monitor.observe(target, { childList: true });
catch_photo();
function catch_photo(){
let html_=document.querySelector('html');
let page_img=document.querySelectorAll('#entryBody img');
box_env1();
for(let k=0; k<page_img.length; k++){
if(page_img[k].parentNode.tagName=='A'){
page_img[k].parentNode.style.opacity='1'; }}
for(let k=0; k<page_img.length; k++){
page_img[k].onclick=function(event){
if(event.shiftKey==false && event.ctrlKey==false){
event.preventDefault();
box_env2(page_img[k]);
set_img(page_img[k]);
to_storage(page_img[k]);
close(); }}}
function box_env1(){
let body=document.querySelector('body');
let css=
'@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}} '+
'.fin { animation: fadeIn .5s ease 0s 1 normal; animation-fill-mode: both; } '+
'@keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0}} '+
'.fout { animation: fadeOut .2s ease 0s 1 normal; animation-fill-mode: both; } '+
'#lightbox { position: fixed; top: 0; left: 0; z-index: 3000; visibility: hidden; '+
'background: black; width: 100vw; height: 100vh; } '+
'#photo_sw { position: absolute; width: 100%; height: 15%; } '+
'#photo_sw:hover #photo_link { opacity: 1; } '+
'#photo_link { position: absolute; top: 20px; left: 30px; opacity: 0; '+
'font: bold 21px Meiryo; padding: 3px 12px 2px 10px; background: #fff; '+
'color: #000; border: 2px solid #000; border-radius: 6px; cursor: pointer; } '+
'#photo_link::before { content: "\\f00e"; font: 36px AmebaNewSymbols; '+
'color: #000; padding-right: 6px; vertical-align: -9px; } '+
'#box_img { width: 96vw; height: 96vh; padding: 2vh 2vw; object-fit: contain; } ';
let style=document.createElement('style');
style.setAttribute('id', 'light_style');
style.textContent=css;
if(!document.querySelector('#light_style')){
body.appendChild(style); }
let box=document.createElement('div');
box.setAttribute('id', 'lightbox');
box.innerHTML=
'<div id="photo_sw"><p id="photo_link">Photo Storage</p></div>'+
'<img id="box_img">';
if(!document.querySelector('#lightbox')){
body.appendChild(box); }}
function box_env2(target_img){
let photo_sw=document.querySelector('#photo_sw');
if(target_img.parentNode.getAttribute('href')
&& target_img.parentNode.classList.contains('detailOn')){
if(photo_sw){
photo_sw.style.display='block'; }}
else{
if(photo_sw){
photo_sw.style.display='none'; }}}
function set_img(target_img){
let lightbox=document.querySelector('#lightbox');
let box_img=lightbox.querySelector('#box_img');
let img_url=target_img.getAttribute('src').split('?caw=');
if(lightbox && img_url[0]!=''){
html_.style.overflow='hidden';
box_img.src=img_url[0];
lightbox.style.visibility='visible';
zoom_reset(lightbox);
lightbox.classList.remove('fout');
lightbox.classList.add('fin'); }}
function zoom_reset(l_box){
let body=document.querySelector('body');
let zoom_f=window.getComputedStyle(body).getPropertyValue('zoom');
if(zoom_f || zoom_f!=1){ // bodyで拡大ツールによるのzoom指定がある場合
l_box.style.zoom=1/zoom_f; }}
function to_storage(target_img){
let photo_link=document.querySelector('#photo_link');
if(photo_link){
photo_link.onclick=function(event){
event.stopImmediatePropagation();
location.href=target_img.parentNode.getAttribute('href'); }}}
function close(){
let html_=document.querySelector('html');
let lightbox=document.querySelector('#lightbox');
let box_img=lightbox.querySelector('#box_img');
if(lightbox){
lightbox.onclick=function(event){
event.preventDefault();
html_.style.overflow='inherit';
lightbox.classList.remove('fin');
lightbox.classList.add('fout');
setTimeout(()=>{
lightbox.style.visibility='hidden';
box_img.src='';
}, 200); }}}
} // catch_photo()
「Ameblo Lightbox JS Movie」ver. 0.4
今回は、選択した動画に青枠を表示するデザインに更新をしました。
このツールは Chrome / Edge / Firefox 版の「Tampermonkey」上で動作させる事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Ameblo Lightbox JS Movie 〕ver. 0.4 （動画）
// ==UserScript==
// @name Ameblo Lightbox JS Movie
// @namespace http://tampermonkey.net/
// @version 0.4
// @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=
'.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')){
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';
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');
zoom_reset(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';
zoom_reset(close_header); }
normal_view(); }}}
function zoom_reset(player){
let body=document.querySelector('body');
let zoom_f=window.getComputedStyle(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(){
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('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 Lightbox JS Movie」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS Movie」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
