ニコニコ動画のコメント取得。
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(); }); });