「いいね！履歴」にソート機能を追加
「いいね！履歴」の「いいね！してくれた人」のリストは、「いいね」が押された時刻順にリストがならんでいます。 これは、最近にどんな人からアクションがあったかを知る意味があります。
もちろんそれは一つの情報の見方ですが、いいねを押してくれた回数の順番にソートすると、案外と意識していなかった交流の足跡が見えて来ます。 情報の見方を変えると、思わぬ発見があるものです。
「いいね！履歴」のリストの実体は「table要素」で、ソートはその「tr要素」を並べ変える必要があります。 こんな場合の方法をネットで調べると、外部のライブラリ関数を利用する情報ばかりでした。「Tampermonkey」で外部ライブラリを使った事がないのですが、他力本願は面白くありません。 この間の「Yahoo画像」のツールでソート操作について慣れて来たので、tableのソートコードを自製しました。
tableのデータを配列化
「table要素」の「tr要素」は、表の行に相当します。 行ごとに、列に相当する「td要素」が並び、それぞれに内容が記録されています。 下は簡単な表の例です。
| A0 | B0 | C0 | D0 |
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
この「tr要素」（行）をまとめてソートするには、2次元配列を使う方法が良さそうだとすぐ想像できます。
2次元配列は「配列の中に配列がある構造」で、下は簡単な例です。
arr=[[A0, B0, C0, D0], [A1, B1, C1, D1], [A2, B2, C2, D2]]
全体は3個の子要素の配列で、その子要素のそれぞれが「A～D」の4個の子要素を持っています。 この2次元配列は、上の「table」のセルデータとそっくりで、「table」の形のデータは 2次元配列に置き換えができます。 配列のデータは、色々なソートが使え、例えば子要素の先頭の「A0」「A1」「A2」に着目して3個の子要素をソートできます。 これは「table」の各行を、1列目に着目して並べ替えるのと同じです。
つまり表の行データを行単位で並べ変えるには、表データを配列に置き換えてソートし、ソートした配列の値を表に戻してやれば良いのです。
あれこれ書いたのですが、規則正しく並んだデータの本質は「配列」であり、それを二次元にディスプレイしたものが「table」で、元は同じものなんですね。
実際のコード
コードの前半は、「いいね!してくれた人」の「table」から、それを構成するデータの中から下の4種のデータを抽出しています。
user_src / アイコン画像の SRC
user_href / ブログページのリンク
user_name / ユーザー名
user_count / 「いいね！」してくれた回数
この4個を子要素とした配列にして、表示された行の分だけ並べた2次元配列を作るのが、下のコードです。
2次元配列のソートはネット上にサンプルがあり、太字のコードの部分です。
このコードは、末尾の子要素の値で全体の配列をソートするコードです。 ここでは、「user_count / 「いいね！」してくれた回数」の降順でソートしています。 コードを少し変えれば、ユーザー名の文字順（あいうえお順の様なもの）等も可能です。
後半は、ソートしたデータを、元の「table」の形で表示するコードです。
最初は「table」（いいねしてくれた人のリスト）の表題 1行目の「tr」を残し、2行目以降の「tr」を全て削除しています。
その後に、元の「tr」の形のHTMLを再構成し、それにソートした配列のデータを入れて、配列の個数分の「tr」を生成しています。
以上の過程で、余り意味のないブログタイトルのデータを省いたので、ソート後はその部分が空白になります。
実際のソートの操作
新機能の「ソート」は、「いいねしてくれた人」のリストを「いいねの回数」の順に並べ変える機能です。
● タイトル部分を「Shift+左クリック」すると、ソートが実行されます。
判り易い様に、タイトル部に説明を入れました。
上図はソート前の本来の表示で、「いいね回数」の順がばらばらです。 ソートを行うと、下の様に「いいね回数」の順にリストが変わります。
順序を元に戻すには、ページをリロードするしかありません。 元々の時刻データがtableに無いので、こちらでは戻せないのです。
ソートしたリストを下にスクロールすると、下の様に「いいね回数」が1回のリストになりますが、これは「table」の初期データの 20件 をソートした結果です。
「もっと見る」のボタンで 20件以降のデータが tableに読み込まれます。「Bad Iine Mute」は「Space」キーで自動読込みが機能します。 膨大にいいねをもらっている方は別として、普通の方はリストの最後まで読込みを試してみてください。
その上で、タイトル部分を「Shift+左クリック」すると、従来の全データのソートが可能です。
今回のソート機能を追加したものを、改めて「Bad Iine Mute」ver. 2.1 とすることにしました。（前ページは書換えています）
「Bad Iine Mute」ver. 2.1 を導入するには
「Bad Iine Mute」は Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作するスクリプトツールです。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Bad Iine Mute 〕 ver. 2.1
// ==UserScript==
// @name Bad Iine Mute
// @namespace http://tampermonkey.net/
// @version 2.1
// @description 「管理画面」から不良な「いいね！」を非表示にする
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/top*
// @match https://blog.ameba.jp/ucs/iine/list.html*
// @grant none
// ==/UserScript==
let iine_block_data={}; // 総合ブロックデータ
let iine_block_id=[];
let iine_block_img=[];
let block_filter_id;
let block_regex_id;
let block_filter_img;
let block_regex_img;
let edit_mode=0;
let find_img_src='';
let ua=0;
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラッグ
let read_json=localStorage.getItem('iine_id_back'); // ローカルストレージ 保存名
iine_block_data=JSON.parse(read_json);
if(iine_block_data==null){
iine_block_data=[['tmp1', 'img1'], ['tmp2', 'img2']]; }
reg_set();
function reg_set(){
iine_block_id=[];
iine_block_img=[];
for(let k=0; k<iine_block_data.length; k++){
iine_block_id[k]=iine_block_data[k][0];
iine_block_img[k]=iine_block_data[k][1]; }
block_filter_id=iine_block_id.join('|');
block_regex_id=RegExp(block_filter_id);
block_filter_img=iine_block_img.join('|');
block_regex_img=RegExp(block_filter_img); }
let target0=document.querySelector('#contents'); // 監視 target
let monitor0=new MutationObserver(mode_select);
monitor0.observe(target0, {childList: true, subtree: true}); // 監視開始
mode_select();
function mode_select(){
if(document.querySelector('#iineEntry')){ // 管理トップ
monitor0.disconnect();
let div_iine=document.querySelector('#iine');
div_iine.style.position='relative';
div_iine.style.zIndex='10';
let iine_title=document.querySelector('#iineEntry .ttl');
let iine_th=document.querySelectorAll('#iineEntry th');
title_disp(iine_th[0], iine_th[1]);
iine_th[0].textContent='💛 いいね！された記事';
iine_th[0].style.fontWeight='bold';
monitor0.observe(target0, {childList: true, subtree: true});
iine_title.onclick=function(event){
event.preventDefault();
if(event.altKey==true){ //「Altキー ＋ 左クリック」
if(edit_mode==0){
edit_mode=1;
file_backup(); } // ファイル保存 管理トップ
else{
edit_mode=0;
file_backup_end(); }}
else{
if(edit_mode==0){
edit_mode=1; }
else if(edit_mode==1){
edit_mode=0;
file_backup_end(); }}
blocker();
title_disp(iine_th[0], iine_th[1]); }}
if(document.querySelector('#iineHistoryEntryFrame')){ // 履歴 タブ1
let iine_title=document.querySelector('#iineHistoryEntryFrame .ttl');
let iine_th=document.querySelectorAll('#iineHistoryEntryFrame th');
monitor0.disconnect();
disp_help();
open_more(0);
end_more();
title_disp(iine_th[0], iine_th[1]);
iine_th[0].textContent='💛 いいね！された記事';
monitor0.observe(target0, {childList: true, subtree: true});
iine_title.onclick=function(event){
event.preventDefault();
if(event.altKey==true){ //「Altキー ＋ 左クリック」
if(edit_mode==0){
edit_mode=1;
file_backup(); } // ファイル保存 履歴タブ1
else{
edit_mode=0;
file_backup_end();
find_user_end(); }}
else if(event.ctrlKey==true){ //「Ctrlキー ＋ 左クリック」
if(edit_mode==0){
edit_mode=2;
find_user(); } // ユーザー履歴検索 履歴タブ1
else{
edit_mode=0;
file_backup_end();
find_user_end(); }}
else{
if(edit_mode==0){
edit_mode=1; }
else if(edit_mode==1){
edit_mode=0;
file_backup_end(); }
else if(edit_mode==2){
edit_mode=0;
find_user_end(); }}
title_disp(iine_th[0], iine_th[1]);
blocker(); }}
if(document.querySelector('#iineHistoryUserFrame')){ // 履歴 タブ2
let iine_title=document.querySelector('#iineHistoryContent tr:first-child');
let iine_th=document.querySelectorAll('#iineHistoryUserFrame th');
monitor0.disconnect();
disp_help();
open_more(1);
end_more();
title_disp(iine_th[0], iine_th[1]);
iine_th[0].textContent=
' 💛 ユーザー名 / ブログ名 Sift+Click : ソート';
iine_th[0].style.textIndent='-20em';
iine_th[0].style.overflow='hidden';
monitor0.observe(target0, {childList: true, subtree: true});
iine_title.onclick=function(event){
event.preventDefault();
if(event.ctrlKey==true){ //「Ctrlキー ＋ 左クリック」
if(edit_mode==0 || edit_mode==1){
edit_mode=2;
find_user(); }
else{
edit_mode=0
find_user_end(); }}
else if(event.shiftKey==true){ //「Shiftキー ＋ 左クリック」
edit_mode=0;
find_user_end();
sort(); }
else{
if(edit_mode==0){
edit_mode=1; }
else{
edit_mode=0;
find_user_end(); }}
title_disp(iine_th[0], iine_th[1]);
blocker(); }}
} // mode_select()
function title_disp(th0, th1){
if(edit_mode==0){
th0.style.boxShadow='none';
th1.style.boxShadow='none';
th0.style.color='#666';
th1.style.color='#666'; }
else if(edit_mode==1){
th0.style.boxShadow='inset 0 0 0 20px red';
th1.style.boxShadow='inset 0 0 0 20px red';
th0.style.color='#fff';
th1.style.color='#fff'; }
else if(edit_mode==2){
th0.style.boxShadow='inset 0 0 0 20px #2196f3';
th1.style.boxShadow='inset 0 0 0 20px #2196f3';
th0.style.color='#fff';
th1.style.color='#fff'; }}
function open_more(n){
let more=document.querySelector('.moreLinkBottom');
let item;
if(n==0){
item=document.querySelectorAll('#iineHistoryEntryFrame tr'); }
if(n==1){
item=document.querySelectorAll('#iineHistoryUserFrame tr'); }
if(more && item.length<18){ // リストを18行まで自動で開く 🔴
more.click(); }}
function end_more(){
let senser=0;
let next=0;
let interval;
let list_frame=document.querySelector('#iineHistoryContent');
if(list_frame){
let css=
'#iineHistoryContent table { position: relative; } '+
'#iineHistoryContent tbody { overflow-y: scroll; margin-top: 34px; '+
'height: calc( 100vh - 220px); border-bottom: 1px solid #ccc; display: block; } '+
'.tableList th { width: inherit; font-size: 14px; padding: 8px 4px 6px; '+
'text-align: center !important; background: #f4f4f4; } '+
'#iineHistoryContent tr:first-child { position: absolute; z-index: 1; width: 786px; '+
'top: 1px; left: -1px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } '+
'#ucsMain #moreLoading { margin: -3px auto; } '+
'#ucsMain .moreLinkBottom span { '+
'background-position: 0 4px; font-size: 14px; } '+
'#iineHistoryEntryFrame:after, #iineHistoryUserFrame:after { '+
'content: "Space: 連続スクロール / 停止"; '+
'position: absolute; right: 10px; margin: 2px 0 0; border: 1px solid #aaa; '+
'padding: 3px 6px 0; font: bold 14px Meiryo; color: #888; background: #fff; } ' +
'#footerAd, #globalFooter { display: none; }';
let style_tag=document.createElement("style"); // css設定styleタグ
style_tag.setAttribute('id', 'bim');
style_tag.textContent=css;
if(!list_frame.querySelector('#bim')){
list_frame.appendChild(style_tag); }}
document.addEventListener('keydown', function(event){
event.stopImmediatePropagation();
if(event.keyCode==32){
if(next==0){
next=1;
interval=setInterval(
function(){
go();
stop();
senser+=1;
}, 500); }
else{
next=0;
clearInterval(interval); }
setTimeout(()=>{
view_end(); }, 600); } // リスト末尾を表示
function go(){
let more=document.querySelector('.moreLinkBottom'); // Moreボタン
if(more && next==1){
more.click();
view_end();
senser=0; }}
function stop(){
if(senser>8){
next=0;
senser=0;
clearInterval(interval);
view_end(); }}});
function view_end(){
let list_body;
let last_item;
if(document.querySelector('#iineHistoryEntryFrame tbody')){
list_body=document.querySelector('#iineHistoryEntryFrame tbody'); }
if(document.querySelector('#iineHistoryUserFrame tbody')){
list_body=document.querySelector('#iineHistoryUserFrame tbody'); }
last_item=list_body.lastChild;
last_item.scrollIntoView(false); }
} //end_more()
function sort(){
window.getSelection().removeAllRanges();
let iine_arr=[];
let iine_tr=document.querySelectorAll('#iineHistoryUserFrame tr');
for(let k=1; k<iine_tr.length; k++){
let user_href;
let user_name;
let user_count;
let user_src=iine_tr[k].querySelector('.list_img img').getAttribute('src');
if(iine_tr[k].querySelector('.heading a')){
user_href=iine_tr[k].querySelector('.heading a').getAttribute('href');
user_name=iine_tr[k].querySelector('.heading a span').textContent;
user_count=parseInt(
iine_tr[k].querySelector('.iineCnt').textContent.replace(/[^0-9]/g, ''), 10); }
else{ // 退会ユーザー
user_href='---';
user_name='---';
user_count=0; }
iine_arr.push([user_src, user_href, user_name, user_count]); } // データの配列化
iine_arr.sort((a, b)=>{
return b[b.length-1] - a[a.length-1] }) // user_count の降順にソート
let iine_table=document.querySelector('#iineHistoryUserFrame tbody');
let iine_r_tr=iine_table.querySelectorAll('tr');
for(let k=1; k<iine_r_tr.length; k++){
iine_r_tr[k].remove(); }
for(let k=0; k<iine_arr.length; k++){
let iine_tr=document.createElement('tr');
iine_tr.innerHTML=
'<td><b class="list_img"><img src=""></b>'+
'<div class="list_main"><div class="heading"><a href=""><span></span></a>'+
'</div></div></td><td class="iineCnt"></td>';
iine_tr.querySelector('img').setAttribute('src', iine_arr[k][0]);
iine_tr.querySelector('a').setAttribute('href', iine_arr[k][1]);
iine_tr.querySelector('span').textContent=iine_arr[k][2];
iine_tr.querySelector('.iineCnt').textContent=iine_arr[k][3];
if(iine_table.childElementCount<iine_r_tr.length){
iine_table.appendChild(iine_tr); }} // 配列のtableへの再配置
} // sort()
function disp_help(){
let page_title=document.querySelector('#ucsMainLeft h1');
if(page_title){
let css='font: bold 14px Meiryo; float: right; padding: 2px 6px 0; '+
'border: 1px solid #aaa; color: #888;';
let help=document.createElement('span');
help.setAttribute('id', 'bim_help');
help.textContent=
'Click💛: ブロック設定 Alt+Click💛: データ保存 Ctrl+Click💛: ユーザー検索';
help.setAttribute('style', css);
let bim_help=document.querySelector('#bim_help');
if(!bim_help){
page_title.appendChild(help); }}}
let target1=document.querySelector('#contents'); // 監視 target
let monitor1=new MutationObserver(blocker);
monitor1.observe(target1, {childList: true, subtree: true}); // 監視開始
function blocker(){
let k;
let user_href=[];
let iineImg=[];
let iine_span=[];
let iine_tr=[];
let Img_src=[];
if(document.querySelector('#iineEntry')){ // 管理トップ
let iine_img=document.querySelectorAll('#iineEntry .img');
for(k=0; k<iine_img.length; k++){
iine_img[k].style.padding='2px'; }
iineImg=document.querySelectorAll('#iineEntry img');
for(k=0; k<iineImg.length; k++){ // ユーザーアイコンのマスク
Img_src[k]=iineImg[k].getAttribute('src');
if(block_regex_img.test(Img_src[k])==true){
if(edit_mode==0){
iineImg[k].style.display='none'; }
else{
iineImg[k].style.display='block';
iineImg[k].style.outline='2px solid red'; }}
else{
iineImg[k].style.display='block';
iineImg[k].style.outline='none'; }}}
if(document.querySelector('#iineHistoryEntryFrame')){ // 履歴 タブ1
iine_span=document.querySelectorAll('.userImg span');
iineImg=document.querySelectorAll('.userImg img');
for(k=0; k<iineImg.length; k++){ // ユーザーアイコンのマスク
Img_src[k]=iineImg[k].getAttribute('src');
if(block_regex_img.test(Img_src[k])==true){
if(edit_mode==0 || edit_mode==2){
iine_span[k].style.display='none'; }
else{
iine_span[k].style.display='inline-block';
iine_span[k].style.outline='2px solid red'; }}
else{
iine_span[k].style.display='inline-block';
iine_span[k].style.outline='none'; }}
get_src();
find_user();
blue_user(); }
if(document.querySelector('#iineHistoryUserFrame')){ // 履歴 タブ2
iine_tr=document.querySelectorAll('#iineHistoryUserFrame tr');
for(k=1; k<iine_tr.length; k++){ // ユーザーアイコンのマスク
if(iine_tr[k].querySelector('.heading a')){
user_href[k]=iine_tr[k].querySelector('.heading a').getAttribute('href');
if(block_regex_id.test(user_href[k])==true){ // IDがリスト上にある場合
if(edit_mode==0 || edit_mode==2){
iine_tr[k].style.display='none'; }
else{
iine_tr[k].style.display='table-row';
iine_tr[k].style.boxShadow='inset 0 0 0 1px #fff,inset 0 0 0 3px red'; }
let user_src=iine_tr[k].querySelector('.list_img img').getAttribute('src');
if(user_src){
user_src=user_src.replace('https://stat.profile.ameba.jp/profile_images/', '');
user_src=user_src.replace(/\?cpc=100/g, ''); }
else{
user_src=''; } // imgが無い場合
for(let s=0; s<iine_block_data.length; s++){
if(user_href[k].indexOf(iine_block_data[s][0])!=-1){
iine_block_data[s][1]=user_src; }} // ID該当した場合にimgを再登録
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); } // imgの再登録
else{
iine_tr[k].style.display='table-row';
iine_tr[k].style.boxShadow='none';
let list_img=iine_tr[k].querySelector('.list_img');
let list_img_url=list_img.getAttribute('href');
if(list_img && list_img_url){
prevent(list_img, list_img_url); }
let user_link=iine_tr[k].querySelector('.heading a');
prevent(user_link, user_href[k]); }
function prevent(link, url){
link.onclick=function(event){
event.preventDefault();
window.open(url, '_blank'); }}
}}
get_src();
find_user();
blue_user(); }
} // blocker()
let target2=document.querySelector('body'); // 監視 target
let monitor2=new MutationObserver(blocker_dia);
monitor2.observe(target2, {childList: true, subtree: true}); // 監視開始
function blocker_dia(){
let k;
let user_li=[];
let user_href=[];
if(document.querySelector('#iineEntry')){ // 管理トップ
smart(0);
let header=document.querySelector('#iineEntryFrame .header');
let header_link=document.querySelector('#iineEntryFrame .header a');
if(header_link){
header_link.setAttribute('target', '_blank'); }
let header_count=document.querySelector('#iineEntryFrame .header p span');
let close=document.querySelector('#iineEntryFrame .header .closeBtn');
if(header && edit_mode==0){
header.style.background='#f7f7f7';
header_link.style.color='#06c';
header_link.style.pointerEvents='auto';
header_count.style.color="red"; }
if(header && close && edit_mode==1){
header.style.background='red';
header_link.style.color='#fff';
header_link.style.pointerEvents='none';
header_count.style.color="#fff";
header.onclick=function(){
close.click(); }}
user_li=document.querySelectorAll('#iineEntoryContents li');
if(user_li.length !=0){
for(k=0; k<user_li.length; k++){ // ダイアログのリストのマスク
if(user_li[k].querySelector('a')){
user_href[k]=user_li[k].querySelector('a').getAttribute('href');
if(block_regex_id.test(user_href[k])==true){ // IDがリスト上にある場合
if(edit_mode==0){
user_li[k].style.display='none';
user_li[k].style.outline='none'; }
else{
user_li[k].style.display='block';
user_li[k].style.outline='2px solid red';
user_li[k].style.outlineOffset='-3px'; }
let user_src=user_li[k].querySelector('.img img').getAttribute('src');
if(user_src){
user_src=user_src.replace('https://stat.profile.ameba.jp/profile_images/', '');
user_src=user_src.replace(/\?cpc=100/g, ''); }
else{
user_src=''; } // imgが無い場合
for(let s=0; s<iine_block_data.length; s++){
if(user_href[k].indexOf(iine_block_data[s][0])!=-1){
iine_block_data[s][1]=user_src; }} // ID該当した場合にimgを再登録
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); } // imgの再登録
else{
user_li[k].style.outline='none';
prevent(user_li[k], user_href[k]); }
function prevent(link, url){
link.onclick=function(event){
event.preventDefault();
window.open(url, '_blank'); }}
}}}}
if(document.querySelector('#iineHistoryEntryFrame')){ // 履歴 タブ1
smart(1);
let header=document.querySelector('#iineEntryHeader');
let header_link=document.querySelector('#iineEntryHeader a');
if(header_link){
header_link.setAttribute('target', '_blank'); }
let header_count=document.querySelector('#iineEntryHeader .tx_orageA');
let close=document.querySelector('#iineCloseBtn');
if(header && header_link && edit_mode==0){
header.style.background='#f7f7f7';
header_link.style.color='#06c';
header_link.style.pointerEvents='auto';
header_count.style.color='red'; }
else if(header && header_link && edit_mode==2){
header.style.background='#2196f3';
header_link.style.color='#fff';
header_link.style.pointerEvents='auto';
header_count.style.color='#fff'; }
else if(header && header_link && close && edit_mode==1){
header.style.background='red';
header_link.style.color='#fff';
header_link.style.pointerEvents='none';
header_count.style.color='#fff';
header.onclick=function(){
close.click(); }}
user_li=document.querySelectorAll('#iineEntryContents li');
if(user_li.length !=0){
for(k=0; k<user_li.length; k++){ // ダイアログのリストのマスク
if(user_li[k].querySelector('a')){
user_href[k]=user_li[k].querySelector('a').getAttribute('href');
if(block_regex_id.test(user_href[k])==true){ // IDがリスト上にある場合
if(edit_mode==0 || edit_mode==2){
user_li[k].style.display='none';
user_li[k].style.boxShadow='none'; }
else{
user_li[k].style.display='block';
user_li[k].style.boxShadow='#fff 0 0 0 1px inset, red 0 0 0 3px inset'; }
let user_src=user_li[k].querySelector('.iineProfImg img').getAttribute('src');
if(user_src){
user_src=user_src.replace('https://stat.profile.ameba.jp/profile_images/', '');
user_src=user_src.replace(/\?cpc=100/g, ''); }
else{
user_src=''; } // imgが無い場合
for(let s=0; s<iine_block_data.length; s++){
if(user_href[k].indexOf(iine_block_data[s][0])!=-1){
iine_block_data[s][1]=user_src; }} // ID該当した場合にimgを再登録
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); } // imgの再登録
else{
user_li[k].style.boxShadow='none';
prevent(user_li[k], user_href[k]); }
function prevent(link, url){
link.onclick=function(event){
event.preventDefault();
window.open(url, '_blank'); }}
}}}
get_src();
blue_user_dia(); }
} // blocker_dia()
function smart(n){
if(n==0){
let headerT=document.querySelector('#iineEntryFrame .header p');
if(headerT){
headerT.style.fontSize='0';
let title=headerT.querySelector('#iineEntryFrame .header p a');
if(title){
title.style.fontSize='14px';
title.style.padding='0 1em 0 .5em'; }
let count=headerT.querySelector('#iineEntryFrame .header p span');
if(count){
count.style.fontSize='14px';
count.style.fontWeight='bold'; }}}
if(n==1){
let headerT=document.querySelector('#iineEntryHeader p');
if(headerT){
headerT.style.fontSize='0';
let title=headerT.querySelector('#iineEntryHeader .tx_bold');
if(title){
title.style.fontSize='14px';
title.style.padding='0 1em 0 .5em'; }
let count=headerT.querySelector('#iineEntryHeader .tx_orageA');
if(count){
count.style.fontSize='14px';
count.style.fontWeight='bold'; }}}}
let target3=document.querySelector('body'); // 監視 target
let monitor3=new MutationObserver(checker);
monitor3.observe(target3, {childList: true, subtree: true, attributes: true}); // 監視開始
function checker(){
let k;
let user_li=[];
let iine_tr=[];
let user_href=[];
let user_id=[];
let user_src=[];
if(document.querySelector('#iineEntry')){ // 管理トップ
user_li=document.querySelectorAll('#iineEntoryContents li');
if(user_li.length !=0 && edit_mode==1){
for(k=0; k<user_li.length; k++){
let n=k;
if(user_li[n].querySelector('a')){
user_href[n]=user_li[n].querySelector('a').getAttribute('href');
user_src[n]=user_li[n].querySelector('img').getAttribute('src');
user_li[n].onclick=function(event){ // リストのクリックで設定
event.preventDefault(); // クリックしてもリンク先に飛ばない
local_backup(n); }}}
function local_backup(n){
if(block_regex_id.test(user_href[n])!=true){ // 登録無い場合は登録
user_id[n]=user_href[n].replace('https://ameblo.jp/', '');
user_src[n]=
user_src[n].replace('https://stat.profile.ameba.jp/profile_images/', '');
iine_block_data.push([user_id[n], user_src[n]]);
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); }
else if(block_regex_id.test(user_href[n])==true){ // 登録あれば登録削除
user_id[n]=user_href[n].replace('https://ameblo.jp/', '');
iine_block_data.splice(iine_block_id.indexOf(user_id[n]), 1);
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); }
reg_set();
blocker_dia();
blocker(); }}}
if(document.querySelector('#iineHistoryEntryFrame')){ // 履歴 タブ1
user_li=document.querySelectorAll('#iineEntryContents li');
if(user_li.length !=0 && edit_mode==1){
for(k=0; k<user_li.length; k++){
let n=k;
if(user_li[n].querySelector('a')){
user_href[n]=user_li[n].querySelector('a').getAttribute('href');
user_src[n]=user_li[n].querySelector('img').getAttribute('src');
user_li[n].onclick=function(event){ // リストのクリックで設定
event.preventDefault(); // クリックしてもリンク先に飛ばない
local_backup(n); }}}
function local_backup(n){
if(block_regex_id.test(user_href[n])!=true){ // 登録無い場合は登録
user_id[n]=user_href[n].replace('https://ameblo.jp/', '');
user_id[n]=user_id[n].replace(/\//g, '');
user_src[n]=
user_src[n].replace('https://stat.profile.ameba.jp/profile_images/', '');
user_src[n]=user_src[n].replace(/\?cpc=100/g, '');
iine_block_data.push([user_id[n], user_src[n]]);
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); }
else if(block_regex_id.test(user_href[n])==true){ // 登録あれば登録削除
user_id[n]=user_href[n].replace('https://ameblo.jp/', '');
user_id[n]=user_id[n].replace(/\//g, '');
iine_block_data.splice(iine_block_id.indexOf(user_id[n]), 1);
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); }
reg_set();
blocker_dia();
blocker(); }}}
if(document.querySelector('#iineHistoryUserFrame')){ // 履歴 タブ2
iine_tr=document.querySelectorAll('#iineHistoryUserFrame tr');
for(k=1; k<iine_tr.length; k++){
let n=k;
let user_icon_link=iine_tr[n].querySelector('.list_img');
let user_link=iine_tr[n].querySelector('.heading a');
if(user_link && edit_mode==0){
user_icon_link.style.pointerEvents='auto';
user_link.style.pointerEvents='auto'; }
if(user_link && edit_mode==1){
user_icon_link.style.pointerEvents='none';
user_link.style.pointerEvents='none'; }
iine_tr[n].onclick=function(){
local_backup(n); }}
function local_backup(n){
let user_link=iine_tr[n].querySelector('.heading a');
if(user_link && edit_mode==1){
user_href[n]=user_link.getAttribute('href');
user_src[n]=iine_tr[n].querySelector('.list_img img').getAttribute('src');
if(block_regex_id.test(user_href[n])!=true){ // 登録がなければ登録
user_id[n]=user_href[n].replace('https://ameblo.jp/', '');
user_id[n]=user_id[n].replace(/\//g, '');
user_src[n]=
user_src[n].replace('https://stat.profile.ameba.jp/profile_images/', '');
user_src[n]=user_src[n].replace(/\?cpc=100/g, '');
iine_block_data.push([user_id[n], user_src[n]]);
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); }
else if(block_regex_id.test(user_href[n])==true){ // 登録があれば登録削除
user_id[n]=user_href[n].replace('https://ameblo.jp/', '');
user_id[n]=user_id[n].replace(/\//g, '');
iine_block_data.splice(iine_block_id.indexOf(user_id[n]), 1);
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); }
reg_set();
blocker(); }}}
} // checker()
function file_backup(){
let css=
'#imute_dia { position: absolute; top: -35px; height: 36px; width: 100%; '+
'box-sizing: border-box; border: 1px solid #e2e2e2; background: #e2eef0; } '+
'#button1 { padding: 2px 8px 0; margin: 4px 30px; } '+
'#button_add { margin: 0 5px 0 40px; } '+
'#button_add_label { vertical-align: -1px; } '+
'#button2 { margin: 4px 0 0 10px; vertical-align: 1px; width: 320px; } '+
'#button3 { padding: 2px 6px 0; margin: 4px 0 0 50px; } ';
if(ua==1){
css+=
'#button1 { padding: 0 8px; margin: 4px 30px; } '+
'#button2 { margin: 4px 0 0 10px; width: 320px; } '+
'#button3 { padding: 0 6px; margin: 4px 0 0 50px; } '; }
if(document.querySelector('#iineEntry')){ ; } // 管理トップ
if(document.querySelector('#iineHistoryEntryFrame')){ // 履歴 タブ1
css+='#imute_dia { top: -78px; left: 0; } '; }
let inert_inn=
'<input id="button1" type="submit" value="排除リストを保存する">'+
'<input id="button_add" type="checkbox">'+
'<span id="button_add_label">差分追加</span>'+
'<input id="button2" type="file" value="排除リストを保存する">'+
'<input id="button3" type="submit" value="✖ 閉じる">'+
'<style id="iine_style"></style>';
let insert_dialog;
insert_dialog=document.createElement('div');
insert_dialog.setAttribute('id', 'imute_dia');
insert_dialog.innerHTML=inert_inn;
if(document.querySelector('#iineEntry')){ // 管理トップ
let imute=document.querySelector('#imute_dia');
if(!imute){
document.querySelector('#iine').appendChild(insert_dialog);
document.querySelector('#iine_style').innerHTML=css; }}
if(document.querySelector('#iineHistoryEntryFrame')){ // 履歴 タブ1
let imute=document.querySelector('#imute_dia');
if(!imute){
document.querySelector('#iineHistoryEntryFrame').appendChild(insert_dialog);
document.querySelector('#iine_style').innerHTML=css; }}
let button1=document.querySelector('#button1');
button1.onclick=function(){
let write_json=JSON.stringify(iine_block_data);
let blob=new Blob([write_json], {type: 'application/json'});
let a_elem=document.createElement('a');
a_elem.href=URL.createObjectURL(blob);
a_elem.download='iine_mute.json'; // 保存ファイル名
if(ua==1){
a_elem.target='_blank';
document.body.appendChild(a_elem); }
a_elem.click();
if(ua==1){
document.body.removeChild(a_elem); }
URL.revokeObjectURL(a_elem.href); }
let button_add=document.querySelector('#button_add');
button_add.checked=true;
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, 15)=='[["tmp1","img1"'){ // iine_mute.jsonの確認
let data_in=JSON.parse(file_reader.result);
if(button_add.checked==true){ // 差分追加処理
for(let k=0; k<data_in.length; k++){
if(block_regex_id.test(data_in[k][0])!=true){ // ID未出なら追加
iine_block_data.push([data_in[k][0], data_in[k][1]]); }
else if(block_regex_id.test(data_in[k][0])==true){ // ID既出の場合
for(let s=0; s<iine_block_data.length; s++){
if(iine_block_data[s][0]==data_in[k][0]){
if(iine_block_data[s][1]!=data_in[k][1]){ // imgのSRCが異なる
if(Number(iine_block_data[s][1].slice(0, 8))
<Number(data_in[k][1].slice(0, 8))){
iine_block_data[s][1]=data_in[k][1]; }}}}}}}
else{
iine_block_data=data_in; } // 読込み上書き処理
let write_json=JSON.stringify(iine_block_data);
localStorage.setItem('iine_id_back', write_json); // ローカルストレージ 保存名
reg_set();
blocker(); }}; });
let button3=document.querySelector('#button3');
button3.onclick=function(){
insert_dialog.remove(); }
} // file_backup()
function file_backup_end(){
let imute=document.querySelector('#imute_dia');
if(imute){
imute.remove(); }}
function find_user(){
let k;
let iine_span=[];
let iineImg=[];
let Img_src=[];
let list_frame=document.querySelector('#iineHistoryContent');
if(list_frame && edit_mode==2){
let f_panel=document.createElement('div');
f_panel.setAttribute('id', 'f_panel');
f_panel.innerHTML=
'<input id="set_user" type="text" placeholder="検索するアイコン画像のSRCを入力">'+
'<input id="clear" type="submit" value="✖">'+
'<input id="find_img" type="submit" value="ユーザー検索">';
if(!list_frame.querySelector('#f_panel')){
list_frame.appendChild(f_panel); }
let css=
'#f_panel { position: absolute; top: -80px; left: 0; width: 100%; display: flex; '+
'padding: 4px 0; background: #fff; } '+
'#set_user { width: 100%; padding: 3px 30px 1px 10px; background: #e4f7fa; '+
'font: 16px Meiryo; border: 1px solid #666; border-radius: 3px; } '+
'#set_user::placeholder { font-size: 15px; color: #666; } '+
'#clear { width: 32px; margin: 1px 12px 1px -28px; padding: 2px 0 0; '+
'border: none; background: none; font: 16px Meiryo; } '+
'#clear:hover { text-shadow: 0 0 1px #fff; filter: invert(2); } '+
'#find_img { width: auto; padding: 3px 8px 1px; font: bold 14px Meiryo; } '+
'.userImg img, .iineProfImg img, .list_img img { outline-offset: -3px; } '+
'.iineProfImg img { height: 38px; width: 38px; object-fit: cover; } '+
'.list_img img { height: 40px; width: 40px; object-fit: cover; } '+
'.iineSetting { margin-bottom: 15px; }';
let style_tag=document.createElement("style"); // css設定styleタグ
style_tag.setAttribute('id', 'bim2');
style_tag.textContent=css;
if(!list_frame.querySelector('#bim2')){
list_frame.appendChild(style_tag); }
let set_user=document.querySelector('#set_user');
let clear=document.querySelector('#clear');
let find_img=document.querySelector('#find_img');
set_user.value=find_img_src;
clear.onclick=function(){
set_user.value='';
find_img_src='';
blue_user(); }
find_img.onclick=function(){
if(set_user.value!=''){
let src=set_user.value;
src=src.replace(/https:\/\/stat\.profile\.ameba\.jp\/profile_images\//, '');
src=src.replace(/\?.*$/, '');
set_user.value=src;
find_img_src=src;
blue_user(); }}
}
} // find_user()
function blue_user(){
let k;
let iineImg=[];
let Img_src=[];
iineImg=document.querySelectorAll('img');
for(k=0; k<iineImg.length; k++){ // ユーザーアイコンのマスク
Img_src[k]=iineImg[k].getAttribute('src');
if(find_img_src!=''){
if(Img_src[k].indexOf(find_img_src)!=-1){
if(edit_mode==2){
iineImg[k].style.outline='3px solid #fff';
iineImg[k].style.boxShadow='0 0 0 4px #2196f3'; }
else{
iineImg[k].style.outline='none';
iineImg[k].style.boxShadow='none'; }}
else{
iineImg[k].style.outline='none';
iineImg[k].style.boxShadow='none'; }}
if(find_img_src==''){
iineImg[k].style.outline='none';
iineImg[k].style.boxShadow='none'; }}}
function blue_user_dia(){
let k;
let iineImg=[];
let Img_src=[];
if(find_img_src!=''){
iineImg=document.querySelectorAll('.iineProfImg img');
for(k=0; k<iineImg.length; k++){ // ダイアログのアイコンのマーク
Img_src[k]=iineImg[k].getAttribute('src');
if(Img_src[k].indexOf(find_img_src)!=-1){
if(edit_mode==2){
iineImg[k].style.outline='3px solid #fff';
iineImg[k].style.boxShadow='0 0 0 4px #2196f3'; }
else{
iineImg[k].style.outline='none';
iineImg[k].style.boxShadow='none'; }}
else{
iineImg[k].style.outline='none';
iineImg[k].style.boxShadow='none'; }}}}
function find_user_end(){
let f_panel=document.querySelector('#f_panel');
if(f_panel){
f_panel.remove(); }}
function get_src(){
let css=
'position: absolute; z-index: 10000; font: normal 16px Meiryo; '+
'text-shadow: #fff 1px 1px 0, #fff 1px -1px 0, #fff -1px 1px 0, #fff -1px -1px 0; '+
'cursor: default; display: none;';
let menu=document.createElement('div');
menu.setAttribute('id', 'img_menu');
menu.setAttribute('style', css);
if(!document.getElementById('img_menu')){
document.querySelector('body').appendChild(menu); }
let icon_img=[];
icon_img=document.querySelectorAll('img');
for(let k=0; k<icon_img.length; k++){
icon_img[k].addEventListener('click', function(event){
img_mark(k); }); }
function img_mark(k){
if(edit_mode==2){
event.preventDefault();
event.stopImmediatePropagation();
let menu=document.querySelector('#img_menu');
let icon_src=icon_img[k].getAttribute('src');
if(icon_src.indexOf('profile_images')!=-1){
if(navigator.clipboard){
navigator.clipboard.writeText(icon_src); }
let set_user=document.querySelector('#set_user');
if(set_user){
set_user.value=icon_src; }
menu.textContent='⭕';
menu.style.display="block";
menu.style.left=(event.pageX-12) +"px";
menu.style.top=(event.pageY-30) +"px";
menu.style.filter='hue-rotate(-150deg) brightness(2)';
setTimeout(()=>{
menu.style.display="none";
}, 2000); }
else{
menu.textContent='❌';
menu.style.display="block";
menu.style.left=(event.pageX-12) +"px";
menu.style.top=(event.pageY-30) +"px";
menu.style.filter='hue-rotate(-150deg) brightness(2)';
setTimeout(()=>{
menu.style.display="none";
}, 2000); }
}}
document.body.addEventListener('click', function(event){
let menu=document.querySelector('#img_menu');
if(menu){
menu.style.display="none"; }}); // 画像以外の場所のクリックでマークを消す
} // get_src()
「Bad Iine Mute」最新版について
旧バージョンの「Bad Iine Mute」「Bad Iine Mute BlogPage」は、アメーバのページ構成の変更で動作しない場合があります。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。