アメブロ記事の画像を高精細に拡大表示する「Lightbox JS」
アメブロの掲載画像の最大容量は通常ユーザーで「1画像につき3MB」で、かなり高精細な画像をアップロードできます。 ただ、大容量の画像を掲載したページは表示速度が落ち、ブログシステムの負荷にもなるので、アメブロのシステムはデータ容量を減らした画像をブログページ用に送り出します。
つまり、過剰に高精細な画像をアップロードしても、ブログ上で高品位に表示される事はありません。 しかし、アップロードした画像はサーバーに元サイズで保存されているので、サーバーに直接アクセスすれば、高画質の元画像を見る事ができます。 これは画像のURLをブラウザに直接指定する事で可能ですが、少し手間です。
「Lightbox JS」は、この操作を画像のクリックだけで可能にします。 通常、ブログ掲載画像のクリックは、閲覧中のブログの画像リスト（画像一覧）を表示しますが、「Lightbox JS」はブラウザ全面に、その元画像を高品位なまま拡大表示します。
縦長・横長 の画像の拡大表示
これまでは、画像のクリックで元画像を暗転して表示し、その際、開いているブラウザウインドウに「内接するサイズ」に画像を拡大していました。
画像の縦横比がブラウザウインドウに近い場合は、この仕様は有効です。 しかし、画像が縦長の場合は、拡大率が制限されます。 特にウインドウの高さを超える様な縦長画像の場合は、暗転表示でブログ誌面より小さく表示される事も生じます。 （これは4コマ漫画の掲載ページ等で生じます）
上の図から、❷の場合だけが拡大率が特に制限される事が判ります。
これは、ウインドウに内接する拡大仕様では解決できないので、「Alt＋クリック」でスクロール表示となる拡大仕様を採り入れました。
「Ctrl＋クリック」の操作方法 を避ける
当初、暗転画面で「Shift＋クリック」で縦スクロール拡大、「Ctrl+クリック」で横スクロール拡大するコードを作りました。 しかし「Ctrl+スクロール」がブラウザ拡大率の変更操作なので、拡大率を変える誤操作を生じ易い事に気付きました。
そこで、縦長画像・横長画像を判断するコードを作りました。 縦長なら縦スクロール拡大となり、横長なら横スクロール拡大に自動的に拡大方式が選択されます。 これで操作が「Alt＋左クリック」のみになり、誤操作を減らせたと思います。
拡大表示の操作方法
下はサンプルのページで、縦長の画像と横長の画像がブログ上にあります。
●「Lightbox JS」が動作している場合、縦長の画像を「左クリック」すると、下の様な暗転拡大の表示になります。 これはこれまでの仕様の通りです。
● この状態で画面を「Alt+左クリック」すると、横幅をウインドウ幅に内接させた「縦スクロール拡大」の表示になります。
▪上下の方向に隠れた部分は、縦方向にスクロール表示ができます。
▪画面を「左クリック」すると、元のブログ画面に戻ります。
●「Lightbox JS」が動作している場合、横長の画像を「左クリック」すると、下の様な暗転拡大の表示になります。 これはこれまでの仕様の通りです。
● この状態で画面を「Alt+左クリック」すると、縦幅をウインドウ幅に内接させた「横スクロール拡大」の表示になります。
▪左右の方向に隠れた部分は、横方向にスクロール表示ができます。
▪「Shift+スクロールホイール」で、横方向のスクロール操作が可能です。
▪画面を「左クリック」すると、元のブログ画面に戻ります。
画像リスト（画像一覧）を表示する
「Lightbox JS」が動作下で、閲覧中のブログの画像リスト（画像一覧）を表示するには、マウスポインターを下の赤枠の範囲に移動します。「 Photo Storage」のボタンが表示されるので、これを左クリックします。
この操作で、下の様に画像リスト（画像一覧）の画面が開きます。
この画面でも「Lightbox JS」は機能します。 拡大対象は中央に表示された画像のみで、「左クリック」で暗転拡大し「Alt+左クリック」でスクロール拡大が可能です。
掲載画像を取得する
拡大表示した画像を、ブラウザウインドウ外にドラッグする事で、データ縮小処理を受けない画像を取得できます。（ただしファイル形式は全てJpegに変換されます）
また、「画像一覧」画面でも暗転拡大表示をした画像のドラッグアウトが可能です。
この機能は高品位画像の閲覧を目的とするものです。 他ユーザーの掲載画像を扱う上で、著作権上の問題を生じない注意が必要です。
「Ameblo Lightbox JS」の仕様
● 拡大表示の対象は、ブログ本文部分に掲載された「img要素」です。
●「リンクカード」「Ameba Pick」のカバー画像、「Amebaスタンプ」「各種のバナー」「アメーバ絵文字」なども拡大表示します。
● 暗転拡大表示では、アメブロヘッダーは非表示になります。
●「Lightbox」内の上部にマウスポインターを移動すると「 Photo Storage」のボタンが表示され、これを左クリックすると画像一覧ページへ移動できます。
●「Lightbox」内を「Alt+左クリック」すると、スクロール拡大表示になります。
●「Lightbox」内を左クリックすると、拡大表示前のページ表示に戻ります。
〔非対応の画像について〕
◎「ブログヘッダー」や「サイドバー」上の画像、「画像つき記事」のカバー画像などは、本文のエリアではないので非対応です。
◎ 本文中の「リブログカード」のカバー画像、「ツイッター」「インスタグラム」の埋め込み枠内の画像、本文下部のAD画像などは「iframe内」で非対応です。
◎ 非対応の画像をクリックすると、リンクがあればリンク先への遷移が生じます。
「Ameblo Lightbox JS」ver. 0.6 を使用するには
「Ameblo Lightbox JS」は Chrome/Edge/Firefox の拡張機能「Tampermonkey」上で動作します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
◎ ver. 0.5 以前の「Ameblo Lightbox JS」を利用されている場合は、旧バージョンを削除して、新たに ver. 0.6 を登録してください。
〔 Ameblo Lightbox JS 〕 ver. 0.6
// ==UserScript==
// @name Ameblo Lightbox JS
// @namespace http://tampermonkey.net/
// @version 0.6
// @description ブログ掲載画像の高精細な暗転拡大表示
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @noframes
// @grant none
// ==/UserScript==
let html_=document.querySelector('html');
let target=document.querySelector('head');
let monitor=new MutationObserver(catch_photo);
monitor.observe(target, { childList: true });
catch_photo();
function catch_photo(){
let page_img=document.querySelectorAll('#entryBody img');
if(page_img.length!=0){
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].addEventListener('mousedown', 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(); }}); }}} // catch_photo()
let target_s=document.querySelector('body');
let monitor_s=new MutationObserver(catch_photo_s);
monitor_s.observe(target_s, { childList: true, subtree: true });
catch_photo_s();
function catch_photo_s(){
let page_img=document.querySelectorAll('._1cWXMxGU img');
if(page_img.length!=0){
box_env1();
for(let k=0; k<page_img.length; k++){
page_img[k].addEventListener('mousedown', function(event){
if(event.shiftKey==false && event.ctrlKey==false){
event.preventDefault();
box_env2(page_img[k]);
set_img(page_img[k]);
close(); }}); }}} // catch_photo_s()
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();
let i_width=box_img.naturalWidth;
let i_height=box_img.naturalHeight;
let w_width= window.innerWidth;
let w_height= window.innerHeight;
if(!event.altKey){
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); }
if(event.altKey){
if(i_width*w_height/w_width>i_height){ // 画像とウインドウを比較：横長
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 if(i_width*w_height/w_width<i_height){ // 画像とウインドウを比較：縦長
lightbox.style.overflowX='hidden';
lightbox.style.overflowY='scroll';
box_img.style.height='auto';
box_img.style.width='90vw';
box_img.style.padding='2vh 5vw'; }}
}}}
「Ameblo Lightbox JS」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
