小型モニターに対応
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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
