HistogramHeatGraph_html5.user.js

ニコニコ動画(HTML5)でコメントの盛り上がりをグラフで表示(html5版)
当前为 2017-11-02 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name           HistogramHeatGraph_html5.user.js
// @namespace      sotoba
// @version        0.20171103
// @description    ニコニコ動画(HTML5)でコメントの盛り上がりをグラフで表示(html5版)
// @match          http://www.nicovideo.jp/watch/*
// @include        http://www.nicovideo.jp/watch/*
// @require        http://code.jquery.com/jquery-latest.min.js
// @grant          none
// ==/UserScript==

(function () {

    var $ = window.jQuery, require = window.require;
    var ControllerBox=$('.ControllerBoxContainer').eq(0);
    var PlayerContainer=$('.PlayerContainer').eq(0);
    const $graph = ControllerBox.next();

    PlayerContainer.append('<div id=comment-list></div>');
    var ApiJsonData=JSON.parse(document.getElementById('js-initial-watch-data').getAttribute('data-api-data'));
    var thread_id=ApiJsonData.video.dmcInfo.thread.thread_id;
    var video_id=ApiJsonData.video.id;
    var user_id=ApiJsonData.video.dmcInfo.user.user_id;


    if(video_id.startsWith('sm')||video_id.startsWith('nm')){
        $.ajax({
            url:'http://nmsg.nicovideo.jp/api/thread?thread='+thread_id+'&version=20061206&res_from=-1000&scores=1',
            type:'GET',
            dataType:'xml',
            timeout:3000,
            error:function() {
                console.log("Ajax::failed");
            },
            success:function(xml){
                drowgraph(xml,ApiJsonData);
            }
        });
    }else{
        $.ajax({
            url:'http://flapi.nicovideo.jp/api/getthreadkey?thread='+thread_id,
            type:'GET',
            timeout:3000,
            error:function() {
                console.log("Ajax:failed");
            },
            success:function(response){
                $.ajax({
                    url:'http://nmsg.nicovideo.jp/api/thread?thread='+thread_id+'&version=20061206&res_from=-1000&scores=1&user='+user_id+'&'+response,
                    type:'GET',
                    dataType:'xml',
                    timeout:3000,
                    error:function() {
                        console.log("Ajax:::failed");
                    },
                    success:function(xml){
                        console.log("Ajax:success");
                        drowgraph(xml,ApiJsonData);
                    }
                });
            }
        });
    }

    function  drowgraph(commentData,ApiJsonData){

        var videoTotalTime =ApiJsonData.video.dmcInfo.video.length_seconds;
        var barTimeInterval=10;

        const barIndex = Math.ceil(videoTotalTime / barTimeInterval);

        const playerWidth =parseFloat($("#CommentRenderer canvas:first").css("width"));
        const barColors = [
            '126da2', '1271a8', '1275ae', '1279b4', '137dba',
            '1381c0', '1385c6', '1489cc', '148dd2', '1491d8'
        ];

        const $commentlist = $('#comment-list');

        var listMessages = (new Array(barIndex)).fill(0);
        var listCounts = (new Array(barIndex)).fill(0);
        var listTimes = (new Array(barIndex)).fill(0);
        var lastBarTimeIntervalGap = barTimeInterval - Math.floor(videoTotalTime % barTimeInterval);
        const lastBarWidthRatio = videoTotalTime % barTimeInterval / barTimeInterval;
        var barWidth = playerWidth / (lastBarWidthRatio + barIndex - 1);
        var barTimePoint = 0;
        for (var i = 0; i < barIndex; i++) {
            $(commentData).find('chat').each(function(v){
                var thisTimePoint = $(this).attr('vpos') / 100;
                if (barTimePoint <= thisTimePoint && thisTimePoint < barTimeInterval + barTimePoint) {
                    listCounts[i]++;
                }
            });
            barTimePoint += barTimeInterval;
        }

        listCountMax = Math.max(...listCounts);
        const barColorRatio = (barColors.length - 1) / listCountMax;
        var  graphHeight = listCountMax > 10 ? listCountMax : 10;

        $('#comment-list').empty();
        $('#comment-list').height(graphHeight);
        var barColor;
        var barBackground;
        for (i = 0; i < barIndex-1; i++) {
            barColor = barColors[Math.floor(listCounts[i] * barColorRatio)];
            barBackground = `linear-gradient(to top, #${barColor}, #${barColor} ` +`${listCounts[i]}px, transparent ${listCounts[i]}px, transparent)`;
            if (i > barIndex - 2) {
                barWidth *= lastBarWidthRatio;
            }
            $('<div>')
                .css('background-image', barBackground)
                .css('float','left')
                .height(graphHeight)
                .width(barWidth)
                .appendTo('#comment-list');
        }

    }
})();