「動作モード」ボタンが正しく動作しない問題
「Ranking Blocker」は、ヘッダー部の左端の「アメーバアイコン」を、ツールの主要スイッチとして使います。
アクセスランキングページを開くと、「通常モード」「登録編集モード」のモードによって、「アメーバアイコン」は下のどちらかの表示になります。
しかし、ページジャンプ機能などをテスト中に、頻繁にこのスイッチが無効になることに気付きました。
症状
「動作モード」を変更しようとスイッチをクリックすると、自分の「HOME」画面に飛ばされます。
「アメーバアイコン」は、本来はユーザーの「HOME」画面へのリンクが設定されています。
ツールのコードは、動作モードの切換えのためにこのリンクをオーバーライドします。 そのコードがページリロード時に、かなりの確率で無効化される状態でした。
対策コード
「アメブロヘッダー」に関系し、これは以前にもあったトラブルです。
ページ読込み時を観察すると、「アメブロヘッダー」の表示タイミングが微妙に遅れます。 この遅れが「アメーバアイコン」の取得失敗を誘うのが原因の様です。
対策として「MutationObserver」で取得を何度も試みるコードを作りましたが、結果は芳しくありません。 方法を改め、「アイコン」の取得タイミングを少し遅らせると、問題が改善されました。 現在は「0.4sec」の遅延を設定しています。
「MutationObserver」を徹底的に使う方法がベストかも知れませんが、簡単な遅延コードで問題が出ない様なので、これでOKとしました。
以下は、この遅延コード(太字)を組込んだ関数「logo_sw_setter()」です。
〔追記〕
この遅延でも、通信環境が悪い場合にリンクが機能してしまう場合があったので、アイコンに適用する「styleタグ」(この適用は確実に行われる)で、リンクを無効化しました。
「動作モード」の登録を「SessionStorage」に変更
「通常モード」「登録編集モード」は、ページが切換っても維持される方が便利で、これまで「Cookie」にモードの状態を登録して、参照していました。 私の場合、この登録をDevToolsで見ると、以下の様な状態です。
無自覚に「Cookie」を設定していたので、「総合」「記事」「新着」など「path」別に同じ登録名で複数が登録されています。 これは、ランキング様式を移動すると「動作モード」が変わる場合があるわけで、設計の本意と異なります。
「Cookie」の「Domain属性」「Path属性」を指定すれば、ひとつの登録に統一できると思いますが、それより「SessionStorage」を使った方が簡単なので、こちらを利用するコードに改めました。
「SessionStorage」は、ひとつのブラウザウインドウを開き、それが閉じられるまでの間だけ有効な登録になり、「動作モード」の登録に適しているでしょう。 別の時にランキングを開いた時は、初期値の「通常モード」で開始となります。
なお、これまで登録していた「Cookie」は「30日」後に自動で消えます。
「Ranking Blocker」の使い方
以下のページに操作マニュアルを纏めています。
「Ranking Blocker」を利用するには
「Ranking Blocker」は Chrome / Edge / Firefox のブラウザ上で動作します。
このツールは、「Ameblo Rankings Viewer Ⅱ」というスタイルでアレンジしたランキングページ上で動作し、このアレンジは必須です。 以下に、ページアレンジとスクリプト導入の環境設定の手順を説明します。
(A) 拡張機能「Stylus」と「Ameblo Rankings Viewer Ⅱ」の入手
A-❶ 拡張機能「Stylus」の導入
「Ameblo Rankings Viewer Ⅱ」のアレンジを実現するには、使用されているブラウザに拡張機能「Stylus」を導入する必要があります。(既にこの拡張機能を導入している場合は、A-❶の手順は不要です)
拡張機能「Stylus」を導入する手順は、以下のリンクを参照ください。 (新EdgeはChrome版が使えます)
A-❷「Ameblo Rankings Viewer Ⅱ」の入手
「Ameblo Rankings ViewerⅡ」は、以下のページから入手できます。
このリンク先は、下の様なページです。
サンプル画像の下の install ボタンを押します。
この操作で「Stylus」のインストール画面が表示されます。 下の画面の左上にある「インストール {S}」のボタンをもう一度押します。
「スタイルがインストールされています」と表示されたら、この画面を閉じます。 以上で「Ameblo Rankings ViewerⅡ」のインストールが完了です。
(B) 拡張機能「Tampermonkey」と「Ranking Blocker」の導入
B-❶ 拡張機能「Tampermonkey」の導入
「Tampermonkey」は、使用しているブラウザに適した版を導入する必要があります。(既にこの拡張機能を導入している場合は、B-❶の手順は不要です)
「Tampermonkey」の導入手順は、以下のページを参照ください。
B-❷「Ranking Blocker」のインストール
●「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
●「Ranking Blocker」の旧バージョンがある場合は、削除してください。
〔 Ranking Blocker 〕ver. 1.0
// ==UserScript== // @name Ranking Blocker // @namespace http://tampermonkey.net/ // @version 1.0 // @description 不要なランキングノミネートの非表示 // @author Ameba Blog User // @match https://blogger.ameba.jp/genres/* // @match https://blogger.ameba.jp/hashtags/* // ==/UserScript== let rb_style= '<style id="RB_style">'+ '.-ameblo-cmnhf-logo { width: 66px; padding-left: 7px; cursor: pointer; '+ 'outline: #028d9f solid 1px; outline-offset: -2px; border-radius: 3px; }'+ '.-ameblo-cmnhf-logo a { pointer-events: none; }'+ '.RB_sw { position: absolute; top: 4px; left: -40px; font: bold 10px Meiryo; '+ 'padding: 5px 2px 4px; border: 1px solid #aaa; background: #fff; '+ 'cursor: pointer; display: none; }'+ '.RB_sw.B:hover { color: red; }'+ '.RB_sw.U:hover { color: #26c6da; }'+ '.RB_item:hover .RB_sw { display: block; }'+ '</style>'; if(document.querySelector('#RB_style')){ document.querySelector('#RB_style').remove(); } document.body.insertAdjacentHTML('beforeend', rb_style); // ブロックリストを全クリアするには、以下のコードを有効にしてリロードします。 // 再びブロックリストの登録を可能にするには、以下のコードを元通りコメントアウトします。 // window.localStorage.removeItem("RankingBlock_ID"); let block_id=[]; let read_json=localStorage.getItem('RankingBlock_ID'); // ローカルストレージ保存名 block_id=JSON.parse(read_json); if(block_id==null){ block_id=['tmp1','tmp2']; } let block_filter=block_id.join('|'); let block_regex=RegExp(block_filter); let ua=0; let agent = window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } let edit_mode; // Ranking Blocker の動作モード logo_sw_setter(); neo_pager(); function logo_sw_setter(){ edit_mode=sessionStorage.getItem('RB_emode'); if(edit_mode!=0 && edit_mode!=1){ edit_mode=0; // edit_modeを セッションストレージから取得 → 初期値「0」 sessionStorage.setItem('RB_emode', 0); } setTimeout(()=>{ // SWの安定取得のためのタイミング let logo_sw=document.querySelector('.-ameblo-cmnhf-logo'); if(logo_sw){ if(edit_mode==0){ logo_sw.style.outlineColor='#028d9f'; logo_sw.style.background='#fff'; } else{ logo_sw.style.outlineColor='#fff'; logo_sw.style.background='red'; } logo_sw.addEventListener('click', function(event){ event.preventDefault(); if (event.ctrlKey==true){ menu(); } else{ emode_set(); }}, false); } }, 400); } // logo_sw_setter() function menu(){ let insert_dialog; insert_dialog=document.createElement('div'); insert_dialog.setAttribute('id', 'rankb'); let inner= '<input id="button0" type="submit" value="✖ 閉じる">'+ '<input id="button1" type="submit" value="ブロックリストを保存する">'+ '<input id="button2" type="file">'+ '<span id="button2_span"> ブロックリストのJSONファイルを選択</span>'+ '<input id="button3" type="submit" value="ヘルプ">'; insert_dialog.innerHTML=inner; let css= '#rankb { position: fixed; top: 0; white-space: nowrap; font-size: 14px; '+ 'width: 100%; padding: 0 60px; background: #96b7c7; } '+ '#rankb input { font: normal 14px/24px Meiryo; } '+ '#button0 { padding: 2px 6px 0; margin: 9px 0; } '+ '#button1 { padding: 2px 8px 0; margin: 9px 0 9px 40px; } '+ '#button2 { margin: 9px -180px 9px 40px; } '+ '#button2_span { background: #96b7c7; vertical-align: -1px; } '+ '#button3 { padding: 2px 6px 0; margin: 9px 0 9px 40px; } '; if(ua==1){ css+= '#button0 { padding: 0 6px; margin: 9px 0; } '+ '#button1 { padding: 0 8px; margin: 9px 0 9px 40px; } '+ '#button2 { margin: 9px -210px 9px 40px; width: 265px; } '+ '#button3 { padding: 0 6px; margin: 9px 0 9px 40px; } '; } let style=document.createElement('style'); style.innerHTML=css; insert_dialog.appendChild(style); if(!document.querySelector('#rankb')){ document.body.appendChild(insert_dialog); } let button0=document.querySelector('#button0'); button0.onclick=function(){ insert_dialog.remove(); } let button1=document.querySelector('#button1'); button1.onclick=function(){ let write_json=JSON.stringify(block_id); let blob=new Blob([write_json], {type: 'application/json'}); let a=document.createElement("a"); a.href=URL.createObjectURL(blob); document.body.appendChild(a); a.download='ranking_bl.json'; a.click(); document.body.removeChild(a); URL.revokeObjectURL(a.href); } let button2=document.querySelector('#button2'); button2.addEventListener("change" , function(){ if(!(button2.value)) return; // ファイルが選択されない場合 let file_list=button2.files; if(!file_list) return; // ファイルリストが選択されない場合 let file=file_list[0]; if(!file) return; // ファイルが無い場合 let file_reader=new FileReader(); file_reader.readAsText(file); file_reader.onload=function(){ if(file_reader.result.slice(0, 7)=='["tmp1"'){ // ranking_bl.jsonの確認 block_id=JSON.parse(file_reader.result); let write_json=JSON.stringify(block_id); localStorage.setItem('RankingBlock_ID', write_json); // ストレージ保存名 location.reload(); }}; }); let button3=document.querySelector('#button3'); button3.onclick=function(){ let url='https://ameblo.jp/personwritep/entry-12757564496.html'; window.open(url, '_blank'); } } // menu() function emode_set(){ let logo_sw=document.querySelector('.-ameblo-cmnhf-logo'); if(edit_mode==0){ edit_mode=1; sessionStorage.setItem('RB_emode', 1); logo_sw.style.outlineColor='#fff'; logo_sw.style.background='red'; blocker(); } else if(edit_mode==1){ edit_mode=0; sessionStorage.setItem('RB_emode', 0); logo_sw.style.outlineColor='#028d9f'; logo_sw.style.background='#fff'; blocker(); }} let target0=document.querySelector('.l-container'); // 監視 target let monitor0=new MutationObserver(neo_pager); monitor0.observe(target0, {childList: true, subtree: true}); // リストページ更新の監視開始 function neo_pager(){ if(location.pathname.indexOf('blogs/ranking')!=-1 || // 総合ブログランキング location.pathname.indexOf('entries/ranking')!=-1){ // 記事ランキング let pager= '<input id="input_page" type="number" autofocus="" min="0" step="20">'+ '<style>'+ '#input_page { position: absolute; top: 2px; right: 40px; '+ 'font: bold 16px Meiryo; padding: 2px 0 0 12px; width: 70px; height: 19px; }'+ '</style>'; let ambHeader=document.querySelector('#ambHeader'); if(!document.querySelector('#input_page')){ ambHeader.insertAdjacentHTML('beforeend', pager); } let input_page=document.querySelector('#input_page'); let wurl=window.location.search; // クエリー文字列から現在のページを取得 let q=0; if(wurl){ let query=wurl.split('&'); for(let k=0; k<query.length; k++){ if(query[k].indexOf('rank=')!=-1){ // 総合ブログランキング q=query[k].replace(/[^0-9]/g, ''); } if(query[k].indexOf('offset=')!=-1){ // 記事ランキング q=query[k].replace(/[^0-9]/g, ''); }}} input_page.value=q; if(location.pathname.indexOf('blogs/ranking')!=-1){ // 総合ブログランキング document.addEventListener('keydown', function(event){ if(event.keyCode==13){ event.preventDefault(); let jump_url=window.location.href.split('?')[0]+ '?rank='+input_page.value+'&amebaId='+input_page.value; window.location.href=jump_url; }}); } if(location.pathname.indexOf('entries/ranking')!=-1){ // 記事ランキング document.addEventListener('keydown', function(event){ if(event.keyCode==13){ event.preventDefault(); let jump_url=window.location.href.split('?')[0]+ '?offset='+input_page.value+'&amebaId=0&entryId=0'; window.location.href=jump_url; }}); } document.addEventListener('keydown', function(event){ if(event.keyCode==38){ // 「⇧」キーを取得 event.preventDefault(); input_page.stepUp(1); } if(event.keyCode==40){ // 「⇩」キーを取得 event.preventDefault(); input_page.stepDown(1); }}); } else{ // ハッシュタグ・新着の場合 let input_page=document.querySelector('#input_page'); if(input_page){ input_page.remove(); }} } // neo_pager() let target1=document.querySelector('.l-container'); // 監視 target let monitor1=new MutationObserver(blocker); monitor1.observe(target1, {childList: true, subtree: true}); // リストページ更新監視開始 blocker(); function blocker(){ let k; let user_href=[]; let user_a=[]; let user_id=[]; let send; let g_nav=document.querySelectorAll('.c-genreGlobalNav__item'); if(g_nav[1].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemA=document.querySelectorAll('.p-rankingAllText__item'); for(k=0; k<rank_itemA.length; k++){ user_a[k]=rank_itemA[k].querySelector('.p-rankingAllText__user a'); user_href[k]=user_a[k].getAttribute('href'); block_item(rank_itemA[k], user_href[k]);}} // 総合ブログランキング if(g_nav[2].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemT=document.querySelectorAll('.p-rankingTodayText__item'); for(k=0; k<rank_itemT.length; k++){ user_a[k]=rank_itemT[k].querySelector('.p-rankingTodayText__user a'); user_href[k]=user_a[k].getAttribute('href'); block_item(rank_itemT[k], user_href[k]); }} // 記事ランキング if(g_nav[3].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemH=document.querySelectorAll('.p-hashtagEntryRanking__item'); for(k=0; k<rank_itemH.length; k++){ user_a[k]=rank_itemH[k].querySelector('.p-hashtagEntryRanking__user a'); user_href[k]=user_a[k].getAttribute('href'); block_item(rank_itemH[k], user_href[k]); }} // ハッシュタグランキング if(g_nav[4].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemR=document.querySelectorAll('.p-recentEntryText__item'); for(k=0; k<rank_itemR.length; k++){ user_a[k]=rank_itemR[k].querySelector('.p-recentEntryText__user a'); user_href[k]=user_a[k].getAttribute('href'); block_item(rank_itemR[k], user_href[k]); }} // 新着記事 function block_item(item, user_href){ if(block_regex.test(user_href)==true){ if(edit_mode==0){ item.style.visibility='hidden'; } if(edit_mode==1){ item.style.visibility='visible'; item.style.background='#a9c1cf'; }}} } // blocker let target2=document.querySelector('.l-container'); // 監視 target let monitor2=new MutationObserver(checker); monitor2.observe(target2, {childList: true, subtree: true}); // リストページ更新の監視開始 checker(); function checker(){ let k; let user_href=[]; let user_a=[]; let user_aH=[]; let user_id=[]; let g_nav=document.querySelectorAll('.c-genreGlobalNav__item'); if(g_nav[1].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemA=document.querySelectorAll('.p-rankingAllText__item'); for(k=0; k<rank_itemA.length; k++){ user_a[k]=rank_itemA[k].querySelector('.p-rankingAllText__user a'); user_href[k]=user_a[k].getAttribute('href'); check_item(rank_itemA[k], user_href[k]); }} // 総合ブログランキング if(g_nav[2].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemT=document.querySelectorAll('.p-rankingTodayText__item'); for(k=0; k<rank_itemT.length; k++){ user_a[k]=rank_itemT[k].querySelector('.p-rankingTodayText__user a'); user_href[k]=user_a[k].getAttribute('href'); check_item(rank_itemT[k], user_href[k]); }} // 記事ランキング if(g_nav[3].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemH=document.querySelectorAll('.p-hashtagEntryRanking__item'); for(k=0; k<rank_itemH.length; k++){ user_a[k]=rank_itemH[k].querySelector('.p-hashtagEntryRanking__user a'); user_aH[k]= // URL取得先 rank_itemH[k].querySelector('.p-hashtagEntryRanking__blogName>a'); user_href[k]=user_aH[k].getAttribute('href'); check_item(rank_itemH[k], user_href[k]); }} // ハッシュタグランキング if(g_nav[4].classList.contains('c-genreGlobalNav__item--active')==true){ let rank_itemR=document.querySelectorAll('.p-recentEntryText__item'); for(k=0; k<rank_itemR.length; k++){ user_a[k]=rank_itemR[k].querySelector('.p-recentEntryText__user a'); user_href[k]=user_a[k].getAttribute('href'); check_item(rank_itemR[k], user_href[k]); }} // 新着記事 function check_item(item, user_href){ item.classList.add('RB_item'); let sw; if(block_regex.test(user_href)==false){ sw='<div class="RB_sw B">Block</div>'; } else{ sw='<div class="RB_sw U">Unset</div>'; } if(!item.querySelector('.RB_sw')){ item.insertAdjacentHTML('beforeend', sw); } let RB_sw=item.querySelector('.RB_sw'); RB_sw.onclick=function(event){ event.preventDefault(); local_backup(user_href); }} function local_backup(user_href){ if(block_regex.test(user_href)!=true){ let ok=confirm(" ⛔ ブロックリストに登録しますか?"); if(ok){ let user_id=user_href.replace('https://ameblo.jp/', ''); user_id=user_id.replace(/\//g, ''); block_id.push(user_id); let write_json=JSON.stringify(block_id); localStorage.setItem('RankingBlock_ID', write_json); // ストレージ保存名 location.reload(); }} if(block_regex.test(user_href)==true){ let ok=confirm(" 🟢 ブロックリストから外し表示させますか?"); if(ok){ let user_id=user_href.replace('https://ameblo.jp/', ''); user_id=user_id.replace(/\//g, ''); block_id=block_id.filter( function(item){ return item !==user_id; }); let write_json=JSON.stringify(block_id); localStorage.setItem('RankingBlock_ID', write_json); // ストレージ保存名 location.reload(); }}} } // checker
「Ranking Blocker」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ranking Blocker」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。