APIで頑張ってみようと思ったけどもWEB情報通りにやってもうまく反応しなかった。
開発環境の違い？というか実行環境が違うというのがあると思うけども
とりあえず簡単にできそうなコメントXMLの取得で作るという形で収まった。
ユーザーJSを利用しjQueryを読み込み、現在見ているニコニコ動画の動画ページにアイコンを追加し
アイコンをクリックすると最大1000件までの現在のコメントを取得するって流れ。
まだ途中までだけど、というか最後の描画部分の際に微妙に飽きてしまっただけ。
一応コンソールには表示されるまでは作ってる。
ソートも一応つけてみたが。
// ==UserScript==
// @name ニコニココメント取得
// @version 1
// @grant none
// @description ニコニコ動画の動画一覧におけるコメントの取得
// @match http://www.nicovideo.jp/watch/*
/* load jQuery */
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==
jQuery(document).ready(function () {
//https://www.webprofessional.jp/sort-an-array-of-objects-in-javascript/より
//ソート関数
function compareValues(key, order='ASC') {
return function(a, b) {
if(!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
// property doesn't exist on either object
return 0;
}
const varA = (typeof a[key] === 'string') ?
a[key].toUpperCase() : a[key];
const varB = (typeof b[key] === 'string') ?
b[key].toUpperCase() : b[key];
let comparison = 0;
if (varA > varB) {
comparison = 1;
} else if (varA < varB) {
comparison = -1;
}
return (
(order == 'DESC') ? (comparison * -1) : comparison;
);
};
}
//CSS'
var $obj_dialog ={
opacity: "0.9",
backgroundColor: "#ddd",
textAlign:"center",
width:350,
paddingTop:30,
paddingBottom:30,
position: "absolute",
top: 100,
right: 25,
zIndex: "900",
boxShadow:"1px 1px 3px #666",
}
var $dialog_button = {
marginRight:30,
paddingTop:10,
paddingBottom:10,
fontSize:16,
textAlign:"center",
width:100,
backgroundColor: "#fff",
cursor:"pointer",
}
var $order_button = {
display:"inline-block",
color:"#333",
marginRight:30,
paddingTop:10,
paddingBottom:10,
marginBottom:10,
borderRadius:3,
fontSize:16,
textAlign:"center",
width:100,
backgroundColor: "#eee",
border:"solid 1px #333",
cursor:"pointer",
}
var $on_button = {
color:"#eee",
backgroundColor: "#444",
opacity: "1",
cursor:"normal",
}
//xml用のURLの解析データの取得
$_main_data = $('div#js-initial-watch-data').data('api-data');
//xmlのURLの作成
var $messageServerUrl = $_main_data["thread"]["serverUrl"];
var $threadId = $_main_data["thread"]["ids"]["default"];
var $urlWithQuery = $messageServerUrl + "thread?thread=" + $threadId + "&version=20061206&res_from=-1000&scores=1";
//メインの配列の作成
var $_result_array = []; //配列の[]と{}の違いに注意
$("button.ActionButton.CalendarButton.is-inactive").before("<button class='ActionButton' id='get_coments_button' data-title='コメント取得準備'><svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.4' class='CalendarButton-icon'><path i:knockout='Off' fill-rule='evenodd' clip-rule='evenodd' fill='#D6D5D5' d='M0,0h46v46H0V0z'/><path i:knockout='Off' fill-rule='evenodd' clip-rule='evenodd' fill='#D6D5D5' d='M20,55v23h65V3H61v52H20z'/></svg></button>");
$(document).on("click", "#get_coments_button", function(){
//
$.ajax({
url:$urlWithQuery,
type:'GET',
dataType:'xml',
timeout:1000,
error:function() {
//
alert("データの取得ができませんでした。");
},
success:function(xml){
var $i = 0;
//配列の作成
$(xml).find("chat").each(function() {
//vposを再生時間の表記に変更
$coment_vpos = Math.floor($(this).attr("vpos")/100) //100で割ったものを切り捨て
$_vpos_m = Math.floor($coment_vpos/60) <= 9 ? "0"+ Math.floor($coment_vpos/60) : Math.floor($coment_vpos/60); //桁数が9以下であれば0を付ける。
$_vpos_s = $coment_vpos%60 <= 9 ? "0"+ $coment_vpos%60 : $_vpos_s = $coment_vpos%60; //桁数が9以下であれば0を付ける。
$vpos_time = $_vpos_m + ":" + $_vpos_s;
//自身で変更する場合は数値や文字列に注意。
$_result_array[$i] = {"no":Number($(this).attr("no")),"comment": $(this).text(),"date":$(this).attr("date"),"vpos_time":$vpos_time,"vpos": Number($(this).attr("vpos"))};
$i++;
});//配列の作成ここまで
$(".CommentPanelMenuContainer").before("<div id='copy_coments_dialog'><div class='btn key on' data-key='vpos'>再生時間</div><div class='btn key' data-key='no'>コメ番</div><div class='btn orderby on' data-orderby='ASC'>▲ 昇順</div><div class='btn orderby' data-orderby='DESC'>▼ 降順</div><hr><button id='copy_coments_button'>書き出し</button><button id='copy_cancel_button'>閉じる</button></div>");
//CSSの適用
$("#copy_coments_dialog").css($obj_dialog);
$("#copy_coments_button,#copy_cancel_button").css($dialog_button);
$("#copy_coments_dialog .btn").css($order_button);
$("#copy_coments_dialog .btn.on").css($on_button);
}
});
});
$(document).on("click", "#copy_coments_dialog .btn", function(){
if( $(this).hasClass("orderby")){
if(!$(this).hasClass("on")){ $("#copy_coments_dialog .btn.orderby").removeClass("on"); $(this).addClass("on"); }
}else{
if(!$(this).hasClass("on")){ $("#copy_coments_dialog .btn.key").removeClass("on"); $(this).addClass("on"); }
}
$("#copy_coments_dialog .btn").css($order_button);
$("#copy_coments_dialog .btn.on").css($on_button);
});
$(document).on("click", "#copy_cancel_button", function(){
console.log("Cancel");
$("#copy_coments_dialog").remove();
});
$(document).on("click", "#copy_coments_button", function(){
//console.log($urlWithQuery);
$_orderby = $("#copy_coments_dialog .orderby.on").data("orderby");
$_key = $("#copy_coments_dialog .key.on").data("key");
console.log($_key+"|"+$_orderby);
console.log( $_result_array.sort(compareValues($_key, $_orderby )) );
});
$(document).on("click", "#copy_dialog_close", function(){
console.log("Close");
$("#copy_coments_dialog").remove();
});
});
