「Lightbox JS」と「Lightbox JS Movie」（5）/ JavaScript

「Stylus」を使用したCSS版しか出来ない機能

「Stylus」は高度な技術で「iframe」内の動画のデザインを修飾できます。 CSS版の「Ameblo Lightbox」はこの機能を利用して、YouTube動画のADブロックや、スマホ動画の奇妙な「ボカシ背景」の非表示を実現しています。

記事中のスマホ動画のポップアップ機能を追加 / Ameblo Lightbox

この様なアレンジは「Ameblo Lightbox JS Movie」には出来ません。「YouTubeページ」で操作が出来ても、ブログ掲載の「iframe」内には手を出せないのです。

「Lightbox JS Movie」をテストしていると、 CSS版の「Lightbox」で可能だった事が出来ないのは、とても気になります。

 「Stylus」を使った補助CSS

そこで「Stylus」でのみ可能な「iframe」内の修飾をする「補助スタイル」を作りました。 これは「Lghtbox JS Movie」専用のスタイルです。 このスタイルの適用は「Stylus」に任せ、主要な暗転拡大は「Tampermonkey」が受け持つ合わせ技です。

以下は、YouTube動画のシークバーの上側に表示されるADを非表示にし、スマホ動画のボカシ背景を非表示とするスタイルです。

補助CSSのスタイル 

スタイル名： Ameblo Lightbox JS Movie 補助CSS ver. 0.1

適用先 Code1：「ドメイン」=「youtube.com」

適用先 Code2：「ドメイン」=「static.blog-video.jp」

CSSコード：

@-moz-document domain("youtube.com") {
/* Ameblo Lightbox JS Movie 補助CSS ver. 0.1 *******************/
/* Youtube動画プレーヤー ADの非表示 **************************/
/* シークバーの上側に表示される AD非表示 */
.ytp-ad-overlay-slot {
    display: none; }

/* CM動画上に表示される リンクバナー非表示 */
.ytp-ad-player-overlay-flyout-cta,
.ytp-ad-player-overlay-instream-info,
.ytp-ad-survey-player-overlay-instream-info {
    display: none; }

/* サイド動画リスト AD非表示 最上部 */
#player-ads {
    display: none; }

/* サイド動画リスト AD非表示 中間部 */
ytd-promoted-sparkles-web-renderer {
    display: none; }

/* サイド動画リスト AD非表示  旧？ */
ytd-player-legacy-desktop-watch-ads-renderer {
    display: none; }
}

@-moz-document domain("static.blog-video.jp") {
/* スマホ動画プレーヤー ボカシ背景を非表示 **********************/
#js-video-bg {
    background: none !important; }

.video-touch-area {
    outline: none; }
}

補助CSSのスタイル登録手順 

「補助CSS」を使うには「Stylus」の導入が必要ですが、これは 纏めページ  を参考にしてください。

❶「Stylus」で「新規スタイルを作成」を選択し、編集画面の「インポート」ボタンを押すと、以下のインポート編集枠が表示されます。

❷ ここに、CSSコードを貼り付けて「スタイルを上書き」を押します。

❸ 編集画面のメニューで「スタイル名」を記入（任意で可）し「保存」を押します。

以上で「補助CSS」のスタイルが登録されて有効になります。 なお、このスタイルは、常時ONにしても、他に問題を生じる修飾内容はないと思います。

「Ameblo Lightbox JS Movie」を利用される場合は、「Stylus」でこのスタイルを有効にしておくと快適です。

動作が重くなる原因は「Edit At Once Am」とのコンフリクト

YouTube動画の複数を拡大表示して行くと次第に動作が重くなり、数秒経って拡大表示したり、最後に拡大できなくなります。 これは Chrome環境でのみ生じ、新Edgeや Firefox では全く起こりません。 これで、常時動作させているスクリプトが怪しいと気付きました。「ctrl」キーの押下を取得するツールで、一番最初に浮かんだのが「Edit At Once Am」で、これをOFFにすると問題が無くなりました。

ずいぶん手間取りましたが、チューンナップで「Ameblo Lightbox JS Movie」はひどく軽快に動作し、これは推奨できるレベルです。「Edit At Once Am」のコード改善が必要ですが、これは後まわしで「JS Movie」の詰めを行いました。

以下も、私自身が作った「Remember My Page」との問題で、ページの「zoom」拡大時に、暗転拡大の倍率が影響を受ける事への対処です。

「zoom拡大」されたページでの暗転拡大の補正 

これは「Ameblo Lightbox JS」で経験済みの問題でした。「zoom拡大」は「body」要素で指定されるので、「body」に「zoomプロパティ」があるか調べて、指定があれば補正をするだけです。

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; }}

今回は、補正関数の引数に対象要素を指定する形にしました。 これにより、補正対象の要素が使われているコード内で、この関数を直接使えます。 コードが簡潔になり、ページの「zoom値」が変更された場合も、即時に補正が働く様になりました。

この改善は、「Ameblo Lightbox JS」でも同様に更新しています。

「Ameblo Lightbox JS」と「Ameblo Lightbox JS Movie」 

今回の更新で、コード内の変数名なども整理しています。

●「Ameblo Lightbox JS」(静止画)の取扱い説明は、以下のページにあります。

アメブロ専用 画像ビューア「Ameblo Lightbox JS」（2）/ JavaScript

●「Ameblo Lightbox JS Movie」(動画)の取扱い説明は、以下のページにあります。

動画ビューア「Ameblo Lightbox JS Movie」（4）/ JavaScript

「Ameblo Lightbox JS」ver. 0.3

このツールは Chrome / Edge / Firefox 版の「Tampermonkey」上で動作させる事が出来ます。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

〔 Ameblo Lightbox JS 〕ver. 0.3 （静止画）

// ==UserScript==
// @name         Ameblo Lightbox JS
// @namespace    http://tampermonkey.net/
// @version      0.3
// @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.3

このツールは Chrome / Edge / Firefox 版の「Tampermonkey」上で動作させる事が出来ます。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

〔 Ameblo Lightbox JS Movie 〕ver. 0.3 （動画）

// ==UserScript==
// @name         Ameblo Lightbox JS Movie
// @namespace    http://tampermonkey.net/
// @version      0.3
// @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; } '+
            '.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();
                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'; }}

} // catch_mov()