「HOME」の「いいね！お知らせ」の仕様を変更する（3） / JavaScript

どちらかしか選べない

「HOME」の「いいね！のお知らせ」をクリックすると、普通のスクリプトコードでは、次の二つのどちらかの結果しか選べません。

①「管理トップ」を開く　　「いいね！のお知らせ」は消えない

➁「いいね！履歴」を開く　「いいね！のお知らせ」が消える

➁ は、本来のページ遷移となり、状況を変更するのに失敗しています。 ① は「管理トップ」を開く目的は達成していますが、「いいね！のお知らせ」を消す事ができていません。

「いいね！のお知らせ」をクリックして消し、しかも「管理トップ」に遷移する事が目的の動作ですが、簡単にはそれが出来ません。

「地雷」を踏んで逃げる「スクリプト」 

この難儀な問題の解決のために、2種の遷移を同時に行うというトリッキーなコードを考えました。

❶「いいね！のお知らせ」をクリックできない様にして、本来の「いいね！履歴」への遷移が生じない様にする。 実際にはサイズを「0」の要素として、マウスではクリックできない様にする。（スクリプトコードはクリックが可能）

❷「管理トップ」を開くリンクの「a要素」を作り、「いいね！のお知らせ」の表示と差換える。

❸ ユーザーが「a要素」をクリックすると「管理トップ」への遷移が始まるが、その遷移動作の途中で、❶ をスクリプトでクリックする。

最後の ❸のタイミングは、とてもデリケートです。 もし ❶を早く押し過ぎると「管理トップ」を開く前に、本来の「いいね！履歴」を開く動作が生じます。

また、❶を押すのが遅過ぎると「管理トップ」に遷移しますが、❶を押すスクリプトが実行されずに終わります。 その結果、「いいね！のお知らせ」が消せません。

まるで、地雷を飛び越えてながら踏んで爆発させ、無事に向こう側に着地する様な、離れ業をするスクリプトです。 作ってみないと本当に上手く行くのか判らなかったのですが、タイミング次第で目的が達せられる事は確認しました。

現在のテストコード 

以下は、現在のテストコードです。

// ==UserScript==
// @name         「お知らせ」クリックテスト
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  「いいね！お知らせ」を押して「管理トップ」を開くテストコード
// @author       Ameba Blog User
// @match        https://www.ameba.jp/home
// @grant        none
// ==/UserScript==


    let target_p=document.querySelector('.HomeUserProfileBody'); // 監視 target
    let monitor_p=new MutationObserver(notify);
    monitor_p.observe(target_p, {childList: true, subtree: true}); // 監視開始

    notify();

    function notify(){
        let note_button=document.querySelectorAll('.HomeRedNotification_Item button');
        for(let k=0; k<note_button.length; k++){
            let n_span=note_button[k].querySelector('span');
            if(n_span){
                if(n_span.textContent.includes('いいね')){
                    n_span.remove();
                    preset(k);
                    nextset(k); }
                if(n_span.textContent.includes('コメント')){
                    n_span.remove();
                    preset_c(k);
                    nextset(k); }}}


        function preset(k){
            let clone=note_button[k].cloneNode(true);
            note_button[k].parentNode.appendChild(clone);
            note_button[k].style.margin='-6px';
            note_button[k].style.padding='0';
            note_button[k].style.visibility='hidden';

            let link=document.createElement('a');
            link.setAttribute('class', 'to_top');
            link.setAttribute('href', 'https://blog.ameba.jp/ucs/top.do');
            link.textContent='ブログ記事に新しくいいね！がつきました　　';
            link.style.textDecoration='none';
            link.style.color='#333';
            if(!clone.querySelector('.to_top')){
                clone.appendChild(link); }}


        function preset_c(k){
            let clone=note_button[k].cloneNode(true);
            note_button[k].parentNode.appendChild(clone);
            note_button[k].style.margin='-6px';
            note_button[k].style.padding='0';
            note_button[k].style.visibility='hidden';

            let link=document.createElement('a');
            link.setAttribute('class', 'to_top');
            link.setAttribute('href', 'https://blog.ameba.jp/ucs/top.do');
            link.textContent='ブログ記事に新しくコメントがつきました　　';
            link.style.textDecoration='none';
            link.style.color='#333';
            if(!clone.querySelector('.to_top')){
                clone.appendChild(link); }}


        function nextset(k){
            let link=note_button[k].parentNode.querySelector('.to_top');
            if(link){
                link.onclick=function(event){
                    setTimeout(()=>{
                        note_button[k].click();
                    }, 375); }}} // 🔵

    } // notify()

◎「いいね」は、1時間に1回しかテスト出来ないので、ほぼ同様の動作をする「コメント」の「お知らせ」機能でもテスト出来る様にしています。

◎「いいね」が押されると「ブログ記事に新しくいいね！がつきました」、「コメント」があると「ブログ記事に新しくコメントがつきました」の「お知らせ」が表示されます。 これは、本来の「お知らせ」を「a要素」に差し替えたものです。

◎ テストコードなので、どちらの場合も「管理トップ」を開くスイッチになります。

◎ 本来の「いいね！履歴」を開くのは「button要素」ですが、これの「clone」を生成して、元の「button要素」は高さを「0」で非表示にしています。 ただし、これはスクリプトコードで「click()」をする事は可能です。

◎ 末尾の「375」の指定で、「a要素」が押されて遷移が開始された「0.375sec」のタイミングで、「いいね！履歴」を開く「button」をクリックします。 このクリックで、「いいね！のお知らせ」はリセットされて表示されなくなります。

タイミングはテスト中 

このコードは、僅かのタイミングで、目的通りの動作になるかどうかが変化します。 システムや通信環境などに遷移動作が影響されるとすると、安定した動作が期待できないかも知れません。 以下は、「HOME」を開いてローディングが続いている内に「お知らせ」をクリックした場合と、ローディング完了後に「お知らせ」をクリックした場合を数度試して、動作の結果を表にしています。

タイミング（sec）	リセット失敗	リセット成功	遷移に失敗
.500	✖
.450	✖
.425	✖
.400	✖	〇
.375	✖	〇
.350	✖	〇
.325	✖	〇	✖
.300		〇	✖

もっとテスト回数を増やして、最良点を確実にしたいと思っています。 ただ、あらゆる環境で使える設定が決められるかは、判りません。