楽天競馬のオッズページに騎手の勝率を表示する２

概要

個人ブログの記事ですが、同様の事を実施するための方法を記載していました。
https://lookna.netlify.app/post/プログラミング/javascript/楽天競馬のオッズページに騎手の勝率を表示する/

取得元データを自分で準備しないといけなかったので、自動で取得するように変更しました。

変更点

騎手の勝率を楽天ページから取得して、JSON形式に編集してソースにハードコーディングする必要がありましたが、以下のような方法で自動的に取得するように変更しました。

1. 現在表示しているページから競馬場を判定
2. 該当競馬場について今年の通期の勝率を取得

ソース

以下のJavascriptをブックマークレットにして、楽天競馬の各レースのオッズ画面の「枠・馬番順」タブを表示している状態で実行します。

let formData = new FormData();
formData.append('tYear', new Date().getFullYear() + '');
formData.append('tMonth', '0');
formData.append('tKeibajouCode', document.location.href.replace(/.*RACEID\/[0-9]{8}([0-9]{2}).*/g, '$1'));

fetch('https://keiba.rakuten.co.jp/analyze/leading/RACEID/', { method: 'post', body: formData })
    .then(res => res.text())
    .then(text => {
        let dom = new DOMParser().parseFromString(text, "text/html");
        let kishuList = [];
        dom.querySelectorAll('#oddsField > table.dataTable.floatTable > tbody > tr').forEach((ele) => {
            kishuList.push({
                'name': ele.querySelector('td.name').textContent.replace(/　/g, ''),
                'shoritsu': ele.querySelector('td:nth-child(8)').textContent,
                'nyuritsu': ele.querySelector('td:nth-child(10)').textContent
            });
        });

        document.querySelectorAll('#wakuUmaBanJun > table > tbody > tr > td.jockey > a')
            .forEach((elem) => {
                let kishuName = elem.textContent.replace(/\s/g, '').replace(/(☆|★|▲|◇)/g, '');
                kishuList.forEach((kishu) => {
                    if (kishu.name.startsWith(kishuName.substr(0, 2)) && kishu.name.match(kishuName.substr(2, 1)) != null) {
                        let text = document.createElement('span');
                        text.appendChild(document.createTextNode('■' + kishu.shoritsu + '|' + kishu.nyuritsu + '■'));
                        if ((kishu.nyuritsu.replace('%', '') * 1) > 40) {
                            text.style = 'color : red';
                        }
                        elem.parentElement.append(text);
                    }
                });
            });
    });

実行すると以下の画像のように表示されます。