細部のチューンナップ
「サムネイルリスト」のページレイアウトを一部更新しました。
❶ 最上段の「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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。