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

「リスト表示」画面にブラウザバックが出来ない問題

「画像一覧」の「画像表示枠」のクリックで、ブラウザバックの機能を使い直前の画面に戻る機能を、前バージョンで追加しました。

この機能、ブログページに戻る場合は首尾よく戻れるので、なかなかいいなと思っているのですが、「リスト表示」の画面で動作に不具合がありました。説明を判り易くするため、このページでは「画像一覧」の2画面を「画像詳細」画面と「リスト表示」画面とします。

使用頻度は少ないと思いますが、「画像詳細」と「リスト表示」を往復した場合も「直前の画像に戻る」機能が動作しますが、ここで問題が生じていました...

不具合の症状と原因について

「Ameblo Lightbox JS」ver. 1.5 で試されると同じ現象が生じると思います。

最初の「画像詳細」で「画像一覧へ」のボタンを押すと「リスト表示」の画面に入れます。下図は「Ameblo Management」のアレンジを適用した「画像詳細」の画面で、このボタンは画面の左上にありますが、デフォルトは画面の一番下にあります。

「リスト表示」は、記事に掲載した画像を、月単位でリスト表示する画面です。

そのサムネイルの一個をクリックすると、その画像が最初の「画像詳細」の画面に下の様に表示されます。

「リスト表示」へ行き「画像詳細」に戻って来たわけですが、ここで「画像表示枠」をクリックすると、直前の「リスト表示」に戻るツールの機能が働きます。

ところが、この「リスト表示」への「ブラウザバック」はかなりの確率で失敗して、下の様な「リストのロード中の状態」でフリーズします。

「リスト」が正常に取り込まれる場合もありますが、先にクリックしたサムネイルがリストの下方だった場合は、フリーズする確率が増えます。

不具合の原因

最初は、ツールのスクリプトの問題と考えましたが、テストすると無関係でした。

ツールをOFFにして「画像詳細」⇄「リスト表示」の往復をテストすると、ブラウザの「戻る」ボタンを使って「リスト表示」を開くと、この症状が生じます。

よく観察すると、一瞬「リスト表示」が表示され、その上にリストの再読み込みをしている様です。フリーズせずに「リスト表示」が成功する場合は「ブラウザバック」は無視され、リスト先頭からの表示になります。たまに「ブラウザバック」が成功し、リストの元の位置が表示される事がありますが、その時はリストの再読み込みが起こらなかった場合です。

一方、先月以前の「リスト表示」では、全くフリーズが生じません。ツールをONにすると、「リスト表示」のリスト末尾のサムネイルと「画像詳細」との往復が、問題なく機能します。

この様な症状からの推測ですが、「ブラウザバック」は以前のリストの状態をキャッシュから表示するので、それと実際のリストデータとの整合をチェックする機能が働き、リストの再読み込みが生じるのだと思います。他の月はリストが完成されていて、表示したリストに整合チェックが入らず、「ブラウザバック」が邪魔されずに成功するのでしょう。

不具合を回避するコード

「今月のリスト」に「ブラウザバック」すると、頻繁にフリーズする事が避けられません。フリーズした場合は、ブラウザをリロードする事で「リスト表示」の画面に復帰できます。当然、その状態では元のリスト位置を表示できませんが。

このフリーズの回避策として、「今月のリスト」の画面で、サムネイルリストが取得されていない事、ロード中の状態が続く事、の条件が揃えば、ページをリロードするというコードを作りました。いなたい手法のコードですが、上手く動作してフリーズを自動的に回避してくれます。また、たまに成功する「ブラウザバック」は、ないがしろにされないので、案外と優れたコードかも知れません。

let path=location.pathname; // 現在のパス名
if(path.split('/').slice(-1)[0]=='imagelist.html'){
    setTimeout(()=>{
        if(document.querySelector('._3EX8xkUG ._3tinH7Ew')
           && !document.querySelector('._2z3jgBXG')){
            location.reload();
        }}, 2000); } // 2secで画像リストが取得できない時はリロード

最初の2行は、「今月のリスト」の「リスト表示」画面だけで動作する条件です。

例えば私のブログで「7月のリスト」と「今月のリスト」のパス名は下の様になり、問題が生じる「imagelist.html」の場合のみを選択できます。

personwritep/imagelist-202107.html　… 7月のリスト
personwritep/imagelist.html　　　　　… 今月のリスト

その後のコードは、2sec後に実行という括りを付けています。中身の 4～6行は、ロードマークが表示され、しかもサムネイルが全く取得されない条件が揃えば、ページをリロードするというコードです。

正常な状態では、ロードマークは短時間で消えます。また、リストをスクロールした場合もロードマークが表示されますが、その場合はリストにサムネイルがあります。結局、条件が揃うのは「リスト表示」画面が新しく表示された時だけです。そして、そのページロード開始 2sec後でロード中なら、これはフリーズと判断してリロードをします。

2secの猶予時間はアバウトですが、上手く動作し適当と思います。

「Ameblo Lightbox JS」 ver. 1.6 は、このフリーズ回避コードを追加しました。

「Ameblo Lightbox JS」の仕様

● 拡大表示の対象は、アメーバブログとアメーバニュースに掲載された「img要素」（画像）です。それらを「Ctrl+左クリック」すると「Lightbox」内に表示します。

●「リンクカード」「Ameba Pick」のカバー画像、「Amebaスタンプ」「各種のバナー」「アメーバ絵文字」なども拡大表示します。

● リンクが「img要素」に設定されている場合は、クリックで通常通り機能します。また「Shift+左クリック」すると、リンク先が別ウインドウに表示されます。

● 拡大表示前の通常の表示に戻るには、「Lightbox」内を左クリックします。

●「Lightbox」内の上部にマウスポインターを移動すると「Photo Storage」のボタンが表示され、これを左クリックすると画像一覧ページへ移動できます。

●「Lightbox」内の上部にマウスポインターを移動すると「◪」のボタンが表示されます。これを左クリックすると、拡大時の背景色の白/黒の設定が変更されます。

● 画像一覧ページでも「Ameblo Lightbox JS」は機能します。

● ブログページ上の画像の左クリックで画像一覧を開いた場合は、画像表示枠内を左クリックすると、元のページ表示に戻れます。これはブラウザの「戻る」を押したのと同様の機能です。

●「Lightbox」内を「Ctrl+左クリック」すると、スクロール拡大表示になります。

● スクロール拡大は、縦スクロールと横スクロールの場合があり、これは画像とウインドウの縦横比によって、縦/横が自動的に判別されます。

● スクロール拡大（縦）の場合は「拡大率」と「＋」「－」ボタンが表示され、拡大率を「20%～90%」の範囲で調節できます。

●「Lightbox」の「背景色」、スクロール拡大（縦）の「拡大率」は、各ブログごとに Cookieに登録され、次回にそのブログを開いた時に再現されます。

〔非対応の画像について〕

◎「ブログヘッダーの画像」「ブログ背景の画像」などは、「img要素」ではないので非対応です。

◎ 本文中の「リブログカード」のカバー画像、「ツイッター」「インスタグラム」の埋め込み枠内の画像、本文下部のAD画像などは「iframe内」で非対応です。

◎ 非対応の画像を「Ctrl+左クリック」すると、リンクが設定されている場合は、通常は他のタブにリンク先が開きます。

「Ameblo Lightbox JS」 ver. 1.6 を使用するには

「Ameblo Lightbox JS」は Chrome/Edge/Firefox の拡張機能「Tampermonkey」上で動作します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法特定ページで JavaScriptを実行する「Tampermonkey」は定評のあるブラウザ拡張機能です。これをブラウザに導入すると、ユーザーはスクリプトの制作や実行が可能になります∽ameblo.jp

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。これは全て削除して、完全に空白の編集枠に下のコードをコピー&ペーストします。

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

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

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

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

◎ 複数の「Ameblo Lightbox JS」のバージョンを「Tampermonkey」に登録する事は問題ありませんが、ONとするのは1つに限ります。複数を同時にONとすると正常な動作が保証されません。

〔 Ameblo Lightbox JS 〕 ver. 1.61

// ==UserScript==
// @name         Ameblo Lightbox JS
// @namespace    http://tampermonkey.net/
// @version      1.61
// @description  ブログ掲載画像の高精細な暗転拡大表示
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://news.ameba.jp/*
// @noframes
// @grant        none
// ==/UserScript==

let disp_mode=0; // 拡張ディスプレイモードの判別
let back_color; // Lightbox背景色
let comic_w; // スクロール拡大（縦）の最大幅

let html_=document.querySelector('html');

let target=document.querySelector('body');
let monitor=new MutationObserver(catch_photo);
monitor.observe(target, { childList: true, subtree: true });

catch_photo();

function catch_photo(){
    monitor.disconnect();
    let page_img=document.querySelectorAll('img');
    if(page_img.length!=0){
        box_env0();
        box_env1(); // Lightbox背景色設定

        for(let k=0; k<page_img.length; k++){
            if(page_img[k].parentNode.tagName=='A'){
                page_img[k].parentNode.style.opacity='1'; } // ホバーの薄化表示を無効化
            let style=window.getComputedStyle(page_img[k]);
            if(style.getPropertyValue('pointer-events')=='none'){
                page_img[k].style.pointerEvents='auto'; }} // クリック防止指定を無効化

        for(let k=0; k<page_img.length; k++){
            page_img[k].addEventListener('mousedown', function(event){
                if(event.ctrlKey==true){
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    box_env2(page_img[k]);
                    set_img(page_img[k]);
                    to_storage(page_img[k]);
                    close(); }}); }}

    monitor.observe(target, { childList: true, subtree: true });


    let img_frame=document.querySelector('._3-g1Ourp ._2F4CsxZ2');
    if(img_frame){
        img_frame.onclick=function(e){
            e.stopImmediatePropagation();
            history.back(); }} // 画像一覧の画像表示枠のクリックで遷移元画面に


    let path=location.pathname; // 現在のパス名
    if(path.split('/').slice(-1)[0]=='imagelist.html'){
        setTimeout(()=>{
            if(document.querySelector('._3EX8xkUG ._3tinH7Ew')
               && !document.querySelector('._2z3jgBXG')){
                location.reload();
            }}, 2000); } // 2sec待っても画像リストが取得できない時はリロード

} // catch_photo()



function box_env0(){
    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; text-align: center; } '+
        '#photo_sw { position: fixed; 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; } '+
        '#photo_sw:hover .bc { opacity: 1; } '+
        '.bc { position: absolute; top: 24px; right: 24px; height: 24px; overflow: hidden;'+
        'font: normal 24px/26px Meiryo; border-radius: 4px; cursor: pointer; opacity: 0; } '+
        '#wp { right: 100px; font-weight: bold; } #wm { right: 70px; font-weight: bold; } '+
        '#ws { right: 145px; line-height: 28px; padding: 0 5px; } '+
        '#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>'+
        '<p id="ws" class="bc"></p>'+
        '<p id="wp" class="bc">＋</p><p id="wm" class="bc">－</p>'+
        '<p id="bow" class="bc">◤</p></div>'+
        '<img id="box_img">';
    if(!document.querySelector('#lightbox')){
        body.appendChild(box); }} // box_env0()



function box_env1(){
    back_color=get_cookie('Lightbox_back');
    if(back_color!='black' && back_color!='white'){
        back_color='black'; }
    document.cookie='Lightbox_back='+back_color+'; Max-Age=2592000'; // Cookieの更新
    icon_color();

    comic_w=get_cookie('Lightbox_comic_w');
    if(isNaN(comic_w) || comic_w<20 || comic_w>90){
        comic_w=90; }
    document.cookie='Lightbox_comic_w='+comic_w+'; Max-Age=2592000'; // Cookieの更新

    b_or_w();
    disp_wpm(disp_mode);
    comic_width(); } // box_env1()



function b_or_w(){
    let lightbox=document.querySelector('#lightbox');
    lightbox.style.background=back_color; // 背景色をCookieから指定
    let bow=document.querySelector('#bow');
    if(bow){
        bow.onclick=function(event){
            event.stopImmediatePropagation();
            if(lightbox.style.backgroundColor!='white'){
                lightbox.style.backgroundColor='white';
                back_color='white'; }
            else{
                lightbox.style.backgroundColor='black';
                back_color='black'; }
            icon_color();
            document.cookie='Lightbox_back='+back_color+'; Max-Age=2592000'; // Cookieの更新
        }}}



function icon_color(){
    let bc=document.querySelectorAll('#photo_sw .bc');
    for(let k=0; k<bc.length; k++){
        if(back_color=='black'){
            bc[k].style.color='white';
            bc[k].style.background='#000';
            bc[k].style.border='2px solid #fff'; }
        else{
            bc[k].style.color='black';
            bc[k].style.background='#fff';
            bc[k].style.border='2px solid #000'; }}}



function comic_width(){
    let ws=document.querySelector('#ws');
    if(ws){
        ws.textContent=comic_w; }

    let wp=document.querySelector('#wp');
    if(wp){
        wp.onclick=function(event){
            event.stopImmediatePropagation();
            if(comic_w<81){
                comic_w=Number(comic_w) +10; }
            let box_img=document.querySelector('#box_img');
            if(box_img){
                box_img.style.width=comic_w+'vw'; }
            ws.textContent=comic_w;
            document.cookie='Lightbox_comic_w='+comic_w+'; Max-Age=2592000'; // Cookieの更新
        }}

    let wm=document.querySelector('#wm');
    if(wm){
        wm.onclick=function(event){
            event.stopImmediatePropagation();
            if(comic_w>29){
                comic_w=Number(comic_w) -10; }
            let box_img=document.querySelector('#box_img');
            if(box_img){
                box_img.style.width=comic_w+'vw'; }
            ws.textContent=comic_w;
            document.cookie='Lightbox_comic_w='+comic_w+'; Max-Age=2592000'; // Cookieの更新
        }}}



function disp_wpm(n){
    let wp=document.querySelector('#wp');
    if(wp){
        if(n==0){
            wp.style.visibility='hidden'; }
        else{
            wp.style.visibility='visible'; }}
    let wm=document.querySelector('#wm');
    if(wm){
        if(n==0){
            wm.style.visibility='hidden'; }
        else{
            wm.style.visibility='visible'; }}
    let ws=document.querySelector('#ws');
    if(ws){
        if(n==0){
            ws.style.visibility='hidden'; }
        else{
            ws.style.visibility='visible'; }}}



function get_cookie(name){
    let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name));
    if(cookie_req){
        if(cookie_req.split('=')[1]==null){
            return 0; }
        else{
            return cookie_req.split('=')[1]; }}
    if(!cookie_req){
        return 0; }}



function box_env2(target_img){
    let photo_link=document.querySelector('#photo_link');
    if(photo_link){
        if(target_img.parentNode.getAttribute('href')
           && target_img.parentNode.classList.contains('detailOn')){
            photo_link.style.visibility='visible'; }
        else{
            photo_link.style.visibility='hidden'; }}}



function hide_photo_link(){
    let photo_link=document.querySelector('#photo_link');
    if(photo_link){
        photo_link.style.visibility='hidden'; }}



function set_img(target_img){
    let lightbox=document.querySelector('#lightbox');
    let box_img=lightbox.querySelector('#box_img');
    let img_src=target_img.getAttribute('src');
    let img_url;

    if(img_src.indexOf('?caw=')!==-1){
        img_url=img_src.split('?caw=')[0]; }
    else if(img_src.indexOf('?cat=')!==-1){
        img_url=img_src.split('?cat=')[0]; }
    else {
        img_url=img_src; }

    if(lightbox && img_url!=''){
        html_.style.overflow='hidden';
        box_img.src=img_url;
        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();

            let i_width=box_img.naturalWidth;
            let i_height=box_img.naturalHeight;
            let w_width= window.innerWidth;
            let w_height= window.innerHeight;

            if(!event.ctrlKey){
                html_.style.overflow='inherit';
                lightbox.classList.remove('fin');
                lightbox.classList.add('fout');
                lightbox.style.overflow='hidden'; // overflowのリセット
                box_img.style.height='96vh';
                box_img.style.width='96vw';
                box_img.style.padding='2vh 2vw';
                setTimeout(()=>{
                    lightbox.style.visibility='hidden';
                    box_img.src='';
                }, 200);
                hide_photo_link(); // 画像一覧へのリンクを無効化
                disp_mode=0; // 拡張ディスプレイモード リセット
                disp_wpm(disp_mode); }

            if(event.ctrlKey){
                if(i_width*w_height/w_width/i_height>1.1){ // 画像とウインドウを比較：横長
                    lightbox.style.overflowX='scroll';
                    lightbox.style.overflowY='hidden';
                    box_img.style.height='90vh';
                    box_img.style.width='auto';
                    box_img.style.padding='4vh 2vw'; }

                else { // 画像とウインドウを比較：縦長
                    disp_mode=1; // 拡張ディスプレイモード 縦長
                    disp_wpm(disp_mode);

                    lightbox.style.overflowX='hidden';
                    lightbox.style.overflowY='auto';
                    box_img.style.height='auto';
                    box_img.style.width=comic_w +'vw';
                    box_img.style.padding='2vh 5vw'; }}
        }}}

〔追記〕 2021.09.27

実用上の問題はなさそうですが、60行の「リスト表示」ページを判定するコードを以下の様に改め、 ver. 161 としました。

 if(path.split('/')[2]=='imagelist.html'){
　　　　　　　　⇩
 if(path.split('/').slice(-1)[0]=='imagelist.html'){

上側のコードでは、ブログトップページで「https://ameblo.jp/personwritep」などの場合は、path.split('/')[2]は存在しない（undefined ?）からです。後のコードは、配列の最後を取得するので、この問題はありません。

「Ameblo Lightbox JS」最新版について

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Ameblo Lightbox JS」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

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