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

「画像一覧」へのリンクが無いユーザー画像 

通常の方法で記事を書くと、ブログ記事上の画像には自動的に「画像一覧」へのリンクが付きます。 このリンク設定はシステムにより自動的に行われ、画像をクリックした閲覧者を「画像一覧」内のその画像の画面に導きます。

これは、ユーザー画像のデータベース機能の一部で、高機能な割に利用する場合が少ない気がします。 それでも、時には「画像一覧」を開きたい場合があり、決してないがしろにできません。

この機能に関して時々気になっていたのですが、訪問先のブログで「画像一覧」が開かない掲載画像に出会う事があります。 Yahooから引っ越したブログにそれがあったので、引っ越し処理などが一因かも知れません。 外部サイトの画像をコピーして貼り付けた場合も「画像一覧」へのリンクが出来ないので、幾つかの場合がある様です。

上は通常のブログ記事に挿入された画像のHTML例ですが、ブルーのリンクの部分が欠落している事があるわけです。 しかし「画像一覧」を調べると、ユーザー自身の画像なので、ちゃんと画像のリストの中に画像をみつける事が出来ます。

「Lightbox」は「画像一覧」を軽視しない 

ブログに掲載された画像を拡大表示するだけでなく、「画像一覧」との往来を管理するのも「Lightbox」の仕事です。 できれば、リンクを失った画像でも「画像一覧」に案内したいのです。 そこで、通常の「画像一覧」へのリンクの書式を観察して、それを真似て、画像のSRCからリンクを作ってみました。

様々な場合があるかも知れず、「予想したリンク」が「画像一覧」を開く事が出来る確証はなかったのですが、どうやら上手く行く様です。

if(!link && cont==1){ // 画像ストレージのリンクが無いユーザー画像の場合
    let image_src=target_img.getAttribute('src');
    if(image_src.startsWith('https://stat.ameba.jp/user_images')){
        let entry_id=target_img.getAttribute('data-entry-id');
        let image_id=target_img.getAttribute('data-image-id');
        let entry=document.querySelector('.js-entryWrapper');
        if(entry){
            let ameba_id=entry.getAttribute('data-unique-ameba-id');
            let link_href=
                'https://ameblo.jp/'+ ameba_id +'/image-'+ entry_id +'-'+ image_id +'.html';
            photo_link.innerHTML='<i class="fas fa-camera"></i> Photo Storage Presumed';
            photo_link.setAttribute('href', link_href); // 画像から得たリンクの設定
            photo_link.style.visibility='visible'; }}
    else{
        photo_link.style.visibility='hidden'; }}

太字の部分は、自動生成されるリンクの書式を真似て、画像のSRC等からリンクを作る主要部分です。

この予測して作った「画像一覧」へのリンクを、「Lightbox」内に表示する様にしました。 この場合はボタンを押しても「画像一覧」が開かないかも知れないので、下の様な表示にしています。

今回はこの機能を追加したので、リンクボタンの表示が以下の3種になります。

① 通常のユーザー画像で「画像一覧」へのリンクがある場合

➁ 外部サイトへのリンクが設定された「バナー」や「リンクカード画像」の場合

➂ ユーザー画像で「画像一覧」へのリンクが失われている場合

「画像ドラッグ」を可能にする 

Chrome / Edge / Firefox は、画面上の画像をデスクトップにドラッグ&ドロップする操作で、画像ファイルを取得でき、この操作はユーザーにとって便利です。 ところが「Ameblo Lightbox JS」のバージョンのどこからか、この操作が出来ない様になっていました。

画像をクリックした時の反応を抑止すると、「リンクカード」や「バナー」の画像を「Lightbox」内に表示するのに都合が良いのですが、その代わり画像のドラッグ&ドロップが出来なくなっていたのです。 今回、この両方を可能にする工夫をしました。

採用した方法は、「c」または「C」キーを押しながらドラッグ操作をすれば、これが可能になるという方法です。（Copyの「C」で覚え易いはずです）

let e_free=0;

document.body.addEventListener('keydown', function(event){
if(event.key=='c' || event.key=='C'){
    e_free=1; // 画像ドラッグを可能にする
    setTimeout(()=>{
    e_free=0; }, 500); }}); // 0.5sec で通常に戻る

「e_free」という変数を用意し、「c」または「C」キーを押すと 0.5secの間だけ、値が「1」になります。 これは実際は、キーを押している間が「1」となります。

ツールで画像を「左クリック」する操作時に、この変数を参照します。 通常はドラッグを抑止するこれまでの動作をさせ、キーを押した時だけドラッグ&ドロップが可能になるという塩梅です。

以上で、各種の画像を「Lightbox」に表示する事がこれまで通り可能で、しかも画像の「ドラッグ&ドロップ」が可能になりました。

なお、この「ドラッグ&ドロップ」操作は、「Lightbox表示」「スクロール拡大表示」「画像一覧」の画面や対応各種ページでも、「c/C」のキーを押せば可能です。

「Ameblo Lightbox JS」の扱い方 

「Ameblo Lightbox JS」の扱い方は、以下のページのマニュアルを参照ください。

アメブロ専用 画像ビューア「Ameblo Lightbox JS」 操作マニュアル

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

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

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法

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

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

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

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

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

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

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

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

〔 Ameblo Lightbox JS 〕 ver. 2.1

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

let disp_mode=0; // 拡張ディスプレイモードの判別
let back_color; // Lightbox背景色
let comic_w; // スクロール拡大（縦）の最大幅
let with_cact; // ブログ画面でのLightboxの起動方法

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(){
    let e_free=0;

    document.body.addEventListener('keydown', function(event){ // キー入力を感知
        if(event.key=='c' || event.key=='C'){
            e_free=1; // 画像ドラッグを可能にする
            setTimeout(()=>{
                e_free=0; }, 500); }}); // 0.5sec で通常に戻る


    monitor.disconnect();

    box_env0(); // Lightbox 基本のパーツ生成
    box_env1(); // Lightbox 各種コントロール設定

    let page_img=document.querySelectorAll('img');
    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'; }} // クリック防止指定を無効化



    let path=location.pathname; // 現在のパス名
    let host=window.location.hostname; // 現在のホスト名（サブドメインを含む）

    if(path.split('/').slice(-1)[0].startsWith('image')){ // ⬜ 画像一覧画面
        let page_img=document.querySelectorAll('img');
        for(let k=0; k<page_img.length; k++){
            page_img[k].addEventListener('mousedown', function(event){
                event.stopImmediatePropagation();
                light_box(event, 1, page_img[k]); }); }}
    else{
        if(host=='ameblo.jp' || host=='secret.ameba.jp'){ // ⬜ ブログページ・アメンバーページ
            let page_img;
            if(with_cact==0){
                page_img=document.querySelectorAll('img'); }
            else{
                if(host=='ameblo.jp'){
                    page_img=document.querySelectorAll('#entryBody img'); }
                if(host=='secret.ameba.jp'){
                    page_img=document.querySelectorAll('.skin-entryBody img'); }}
            for(let k=0; k<page_img.length; k++){
                page_img[k].addEventListener('mousedown', function(event){
                    event.stopImmediatePropagation();
                    light_box(event, 0, page_img[k]); }); }}

        else if(host=='news.ameba.jp' || host=='blogger.ameba.jp' ||
                host=='blogtag.ameba.jp'){ // ⬜ アメーバニュース・ブログランキング・ハッシュタグ
            let page_img=document.querySelectorAll('img');
            for(let k=0; k<page_img.length; k++){
                page_img[k].addEventListener('mousedown', function(event){
                    event.stopImmediatePropagation();
                    light_box(event, 2, page_img[k]); }); }}}



    function light_box(event, type, img){
        if(e_free==0){
            event.preventDefault(); // 操作性に重要な影響有り 画像ドラッグも不可にする

            if(type==0){ // ブログページ用
                if((event.ctrlKey==true && with_cact==0) ||
                   (event.shiftKey==false && event.ctrlKey==false && with_cact==1)){
                    box_env2(img, 1);
                    ac_disp(1);
                    set_img(img);
                    close(); }}

            if(type==1){ // 画像一覧画面用
                if(event.ctrlKey==true){
                    box_env2(img, 0);
                    ac_disp(0);
                    set_img(img);
                    close(); }}

            if(type==2){ // その他の 一般ページ用
                if(event.ctrlKey==true){
                    box_env2(img, 1);
                    ac_disp(0);
                    set_img(img);
                    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(); }} // 画像一覧の画像表示枠のクリックで遷移元画面に



    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=
        '@import url("https://use.fontawesome.com/releases/v5.0.6/css/all.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: 24px; left: 30px; text-decoration: none; '+
        'font: bold 21px Meiryo; padding: 3px 12px 0; color: #000; background: #fff; '+
        'border: 2px solid #000; border-radius: 6px; cursor: pointer; opacity: 0; } '+
        '#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; '+
        'margin: 0; box-sizing: content-box; } '+
        '#ws { right: 230px; line-height: 28px; padding: 0 5px; } '+
        '#wp { right: 195px; font-weight: bold; } #wm { right: 165px; font-weight: bold; } '+
        '#ac { right: 70px; 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">'+
        '<a id="photo_link"></a>'+
        '<p id="ac" class="bc"></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(){
    with_cact=get_localst('Lightbox_cact');
    if(with_cact!=0 && with_cact!=1){
        with_cact=0; }
    localStorage.setItem('Lightbox_cact', with_cact); // ローカルストレージの更新

    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更新

    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更新

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



function ctrl_act(){
    let ac=document.querySelector('#ac');
    if(ac){
        if(with_cact==0){
            ac.textContent='Ctrl+'; }
        else{
            ac.textContent='Click'; }

        ac.onclick=function(event){
            event.stopImmediatePropagation();
            if(with_cact==0){
                with_cact=1;
                ac.textContent='Click'; }
            else{
                with_cact=0;
                ac.textContent='Ctrl+'; }
            localStorage.setItem('Lightbox_cact', with_cact); // ローカルストレージの更新
            location.reload();
        }}}



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 get_localst(name){
    if(!localStorage.getItem(name)){
        return 0; }
    else{
        return localStorage.getItem(name); }}



function box_env2(target_img, cont){
    let photo_link=document.querySelector('#photo_link');
    if(photo_link){
        let link=target_img.closest('A');
        if(link && cont==1){
            if(link.classList.contains('detailOn')){
                photo_link.innerHTML='<i class="fas fa-camera"></i> Photo Storage'; }
            else{
                photo_link.innerHTML='<i class="fas fa-link"></i> Linked Page'; }
            photo_link.setAttribute('href', link.getAttribute('href')); // リンクのコピー
            photo_link.style.visibility='visible'; }

        else if(!link && cont==1){ // 画像ストレージのリンクが無いユーザー画像の場合
            let image_src=target_img.getAttribute('src');
            if(image_src.startsWith('https://stat.ameba.jp/user_images')){
                let entry_id=target_img.getAttribute('data-entry-id');
                let image_id=target_img.getAttribute('data-image-id');
                let entry=document.querySelector('.js-entryWrapper');
                if(entry){
                    let ameba_id=entry.getAttribute('data-unique-ameba-id');
                    let link_href=
                        'https://ameblo.jp/'+ ameba_id +'/image-'+ entry_id +'-'+ image_id +'.html';
                    photo_link.innerHTML='<i class="fas fa-camera"></i> Photo Storage Presumed';
                    photo_link.setAttribute('href', link_href); // 画像から得たリンクの設定
                    photo_link.style.visibility='visible'; }}
            else{
                photo_link.style.visibility='hidden'; }}

        else{
            photo_link.style.visibility='hidden'; }

        photo_link.onclick=function(event){
            event.stopImmediatePropagation(); }}}



function ac_disp(n){
    let ac=document.querySelector('#ac');
    let ws=document.querySelector('#ws');
    let wp=document.querySelector('#wp');
    let wm=document.querySelector('#wm');

    if(ac){
        if(n==0){
            ac.style.visibility='hidden';
            ws.style.right='135px';
            wp.style.right='100px';
            wm.style.right='70px'; }
        else{
            ac.style.visibility='visible';
            ws.style.right='230px';
            wp.style.right='195px';
            wm.style.right='165px'; }}}



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



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

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

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

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

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）