☰

AbemaTV Screen Comment Scroller

AbemaTV のコメントをニコニコ風にスクロールさせます。

当前为 2017-06-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        AbemaTV Screen Comment Scroller
  3. // @namespace   knoa.jp
  4. // @description AbemaTV のコメントをニコニコ風にスクロールさせます。
  5. // @description 上手く動かないときはチャンネル視聴中の画面でブラウザの更新ボタンを押してください。(改善予定)
  6. // @description たまに過去のコメントが再度流れるバグあり。
  7. // @include     https://abema.tv/now-on-air/*
  8. // @version     0.9
  9. // @grant       none
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.   /* カスタマイズ */
  14.   var SCRIPTNAME = 'ScreenCommentScroller';
  15.   var COLOR = '#ffffff';/*コメント色*/
  16.   var OCOLOR = '#000000';/*コメント縁取り色*/
  17.   var OWIDTH = 1/20;/*コメント縁取りの太さ(比率)*/
  18.   var OPACITY = ['.5', '.75', '.25'];/*コメント,一覧,一覧背景の不透明度*/
  19.   var MAXLINES = 10;/*コメント最大行数*/
  20.   var LINEHEIGHT = 1.2;/*コメント行高さ*/
  21.   var DURATION = 5;/*スクロール秒数*/
  22.   var FPS = 60;/*秒間コマ数*/
  23.   var AINTERVAL = 5;/*AbemaTVのコメント取得間隔の仕様値*/
  24.   var ADELAYS = {/*AbemaTVのコメント取得時の投稿時刻を(AINTERVAL)まで用意しておく*/
  25.     '今': 0,
  26.     '1秒前': 1,
  27.     '2秒前': 2,
  28.     '3秒前': 3,
  29.     '4秒前': 4,
  30.     '5秒前': 5,
  31.   };
  32.   /* サイト定義 */
  33.   var site = {
  34.     getScreen:   function(){return document.querySelector('main')},
  35.     getBoard:    function(){return document.querySelector('div[class^="styles__comment-list-wrapper___"]')},
  36.     getComments: function(node){return node.querySelectorAll('div[class^="styles__animation___"] p[class^="styles__message___"]')},
  37.     getPlay:     function(){return true},
  38.     isPlaying:   function(play){return true},
  39.   };
  40.   /* 処理本体 */
  41.   var screen, board, play, canvas, context, lines = [], fontsize;
  42.   var core = {
  43.     /* 初期化 */
  44.     initialize: function(){
  45.       console.log(SCRIPTNAME, 'initialize...');
  46.       /* 主要要素が取得できるまで読み込み待ち */
  47.       screen = site.getScreen();
  48.       board = site.getBoard();
  49.       play = site.getPlay();
  50.       if(!screen || !board || !play){
  51.         window.setTimeout(function(){
  52.           core.initialize();
  53.         }, 1000);
  54.         return;
  55.       }
  56.       /* コメントをスクロールさせるCanvasの設置 */
  57.       /* (描画処理の軽さは HTML5 Canvas, CSS Position Left, CSS Transition の順) */
  58.       canvas = document.createElement('canvas');
  59.       canvas.id = SCRIPTNAME;
  60.       screen.appendChild(canvas);
  61.       context = canvas.getContext('2d');
  62.       /* メイン処理 */
  63.       core.addStyle();
  64.       core.listenComments();
  65.       core.scrollComments();
  66.     },
  67.     /* *スクリーンサイズに変化があればcanvasも変化させる* */
  68.     modify: function(){
  69.       if(canvas.width == screen.offsetWidth) return;
  70.       //console.log(SCRIPTNAME, 'modify...');
  71.       canvas.width = screen.offsetWidth;
  72.       canvas.height = screen.offsetHeight;
  73.       fontsize = (canvas.height / MAXLINES) / LINEHEIGHT;
  74.       context.font = 'bold ' + (fontsize) + 'px sans-serif';
  75.       context.fillStyle = COLOR;
  76.       context.strokeStyle = OCOLOR;
  77.       context.lineWidth = fontsize * OWIDTH;
  78.     },
  79.     /* スタイル付与 */
  80.     addStyle: function(){
  81.       //console.log(SCRIPTNAME, 'addStyle...');
  82.       let head = document.getElementsByTagName('head')[0];
  83.       if (!head) return;
  84.       let style = document.createElement('style');
  85.       style.type = 'text/css';
  86.       style.innerHTML = ''+
  87.         'canvas#'+SCRIPTNAME+'{' +
  88.         ' pointer-events: none;' +
  89.         ' position: absolute;' +
  90.         ' top: 0;' +
  91.         ' left: 0;' +
  92.         ' width: 100%;' +
  93.         ' height: 100%;' +
  94.         ' opacity: '+OPACITY[0]+';' +
  95.         '}'+
  96.         'div[class^="styles__tv-container___"]{' +
  97.         ' width: 100% !important;' +
  98.         ' height: 100% !important;' +
  99.         '}'+
  100.         'div[class^="styles__tv-container___"] > div{' +
  101.         ' width: 100% !important;' +
  102.         ' height: 100% !important;' +
  103.         '}'+
  104.         'div[class^="styles__right-comment-area___"]{' +
  105.         ' background: rgba(0,0,0,'+OPACITY[2]+');' +
  106.         '}'+
  107.         'div[class^="styles__right-comment-area___"] *{' +
  108.         ' background: transparent;' +
  109.         ' color: rgba(255,255,255,'+OPACITY[1]+');' +
  110.         '}'+
  111.         '';
  112.       head.appendChild(style);
  113.     },
  114.     /* コメントの新規追加を見守る */
  115.     listenComments: function(){
  116.       //console.log(SCRIPTNAME, 'listenComments...');
  117.       board.addEventListener('DOMNodeInserted', function(e){
  118.         let comments = site.getComments(e.target);
  119.         if(!comments || !comments.length) return;
  120.         core.modify();
  121.         /*同時に複数のコメントを取得したら、投稿経過時間に合わせた時間差を付けることで自然に流す*/
  122.         let earliest = ADELAYS[comments[comments.length - 1].nextElementSibling.textContent] || AINTERVAL;/*同時取得の中で最初に投稿されたコメントの経過時間*/
  123.         for(let i=0; comments[i]; i++){
  124.           let current = ADELAYS[comments[i].nextElementSibling.textContent] || AINTERVAL;
  125.           window.setTimeout(function(){
  126.             core.attachComment(comments[i]);
  127.           }, 1000 * (earliest  - current));
  128.         }
  129.       });
  130.     },
  131.     /* コメントが追加されるたびにスクロールキューに追加 */
  132.     attachComment: function(comment){
  133.       //console.log(SCRIPTNAME, 'attachComment...');
  134.       let record = {};
  135.       record.text = comment.textContent;/*流れる文字列*/
  136.       record.width = context.measureText(record.text).width;/*文字列の幅*/
  137.       record.life = DURATION * FPS;/*文字列が消えるまでのコマ数*/
  138.       record.left = canvas.width;/*左端からの距離*/
  139.       record.delta = (canvas.width + record.width) / (record.life);/*コマあたり移動距離*/
  140.       record.reveal = record.width / record.delta;/*文字列が右端から抜けてあらわになるまでのコマ数*/
  141.       record.touch = canvas.width / record.delta;/*文字列が左端に触れるまでのコマ数*/
  142.       /* 追加されたコメントをどの行に流すかを決定する */
  143.       for(let i=0; i<MAXLINES; i++){
  144.         let length = lines[i] ? lines[i].length : 0;/*同じ行に詰め込まれているコメント数*/
  145.         switch(true){
  146.           /* 行が空いていれば追加 */
  147.           case(lines[i] == undefined || !length):
  148.             lines[i] = [];
  149.           /* 以前のコメントより長い(速い)文字列なら、左端に到達する時間で判断する */
  150.           case(lines[i][length - 1].reveal < 0 && lines[i][length - 1].delta > record.delta):
  151.           /* 以前のコメントより短い(遅い)文字列なら、右端から姿を見せる時間で判断する */
  152.           case(lines[i][length - 1].life < record.touch && lines[i][length - 1].delta < record.delta):
  153.             /*条件に当てはまればすべてswitch文のあとの処理で行に追加*/
  154.             break;
  155.           default:
  156.             /*条件に当てはまらなければ次の行に入れられるかの判定へ*/
  157.             continue;
  158.         }
  159.         record.top = ((canvas.height / MAXLINES) * i) + fontsize;
  160.         lines[i].push(record);
  161.         break;
  162.       }
  163.     },
  164.     /* FPSタイマー駆動 */
  165.     scrollComments: function(){
  166.       //console.log(SCRIPTNAME, 'scrollComment...');
  167.       var interval = window.setInterval(function(){
  168.         /* 再生中じゃなければ処理しない */
  169.         if(!site.isPlaying(play)) return;
  170.         /* Canvas描画 */
  171.         context.clearRect(0, 0, canvas.width, canvas.height);
  172.         for(let i=0; lines[i]; i++){
  173.           for(let j=0; lines[i][j]; j++){
  174.             /*視認性を向上させるスクロール文字の縁取りは、幸いにもパフォーマンスにほぼ影響しない*/
  175.             context.strokeText(lines[i][j].text, lines[i][j].left, lines[i][j].top);
  176.             context.fillText(lines[i][j].text, lines[i][j].left, lines[i][j].top);
  177.             lines[i][j].life--;
  178.             lines[i][j].reveal--;
  179.             lines[i][j].touch--;
  180.             lines[i][j].left -= lines[i][j].delta;
  181.           }
  182.           if(lines[i][0] && lines[i][0].life == 0){
  183.             lines[i].shift();
  184.           }
  185.         }
  186.       }, 1000/FPS);
  187.     },
  188.   };
  189.   core.initialize();
  190. })();