「Awake」ver.0.4　起動処理を改善 / JavaScript

「Awake」の機能

先日「Awake」に記事別アクセス数の集計機能を追加しましたが、この機能の起動にページリロードが必要な変な仕様でした。

「アクセス解析トップ」と「記事別アクセス数」のページ間をユーザーが移動した際に、集計機能を停止・再開する必要があり、「MutationObserver」を上手く扱えば、対応できそうだと考えてはいたのですが...

スクリプトは対象を見失うと停止する

スクリプトはページが開かれた時に動作を始め、操作対象とする要素がページ上にある場合は動作しますが、扱っていた対象が画面内容の変更で無くなると、その後は動作を終了してしまいます。

同じページがもう一度開かれる（リロード）場合は、スクリプトも再起動するので、この問題は気付きにくいのですが、リロードが無しでページ上の要素が変化する場合は、スクリプトが動作しない問題が表面化します。

今回は、「記事別アクセス数」の画面には集計対象のリストがあり、「アクセス解析トップ」にはありません。そのため「記事別アクセス数」で起動した集計プログラムは、「アクセス解析トップ」を開くと終了してしまいます。

次に「アクセス解析トップ」から「記事別アクセス数」を開くと、通常ならばページ変化でロードが生じ、もう一度集計プログラムが起動しますが、そうはなりません。この移動は新しいページがロードされる様に見えますが、実はページ内の要素の一部の差し換えでしかないからです。

この状況は、画面の移動（ページ移動ではない）を察知して、集計プログラムを再起動させる事が必要です。その起動を指示できるのが「MutationObserver」で、私は他の対処方法を知りません。多分、他の方法では困難と思います。

適切な監視対象の指定は最重要

前回の失敗は、この点でした。

下は、差し替えが行われる瞬間の DevToolsの表示ですが、赤矢印で示したピンクの要素が動的に書き換えられている事を示しています。

「MutationObserver」のコードを書く場合、実際に変化が生じる操作をして、この様な画面から変化する要素を知り、その要素を監視対象にします。

で前回は、「#root section」を監視対象にしたコードを作り使っています。これは「記事別アクセス数」の画面で「集計期間」の変更の監視には最適でした。しかし、それが上手く行ったので、「トップ画面」への移動の監視にも使えると思い込み、結局は上手く動作せず諦めてしまいました。

    let target=document.querySelector('#root section');   ❌
    let monitor=new MutationObserver(page_change);
    monitor.observe(target, { childList: true });

    let target=document.querySelector('#root > div');    ⭕
    let monitor=new MutationObserver(page_change);
    monitor.observe(target, { childList: true });

しかし、後でテストを重ねると「アクセス解析トップ」⇄「記事別アクセス数」の移動の監視には、「#root >div」を監視対象にする必要があったのです。監視対象はほとんど似通った場所にあるのに、全く結果が違いました。

コードが有効に動作するかは、実際に試さないと判りません。適切な監視対象がとても重要な事を再認識しました。

「Awake」を更新しました

「アクセス解析トップ」⇄「記事別アクセス数」の移動に確実に対応可能になったので、コードを大幅に書き換えて整理しました。実行内容は同じですが、どの様な形で「記事別アクセス数」を開いても集計表示が行われる様になりました。

また、「管理トップ」のみで実行していたデータ更新の背景色表示を、「アクセス解析トップ」でも表示する様に、機能を拡張しました。

「Awake」ver. 0.4 を使用するには

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

❶「Tampermonkey」を導入します

使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。以下のページに簡単な導入の説明があるので参照ください。

⭕「Tampermonkey」の導入方法特定ページで JavaScriptを実行する拡張機能「Tampermonkey」は定評のあるブラウザ拡張機能です。これをブラウザに導入する事で、ユーザーライクで有効なスクリプトを利用できます。∽ameblo.jp

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

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

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

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

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

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

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

〔 Awake 〕 ver. 0.4

// ==UserScript==
// @name         Awake
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  アクセスレポートの更新を背景色で表示・解析ページを「今日」で開く
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/analysis*
// @match        https://blog.ameba.jp/ucs/top*
// @grant        none
// ==/UserScript==


let path=document.location.pathname;
if(path=='/ucs/top.do'){ // 管理トップ で実行
    let ana_link=document.querySelector('.l-ucs-sidemenu-area a[href*="analysis.do"]');
    if(ana_link){
        ana_link.setAttribute('href', 'https://blog.ameba.jp/ucs/analysis/analysis.do?unit=today'); }

    setTimeout(()=>{
        new_report();
    }, 500); // ページを開いてからのタイミング
} // 管理トップ で実行



if(path.indexOf('analysis')!==-1){ // アクセス解析ページ全体
    let target0=document.querySelector('#root > div');
    let monitor0=new MutationObserver(page_change);
    monitor0.observe(target0, { childList: true });

    page_change();

    function page_change(){
        let path=document.location.pathname;
        if(path.indexOf('analysis.do')!==-1){ // アクセス解析トップ
            clear_disp();
            setTimeout(()=>{
                new_report();
            }, 500); // ページを開いてからのタイミング
        } // アクセス解析トップ


        if(path.indexOf('analysis_page.do')!==-1){ // 記事別アクセス数ページ
            let target=document.querySelector('#root section');
            let monitor=new MutationObserver(count_do);
            monitor.observe(target, { childList: true });

            count_do();
        } // 記事別アクセス数ページ

    } // page_change()
} // アクセス解析ページ全体


function new_report(){
    let access_title=document.querySelector('.p-analysisSummary__access__title');
    if(access_title){
        let accsess_text=access_title.textContent.match(/\(.*\)/).toString();
        let day=accsess_text.match(/\/.*/).toString().replace(/[^0-9]/g, '');

        let date=new Date();
        date.setDate(date.getDate() -1); // 昨日の日付を取得
        let yesterday=date.getDate();

        if(day==yesterday){
            let access_panel=document.querySelector('.p-analysisSummary');
            access_panel.style.boxShadow='inset 265px 0px 0 0px #d7f2ff'; }}}


function count_do(){
    clear_disp();

    let retry=0;
    let interval=setInterval(more_open, 1000);
    function more_open(){
        retry++;
        if(retry>20){ // リトライ制限 20回 4sec
            clearInterval(interval);
            alert("全てのリスト情報を開かずに合計しました"); }

        let more=document.querySelector('.p-accessGraph__moreLinkBtn--center');
        if(more){
            more.click(); }
        if(!more){
            clearInterval(interval);
            main(); }}

    function main(){
        let line_count=0;
        let num_count=0;
        let p_count=document.querySelectorAll('.p-accessGraphItem__count');
        for(let k=0; k<p_count.length; k++){
            line_count+=1;
            let line_item_disp=p_count[k].textContent.replace(/[^0-9]/g, '');
            num_count+=parseInt(line_item_disp, 10); }

        let disp=document.createElement('div');
        disp.setAttribute("id", 'add_access');
        disp.innerHTML=
            '参照された記事数：'+ line_count +'　アクセス数合計：'+ num_count;

        let style=document.createElement('style');
        style.innerHTML=
            '#add_access { position: fixed; top: 56px; right: calc(50% - 405px); '+
            'padding: 4px 15px 2px; font: normal 16px Meiryo; z-index: 10; '+
            'border: 1px solid #009688; background: #fff; '+
            'box-shadow: 2px 3px 6px rgb(170, 170, 170,  0.4); }';

        disp.appendChild(style);

        clear_disp();
        document.querySelector('body').appendChild(disp);
    } // main()
} // count_do()


function clear_disp(){
    if(document.querySelector('#add_access')){
        document.querySelector('#add_access').remove(); }}

「Awake」最新版について

旧いバージョンの「Awake」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。最新バージョンへのリンクは、以下のページのリンクリストから探せます。

「Awake」ver.0.4 起動処理を改善 / JavaScript