Ajaxに慣れる / 今年の1歩

「 Ajax」とは

いまいち良く判ってないので、Webで調べると以下の説明がありました。

 

「Ajaxは何に使うのか？」

JavaScriptでHTMLやXMLで記述された要素を参照・操作する際に使用される 

❝

 

この機能は、とにかく素早くページ構成のデータを取り寄せる事に長けている様で、「集まったメンツだけで直ぐにゲームを始める」といった感じで、ウェブページを要領よく展開・運営するのにとても有効な通信機能と言えそうです。

 

ブログページは、ページャーでページを移動しますが、移動時に書き換わるのは本文等のページの一部分で、この差し換え操作も Ajaxで効率よく行っている様です。

 

 

 

「ツール一覧表」について

私のブログでは、スクリプトツールの最新版がすぐ見つけられる様に、最新版のページがすぐに判る一覧表を作っています。 下がそのページです。

 

 

この一覧表は、各ツールの行ごとに「最新版のページへのリンク」と「纏めページへのリンク」の2個のリンク（a要素）を並べています。

 

スクリプトツール一覧表：AmbTV Comfy、まとめページリンク

 

 

「纏めページ」は、機能の種類でスクリプトツールを分類して、説明も少しを加えているので、全てのツールを纏めるのに8ページ位になり、さっと一覧と言う事が出来ません。 そのために、この一覧表のページを作ったのです。

 

従って、現在はこの一覧表のページが、全ツールの交通案内の中軸になっています。

 

また、既に「一覧表のページ」は文字数限界になっていて、余り一般的でないツールは、次の追補ページに表を分けています。

 

 

 

 

「ツール一覧表」の更新日付データの取得  

この一覧表で、各ツールの最終更新日付があれば、ツール陳旧化を読みとる助けになり、アップデート漏れのチェックも使えそうです。 現在の一覧表は迂闊に書換えができないので、一覧表の複製を作って改装してみることにしました。

 

ただ、表に列を追加すると、確実に文字数オーバーになるので、「纏めページへのリンク」の列を、最終更新日付に変更することにしました。

 

さて、各行にはツールの最新ページのリンクがありますが、そのページの投稿日付は、リンク先のページを開いて、調べないと判りません。

 

ここで、最初の書いた「Ajax」が必要になりました。 Webページの部分的な差換えとは使用目的が違いますが、この一覧表のブログページ上で動作する JavaScriptで、各ツールの最新ページのデータを収集する事に使うわけです。

 

 

データ調査のエンジン 

下は、調査する「url」と、そこで得たデータを収める配列のインデックス「n」を指定して、動作する関数です。

 

function ajaxInspect(n, url){ // XMLHttpRequestを使ってデータを取得
    url=url+'?ver='+new Date().getTime(); // キャッシュを抑止して取得
    let ajax=new XMLHttpRequest;
    ajax.open('GET', url, true);

    ajax.onload=function(){ // データ取得時の操作
        let tmp_='<div id="tmp_div" style="display: none"></div>';
        if(!document.querySelector('#tmp_div')){
            document.body.insertAdjacentHTML('beforeend', tmp_); }

        let tmp=document.querySelector('#tmp_div');
        if(tmp){
            tmp.innerHTML=ajax.responseText; // 取得データをtmpに展開
            let elem=tmp.querySelector('script[type="application/ld+json"]');
            if(elem){
                let elem_data=elem.textContent;
                let data=elem_data.split(',');
                let pub_data=data.filter(function(data_text){
                    return data_text.includes('datePublished'); });

                if(pub_data){
                    let pub_date=pub_data.toString().replace(/[^0-9]/g, '').substr(0, 8);
                    pub_date=
                        pub_date.substr(0, 4) +'-'+ pub_date.substr(4, 2) +'-'+ pub_date.substr(6, 2);
                    date_all[n]=pub_date; }}}

        tmp.innerHTML=''; } // 取得データを削除
    ajax.send(null); }

 

最初に、「ajax」を使って「url」先を開く指定をしています。 次に「#tmp_div」という非表示の「div要素」を作っておき、「url」先のデータをそっくりそこへ展開しています。

 

この時に展開されるデータは、実際にページ表示に必要なデータより、色々と間引かれている様です。 画像などは、ページを表示する際に画像サーバーから読み出すので、このデータには乗っていないと思います。

 

目的ページのデータを展開し、そこでブログページの「投稿日付」を取得したかったのですが、これは予想外な問題がありました。 本文等はちゃんとあるのに、日付の表示枠だけで、実際の日付データは無いのです。 どうやら、これはページ表示時に、後からインポーズされるデータらしい。

 

「Abema TV」専用ツール「AmbTV Comfy」(23) JavaScript

 

 

そこで、「head要素」を探すと「type="application/ld+json"」属性の「script」に、記事データ等が収められている事が判りました。 下は実際の例です。

 

<script type="application/ld+json" data-react-helmet="true">{
"@context":"http://schema.org",
"@type":"BlogPosting",
"mainEntityOfPage":{"@type":"WebPage","@id":"https://ameblo.jp/personwritep/entry-12832760747.html"},
"headline":"「Abema TV」専用の閲覧ツール「AmbTV Comfy」（23）/ JavaScript",
"datePublished":"2023-12-18T07:20:00.000+09:00",
"dateModified":"2023-12-18T07:20:00.000+09:00",
"author":{"@type":"Person","name":"personwritep"},
"publisher":{"@type":"Organization","name":"Ameba","logo":{"@type":"ImageObject","url":"https://stat100.ameba.jp/ameblo/pc/img/amebloJp/abema_logo.png","width":600,"height":32}},
"image":{"@type":"ImageObject","url":"https://stat.ameba.jp/user_images/20231216/16/personwritep/27/c0/p/o1135091515377665420.png","width":1135,"height":915}}
</script>

 

この「script」は全ての記事にあるらしく、上の赤字のデータを取り出せば、投稿日付を取得できます。

 

調査エンジンのコードのブルーのコードは、取得したデータの「script」要素をとり出し、その中の「datePublished":"2023-12-18T07:～」のデータを抜き出して、そこから「2023-12-18」の文字列を得ています。

 

最後に、それを配列「date_all」に入れて、1件の調査が終了です。

 

これを一覧表に表示した約80件のスクリプトごとに行いますが、実際は1secもかからない様です。（ Ajaxは早さが命です）

 

80件のツールのページの投稿日付は、配列「date_all」に納めたので、これをファイルに出力するコードを追加しました。

 

出来たツール名は「JSTools Updatelog」で、自分のためのツールなので、シンプルなインターフェイスです。

 

このツールを「ON」にして「ツール一覧表」のあるページを開くと、自動的に投稿日付のデータ収集を実行します。 余裕を持たせて 4sec後に、結果をファイル出力するかをダイアログで問い、「OK」ならダウンロードファイルとして、日付データの配列を出力します。

 

ダウンロードファイルはメモ帳で開く事ができ、下の様な日付けの配列になります。

 

["2023-12-18","2023-12-14","2023-07-03","2022-03-03", ……]

 

 

 

一覧表に投稿日付データ書き込む 

「JSTools Updatelog」で得られるのは、最新の更新日付の配列です。 これを表に書き写すのは手間です。 そこで、配列を自動的に一覧表の書き込むツールを作りました。 ツール名は「JSTools Date Writer」としました。

 

こちらは編集画面で動作しますが、特別に複雑な点はありません。 一覧表の各行で、右端の列を、配列の日付に置換えるだけです。 コードのインターフェイスを簡単にするために、配列を読込むコードは省略し、コードに直接配列のデータを書き込んでから、編集画面を開いて処理を実行します。

 

編集画面に一覧表のページを開いたら、「Ctrl+Shift+F10」のショートカットを押すと、配列のデータが書込まれます。 結果がよければ、一覧表を保存します。

 

 

書込んだ様子 

「JSTools Updatelog」と「JSTools Date Writer」を使って、一覧表に更新日付の表示列を追加しました。

 

 

 

 

 

「JSTools Updatelog / JSTools Date Writer」について

以下のツールは Chrome / Edge版の拡張機能「Tampermonkey」上で動作します。

 

これらのツールは「ツール一覧表」を配したページでの動作を前提としているので、一般のページで起動させると正常な動作は期待できません。 あくまで、参考のためにコードを掲載しています。

 

JSTools Updatelog 

 

 

 

 JSTools Date Writer