「カバー画像のロスト」した記事をチェックする
投稿した記事のカバー画像が欠落した状態は避けたいものです。 投稿時はカバー画像を設定したつもりでいて、かなり日が経ってから気が付く場合が多く、日ごろ丁寧に再編集をするユーザーは生じる確率が増えます。「CoverImg Checker」は、これまでの全ブログ記事の「カバー画像のロスト」をチェックできます。
◎ 対象は「記事一覧」にカバー画像が表示される「新タイプスキン」に限られます。
◎「記事一覧 / 新着リスト」で、20件（1画面）を5sec程度のペースでチェックできるので、1000件の記事なら5分程度しかかかりません。
◎ ロストした記事が多数あればペースは遅くなります。 しかし、実際はロストはそう頻繁には生じないので、案外と早く終わると思います。
◎ ロストした記事を発見した場合は、その記事行を右クリックして再編集できます。
ver. 0.5 の改善点
コード全体を組み直して、操作を判り易くしました。「メニューパーツ類」「デザイン用のstyleタグ」などの高速書込みを導入し、処理画面の表示を改善しました。 また、連続動作の管理にセッションストレージを利用し、スペースキーによる停止/再開の操作性を改善しました。
操作方法
● チェック操作中は、通常のブログ作業が出来ません。
● 拡張機能「Tampermonkey」に登録した「CoverImg Checker」のみを「ON」にします。 登録している他のスクリプトツールを「OFF」とし、他の種類の拡張機能があれば、チェック作業中はそれらも「OFF」にするのがベストです。
チェック作業の開始
● ユーザー自身のブログページを開き、「記事一覧」を開きます。
●「新着」の記事リストを開いた状態で「 」を押してページをリロードします。
このリロード操作で「CoverImg Checker」が起動して、画面が下の様なコンパクトなリスト表示に変わります。
リロードした時点から、チェックが始まります。 チェックは「新着」のリストを過去に遡る向きに自動的に進行します。 これは、このツールが記事をチェックする基本的な動作です。
「カバー画像のロスト」を発見した場合
下は、カバー画像をロストした記事を発見した状態です。 チェックの進行は、ロストした記事を発見するとストップして、リスト全体に青い枠が表示されます。
❶ カバー画像をロストした記事の処理についての、処理指針を表示します。
➔ 赤枠の記事を右クリックして再編集して、カバー画像を修正する
➔ カバー画像を修正しない場合は、ページャーで別ページに移動する
（注1）記事の行を右クリックすると「再編集」のボタンが表示されます。 これをクリックすると、その記事を再編集する編集画面が開きます。 その場で記事を編集して、カバー画像の再設定ができます。
❷ カバー画像をロストした記事には、赤枠が表示されます。
（注2）ロストした記事のあるページから、移動をし難くしています。 赤枠の記事をそのままにして、更に過去の隣のページへ進むには「⇨」キーを押します。 また「⇦」キーを押すと、隣の新しいページに戻れます。
▪チェックが「停止中」の場合は、「Space」キーを押すとチェックを再開します。 反対に、チェックが「進行中」に「Space」キーを押すと進行が停止します。
▪赤枠のあるページを飛ばして更に進むには、「⇨」キーを 1度押して次のページを開き、隣のページで「Space」を 1度押して、チェック進行を再開します。
操作パネル
このツールの操作パネルは、記事リストの右横に表示される簡素なデザインです。
「CoverImg Checker」の進行は、「Space」「⇨」「⇦」のキーでコントロールします。「⇨」「⇦」キーの機能は、記事リスト最下部のページャーをマウスでクリックするのと同じです。 「Space」キーは、自動チェック動作の「停止/再開」のスイッチです。 操作パネル上の ➎ の表示は、これを示しています。
チェック操作の終了
「Exit ⏏」❸ を押すと、チェック処理を終了してブログトップへ移動します。
「Tampermonkey」で「CoverImg Checker」をOFFにしない限り、ブラウザをリロードしても「自動チェック」の状態から抜けられません。 このスイッチを使うと、簡単にチェック処理を終了する事ができます。
「CoverImg Checker」は、チェック作業時のみに「ON」とする「非常駐型」のツールです。 チェック作業を終了したら、「Tampermonkey」の「ダッシュボード」に入って、必ず「CoverImg Checker」を「OFF」にしてください。
動作タイミング「speed」の設定
❹ の右端にマウスを乗せてスピナーを操作すると、進行の速度を調節できます。
上の表示は、デフォルトの「4sec」の設定ですが、これは、新しい記事リストのページを開いて「4sec後」にカバー画像のチェックを実行する意味です。
「カバー画像」の読込みは、リストのページが開いた時より少し遅れるため、余り短い設定にすると、画像を読込む前に次のページに移動して、正常なチェックになりません。 読込みの遅れは、ユーザーの通信環境が影響するので、遅い環境では増やす必要があるかも知れません。 ページを開く度に、カバー画像が全て読み込まれてから次のページに移動する状態に調節します。（遅い方が確実です）
▪設定の範囲は「1sec ～ 4sec（デフォルト）～ 9sec」です。
「CoverImg Checker」ver. 0.5
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 CoverImg Checker 〕 ver. 0.5
// ==UserScript==
// @name CoverImg Checker
// @namespace http://tampermonkey.net/
// @version 0.5
// @description 「記事一覧」の無効なカバー画像を自動チェックする
// @author Ameba Blog User
// @match https://ameblo.jp/*/entrylist*
// @run-at document-start
// @noframes
// @grant none
// ==/UserScript==
let retry=0;
let interval=setInterval(wait_target, 1);
function wait_target(){
retry++;
if(retry>100){ // リトライ制限 100回 0.1secまで
clearInterval(interval); }
let target=document.body; // 監視 target
if(target){
clearInterval(interval);
env_in(); }}
function env_in(){
let env=
'<style id="cic_style">'+
'[data-uranus-layout="archive"] { margin: 0; padding:0 !important; } '+
'[data-uranus-component="archiveNavTab"] { '+
'height: 32px; line-height: 32px; } '+
'[data-uranus-layout="archiveBody"] { '+
'padding: 15px 30px 60px 30px; height: 820px; } '+
'[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 { background: #eee; '+
'height: 32px !important; display: initial !important; } '+
'[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"] { '+
'position: absolute; bottom: 10px; padding: 0; width: 760px; } '+
'[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 { overflow: hidden; } '+
'#main { position: absolute; top: 0; left: calc(50% - 420px); '+
'width: 840px; height: 925px; 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>';
if(!document.querySelector('#cic_style')){
document.documentElement.insertAdjacentHTML('beforeend', env); }
let elm=
'<div id="eaoa_menu">'+
'<span id="retoucha">再編集</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); display: none; } '+
'#eaoa_menu span { padding: 1px 4px 0; } '+
'#eaoa_menu span:hover { color: #fff; background: #2196f3; }</style>'+
'</div>'+
'<div id="cic_menu">'+
'<input id="end_out" type="submit" value="Exit ⏏">'+
'<input id="wait_time" type="number" min="1" max="9">'+
'<span id="sec_a">Speed</span>'+
'<span id="sec_b">sec</span>'+
'<span class="key">Space：Stop・Go</span>'+
'<span class="key"> ⇨：Next Page</span>'+
'<span class="key"> ⇦：Back Page</span>'+
'<style>#cic_menu { display: flex; flex-direction: column; '+
'position: fixed; top: 30px; left: calc(50% + 425px); '+
'color: #000; background: #fff; width: 140px; font: 16px Meiryo; '+
'border: 1px solid #2196f3; padding: 4px; } '+
'#end_out { margin-bottom: 4px; padding: 4px 0 2px; } '+
'#wait_time { padding: 4px 4px 2px 70px; margin-bottom: 8px; } '+
'#sec_a { position: absolute; top: 48px; left: 16px; } '+
'#sec_b { position: absolute; top: 48px; right:32px; } '+
'.key { padding: 2px 0; text-align: center; }</style>'+
'</div>';
if(document.body && !document.querySelector('#cic_menu')){
document.body.insertAdjacentHTML('beforeend', elm); }
main();
} // env_in()
function main(){
let stop_next=sessionStorage.getItem('cic_stop'); // 自動実行の進行フラグ
if(!stop_next){
stop_next=0; }
sessionStorage.setItem('cic_stop', stop_next); // ストレージ記入
stop_disp();
let wait_sec;
let wait_time=document.querySelector('#wait_time');
if(wait_time){
wait_sec=sessionStorage.getItem('cic_wait')*1000;
if(!wait_sec){
wait_sec=4000; }
wait_time.value=wait_sec/1000;
wait_time.onchange=function(){
sessionStorage.setItem('cic_wait', wait_time.value); }} // ストレージ記入
document.addEventListener('keydown', function(event){ //「Space」で停止
event.preventDefault();
event.stopImmediatePropagation();
if(event.keyCode==32){
if(stop_next==0){
stop_next=1;
sessionStorage.setItem('cic_stop', stop_next); // ストレージ記入
stop_disp(); }
else{
stop_next=0;
sessionStorage.setItem('cic_stop', stop_next); // ストレージ記入
stop_disp();
location.reload(); }}
else if(event.keyCode==39){
next_(); }
else if(event.keyCode==37){
pre_(); }
}, false);
setTimeout(()=>{
let retry=0;
let interval=setInterval(wait_img, 500);
function wait_img(){
retry++;
if(retry>100){ // リトライ制限
clearInterval(interval); }
if(img_check()==20 || stop_next==1){
clearInterval(interval);
if(img_check()!=20){
setTimeout(()=>{
alert_it(); }, 200); }
next_open(); }}
}, wait_sec); // カバー画像の読込み待ち時間の調節 🔴
function alert_it(){
alert(
"カバー画像の欠落した記事があります ➔ 次の❶❷の処理を選択\n"+
"❶ 赤枠の記事を右クリックして再編集して、カバー画像を修正する\n"+
"❷ カバー画像を修正しない場合は、ページャーで別ページに移動する"); }
function img_check(){
let check=0;
let imgFrame=
document.querySelectorAll('[data-uranus-component="imageFrame"]');
for(let k=0; k<imgFrame.length; k++){
let img=imgFrame[k].querySelector('img');
if(!img){
check+=1; }
else{
let img_width=img.getBoundingClientRect().width;
if(img_width==100){
check+=1; }
else if(img_width!=0){
stop_next=1;
sessionStorage.setItem('cic_stop', stop_next); // ストレージ記入
stop_disp();
let li=img.closest('.skin-borderQuiet');
li.style.outline='2px solid red'; }}}
return check; }
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');
if(stop_next!=1){
window.location.href=next_url; }}}
function next_(){
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_(){
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; }}
let end_out=document.querySelector('#end_out');
if(end_out){
end_out.onclick=function(){
let blog_url=location.href;
blog_url=blog_url.substring(0, blog_url.indexOf('entrylist'));
window.location.href=blog_url; }}
function stop_disp(){
let base=
document.querySelector('[data-uranus-layout="archiveBody"]');
if(base){
if(stop_next==0){
base.style.background=''; }
else{
base.style.background='#2196f3'; }}}
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){
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); }
document.addEventListener('click', function(){
document.getElementById('eaoa_menu').style.display="none"; // 専用メニュー抑止
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"); }}}}
} // main()
「CoverImg Checker」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「CoverImg Checker」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
