はてなブログの購読リストが使いにくい！70行のスクリプトでサクッときれいにする

久しぶりにはてなブログの不満記事です。

今日は、購読リストが使いにくい件です。

f:id:kanaxx43:20220312094923j:plain

購読リスト

購読リストとはこれです。
f:id:kanaxx43:20220312091446p:plain

自分が読者になっているブログのリストが見えるページです。
購読しているブログに変更があると未読件数を数字で教えてます。また、最近追加された記事が出てくるのでブログをたどりやすいです。

ここまではよい。

問題はここから

今の購読リストは、ここが使いにくいです

自分が購読している総件数が分からない
購読しているブログを全体を見るページがない（記事が3個ずつ挟まるのが邪魔）
1ページに10ブログしか表示できないので、次ページを連打する必要がある
更新があると上に上がってくる仕組みなので、更新がないブログは埋もれてしまう

月に1回くらい更新がある友人のページを探すには、「次のページ」でめくっていくゲームになります。これはツライ。

面倒なので、さくっと1ページで見えるようにしたろうじゃないか。という記事です。

使ったもの

JavaScript 70行だけです。

今、開いている画面上で動きます。IDやパスワードを入力して情報を取りに行く仕組みではないので安心してください。
はてなブログの管理画面にログインした状態で実行すればOKです。

コード

コードはこれだけです。

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level SIMPLE_OPTIMIZATIONS
// @language_out ECMASCRIPT_2017
// ==/ClosureCompiler==
javascript:(
    async function(){
        const anntena = 'https://blog.hatena.ne.jp/-/antenna?page=';
        const maxpage = 50;
        const bloglist = [];

        for(let p=1; p<maxpage; p++){
            console.info('page:%s',p);
            let html = await getHTML(anntena + p);

            let li = $(html).find('li.subscribed-list-list');
            console.log('li count = %s',li.length);
            
            if(li.length >0 ){
                for(let i=0; i<li.length; i++){
                    bloglist.push(li[i]);
                }
            }else{
                break;
            }
        }

        console.info('blog count = %s', bloglist.length);

        let summary= "";
        for(let i in bloglist){
            let ans = parse(bloglist[i]);
            console.log(ans);
            summary = summary +             
                 `<p>
                 <img src="${ans.img}" width="48">
                 <span style="font-size:130%; font-weight:bold">${ans.blogname}</span> <a href="${ans.link}">${ans.title}</a> ${ans.jsttime}
                 </p>`
        }
        //console.log(summary);
        $('div.l-admin-subscribe-wrapper-right').remove();
        $('div.l-admin-subscribe-wrapper-left').remove();
        $('div.pager').remove();
        $('div#main-header a').text( '購読リスト' + bloglist.length);
        $('div#main-header').after(summary);

        //liタグ（ブログ1個分）を解析する
        function parse(li){
            const target = $(li);
            const blogname = target.find('a.entry-unit-blog-name').text().trim();
            const a = target.find('div.entry-unit-content h3.entry-unit-entry-title > a');
            const title = a.text().trim();
            const link = a.attr('href');
            const time = target.find('div.entry-unit-content div.entry-unit-entry-footer time.entry-unit-post-time');
            const utctime = time.attr('datetime');
            const jsttime = new Date(utctime).toLocaleString(); 
            const diff = time.text();

            const img = target.find('img.subscribed-list-icon').attr('src');
            return {blogname, title,link,utctime,jsttime,diff,img};
        }

        //HTMLを取りに行く
        async function getHTML(url){
            const response = await fetch(url);
            const html = await response.text();
            return html;
        }
    }
)();