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

「テキスト」フィルターの登録機能 

「リンクコード」のフィルター登録機能はまずまずの出来と思います。 残る「テキスト」のフィルター登録機能は、下手な「テキスト」を登録をすると全ツイートの非表示に陥りかねませんが、そこはユーザーの理解に委ねる事にしました。

コードは、「リンクコード」で制作したパネル部のコードを拡張したもので、思ったより簡単に出来ました。「フィルターパネル」の操作方法は同じです。

「テキスト」フィルターの登録方法

下は、アメーバの公式ツイッターページです。

例として、タイムラインのトップのツイート（上の赤枠）を非表示にします。

このツイートのみ非表示したい場合は、このツイートに特徴的なテキスト（文字列）をフィルターに登録します。

▪ 全く同じテキストが、他のツイートにも含まれていると、ページに関係なく非表示になります。

▪ テキストは長い方がツイートの選別・特定が確実になります。 逆に、短いテキストは、同傾向のツイートをまとめて非表示にすることが出来ますが、想定外の範囲のツイートも非表示にします。 この匙加減は、ユーザーが判断するしかありません。

▪ テキストの間に「空白文字」があると無効になり、登録ができません。

以上の様な条件を考えて、下のテキストをフィルターに登録しました。

「リンクコード」と「テキスト」のフィルターリストは同居しているので、ページ上の何か適当な「リンク」を「Alt+右Click」して「リストパネル」を開きます。

選んだリンクのコードが採り込まれますが、これは不要です。 最初は「リンクコード」の登録で「リストパネル」が開きますが、「テキスト」の登録状態にします。

●「Link」のボタンを「左Click」して「Text」に切換えます。

▪ このボタンを「左Click」する度に「Link」⇄「Text」が切換わります。

▪「Text」に変わるとパネルの背景色が淡黄色になります。

下は、切換え操作をしている様子です。 切換え操作をすると「入力枠」の内容はクリアされます。

「Text」の場合は、入力枠にテキストを直接書き込んだり、どこかでコピーしたテキストを貼り付ける事が出来ます。 ここでは、非表示にするツイートのテキストをコピーして貼付けました。

● 必要なテキストを反転して「Ctrl+C」でコピーします。

▪「Ctrl+V」で貼付けたところです。

●「フィルター追加」を「左Click」してテキストを登録します。

▪ この操作で「フィルターリスト」に入力枠のテキストが追加（登録）されます。

フィルター追加の結果は、ツイッターの画面をリロードすると反映します。 

▪ タイムラインを10件程度スクロールして戻る、あるいは別のタイムラインへ移動して戻る操作で、タイムラインがリセットされて反映を確認できます。

トップのツイートが非表示になりました。

「テキスト」のフィルターの使用はご用心 

「テキスト」フィルターの乱用は、余りお勧めできません。 全く無関係に思えるタイムラインにも、登録したフィルターは働きますから。 その点「リンクコード」は、本来が固有の場所を指定するものなので、比較的安全です。 この理由で、「TwAvoid」は「リンクコード」のフィルターを使う事を前提にデザインしています。

余り慎重になる必要はないでしょうが、「テキスト」フィルターの性質を理解してフィルター指定をする様にお勧めします。

「テキスト」フィルターの削除方法

ページ上の適当な「リンク」を「Alt+右Click」して「リストパネル」を開きます。

●「Link」を「左Click」してパネルを「Text」フィルターのパネルに切換えます。 続いて「フィルター削除」を「左Click」して削除操作に切換えます。

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

●「左Click」をした「テキスト」が入力枠に表示されます。

●「フィルター削除」をもう一度「左Click」すると、削除が確定します。

「TwAvoid」を利用するには

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

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法

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

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

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

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

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

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

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

〔 TwAvoid 〕 ver. 0.5

// ==UserScript==
// @name         TwAvoid
// @namespace    http://tampermonkey.net/
// @version      0.5
// @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'){

            let all_link=cell[k].querySelectorAll('a');
            let url=[];
            for(let i=0; i<all_link.length; i++){
                url.push(select_url(all_link[i])); }
            if(check_url(url)){
                cell[k].style.display='none'; }

            if(avoid_regexp!=0){ // 0の時は処理しない
                let tweet_text=cell[k].textContent;
                if(avoid_regexp.test(tweet_text)){
                    cell[k].style.display='none'; }}

            cell[k].style.opacity='2' }}


    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){
        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');
    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」して指定');
    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=()=>{
            set_box.value=avoid_li[k].textContent; }}


    rem_b.onclick=()=>{
        if(set_box.value!=''){
            if(mode_lt==0 && !avoid.includes(set_box.value)){
                alert("⛔ フィルターリストに該当するリンクがありません"); }
            else if(mode_lt==1 && !avoid_tx.includes(set_box.value)){
                alert("⛔ フィルターリストに該当するリンクがありません"); }
            else{
                if(mode_lt==0){
                    avoid=avoid.filter(function(item){
                        return item!=set_box.value; }); }
                else{
                    avoid_tx=avoid_tx.filter(function(item){
                        return item!=set_box.value; }); }
                set_box.value=''
                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ツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

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

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