読者です 読者をやめる 読者になる 読者になる
MENU

ページに含まれるリンクを集計するブックマークレットを作った

電子機器のこと プログラミング PC・スマホ・タブレット

ブックマークレット」という、ブックマーク(お気に入り)から実行できるプログラムがある。使い方はいろいろで、ページの見た目を変えたり、機能を追加したりできる。

僕は普段「Pocket(後で読むサービス)」を使っていて、ネットを徘徊中、気になったページをどんどん登録して、暇なときに消化している。

getpocket.com

その中でもとくによく見るサイトを知りたかったので、過去に登録したサイトを集計するためのブックマークレットを作った。ページに含まれるリンクからURL(ドメイン)を抜き出しているだけなので、ほかのページにも使えると思う(用途は不明)。

javascript:(function(){const KEY_DOMAIN = 'domain';const KEY_COUNT = 'count';var tmpResult = {};var aList = document.getElementsByTagName('a');for(var i = 0; i < aList.length; i++){var url = aList[i].href;var matchedList = url.match(/^(https?:\/{2}[^\/]+)/);if(matchedList === null){continue;}var domain = matchedList[0];if(domain != null){if(tmpResult[domain] === undefined){tmpResult[domain] = 0;}tmpResult[domain]++;}}var propertyList = Object.getOwnPropertyNames(tmpResult);var resultList = [];for(var i = 0; i < propertyList.length; i++){var domain = propertyList[i];var count = tmpResult[domain];resultList.push({'domain' : domain, 'count' : count});}if(resultList.length === 0){return;}resultList.sort(function(result1, result2){var count1 = result1[KEY_COUNT];var count2 = result2[KEY_COUNT];if(count1 > count2){return -1;}else if(count1 === count2){return 0}else{return 1;}});var title = document.createElement('p');title.appendChild(document.createTextNode('【集計結果(カッコ内は回数)】'));var div = document.createElement('div');div.appendChild(title);for(var i = 0; i < resultList.length; i++){var result = resultList[i];var p = document.createElement('p');var a = document.createElement('a');a.href = result[KEY_DOMAIN];a.target = '_blank';a.appendChild(document.createTextNode(result[KEY_DOMAIN]));p.appendChild(a);p.appendChild(document.createTextNode('(' + result[KEY_COUNT] + ')'));div.appendChild(p);}var body = document.body;body.insertBefore(div, body.firstChild);})();

上記のコードをブックマークのURL欄にコピペして登録。あとは任意のページで呼び出すと、リンクの数が多い順にサイトが表示される。

f:id:h_imwikr:20161219233338p:plain

AndroidChromeで使う場合は、実行手順が少し違う。

ametuku.com

ブックマークレットには文字数の上限があって、それがブラウザによって違うらしい。だから動かないこともあるかもしれない。

Pocketのアカウント設定から「HTML ファイルをエクスポート」して、ダウンロードしたHTMLファイルで実行してみた。意外なサイトが上位だったりして面白い。

f:id:h_imwikr:20161219231304p:plain

JavaScriptに不慣れなこともあって苦戦した箇所もあったが、楽しかった。

ソースコード

const KEY_DOMAIN = 'domain';
const KEY_COUNT = 'count';

var tmpResult = {};
var aList = document.getElementsByTagName('a');

for(var i = 0; i < aList.length; i++){
    var url = aList[i].href;
    var matchedList = url.match(/^(https?:\/{2}[^\/]+)/);

    if(matchedList === null){
        continue;
    }

    var domain = matchedList[0];

    if(domain != null){
        if(tmpResult[domain] === undefined){
            tmpResult[domain] = 0;
        }

        tmpResult[domain]++;
    }
}

var propertyList = Object.getOwnPropertyNames(tmpResult);

var resultList = [];

for(var i = 0; i < propertyList.length; i++){
    var domain = propertyList[i];
    var count = tmpResult[domain];

    resultList.push({'domain' : domain, 'count' : count});
}

if(resultList.length === 0){
    return;
}

resultList.sort(function(result1, result2){
    var count1 = result1[KEY_COUNT];
    var count2 = result2[KEY_COUNT];

    if(count1 > count2){
        return -1;

    }else if(count1 === count2){
        return 0

    }else{
        return 1;
    }
});

var title = document.createElement('p');
title.appendChild(document.createTextNode('【集計結果(カッコ内は回数)】'));

var div = document.createElement('div');
div.appendChild(title);

for(var i = 0; i < resultList.length; i++){
    var result = resultList[i];
    var p = document.createElement('p');
    var a = document.createElement('a');

    a.href = result[KEY_DOMAIN];
    a.target = '_blank';
    a.appendChild(document.createTextNode(result[KEY_DOMAIN]));

    p.appendChild(a);
    p.appendChild(document.createTextNode('(' + result[KEY_COUNT] + ')'));

    div.appendChild(p);
}

var body = document.body;
body.insertBefore(div, body.firstChild);

参考

ブックマークレット/Bookmarkletの作り方 - catch.jp-wiki

JavaScript初級者から中級者になろう — uhyohyo.net

配列・二次配列・連想配列のソート | TF Lab - クラウド開発記録 -

ライブラリを使わない素のJavaScriptでDOM操作 - Qiita