最初から「元データ画像」を「Lightbox」表示
これまで「元データ画像」を「別タブ」に開く様にしていましたが、画像の容量が数MB程度が普通なので、通信上の「重さ」を気にしたからですが、コードを弄っている内にこの程度はたいした容量ではないと気付きました。
そこで、「ユーザー別写真リスト」の画面では「中サイズ画像」ではなく、最初から「元データ画像」を Lightbox表示にしてみました。 結果は、Lightboxにロールダウンする形で画像が表示される程度で、現在の通信速度（一般的な光通信のPC）では、問題になる様な通信遅延はないと判断できました。
「Ameblo Lightbox JS」に寄せる
「ユーザー別写真リスト」の画面は「Exifデータ」があり、「元データ画像」をこの画面にロードすれば検証作業を完結できます。 また、「元データ画像」を「別タブ」で開く際にスクリプト起動に失敗する問題が不問になります。
これは「Ameblo Lightbox JS」と同様に、「Lightbox」には最初から最良のデータを表示する形になります。 このバージョンは、最初の検索抽出による「サムネイルリスト」の画面と、そこから表示する「ユーザー別写真リスト」の2画面のみの表示となった最初のバージョンです。
「Lightbox」内のスイッチ
「Lightbox」内の表示の切換スイッチのデザインを変更しました。
最初はボックス内に全てが収まる「object-fit: contain」の状態です。 差は判りませんが、従来の「中サイズ画像」の表示が「元データ画像」の表示になっています。
スイッチは「PhotoSop」の表記に従いました。
最初の全画像の場合は、「等倍表示」（にする）のスイッチです。
等倍表示の画面では「ウインドウサイズ」（に合わせる）のスイッチです。
このバージョンは改善の余地があります。「Lightbox」で画像の「等倍表示」をすると、左上隅から表示される点が気に入りません。 これは、次の改善点になります。
「PhotoHito Viewer」の扱い方
基本的な扱い方は、下のページを参照ください。 ただし、バージョンごとに仕様を変更しているので、説明が一致しない点はツールの制作記事を参照ください。
「PhotoHito Viewer」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 PhotoHito Viewer 〕 ver. 0.4
// ==UserScript==
// @name PhotoHito Viewer
// @namespace http://tampermonkey.net/
// @version 0.4
// @description try to take over the world!
// @author You
// @match https://photohito.com/*
// @match https://photohito.k-img.com/*
// @exclude https://photohito.com/photo/orgshow/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=photohito.com
// @run-at document-start
// @grant none
// ==/UserScript==
let path=location.pathname;
if(path.startsWith('/photo') || path.startsWith('/lens') || path.startsWith('/camera')){
let retry=0;
let interval=setInterval(wait_target, 10);
function wait_target(){
retry++;
if(retry>10){ // リトライ制限 100回 0.1secまで
clearInterval(interval); }
let target=document.body; // 監視 target
if(target){
clearInterval(interval);
list_env(); }}
function list_env(){
let style=
'<style id="ph_v">'+
'h1#logo { display: none; } '+
'body .wrapper_full article #path { margin: 2px 15px 15px !important; } '+
'#user_header { margin: -14px 15px 0; } '+
'body .wrapper article h1 { font-size: 120%; padding: 0 0 12px 40px; cursor: pointer; } '+
'body .wrapper article h1 i { margin-top: -18px; } '+
'body .wrapper_full article section { margin-right: 15px !important; } '+
'body .wrapper_full aside { position: absolute; top: 0; right: 0; padding: 30px 20px; '+
'background: #fff; z-index: 10; display: none; } '+
'body .wrapper_full aside .notlogin_banner { display: none; } '+
'section { display: flex; flex-direction: column; } '+
'.wrapper article h1 { order: -2; } '+
'#photo_list_search_form { width: 600px; order: -2; } '+
'#photo_list_sort {width: 320px; position: relative; top: -50px; left: 600px; order: -2; } '+
'.photo_list { order: 0; } '+
'#pagenate { padding: 7px 0; order: -1; margin: -50px 0 20px; background: #f8f8fa; } '+
'#photo_detail #photo_view { overflow: hidden; } '+
'#photo_detail #photo_view a { margin: 0 auto !important; width: fit-content; } '+
'#photo_detail #photo_view a:hover { box-shadow: 0 100vw 0 100vw #000; } '+
'.adBox-300-2, .ad_detail, .content_ad, '+
'#div-gpt-ad-p-300x250, #div-gpt-ad-p-side_300x250 { display: none; }'+
'</style>';
if(!document.querySelector('#ph_v')){
document.documentElement.insertAdjacentHTML('beforeend', style); }}
} // 共通CSS
window.addEventListener('DOMContentLoaded', function(){
let path=location.pathname;
if(path.startsWith('/photo')){ //「ユーザー別写真リスト」の画面
box_env();
if(get_cookie('PHView_e')==1){
exif_env(); }
let photo_side=document.querySelector('#photo_view');
if(photo_side){
photo_side.onclick=function(){ // 画像両サイドのクリックでウインドウを閉じる
window.close(); }}
function box_env(){
let lightbox=
'<div id="lightbox">'+
'<div id="photo_sw"><a id="photo_link">⬜ View Actual Pixels</a></div>'+
'<img id="box_img">'+
'<style>'+
'@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; text-align: center; '+
'background: #000; width: 100vw; height: 100vh; overflow: auto; visibility: hidden; } '+
'#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: 4px 12px 2px 10px; background: #fff; color: #000; '+
'border: 2px solid #000; border-radius: 6px; cursor: pointer; text-decoration: none; } '+
'#box_img { width: 98vw; height: 98vh; padding: 1vh 1vw; object-fit: contain; } '+
'</style></div>'+
'<div id="exif_sw">'+
'Exifを上部表示'+
'<style>'+
'#exif_sw { position: absolute; top: 84px; left: 500px; z-index: 1; font-size: 15px; '+
'padding: 11px 10px 8px; border: solid 1px #999; border-radius: 2px; '+
'cursor: pointer; z-index: 1; }'+
'</style></div>';
if(!document.querySelector('#lightbox')){
document.body.insertAdjacentHTML('beforeend', lightbox); }}
function exif_env(){
let ex_style=
'<style id="exif_style">'+
'#user_header { z-index: 1; } '+
'#photo_detail .wrapper:nth-child(3) { width: 1000px !important; } '+
'#photo_detail #photo_view a { margin: 0 260px 0 0 !important; width: fit-content; } '+
'#photo_detail #photo_view { display: flex; flex-wrap: wrap; justify-content: center; } '+
'#photo_detail #photo_view h1 { width: 100%; } '+
'#sideInfo { position: absolute;top: 90px; left: calc(50vw + 220px); '+
'padding: 20px 8px; width: 250px; background: #fff; } '+
'.notlogin_banner, #tag_area, #location_area, #btn_violation { display: none; } '+
'#photo_view_side { display: none; } '+
'aside table { margin: 5px 0 0; } '+
'aside tr { display: flex; flex-direction: column; } '+
'aside th { padding: 0; font-size: 12px; } '+
'aside td { padding: 0 0 5px; text-align: left; }'+
'</style>';
if(!document.querySelector('#exif_style')){
document.documentElement.insertAdjacentHTML('beforeend', ex_style); }}
let exif_sw=document.querySelector('#exif_sw'); // Exifパネルの配置スイッチ
if(exif_sw){
exif_sw.onclick=function(){
let exif_style=document.querySelector('#exif_style');
if(exif_style){
document.cookie='PHView_e=0; path=/; Max-Age=2592000'; // 30日有効
exif_style.remove(); }
else{
document.cookie='PHView_e=1; path=/; Max-Age=2592000'; // 30日有効
exif_env(); }}}
let img_link=document.querySelector('#photo_view a');
let l_img=document.querySelector('#photo_view img:last-child');
if(img_link && l_img){
img_link.addEventListener('mousedown', function(event){
if(!event.shiftKey && !event.ctrlKey){
event.preventDefault();
set_img(l_img);
org_size();
close(); }}); }
function set_img(target){
let html_=document.querySelector('html');
let lightbox=document.querySelector('#lightbox');
let photo_link=document.querySelector('#photo_link');
let box_img=lightbox.querySelector('#box_img');
if(lightbox && photo_link && box_img){
let img_url=target.getAttribute('src');
if(img_url){
let last=img_url.slice(-5);
if(last=='l.jpg'){
let new_url=img_url.slice(0, -5) +'o.jpg';
box_img.src=new_url;
html_.style.overflow='hidden';
lightbox.style.visibility='visible';
lightbox.classList.remove('fout');
lightbox.classList.add('fin');
}}}}
function org_size(){
let lightbox=document.querySelector('#lightbox');
let photo_link=document.querySelector('#photo_link');
let box_img=lightbox.querySelector('#box_img');
photo_link.onclick=function(event){
event.stopImmediatePropagation();
if(box_img.style.width!='auto'){
let org='width: auto; height: auto; padding: 0;';
box_img.setAttribute('style', org);
photo_link.textContent='🔲 Fit on Screen'; }
else{
let nor='width: 98vw; height: 98vh; padding: 1vh 1vw;';
box_img.setAttribute('style', nor);
photo_link.textContent='⬜ View Actual Pixels';
}}}
function close(){
let html_=document.querySelector('html');
let lightbox=document.querySelector('#lightbox');
let box_img=lightbox.querySelector('#box_img');
if(lightbox){
box_img.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); }}}
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; }}
} //「ユーザー別写真リスト」の画面
if(path.startsWith('/lens') || path.startsWith('/camera')){ //「サムネイルリスト」の画面
let plist_a=document.querySelectorAll('.photo_list .grid > a');
for(let k=0; k<plist_a.length; k++){
plist_a[k].setAttribute('target', '_blank'); }
let title=document.querySelector('.wrapper article h1');
let aside=document.querySelector('.wrapper_full aside');
if(title && aside){
title.onclick=function(){
if(aside.style.display!='block'){
aside.style.display='block'; }
else{
aside.style.display='none'; }}}
} //「lens」「camera」の検索抽出画像の「サムネイルリスト」の画面
}); // main()
「PhotoHito Viewer」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「PhotoHito Viewer」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
