アクセス解析の累積データを調べる「Total 3months」（2）/ JavaScript

簡単なインターフェイス

ツール名は「Total 3months」にしました。 最初は「Access 3months」でしたが、ツール名一覧で「A」で始まるツールが多すぎるので、分散をさせる目的です。

先ず最初に作ったのは、簡単なインターフェイスです。 3個のボタンを用意し、それぞれ「今月」「先月」「先々月」のデータを配列に取り込む処理を実行します。

下は、このスイッチパネルです。（そっけないです）「0」は「今月」、「1」は「先月」、「2」は「先々月」のデータを取り込みます。

データを配列に取り込むコード

以下は、パネルのクラス名を「sw_panel」、「0」ボタンのクラス名を「a0」として、ボタンのクリックで集計コード「get_data()」を起動するコードの雛形です。

let a0=document.querySelector('.sw_panel .a0');
if(a0){
    a0.onclick=()=>{
        if(location.search.includes('unit=this_month')){
            a0.disabled=true;
            get_data(); }}

「if(location.search.includes('unit=this_month'))」の条件付けで、「今月」のデータを表示している時にのみ、「a0」ボタンでデータを取り込める仕組みです。 一度クリックすると「a0.disabled=true;」でボタンが無効化し、重複して取り込めない様になります。 自分で使うだけなら「重複」を防ぐ仕組みは要らないですが、一応「汎用」を考慮します。

このコードを「a0」「a1」「a2」と3個並べて、インターフェイスは一応完成です。 集計操作をリセットしたい時は、「アクセス解析」のページをリロードすればリセットの代用になるので省略します。

下は、「0」ボタンをクリックした後で、このボタンだけ無効化された表示です。 ブラウザのデフォルトデザインなので印象が薄いです。 無効化のデザインは改める予定です。

集計する関数「get_data()」

「get_data()」は。パネルのボタンで一覧表のデータを「配列」に取り込む操作を行います。 ここがツールの要所です。

先ず、一覧表の全行を取得します。 その各行に関して、「記事のID」「記事のタイトル」「記事の閲覧数」を取り出し、子配列の「id, title, ac_count」を作り、それを最終的な集計用の配列「total」に追加して行きます。

この様な配列を更に纏めた配列構造を「2次元配列」と言いますが、このタイプの配列はツール制作では良く使います。 この大元の配列を操作して、集計したり、その結果をソートして一覧表にしたりします。

let total=[]; // 集計用の配列

function get_data(){
    let PAGLI=document.querySelectorAll('.p-accessAnalysisGraphListItem');

    for(let k=0; k<PAGLI.length; k++){
        let id; // 記事ID
        let title; // 記事タイトル
        let ac_count; // 記事の閲覧数

        let item_link=PAGLI[k].querySelector('.p-accessAnalysisGraphListItem__link');
        if(item_link){
            let url=new URL(item_link.href);
            id=url.searchParams.get('id'); }

        let item_titl=PAGLI[k].querySelector('.p-accessAnalysisGraphListItem__titleText');
        if(item_titl){
            title=item_titl.textContent; }

        let item_count=PAGLI[k].querySelector('.p-accessAnalysisGraphListItem__count');
        if(item_count){
            ac_count=item_count.textContent/1; } // 数値化

        total.push([id, title, ac_count]);

    }

} // get_data()

「id」「title」「ac_count」を取り出す 3種の処理を並べていて、最後にそのデータを配列の「total」に追加するまでが、ひとつのサイクルです。 この作業を、一覧表の全ての行で繰り返して、「total」にデータを集めます。

「アクセス解析」の「各月」の一覧表は、デフォルトで「50件」、「もっと見る」を押すと「100件」の行があるので、このツールのボタンを押せば、それが「total」に取り込まれます。

これから追加が必要な処理

上のコードでは、1回目のボタン操作で「今月」のデータを配列に取り込めますが、続けて「先月」のデータを取り込むと、「total」の中身は「今月」+「先月」になってしまいます。

全ての月の集計を目的にする場合は、ここで重複する記事IDのデータを纏める処理が必要です。 この関数は次回で作ります。