((7回目の出直し🌻))

好きなことを自分のペースで、のんびり更新

はてなブログの購読リストが使いにくい!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;
        }
    }
)();

購読リストページは、古(いにしえの)黒魔法であるjQueryが使われているので、遠慮なくjQueryを使ってハックしました。

実行方法

Chromeの場合、

  1. 購読リストを開き
  2. F12を押してDeveloperツールを開き
  3. コンソール(console)を開き
  4. コードを貼り付けして
  5. ENTERキーを押す

f:id:kanaxx43:20220311224153p:plain

実行結果

実行中の様子を動画で撮りました。
(購読リストに載ってしまっている方、すいません)

右側のコンソールにちょろちょろっとメッセージが出て、5秒後くらいに左側がスッキリします。

リストに表示される項目

情報は最小限に

すっきり後には、自分の購読リストの全体を1ページで表示します。

ブログにごとに

  • アイコン
  • ブログタイトル
  • 1件目の記事とリンク
  • 最終更新日

だけです。

購読数も見えるように

画面の上にある「購読リスト」のタイトル横に件数(147の部分)が表示されます。 f:id:kanaxx43:20220311233721p:plain

注意事項として

  • 購読リストの量(ページ数)によって、かかる時間に違いがあります。
  • 鳥に行くページは50ページまでにしてあります。コード上の9行目を変更すると50ページ以上進みます。
  • 購読リストを開くたびに毎回実行しないといけません
  • はてなブログの仕様変更で動かなくなることがあります
  • 何かおきても自己責任でお願いします。

今日のところはこんな感じです。

お役に立てていたら、右側のバナーで何か買っていただけると励みになります。