細部のチューンナップ
「サムネイルリスト」のページレイアウトを一部更新しました。
❶ 最上段の「PHOTOHITO」のロゴなどの部分は、作業上で不要なので削除。
❷ 使用機種の「タイトル部」文字サイズを小型にして、縦幅をコンパクト化。
❸ 前バージョンで右サイドバーは非表示でしたが、「タイトル部」のクリックで表示可能にしました。 これは「価格.com」の当該レンズへのリンクが必要だからです。 サイドバーの表示時に邪魔になる、不要な表示を削除しました。
「サイドバー」の表示機能
検索対象を他のレンズに変更する場合に、「価格.com」の方がレンズ選択がし易く出来ています。 また価格を検討している時は、やはり「価格.com」が必要です。 で、調査中のレンズの「価格.com」のリンクは「右サイドバー」にあるので、必要な時にだけ表示できる様にしました。
上は、レイアウトを更新した最新の「サムネイルリスト」です。
❷「タイトル部」を「左Click」すると、非表示の「右サイドバー」が表示されます。
▪「タイトル部」をもう一度「左Click」すると、サイドバーが非表示になります。
下は、必要な「リンク」を選択し易くした、サイドバーを表示したところです。
「ページの表示初期」の動作調整
時々 CSSの適用に失敗する
このツールが機能するページのURLは 3種類ありますが、「サムネイルリスト」と「ユーザー別写真リスト」のページでは、高速の CSSコード適用を行っています。 これは、ページの表示初期に、できる限り早くページのアレンジを適用する操作ですが、時々適用に失敗する（アレンジ無してページが表示される）事がありました。
要因を知るのは難しいのですが、適用コードを少し緩やかに調整しました。 こんな事で改善すれば御の字ですが、今後の様子を見ます。 CSSが適用されない時は、リロードで改善しますが。
「元データ画像」の画面の問題
また、「元データ画像」の Lightbox表示 の画面は、元データが数MBの場合（これが普通です）は、ツールが正常に動作して「✖ Close」のスイッチが表示されます。
ところが、たまに非常に軽量な画像があり、それを「元データ画像」表示をリクエストした場合、確かに元データ画像が「別タブ」に表示されますが、「✖ Close」スイッチの配置に失敗します。 スイッチは単に「別タブ」を閉じ易くするだけで、タブを「✖」を押して閉じても同じ事です。 完全な動作が良いに決まっていますが、色々と工夫しても、軽量な画像では上手く動作しない事が良くあります。
「✖ Close」が出ない時は、ブラウザの標準の操作でタブを閉じてください。
「Kakakucom Viewer」との 同時使用対策
「Kakakucom Viewer」は「Stylus」上で利用できる「価格.com」のスタイルです。 これはずいぶん昔に制作して現在も更新していますが、「価格.com」の特に「クチコミ掲示板」をユーザーライクにアレンジします。
このスタイルは、兄弟サイトの「PHOTOHITO」も簡単ながらアレンジします。 そのため、「Kakakucom Viewer」と「PhotoHito Viewer」を同時に使うと、「Stylus」のアレンジが優位になり、今回は数ヵ所で目的のデザインが変化しました。 これは、「PhotoHito Viewer」側のコードに「!important」を付けて対策しました。
「PhotoHito Viewer」の扱い方
基本的な扱い方は、前ページを参照ください。 簡単ですが「右Click」「左Click」を使い分けて、効率良く操作が出来る様にしています。
「PhotoHito Viewer」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 PhotoHito Viewer 〕 ver. 0.2
// ==UserScript==
// @name PhotoHito Viewer
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://photohito.com/*
// @match https://photohito.k-img.com/*
// @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; } '+
'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();
document.addEventListener('contextmenu', function(event){
if(!event.shiftKey && !event.ctrlKey){
event.preventDefault();
let elem=document.elementFromPoint(event.clientX, event.clientY);
let link_elem=elem.closest('a');
if(link_elem){
set_img(link_elem);
close(); }}});
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">📌 Original Data</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; visibility: hidden; '+
'background: black; width: 100vw; height: 100vh; text-align: center; } '+
'#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: 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>';
if(!document.querySelector('#lightbox')){
document.body.insertAdjacentHTML('beforeend', lightbox); }}
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');
let img=target.querySelectorAll('img')[1];
if(lightbox && photo_link && box_img && img){
let img_url=img.getAttribute('src');
if(img_url){
let last=img_url.slice(-5);
box_img.src=img_url;
html_.style.overflow='hidden';
lightbox.style.visibility='visible';
lightbox.classList.remove('fout');
lightbox.classList.add('fin');
if(last=='l.jpg'){
let new_url=img_url.slice(0, -5) +'o.jpg';
photo_link.onmousedown=function(event){
event.stopImmediatePropagation();
window.open(new_url); }}}}}
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); }}}
} // path.startsWith('/photo') ユーザー別 写真一覧画面 右クリックでLightbox表示
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()
if(path.startsWith('/uploads')){
window.addEventListener('load', function(){
let close_env=
'<div id="photo_sw"><span id="close_sw">✖ Close</span>'+
'<style>'+
'#photo_sw { position: fixed; top: 0; left: 0; width: 100%; height: 15%; } '+
'#photo_sw:hover #close_sw { opacity: 1; } '+
'#close_sw { position: absolute; top: 20px; left: 30px; opacity: 0; display: inline-block; '+
'font: bold 21px Meiryo; padding: 5px 12px 2px 10px; background: #000; color: #fff; '+
'border: 2px solid #fff; border-radius: 6px; cursor: pointer; text-decoration: none; } '+
'</style></div>';
if(!document.querySelector('#photo_sw')){
document.body.insertAdjacentHTML('beforeend', close_env); }
let close_sw=document.querySelector('#close_sw');
if(close_sw){
close_sw.onclick=function(){ //「✖ Close」のクリックでウインドウを閉じる
window.close(); }}
});} // Orginal Data 画像のみのウインドウ
「PhotoHito Viewer」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「PhotoHito Viewer」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
