写真レンズを選ぶ時
写真レンズを新しく求めようという場合、スペックや評価記事で推測できる部分もありそうですが、各種情報の中で有効なのは、実際に一般のユーザーが撮影した写真かなと、私は考えています。 まあそれでも、レンズの写りや性能は、実際に使って見ないと判らない所が多いのですが。
で、候補のレンズを比較したりする時、「PHOTOHITO」は実写の情報が多くて大いに有効ですが、システムがフレンドリーではありません。 写真の著作権を守るためと思いますが、画像の元データをユーザーが取得し難いのです。 しかし、レンズの分解能や周辺収差を調べたい時は、どうしても元データの等倍チェックが必要です。 入手する側が、著作権を犯す目的では無いのに、困った問題です。
私は先日、その様な「写真からレンズ性能を調べる作業」をしていたのですが、これは、JavaScript で元データを取得するツールを作った方が早いと考えました。 ツール名は「PhotoHito Viewer」で、「Ameblo Lightbox」のコードを流用しました。
「PhotoHito Viewer」の機能と扱い方
「PHOTOHITO」で実写サンプルを調べるには、「カメラ」や「レンズ」の名前などでデータペースを検索します。 検索で抽出された写真は「サムネイルリスト」になり、そこから写真を選んで1コマずつ調べます。
下は、最初の「サムネイルリスト」のページです。 右サイドバーはAD等の表示で削除しました。 また、ページ下部の「リストのページャー」をページ上部に移動しました。 一行に表示されるサムネイル数が増え、扱い易くなっています。
「サムネイル」の選択
● 調べる写真のサムネイル ❶ を選択して「左Click」します。
▪「ユーザー別写真リスト」が表示されますが、これはこのサイトの仕様です。
▪ デフォルトは、元のリスト画面からの遷移になりますが、これを「別タブ」に表示する様に改めています。
「ユーザー別写真リスト」
「ユーザー別写真リスト」の中央に、中サイズの画像 ❷ が表示されます。
● 中央画像の両側 ❸ の部分を「左Click」すると、この画面を閉じて元のサムネイルリストの画面に戻れます。
この中サイズの画像は、元画像を扱い易いサイズにしたものです。 この ❷ の部分を「左Click」すると、画像の詳細チェックが出来るプログラムがロードされるのですが、ロードが終了するまでに時間がかかります。 これはとても時間の無駄になるので「Lightbox」を導入しました。
「中サイズ画像」の Lightbox表示
● 中央の画像 ❷ を「右Click」すると、中サイズ画像を「Lightbox」表示します。
● 画面の任意の場所 ❹ の「左Click」で 「ユーザー別写真リスト」に戻ります。
● 画面の上部にマウスポインターを移動すると「📌 Original Data」ボタン ➎ が表示されます。
「元データ画像」の Lightbox表示
● 「📌 Original Data」➎ を「左Click」すると、「元データ」を呼び出します。
▪「元データ画像」は「別タブ」に画像のみの画面として表示されます。
▪「元データ画像」は一般に大きく、スクロールして細部を調べます。
（ 横スクロールは、Shift+ホイール操作 が便利です）
▪「⊕」「⊖」のポインター表示されて、クリックで拡大縮小ができます。
▪「元データ」が小さな場合は、「⊕」「⊖」ポインターが出ない事があります。
● 画面の上部にマウスポインターを移動すると「✖ Close」ボタン ❻ が表示されます。「✖ Close」❻ を「左Click」すると「元データ」の「別タブ」が閉じます。
「元データの画像」の取得
上記の様に 2種類の画像サイズが表示されますが、「Lightbox」や画像のみのタブ上の画像はデスクトップにドラッグできます。 これで、使い慣れたグラフィックビューウアで、実写サンプルを検証する事ができます。
未だ不完全な所があり、時々このツールのデザインが適用されない事がありますが、とにかく画像チェック操作の能率がとても良くなります。 多数の写真からレンズ性能をチェックするといった、本格的なユーザーに必要なツールです。
「PhotoHito Viewer」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 PhotoHito Viewer 〕 ver. 0.1
// ==UserScript==
// @name PhotoHito Viewer
// @namespace http://tampermonkey.net/
// @version 0.1
// @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, 1);
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">'+
'body .wrapper_full article #path, '+
'body .wrapper_full article section { margin-right: 15px; } '+
'body .wrapper_full aside { 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: 0; order: -1; margin: -50px 0 20px; } '+
'#photo_detail #photo_view { overflow: hidden; } '+
'#photo_detail #photo_view a { margin: 0 auto; 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-side_300x250 { display: none; }'+
'</style>';
if(!document.querySelector('#ph_v')){
document.documentElement.insertAdjacentHTML('beforeend', style); }}
} // 元画像以外の画面の場合
window.addEventListener('DOMContentLoaded', function(){
let path=location.pathname;
if(path.startsWith('/photo')){ // 画像の右クリックでLightbox表示 ➔ 元画像のLightbox表示
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); }}}
} // 画像の右クリックでLightbox表示 ➔ 元画像の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'); }
} //「lens」「camera」の検索抽出画像のリストページ
}); // main()
if(path.startsWith('/uploads')){ // Orginal Data 画像のウインドウ
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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
