ニコニコ動画(HTML5)でコメントの盛り上がりをグラフで表示(html5版)
目前為
// ==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');
}
}
})();