「AmbTV Mylist Checker」マイリストを利用した無料配信チェック（9）/ JS

カウンターの改善

テスト環境でマイリスト登録を40件程度まで増やして、他の画面からマイページを開いた時に、カウンターが実際の登録件数の半分ほどを示す事が、これまでは繰り返されて来ました。

これは、ABEMAのシステム上でリストを最初に開いた時のロード制限が「20件」とされているためです。以前からこの問題に気付いていて、リストをスクロールれば、すぐに正常なカウントを示すので放置して来ましたが、登録件数が増えると見過ごせなくなって来ました。前回に「エピソード登録のみ表示」を設定していて「マイページ」を開くと、本来の登録は15件なのに表示は 2件など、ダメダメです。

今回、40件程度までは正確なカウンターとリストが表示できる様に、対策コードを追加しました。

対策

この種のリストのロード制限に対しては、リストを開いた時に自動でスクロールするなどの方法がありますが、もう少しスマートな対策を講じました。

方法は、リストの各行の高さを「0」にして、画面上に強制的にリストの全行を呼込む方法です。

「AmbTV Mylist Checker」 ver.0.7 420行～

'<style class="count_ajust">'+ // カウント実行のデザイン
'.list_count li { height: 0; } '+
'.list_count .com-my-list-MyListBaseItem__thumbnail, '+
'.list_count .com-my-list-MyListBaseItem__details, '+
'.list_count .com-my-list-MyListBaseItem__delete-button { display: none; } '+
'</style>';

上の「styleタグ」をページに設定して、マイリストの「ul要素」に「list_count」のクラス名をスクリプトで設定すると、全ての「リスト行」のサムネイルやタイトル等が非表示となり、高さが極小になります。これで本来はページ外に溢れて呼込まれないリストの後方の行が、一気にページ内に呼込まれます。 ABEMAのシステムの上限は判りませんが、40件は簡単に呼び込めます。

この呼び込みを実際に行う関数は以下です。

「AmbTV Mylist Checker」 ver.0.7 198行～

function count_ajust(){
    sected_disp=localStorage.getItem('ABEMA_Mylist_disp');
    let list_ul=document.querySelector('.com-pages-mylist-MylistContentItemList');
    if(list_ul){
        disp_selected(0); //「sort」形式を全件表示にする ❶
        list_ul.classList.add('list_count'); // ❷
        setTimeout(()=>{
            list_ul.classList.remove('list_count'); // ❸
        }, 200);
        setTimeout(()=>{
            disp_selected(sected_disp/1); // ❹
        }, 300); }}

❶ リストの抽出表示ではない全件表示を設定。

❷ リストの高さを「0」にして、可能な限りの件数を呼込む。

❸ リストの高さを本来の高さに戻す。

❹ 前回に設定していた抽出表示の設定を再現。

この関数「count_ajust()」は、「マイリスト」の画面を開いた最初に実行されます。さらに、左メニューの「マイリスト」のメニューを押すとリストがリセットされるので、それを監視して「count_ajust()」を実行し、正しいカウントを表示します。

現在は 50件を超えるテストをしていませんが、使えるカウンターになりました。