☰

HistogramHeatGraph_html5.user.js

ニコニコ動画(HTML5)でコメントの盛り上がりをグラフで表示(html5版)

2017-11-02 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name           HistogramHeatGraph_html5.user.js
  3. // @namespace      sotoba
  4. // @version        0.20171103
  5. // @description    ニコニコ動画(HTML5)でコメントの盛り上がりをグラフで表示(html5版)
  6. // @match          http://www.nicovideo.jp/watch/*
  7. // @include        http://www.nicovideo.jp/watch/*
  8. // @require        http://code.jquery.com/jquery-latest.min.js
  9. // @grant          none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.  
  14.     var $ = window.jQuery, require = window.require;
  15.     var ControllerBox=$('.ControllerBoxContainer').eq(0);
  16.     var PlayerContainer=$('.PlayerContainer').eq(0);
  17.     const $graph = ControllerBox.next();
  18.  
  19.     PlayerContainer.append('<div id=comment-list></div>');
  20.     var ApiJsonData=JSON.parse(document.getElementById('js-initial-watch-data').getAttribute('data-api-data'));
  21.     var thread_id=ApiJsonData.video.dmcInfo.thread.thread_id;
  22.     var video_id=ApiJsonData.video.id;
  23.     var user_id=ApiJsonData.video.dmcInfo.user.user_id;
  24.  
  25.  
  26.     if(video_id.startsWith('sm')||video_id.startsWith('nm')){
  27.         $.ajax({
  28.             url:'http://nmsg.nicovideo.jp/api/thread?thread='+thread_id+'&version=20061206&res_from=-1000&scores=1',
  29.             type:'GET',
  30.             dataType:'xml',
  31.             timeout:3000,
  32.             error:function() {
  33.                 console.log("Ajax::failed");
  34.             },
  35.             success:function(xml){
  36.                 drowgraph(xml,ApiJsonData);
  37.             }
  38.         });
  39.     }else{
  40.         $.ajax({
  41.             url:'http://flapi.nicovideo.jp/api/getthreadkey?thread='+thread_id,
  42.             type:'GET',
  43.             timeout:3000,
  44.             error:function() {
  45.                 console.log("Ajax:failed");
  46.             },
  47.             success:function(response){
  48.                 $.ajax({
  49.                     url:'http://nmsg.nicovideo.jp/api/thread?thread='+thread_id+'&version=20061206&res_from=-1000&scores=1&user='+user_id+'&'+response,
  50.                     type:'GET',
  51.                     dataType:'xml',
  52.                     timeout:3000,
  53.                     error:function() {
  54.                         console.log("Ajax:::failed");
  55.                     },
  56.                     success:function(xml){
  57.                         console.log("Ajax:success");
  58.                         drowgraph(xml,ApiJsonData);
  59.                     }
  60.                 });
  61.             }
  62.         });
  63.     }
  64.  
  65.     function  drowgraph(commentData,ApiJsonData){
  66.  
  67.         var videoTotalTime =ApiJsonData.video.dmcInfo.video.length_seconds;
  68.         var barTimeInterval=10;
  69.  
  70.         const barIndex = Math.ceil(videoTotalTime / barTimeInterval);
  71.  
  72.         const playerWidth =parseFloat($("#CommentRenderer canvas:first").css("width"));
  73.         const barColors = [
  74.             '126da2', '1271a8', '1275ae', '1279b4', '137dba',
  75.             '1381c0', '1385c6', '1489cc', '148dd2', '1491d8'
  76.         ];
  77.  
  78.         const $commentlist = $('#comment-list');
  79.  
  80.         var listMessages = (new Array(barIndex)).fill(0);
  81.         var listCounts = (new Array(barIndex)).fill(0);
  82.         var listTimes = (new Array(barIndex)).fill(0);
  83.         var lastBarTimeIntervalGap = barTimeInterval - Math.floor(videoTotalTime % barTimeInterval);
  84.         const lastBarWidthRatio = videoTotalTime % barTimeInterval / barTimeInterval;
  85.         var barWidth = playerWidth / (lastBarWidthRatio + barIndex - 1);
  86.         var barTimePoint = 0;
  87.         for (var i = 0; i < barIndex; i++) {
  88.             $(commentData).find('chat').each(function(v){
  89.                 var thisTimePoint = $(this).attr('vpos') / 100;
  90.                 if (barTimePoint <= thisTimePoint && thisTimePoint < barTimeInterval + barTimePoint) {
  91.                     listCounts[i]++;
  92.                 }
  93.             });
  94.             barTimePoint += barTimeInterval;
  95.         }
  96.  
  97.         listCountMax = Math.max(...listCounts);
  98.         const barColorRatio = (barColors.length - 1) / listCountMax;
  99.         var  graphHeight = listCountMax > 10 ? listCountMax : 10;
  100.  
  101.         $('#comment-list').empty();
  102.         $('#comment-list').height(graphHeight);
  103.         var barColor;
  104.         var barBackground;
  105.         for (i = 0; i < barIndex-1; i++) {
  106.             barColor = barColors[Math.floor(listCounts[i] * barColorRatio)];
  107.             barBackground = `linear-gradient(to top, #${barColor}, #${barColor} ` +`${listCounts[i]}px, transparent ${listCounts[i]}px, transparent)`;
  108.             if (i > barIndex - 2) {
  109.                 barWidth *= lastBarWidthRatio;
  110.             }
  111.             $('<div>')
  112.                 .css('background-image', barBackground)
  113.                 .css('float','left')
  114.                 .height(graphHeight)
  115.                 .width(barWidth)
  116.                 .appendTo('#comment-list');
  117.         }
  118.  
  119.     }
  120. })();