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

ニコニコ動画でマイリスト・コメント・再生ランキングを同時に表示するGreasemonkeyスクリプト(バージョンアップ)

インストールはこちら
nicovideo Show All Ranks for Greasemonkey

nicovideo Show All Ranksをバージョンアップしました。他のスクリプトと連携するためのAPIを搭載しました。
今回のバージョンアップに併せて,以下のスクリプトも更新しました。

今まではランキングの最初から表示されている部分にしか動画投稿者名やはてなブックマーク数が表示されませんでしたが,今回の更新でランキングの全ての動画にそれらの情報が表示されるようになりました。

技術的なお話。

window.NicovideoShowAllRanks.addFilter(func)にコールバック関数を渡すと,ランキングのテーブルが挿入される前にコールバック関数が呼び出されます。コールバック関数には引数として,切り出す前のランキングデータの入ったtableが渡されます。
言葉で説明するよりソースを読んだ方が速いかも。

const filters = [];

// フィルタ関数の登録
window.NicovideoShowAllRanks.addFilter = function(f) {
  filters.push(f);
}; 

// ランキングページを取得
function getRankTable(type, span, category, query, callback) {
    GM_xmlhttpRequest({
        method: 'GET',
        url: [rank_url_prefix, type, span, category].join('/') + '?' + query,
        headers: { 'User-Agent': 'Mozilla/5.0 Greasemonkey; nicovideo Show All Ranks' },
        onload: function(response) {
            var html = document.createRange().createContextualFragment(response.responseText);
            var body = Array.find(
                html.childNodes,
                function(child) {
                    return (child.nodeName == 'DIV' && child.id == 'PAGEBODY');
                });
            if(!body)
                return callback(null);
            // ランキング部分をHTMLから切り出す
            var table = document.evaluate('//table[@summary = "結果"]', body, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            if(table == null)
                return callback(null);
            // フィルタ関数にランキング部分を渡す
            filters.forEach(function(f) { f(table); });
            callback(table);
        }
    });
}

こんな感じの実装になっています。
http://www.nicovideo.jp/ranking/mylist/weekly/all?show_allにアクセスした場合は,以下のような順番で処理が実行されると思います。

  1. マイリストランキングページを読み込む
  2. ページ全体のスタイルを変更
  3. 再生数ランキングを取得する
  4. 取得したHTMLからDOMツリーを構築,ランキングの表部分を切り出す
  5. フィルタ関数に表部分を渡す
  6. 表から各列を切り出し,ランキングページに表示する
  7. コメントランキングについても同様