アクセスレポートの更新を明示する「Awake」/ JavaScript

Bum Tool  

「怠け者の」「無精者の」を英語でどういうか調べると、「Lazy」が出て来ます。 適当な目的で、日頃の事を少しだけ便利にするツール、そんな構えないツールを色々試してみたくなりますが、そういうツールの総称はあるのでしょうか？

 

これを「Lazy Tool」と言ってしまうと、画像等の遅延読込みとしてそこらじゅうで活躍している「Lazy Load」と思われてしまうので、辞書を探して「Bum Tool」と名付けて見ました。 邪魔にならない程度の「駄ツール」ってとこです。

 

で、今回のは、アクセスレポートが更新されたものか、前日のものかを示すだけのツールです。

 

 

 

更新前が更新後か ？

ランキングレポートに目を光らせてるのではありませんが、管理トップを見れば、嫌でもランキングが目に入りますね。

 

 

で、たいてい朝にチラ見するのですが、前日のものか今朝に更新されたものか、はっきりしません。 アメブロ側は、およそ朝8時にレポートを送信しているそうですが。

 

これが更新されているかどうかを確認するには、「昨日（xx/xx）のアクセス数」の小さな表示の「日付」の部分を見ると良さそうです。 更新前は「一昨日」、更新後には「昨日」の日付が表示されるはずです。 

 

 

 

コード 

このツールのコードは簡単です。 JavaScriptには、現在のシステムの日付・時刻を入手するコードがあり、これで得られる日付から、昨日の日付を取得して、上記の日付表示と比較します。

 

ページの表示された日付を取得するのは、簡単な正規表現検索を使います。

 

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, ''); }

 

「access_title」は「昨日（xx/xx）のアクセス数」の部分の要素で、このテキストを取得して「(」と「)」に挟まれた部分を取り出してます。 月と日付は「/」で区切った表示なので、区切りの後方を取り出し、数字以外を削除して「day」を得ています。 とてもローテクなコードです。

 

一方、昨日の日付は、下のコードで「yesterday」として取得できます。

 

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

 

大晦日と元旦や、月の終わりと翌月初日など、どんな場合も「昨日」と「一昨日」の「日付」は違います。 従ってシステムの「yesterday」とページ上の「day」が一致すれば、レポートが「更新」された事が確認出来ます。

 

更新を確認したら、この表示部を淡いブルー背景色にして、ユーザーに知らせます。

 

 

 

〔追記〕2020.04.26

ツールを常駐させていますが、夜の12時を越えると無色になり、朝の更新時に色が着くという、判っていた「あたりまえの動作」をします。 何か、気の利いた演出でもと考えるが、まっいいか。

 

 

 

「Awake」のコード 

このツールは Chrome / 新Edge / Firefox の拡張機能「Tampermonkey」上で動作します。「Tampermonkey」の「新規スクリプト」画面を初期状態にクリアし、以下のコードを貼り付けて保存すると、ツールが利用可能になります。

 

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

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

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

 
 

〔 Aweke 〕 ver. 0.1

 

// ==UserScript==
// @name         Awake
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  アクセスレポートの更新を背景色で知らせる
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/analysis*
// @match        https://blog.ameba.jp/ucs/top*
// @grant        none
// ==/UserScript==

setTimeout(()=>{

    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'; }

    }}, 500); // ページを開いてからのタイミング

 

 

 

「Awake」最新版について 

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