特定のリンク・文字列を含むツイートを非表示にする「TwAvoid」（6）/ JavaScript

「フィルター削除」のインターフェイスを変更 

「フィルター削除」は、「リンクコード」「テキスト」で同じコードの一部を切換えて使っています。 この削除操作時のデザインは。どうもあか抜けない感があり、改善しました。

アプリケーションの機能・性能が同じでも、インターフェイスのデザインで、性能も違って見えてしまいます。 ことば使いで、人柄が変わって見えるのと同じ？ ちょっと違うか。 まあ、「ツール制作で拘るべきところ」なのは事実です。

フィルターの削除方法

● ツイッターページ上の適当な「リンク」を「Alt+右Click」して「リストパネル」を開きます。 デフォルトは「Link」フィルターの「フィルター追加」の設定です。

● 削除するフィルターの種類を「Link」⇄「Text」で切換えます。

●「フィルター削除」を「左Click」して削除操作に切換えます。

▪「Link」フィルターの「フィルター追加」⇄「フィルター削除」の切換え

▪「Text」フィルターの「フィルター追加」⇄「フィルター削除」の切換え

●「フィルターリスト」で、削除したいフィルターの行を「左Click」します。

▪ 選択した行にグレー背景が着き、「フィルター削除」に赤枠が表示されます。

●「フィルター削除」を「左Click」すると、削除が実行されます。

▪「Link」のフィルター削除の実行

▪「Text」のフィルター削除の実行

「TwAvoid」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 TwAvoid 〕 ver. 0.6

// ==UserScript==
// @name         TwAvoid
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Twitter Filter
// @author        Everyone
// @match        https://twitter.com/*
// @icon           https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @grant        none
// ==/UserScript==


let mode; // フィルターの追加「1」削除「0」
let mode_lt; // Link「0」・Text「1」 の処理選択
let avoid=[]; // リンクフィルターの配列
let avoid_tx=[]; // テキストフィルターの配列
let avoid_regexp; // 正規表現オブジェクト
let home_ua; // 開いているタイムラインのユーザーアカウント


let read_json=localStorage.getItem('TwAvoid_Link'); // ローカルストレージ保存名
avoid=JSON.parse(read_json);
if(avoid==null){
    avoid=['temporary-link']; }

read_json=localStorage.getItem('TwAvoid_Text'); // ローカルストレージ保存名
avoid_tx=JSON.parse(read_json);
if(avoid_tx==null){
    avoid_tx=[]; }
new_reg();

function new_reg(){
    if(avoid_tx.length==0){
        avoid_regexp=0; } // 配列の子要素が0の場合は特別処理
    if(avoid_tx.length>0){
        let tmp_ex=avoid_tx.join('|');
        avoid_regexp=new RegExp(tmp_ex); }}



setTimeout(()=>{
    page_ck();
    let target=document.querySelector('head title');
    let monitor0=new MutationObserver(page_ck);
    monitor0.observe(target, { childList: true });
}, 200);


function page_ck(){
    home_ua='/'+ location.pathname.split('/')[1];

    let retry=0;
    let interval=setInterval(wait_target, 100);
    function wait_target(){
        retry++;
        if(retry>50){ // リトライ制限 5secまで
            clearInterval(interval); }
        let time_line=get_line(); // 監視 target
        if(time_line){
            clearInterval(interval);
            main();
            let monitor1=new MutationObserver(main);
            monitor1.observe(time_line, { childList: true }); }}

    function get_line(){
        let cell=document.querySelector('[data-testid="cellInnerDiv"]');
        if(cell){
            let container=cell.parentNode;
            return container; }}

} // page_ck()



function main(){
    let cell=document.querySelectorAll('[data-testid="cellInnerDiv"]');
    for(let k=0; k<cell.length; k++){
        if(cell[k].style.opacity!='2'){
            engine(cell[k]);
            cell[k].style.opacity='2' }}


    function engine(tweet){
        let hav=0;
        let all_link=tweet.querySelectorAll('a');
        let url=[];
        for(let i=0; i<all_link.length; i++){
            url.push(select_url(all_link[i])); }
        if(check_url(url)){ // check1
            hav=1; }
        else{
            if(avoid_regexp!=0){ // 0の時は処理しない
                let tweet_text=tweet.textContent;
                if(avoid_regexp.test(tweet_text)){ // check2
                    hav=1; }}}

        if(hav==1){
            tweet.style.display='none'; }
    } // engine()


    function select_url(get_url){
        let get=get_url.getAttribute('href');
        if(get!=home_ua){
            return get; }}

    function check_url(url){
        let result=url.filter(data=>avoid.includes(data));
        if(result.length>0){
            return true; }}

} // main()




function link_pointer(){
    let elem=document.elementFromPoint(event.clientX, event.clientY);
    if(elem){
        let link_a=elem.closest('a');
        if(link_a){
            event.preventDefault();
            event.stopImmediatePropagation();
            let link_url=link_a.getAttribute('href');
            disp_panel();
            mode=1;
            mode_lt=0;
            set_link(link_url);
        }}}


setTimeout(()=>{
    let layers=document.querySelector('#layers');
    let monitor2=new MutationObserver(card_ck);
    monitor2.observe(layers, { childList: true });
}, 200);

function card_ck(){
    let card=document.querySelector('[data-testid="hoverCardParent"]');
    if(card){
        card.addEventListener('contextmenu', function(event){
            if(event.altKey){
                link_pointer();
            }}); }
} // card_ck()


document.addEventListener('contextmenu', function(event){
    if(event.altKey){
        link_pointer();
    }});



function disp_panel(){
    let panel=
        '<div id="twa_panel">'+
        '<div class="swich_box">'+
        '<div class="swich">'+
        '<input class="li_tx" type="button" value="Link">'+
        '<input class="add_b" type="button" value="フィルター追加">'+
        '<input class="rem_b" type="button" value="フィルター削除">'+
        '</div>'+
        '<input class="twa_close" type="button" value="✖">'+
        '</div>'+
        '<div>'+
        '<input class="set_box" type="text">'+
        '</div>'+
        '<div class="avoid_list">'+
        '<ul class="avoid_ul"></ul>'+
        '</div>'+

        '<style>#twa_panel { position: fixed; top: 60px; right: 40px; width: 340px; '+
        'font: 16px Meiryo; color: #000; background: #f4fbff; padding: 15px; '+
        'border: 1px solid #aaa; box-shadow: 10px 20px 30px 0 #ccc; } '+
        '.swich_box { display: flex; height: 30px; align-items: center; '+
        'justify-content: space-between; } '+
        '.swich_box input { padding: 3px 7px 2px; border: 1px solid #aaa; '+
        'border-radius: 4px; height: 27px; } '+
        '.swich_box input.li_tx { font: normal 16px/23px Meiryo; } '+
        '.swich { display: flex; justify-content: space-between; width: 280px; } '+
        '.set_box { font: 16px Meiryo; padding: 4px 10px 3px; margin: 10px 0; '+
        'width: calc(100% - 23px); } '+
        '.set_box::placeholder { font-size: 14px; } '+
        '.avoid_list { margin: 10px 0 0; padding: 4px 0; min-height: 30px; '+
        'max-height: 240px; border: 1px solid #aaa; overflow-y: scroll; } '+
        '.avoid_ul { list-style: none; padding: 0; margin: 0; } '+
        '.avoid_ul.rem { background: #fff; } '+
        '.avoid_ul.rem .avoid_li { cursor: pointer; } '+
        '.avoid_li { padding: 3px 10px 0; height: 26px; border-bottom: 1px solid #ddd; '+
        'white-space: nowrap; overflow-x: scroll; scrollbar-width: none; } '+
        '.avoid_li:first-child { border-top: 1px solid #ddd; } '+
        '.avoid_li::-webkit-scrollbar { display: none; } '+
        '</style></div>';

    if(!document.querySelector('#twa_panel')){
        document.body.insertAdjacentHTML('beforeend', panel); }

} // disp_panel()



function set_link(str){
    let twa_panel=document.querySelector('#twa_panel');
    let set_box=document.querySelector('.set_box');
    if(set_box){
        set_box.value=str; }
    set_new_link();

    if(mode==1){
        add_link(); }
    else{
        rem_link(); }


    let li_tx=document.querySelector('.li_tx');
    if(li_tx && twa_panel){
        if(mode_lt==0){
            li_tx.value='Link';
            twa_panel.style.background='#f4fbff'; }
        else{
            li_tx.value='Text';
            twa_panel.style.background='#fff7e4'; }

        li_tx.onclick=()=>{
            if(mode_lt==0){
                mode_lt=1;
                li_tx.value='Text';
                twa_panel.style.background='#fff7e4';
                set_link(''); }
            else{
                mode_lt=0;
                li_tx.value='Link';
                twa_panel.style.background='#f4fbff';
                set_link(''); }}}


    let twa_close=document.querySelector('.twa_close');
    if(twa_panel && twa_close){
        twa_close.onclick=()=>{
            twa_panel.remove(); }}

} // set_link()



function add_link(){
    let add_b=document.querySelector('.add_b');
    add_b.style.outline='2px solid #2196f3';
    let rem_b=document.querySelector('.rem_b');
    rem_b.style.outline='';
    let set_box=document.querySelector('.set_box');
    set_box.disabled=false;
    set_box.style.borderColor='';
    set_box.style.background='';
    if(mode_lt==0){
        set_box.setAttribute('placeholder', 'ページ上のリンクを「Alt+右Click」して採取'); }
    else{
        set_box.setAttribute('placeholder', 'テキストを記入するかコピーして貼付けます'); }
    let avoid_ul=document.querySelector('.avoid_ul');
    avoid_ul.classList.remove('rem');


    add_b.onclick=()=>{
        let link_str=set_box.value;
        if(link_str!=''){
            if(space_check(link_str)){
                alert("⛔ 空白文字が含まれています"); }
            else if(mode_lt==0 && avoid.includes(link_str)){
                alert("⛔ 既に登録済のリンクコードです"); }
            else if(mode_lt==1 && avoid_tx.includes(link_str)){
                alert("⛔ 既に登録済のテキストです"); }
            else{
                set_box.value='';
                if(mode_lt==0 ){
                    avoid.push(link_str); }
                else{
                    avoid_tx.push(link_str); }
                set_new_link(); }}

        function space_check(str){
            let check=/\s+/g;
            if(check.test(str)){
                return true; }}}


    rem_b.onclick=()=>{
        mode=0;
        set_link(''); }

} // add_link()



function rem_link(){
    let add_b=document.querySelector('.add_b');
    add_b.style.outline='';
    let rem_b=document.querySelector('.rem_b');
    rem_b.style.outline='2px solid #2196f3';
    let set_box=document.querySelector('.set_box');
    set_box.setAttribute('placeholder', '下のフィルターリストを「左Click」して指定');
    set_box.disabled=true;
    set_box.style.borderColor='transparent';
    set_box.style.background='transparent';
    let avoid_ul=document.querySelector('.avoid_ul');
    avoid_ul.classList.add('rem');


    let avoid_li=document.querySelectorAll('.avoid_li');
    for(let k=0; k<avoid_li.length; k++){
        avoid_li[k].onclick=()=>{
            clear();
            rem_b.style.outline='2px solid red';
            avoid_li[k].style.background='#cfd8dc'; }}

    function clear(){
        let avoid_li=document.querySelectorAll('.avoid_li');
        for(let k=0; k<avoid_li.length; k++){
            avoid_li[k].style.background=''; }}


    rem_b.onclick=()=>{
        let avoid_li=document.querySelectorAll('.avoid_li');
        for(let k=0; k<avoid_li.length; k++){
            if(avoid_li[k].style.background){
                let select_text=avoid_li[k].textContent;
                if(mode_lt==0){
                    avoid=avoid.filter(function(item){
                        return item!=select_text; }); }
                else{
                    avoid_tx=avoid_tx.filter(function(item){
                        return item!=select_text; }); }
                set_new_link();
                rem_link(); }}}


    add_b.onclick=()=>{
        mode=1;
        set_link(''); }

} // rem_link()



function set_new_link(){
    if(mode_lt==0){
        let set=new Set(avoid);
        avoid=[...set]; // 追加分をチェックして配列を更新
        let write_json=JSON.stringify(avoid);
        localStorage.setItem('TwAvoid_Link', write_json); } // ストレージ保存
    else{
        let set_tx=new Set(avoid_tx);
        avoid_tx=[...set_tx]; // 追加分をチェックして配列を更新
        let write_json=JSON.stringify(avoid_tx);
        localStorage.setItem('TwAvoid_Text', write_json); } // ストレージ保存

    new_reg(); // テキスト検索設定を更新

    let avoid_ul=document.querySelector('.avoid_ul');
    if(avoid_ul){
        avoid_ul.innerHTML=''; // リスト表示をクリア

        if(mode_lt==0){
            for(let k=avoid.length-1; k>=0; k--){
                let link_li='<li class="avoid_li">'+ avoid[k] +'</li>';
                avoid_ul.insertAdjacentHTML('beforeend', link_li); }}
        else{
            for(let k=avoid_tx.length-1; k>=0; k--){
                let link_li='<li class="avoid_li">'+ avoid_tx[k] +'</li>';
                avoid_ul.insertAdjacentHTML('beforeend', link_li); }}}

} // set_new_link()

「TwAvoid」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

● 最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （追補）