小型モニターに対応
ver. 0.1 は、とにかく確実に動作する事を目的にしましたが、サブマシンでテストすると、モニターの高さが不足して操作に苦労しました。
下は、ver. 0.1のデザインのハードコピーですが(記事リストはスタッフブログ)、「記事リスト」の高さは「約1050px」でした。
これは、モニターを全画面表示にするとなんとか操作出来ますが、通常のウインドウ表示では、上部にウインドウタブ等で「80px」が追加されますから、1130px以上の縦幅が必要になります。
デスクトップモニターの縦方向サイズは「1024px~1080px」程度が多く使われている様で、「約1050px」は高過ぎと言えます。 余裕のあるモニターだけを対象にするなら良いのですが。
CSSの複雑化は、表示速度に多くは影響しない
「記事リスト」を適切なデザインで表示するために、ページを開く度にページアレンジ用の「styleタグ」を生成して埋め込んでいます。 このスクリプト動作は、微妙に時間が必要で、元のページが一瞬表示されますが、それが仕方ない事はこれまでの経験で判っています。 しかし、「styleタグ」の文字数の量は、この遅延には殆ど影響せず、スクリプト自体の起動タイミング等が関係します。
とういう事で、もっと精密なアレンジコードで「記事リスト」をアレンジしました。 以下は、更新後のデザインです。
表示の高さに影響する部分を再アレンジして、「記事リスト」の高さを「925px」に抑えています。 これで、通常のウインドウ表示のままで処理ができ、快適です。
また、私のブログ環境を前提としてツールを制作していたので、他のブログでフォント指定が異なる場合がある事が判り、「メイリオ」の指定を追加しました。
「CoverImg Checker」ver. 0.2
このツールは Chrome・Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 CoverImg Checker 〕 ver. 0.2
// ==UserScript== // @name CoverImg Checker // @namespace http://tampermonkey.net/ // @version 0.2 // @description 「記事一覧」の無効なカバー画像を自動チェックする // @author Ameba Blog User // @match https://ameblo.jp/* // @match https://secret.ameba.jp/* // @match https://blog.ameba.jp/ucs/entry/srventry* // @noframes // @grant none // ==/UserScript== let stop_next=0; // 自動実行の進行フラグ let target=document.querySelector('head'); let monitor=new MutationObserver(main); monitor.observe(target, { childList: true }); main(); function main(){ if(document.querySelector('.skin-blogArchive')){ //「記事一覧」画面の場合 let menu=document.createElement('div'); menu.innerHTML= '<span id="retoucha">再編集</span> '+ '<span id="filea">リスト表示</span>'+ '<style>#eaoa_menu { position: absolute; z-index: 20; '+ 'font: normal 14px Meiryo; color: #333; padding: 3px 10px 1px; '+ 'border: 1px solid #dadce0; background: #fff; cursor: default; '+ 'box-shadow: 4px 4px 2px -2px rgba(0, 0, 0, 0.48); } '+ '#eaoa_menu span { padding: 1px 4px 0; } '+ '#eaoa_menu span:hover { color: #fff; background: #2196f3; }</style>'; menu.setAttribute("id", 'eaoa_menu'); menu.style.display='none'; if(!document.getElementById('eaoa_menu')){ document.querySelector('body').appendChild(menu); } let style=document.createElement('style'); style.innerHTML= '[data-uranus-layout="archive"] { margin: 0; } '+ '[data-uranus-component="archiveNavTab"] { '+ 'height: 32px; line-height: 32px; } '+ '[data-uranus-layout="archiveBody"] { padding-top: 15px; } '+ '[data-uranus-component="archiveList"]>li { '+ 'height: 32px; padding: 4px 8px; background: #fff; } '+ '[data-uranus-component="entryItemFeedback"], '+ '[data-uranus-component="entryItemTheme"] { '+ 'display: none; } '+ '[data-uranus-component="entryItemImage"], '+ '[data-uranus-component="imageFrame"] img { '+ 'height: 32px !important; overflow: hidden; background: #eee; } '+ '[data-uranus-component="entryItemTitle"] { overflow: hidden; '+ 'font-size: 16px; color: #000; height: 21px; margin: 0 0 -5px; } '+ '[data-uranus-component="entryItemMeta"] { '+ 'min-height: unset; height: 20px; } '+ '[data-uranus-component="entryItemDatetime"] { '+ 'margin-bottom: -2px; } '+ '[data-uranus-component="archiveFooter"] { padding: 0; } '+ '[data-uranus-component="pagination"] { '+ 'margin-top: 10px; padding: 4px; } '+ '[data-uranus-component="pagination"] li { '+ 'font-size: 16px; line-height: 32px; } '+ '[data-uranus-component="pagination"] li a { height: 30px; } '+ 'html { scroll-behavior: auto; } '+ '#main { position: absolute; top: 0; left: calc(50% - 420px); '+ 'width: 840px; font-family: Meiryo; '+ 'background: #d2e0e6; box-shadow: 0 0 0 200vw #d2e0e6; } '+ '#ambHeader, .skin-bgHeader, .skin-blogHeaderNav, '+ '#subA, .skin-blogSubB, .skin-blogFooterNav { display: none; } '+ 'div[id^="div-gpt-ad"] { display: none; } '+ '#app> :not(.skin-page) { display: none; } '; style.setAttribute("id", 'CIC_style'); if(!document.getElementById('CIC_style')){ document.querySelector('body').appendChild(style); } let ctrl_f=0; // Ctrlキー 押下フラグ let ac_list=document.querySelectorAll('.skin-borderQuiet'); for(let k=0; k<ac_list.length; k++){ ac_list[k].setAttribute("onContextmenu", 'return false;'); // コンテキスト抑止 ac_list[k].addEventListener('contextmenu', function(e){ // 専用メニュー表示 menu_disp(e, ac_list[k]); }); } function menu_disp(event, target){ if(ctrl_f==0){ document.getElementById('eaoa_menu').style.display="block"; document.getElementById('eaoa_menu').style.left=event.pageX+"px"; document.getElementById('eaoa_menu').style.top=event.pageY+"px"; } retouch_item(target); file_item(target); } document.addEventListener('keydown', function(event){ if(event.ctrlKey){ //コンテキスト表示 ctrl_f=1; let ac_list=document.querySelectorAll('.skin-borderQuiet'); for(let k=0; k<ac_list.length; k++){ ac_list[k].removeAttribute("onContextmenu", 'return false;'); }}}); document.addEventListener('click', function(){ document.getElementById('eaoa_menu').style.display="none"; // 専用メニュー抑止 ctrl_f=0; let ac_list=document.querySelectorAll('.skin-borderQuiet'); for(let k=0; k<ac_list.length; k++){ ac_list[k].setAttribute("onContextmenu", 'return false;'); }}); // コンテキスト抑止 function retouch_item(target){ let retouch=document.getElementById('retoucha'); retouch.onclick=function(){ let title_link=target.querySelector('h2 a'); let entry_id_a=title_link.getAttribute('href').split('entry-'); if(entry_id_a[1]){ let entry_id=entry_id_a[1].slice(0, 11); if(entry_id){ let path= 'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+entry_id; window.open(path, "_blank"); }}}} function file_item(target){ let file=document.getElementById('filea'); file.onclick=function(){ let user; let entry_id; let entry_ym; let date=target.querySelector( '[data-uranus-component="entryItemDatetime"]').textContent; let title_link=target.querySelector('h2 a').getAttribute('href'); let user_a=title_link.split('/'); if(user_a.indexOf('secret.ameba.jp')==-1){ user=user_a[1]; } else{ user=user_a[3]; } let entry_id_a=title_link.split('entry-'); if(date && user && entry_id_a[1]){ entry_ym=date.replace(/[^0-9]/g, '').slice(0, 6); entry_id=entry_id_a[1].slice(0, 11); let path= 'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+ '1&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id; window.open(path, "_blank"); }}} if(location.pathname.indexOf('entrylist')!=-1){ // 新着リストでのみ実行 document.addEventListener('keydown', function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.keyCode==32){ let footer= document.querySelector('[data-uranus-component="pagination"]'); if(stop_next==0){ stop_next=1; if(footer){ footer.style.background='#2196f3'; }} else{ if(footer){ footer.style.background=''; } location.reload(); }}}, false); setTimeout(()=>{ let imgFrame= document.querySelectorAll('[data-uranus-component="imageFrame"]'); let check=0; for(let k=0; k<imgFrame.length; k++){ check+=1; let imgF_width=imgFrame[k].getBoundingClientRect().width; if(imgF_width>106){ let li=imgFrame[k].closest('.skin-borderQuiet'); li.style.outline='2px solid red'; stop_next=1; }} if(check==20){ setTimeout(()=>{ if(stop_next==0){ next_open(); } }, 100); } }, 3000); function next_open(){ let next_button=document.querySelector('.js-paginationNext'); if(next_button && next_button.classList.contains('is-disabled')!=true){ let next_url=next_button.getAttribute('href'); window.location.href=next_url; }} function pre_open(){ let pre_button=document.querySelector('.js-paginationPrev'); if(pre_button && pre_button.classList.contains('is-disabled')!=true){ let pre_url=pre_button.getAttribute('href'); window.location.href=pre_url; }} } } //「記事一覧」画面の場合 if(document.querySelector('#entryListEdit')){ //「記事の編集・削除」の場合 let arg=new Object; let pair=location.search.substring(1).split('&'); for(let i=0; pair[i]; i++){ let key=pair[i].split('='); arg[key[0]]=key[1]; } // key[0]がkey, key[1]がvalue let entry_ym=arg.entry_ym; let pageID=parseInt( arg.pageID, 10); // 数値に変換 let user=arg.user; let entry_id=arg.entry_id; let amebaId=document.querySelector('#gHeaderRight .amebaId').textContent; let entryList_li=document.querySelectorAll('#entryList li'); if(user!=null){ if(amebaId!=user){ // 他ユーザーのブログでリスト表示を押した場合 if(history.length>1){ window.history.back(); } else{ window.close(); }} else{ let k; for(k=0; k<entryList_li.length; k++){ let entryList_a=entryList_li[k].querySelector('h2 a'); if(entryList_a){ if(entryList_a.getAttribute('href').indexOf(entry_id)!=-1){ entryList_li[k].style.outline='2px solid red'; entryList_li[k].scrollIntoView({block: "center"}); break; }}} if(k==entryList_li.length){ pageID+=1; let path= 'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+ pageID+'&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id; window.location.href=path; }}} } //「記事の編集・削除」の場合 if(document.querySelector('.l-body')){ //「編集画面」の場合 if(document.querySelector('.l-form form > .error')){ // 他ユーザで再編集を押した場合 if(history.length>1){ window.history.back(); } else{ window.close(); }} } //「編集画面」の場合 } // main()
「CoverImg Checker」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「CoverImg Checker」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。