☰

AbemaTV Screen Comment Scroller

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

目前为 2018-12-19 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        AbemaTV Screen Comment Scroller
  3. // @namespace   knoa.jp
  4. // @description AbemaTV のコメントをニコニコ風にスクロールさせます。
  5. // @include     https://abema.tv/*
  6. // @version     2.10.9
  7. // @grant       none
  8. // ==/UserScript==
  9.  
  10. // console.log('AbemaTV? => hireMe()');
  11. (function(){
  12.   const SCRIPTNAME = 'ScreenCommentScroller';
  13.   const DEBUG = false;/*
  14.   [update] 2.10.9
  15.   軽微な修正。
  16.   (一覧フォントサイズ大きく, programButton, Math, button:hover, 公式ブロック, panel)
  17.   
  18.   [bug]
  19.   Mac+Chromeのみtransform時にmaskがなくなる?
  20.  
  21.   [to do]
  22.   UI改善の余地
  23.     ブロックやNGでのスクロール位置
  24.     新着コメント表示ボタン
  25.   タイムシフトでのコメント対応(プレミアム限定？)
  26.   連携ないし投稿ボタン押したら再度コメ欄にフォーカス当ててあげたい
  27.   新着ボタン押したときにスクロールが勢い余ってしまっているかも
  28.  
  29.   [to research]
  30.   Windowsで画面最下部マウスで耐えられないので、最下部に1pxマウス休めエリアを作る？
  31.     たぶん最上部でOK、だけどポインタ合わせにくいか
  32.     ホバー中でもn秒経過で閉じるようにする？
  33.   最小フォントサイズ可変対応
  34.   Safari/Edge対応・・・？
  35.   通知ボタンが居残り続けるバグはアベマのせいなのかどうかそもそもいつ発生するのか
  36.  
  37.   [possible]
  38.   4:3の時にずらせる?
  39.   greasemonkey 4 系対応
  40.   ユーザーブロックアイコン(秒数と差し替わる)のアニメーション
  41.   ピクチャインピクチャはアベマが公式にやるべきだろうけど、やらないままブラウザが任意要素に対応したら実装しようか
  42.  
  43.   [requests]
  44.   設定のナビゲーションに「マウスを近づけたら表示する」
  45.   設定のスクロールコメントに「画面下部の専用領域に流す」「高さ(%)」
  46.   設定の一覧コメントに「コメントをひとつずつ表示する」
  47.   一覧コメントの横幅「%」以外も指定可能に
  48.  
  49.   [not to do]
  50.   */
  51.   if(window === top && console.time) console.time(SCRIPTNAME);
  52.   const CONFIGS = {
  53.     /* スクロールコメント */
  54.     maxlines:        {TYPE: 'int',    DEFAULT: 10  },/*最大行数(文字サイズ連動)*/
  55.     linemargin:      {TYPE: 'float',  DEFAULT: 0.20},/*行間(比率)*/
  56.     transparency:    {TYPE: 'float',  DEFAULT: 75.0},/*透明度(%)*/
  57.     owidth:          {TYPE: 'float',  DEFAULT: 0.10},/*縁取りの太さ(比率)*/
  58.     duration:        {TYPE: 'float',  DEFAULT: 5.00},/*横断にかける秒数*/
  59.     maxcomments:     {TYPE: 'int',    DEFAULT: 100 },/*最大同時表示数*/
  60.     font:            {TYPE: 'string', DEFAULT: ''  },/*フォント指定*/
  61.     /* 一覧コメント */
  62.     l_fix:           {TYPE: 'bool',   DEFAULT: 1   },/*常に画面内に表示する*/
  63.     l_overlay:       {TYPE: 'bool',   DEFAULT: 1   },/*映像に重ねる*/
  64.     l_showtime:      {TYPE: 'bool',   DEFAULT: 1   },/*投稿時刻を表示する*/
  65.     l_width:         {TYPE: 'float',  DEFAULT: 16.5},/*横幅(%)*/
  66.     lc_maxlines:     {TYPE: 'int',    DEFAULT: 30  },/*最大行数(文字サイズ連動)*/
  67.     lc_linemargin:   {TYPE: 'float',  DEFAULT: 0.50},/*改行されたコメントの行間(比率)*/
  68.     lc_margin:       {TYPE: 'float',  DEFAULT: 1.50},/*コメント同士の間隔(比率)*/
  69.     lc_transparency: {TYPE: 'float',  DEFAULT: 25.0},/*文字の透明度(%)*/
  70.     lb_transparency: {TYPE: 'float',  DEFAULT: 75.0},/*背景の透明度(%)*/
  71.     /* アベマのナビゲーション */
  72.     n_clickonly:     {TYPE: 'bool',   DEFAULT: 1   },/*画面クリック時のみ表示する*/
  73.     n_delay:         {TYPE: 'float',  DEFAULT: 4.00},/*隠れるまでの時間(秒)*/
  74.     n_transparency:  {TYPE: 'float',  DEFAULT: 50.0},/*透明度(%)*/
  75.   };
  76.   const AINTERVAL = 7000;/*AbemaTVのコメント取得間隔の基本値(ms)*/
  77.   const STATSUPDATE = 1000*60;/*視聴数とコメント数を更新する間隔(ms)*/
  78.   const FONT = 'Arial, sans-serif';/*スクロールフォント*/
  79.   const BASELINE = 85/100;/*フォントのbaseline比率*/
  80.   const MARGIN = 2/10;/*通常のフォントサイズを飛び出す xgÅ(永◆∬∫√￣ などの文字を確実に収めるための余裕(比率)*/
  81.   /* サイト定義 */
  82.   let retry = 10;/*必要な要素が見つからずあきらめるまでの試行回数*/
  83.   let site = {
  84.     targets: [
  85.       /* 構造 */
  86.       function header(){let header = $('body > div > div > header'); return (header) ? site.use(header) : false;},
  87.       function footer(){let fullscreen = $('button[aria-label^="フルスクリーン"]'); return (fullscreen) ? site.use(fullscreen.parentNode.parentNode) : false;},
  88.       function board(){let board = $('[class*="OnReachTop"]'); return (board) ? site.use(board) : false;},
  89.       function screen(){let loading = $('img[src="/images/misc/feed_loading.gif"]'); return (loading) ? site.use(loading.parentNode.parentNode.parentNode.parentNode) : false;},
  90.       /* ペイン */
  91.       function commentPane(){let form = $('form:not([role="search"])'); return (form) ? site.use(form.parentNode.parentNode) : false;},
  92.       function channelPane(){let container = $('[class*="-tv-VChannelList__container"]'); return (container) ? site.use(container.parentNode) : false;},
  93.       function programPane(){let container = $('[class*="-tv-VChannelList__container"]'); return (container) ? site.use(container.parentNode.nextElementSibling) : false;},
  94.       /* ボタン */
  95.       function channelButtons(){let button = $('button[aria-label="放送中の裏番組"]'); return (button) ? site.use(button.parentNode.parentNode) : false;},
  96.       function channelButton(){let button = $('button[aria-label="放送中の裏番組"]'); return (button) ? site.use(button) : false;},
  97.       function commentButton(){let svg = $('use[*|href^="/images/icons/comment.svg"]'); return (svg) ? site.use(svg.parentNode.parentNode) : false;},
  98.       function programButton(){let fullscreen = $('button[aria-label^="フルスクリーン"]'); return (fullscreen) ? site.use(fullscreen.parentNode.lastElementChild.firstElementChild.firstElementChild) : false;},
  99.       function fullscreenButton(){let fullscreen = $('button[aria-label^="フルスクリーン"]'); return (fullscreen) ? site.use(fullscreen) : false;},
  100.       function VolumeController(){let mute = $('button[aria-label^="音声"]'); return (mute) ? site.use(mute.parentNode.parentNode) : false;},
  101.       /* 要素 */
  102.       function enquete(){let container = $('[class*="-tv-VChannelList__container"]'); return (container) ? site.use(container.parentNode.nextElementSibling.nextElementSibling) : false;},
  103.       function caution(){let header = $('header'); return (header) ? site.use(header.nextElementSibling) : false;},
  104.       function commentForm(){let form = $('form:not([role="search"])'); return (form) ? site.use(form) : false;},
  105.       function viewCounter(){let viewCounter = $('[class*="tv-ViewCounter__"]'); return (viewCounter) ? site.use(viewCounter) : false;},
  106.       function loading(){let loading = $('img[src="/images/misc/feed_loading.gif"]'); return (loading) ? site.use(loading.parentNode) : false;},
  107.       function programName(){let name = $('[data-selector="programButton"] > div > div > div + div > p > span > span:last-child'); return (name) ? site.use(name) : false;},
  108.     ],
  109.     addedNode: {
  110.       newCommentsButton: function(node){let button = node.parentNode.querySelector('[data-selector="commentPane"] > div > button'); return (button) ? site.use(node, 'newCommentsButton') : false;},
  111.       comment: function(node){let time = node.querySelector('time'); return (time) ? site.use(node, 'comment') : false;},
  112.     },
  113.     get: {
  114.       commentText: function(comment){return comment.firstElementChild.firstElementChild.textContent;},
  115.       commentTime: function(comment){return comment.querySelector('time').dateTime;},
  116.       commentBlock: function(comment){return comment.querySelector('button[title="ブロック"]');},
  117.       commentBlockCancel: function(comment){return comment.nextElementSibling.querySelector('form button');},
  118.       view: function(viewCounter){return viewCounter.querySelector('[data-selector="viewCounter"] > span');},
  119.       comment: function(commentButton){return commentButton.querySelector('[data-selector="commentButton"] > span');},
  120.       closer: function(){
  121.         /* チャンネル切り替えごとに差し替わるのでつど取得 */
  122.         let button = $('[data-selector="screen"] > div > div > button');
  123.         return button;
  124.       },
  125.       statsApi: function(){
  126.         /* アベマの仕様に依存しまくり */
  127.         if(!window.dataLayer) return;
  128.         const API = 'https://api.abema.io/v1/broadcast/slots/{id}/stats';
  129.         for(let i = window.dataLayer.length - 1; window.dataLayer[i]; i--){
  130.           if(window.dataLayer[i].slotId) return API.replace('{id}', window.dataLayer[i].slotId);
  131.         }
  132.       },
  133.     },
  134.     cmNow: function(){
  135.       return (elements.programName && elements.programName.textContent === '');
  136.     },
  137.     use: function use(target = null, key = use.caller.name){
  138.       if(target) target.dataset.selector = key;
  139.       elements[key] = target;
  140.       return target;
  141.     },
  142.   };
  143.   /* 処理本体 */
  144.   let html, elements = {}, ngwords = [], configs = {};
  145.   let canvas, context, lines = [];/*アニメーション関連は極力浅いオブジェクトに*/
  146.   let core = {
  147.     initialize: function(){
  148.       html = document.documentElement;
  149.       core.config.read();
  150.       core.ng.initialize();
  151.       core.listenUserActions();
  152.       core.checkUrl();
  153.     },
  154.     checkUrl: function(){
  155.       let previousUrl = '';
  156.       setInterval(function(){
  157.         if(location.href === previousUrl) return;/*URLが変わってない*/
  158.         if(location.href.startsWith('https://abema.tv/now-on-air/')){/*テレビ視聴ページ*/
  159.           if(previousUrl.startsWith('https://abema.tv/now-on-air/')){/*チャンネルを変えただけ*/
  160.             html.classList.remove('comment');
  161.             html.classList.remove('ng');
  162.             elements.closer = site.get.closer();
  163.           }else{/*テレビ視聴ページになった*/
  164.             core.ready();
  165.           }
  166.         }else{/*テレビ視聴ページではない*/
  167.           core.gone();
  168.         }
  169.         previousUrl = location.href;
  170.       }, 1000);
  171.     },
  172.     ready: function(){
  173.       /* 必要な要素が出揃うまで粘る */
  174.       for(let i = 0, target; target = site.targets[i]; i++){
  175.         if(target() === false){
  176.           if(!retry) return log(`Not found: ${target.name}, I give up.`);
  177.           log(`Not found: ${target.name}, retrying...`);
  178.           return retry-- && setTimeout(core.ready, 1000);
  179.         }
  180.       }
  181.       elements.closer = site.get.closer();
  182.       log("I'm Ready.");
  183.       /* すべての要素が出揃っていたので */
  184.       core.setupFullscreenButton();
  185.       core.createCanvas();
  186.       core.listenComments();
  187.       core.ng.createButton();
  188.       core.config.createButton();
  189.       core.panel.createPanels();
  190.       core.addStyle();
  191.       html.classList.add(SCRIPTNAME);
  192.       core.observeCommentButton();
  193.     },
  194.     gone: function(){
  195.       if(elements.style && elements.style.isConnected) document.head.removeChild(elements.style);
  196.       html.classList.remove(SCRIPTNAME);
  197.       html.classList.remove('comment');
  198.     },
  199.     setupFullscreenButton: function(){
  200.       let full_screen = elements.fullscreenButton.querySelector('use');
  201.       let mini_screen = createElement(core.html.mini_screen());
  202.       full_screen.parentNode.appendChild(mini_screen);
  203.       full_screen.parentNode.outerHTML = full_screen.parentNode.outerHTML;/*svgバグ回避*/
  204.       elements.fullscreenButton.dataset.icon = 'full_screen';
  205.     },
  206.     observeCommentButton: function(){
  207.       /* コメントを開けるようになったら自動で開く */
  208.       let url = null;
  209.       let observer = observe(elements.commentButton, function(records){
  210.         if(elements.commentPane.attributes['aria-hidden'].value === 'false') return;/*既に表示中*/
  211.         if(getComputedStyle(elements.commentButton).cursor !== 'pointer') return;/*まだクリックできない*/
  212.         if(url !== location.href){/*チャンネル切り替え後の初回*/
  213.           elements.commentButton.click();
  214.           url = location.href;
  215.         }else if(html.classList.contains('comment')){/*コメントを開いた状態で番組開始を迎えたとき*/
  216.           core.closeOpenCommentPane();
  217.         }
  218.       }, {attributes: true});
  219.     },
  220.     closeOpenCommentPane: function(){
  221.       /* コメントが閉じられたと認識されたら即開き直す準備 */
  222.       let observer = observe(elements.commentPane, function(records){
  223.         if(elements.commentPane.attributes['aria-hidden'].value === 'false') return;
  224.         observer.disconnect();/*一度だけ*/
  225.         elements.commentButton.click();
  226.         elements.commentPane.classList.remove('keep');
  227.         canvas.classList.remove('keep');
  228.       }, {attributes: true});
  229.       /* ユーザーには閉じたように見せない */
  230.       canvas.classList.add('keep');
  231.       elements.commentPane.classList.add('keep');
  232.       elements.closer.click();
  233.     },
  234.     updateStats: function(){
  235.       /* mはアベマの仕様に合わせて小文字。しかし小数第1位は0も表示する。 */
  236.       let formatNumber = function(number){
  237.         switch(true){
  238.           case(number < 1e3): return (number);
  239.           case(number < 1e6): return (number/1e3).toFixed(1) + 'k';
  240.           default:            return (number/1e6).toFixed(1) + 'm';
  241.         }
  242.       };
  243.       let api = site.get.statsApi();
  244.       if(!api) return log('Failed: site.get.statsApi.');
  245.       let xhr = new XMLHttpRequest();
  246.       xhr.open('GET', api);
  247.       xhr.responseType = 'json';
  248.       xhr.onreadystatechange = function(){
  249.         if(xhr.readyState !== 4 || xhr.status !== 200) return;
  250.         if(!xhr.response.stats || !xhr.response.stats.view || !xhr.response.stats.comment) return log(`Not found: stats`);
  251.         //log('xhr.response:', xhr.response);
  252.         site.get.view(elements.viewCounter).textContent         = formatNumber(xhr.response.stats.view);
  253.         site.get.comment(elements.commentButton).textContent = formatNumber(xhr.response.stats.comment);
  254.       };
  255.       xhr.send();
  256.     },
  257.     listenUserActions: function(){
  258.       let id, timer = function(e){
  259.         clearTimeout(id), id = setTimeout(function(){
  260.           if(['input', 'textarea'].includes(document.activeElement.loaclName)) return;/*入力中はアクティブのまま*/
  261.           html.classList.remove('active');
  262.           if(!configs.l_overlay && !configs.l_fix) core.modify();
  263.         }, configs.n_delay * 1000);
  264.       };
  265.       window.addEventListener('keydown', function(e){
  266.         switch(e.key){
  267.           /*テキスト入力中の上下キーによるチャンネル移動を防ぐ*/
  268.           case('ArrowUp'):
  269.           case('ArrowDown'):
  270.             if(['input', 'textarea'].includes(e.target.localName)){
  271.               e.stopPropagation();
  272.             }
  273.             break;
  274.         }
  275.       }, true);
  276.       window.addEventListener('mousemove', function(e){
  277.         if(configs.n_clickonly) return;
  278.         if(!html.classList.contains('active')){
  279.           html.classList.add('active');
  280.           if(!configs.l_overlay && !configs.l_fix) animate(core.modify);
  281.         }
  282.         timer();
  283.       });
  284.       window.addEventListener('click', function(e){/*アベマより先にwindowでキャプチャ*/
  285.         switch(e.target){
  286.           case(elements.channelButton):
  287.             return html.classList.toggle('channel');
  288.           case(elements.programButton):
  289.             return html.classList.toggle('program');
  290.           case(elements.commentButton):
  291.             if(html.classList.contains('comment')){
  292.               animate(function(){elements.closer.click()});/*すぐクリックすると競合してしまうのでanimate()*/
  293.             }else{
  294.               html.classList.add('comment');
  295.               if(!configs.l_overlay) core.modify();
  296.               /* デフォルトのボタン動作が実行される */
  297.             }
  298.             return;
  299.           case(elements.newCommentsButton):
  300.             if(e.isTrusted){/*実クリックのみで処理*/
  301.               elements.newCommentsButton.style.height = '0';
  302.               /* スクロールをなめらかにする */
  303.               let scrollTop = elements.board.parentNode.scrollTop;
  304.               if(scrollTop){
  305.                 elements.board.style.transition = '500ms ease';
  306.                 elements.board.style.transform = `translateY(${scrollTop}px)`;
  307.                 elements.board.addEventListener('transitionend', function(e){
  308.                   elements.board.style.transition = 'none';
  309.                   elements.board.style.transform = 'translateY(0)';
  310.                   elements.newCommentsButton.click();
  311.                 }, {once: true});
  312.               }else{
  313.                 elements.newCommentsButton.click();
  314.               }
  315.               e.stopPropagation();
  316.             }else{
  317.               /* デフォルトのボタン動作が実行される */
  318.             }
  319.             return;
  320.           case(elements.fullscreenButton):
  321.             if(!document.fullscreen){
  322.               document.body.requestFullscreen();
  323.             }else{
  324.               document.exitFullscreen();
  325.             }
  326.             e.stopPropagation();
  327.             return;
  328.           case(elements.closer):
  329.             if(html.classList.contains('comment')) core.ng.closeForm();/*NGフォームを開いているなら閉じる*/
  330.             if(elements.commentPane.classList.contains('keep')) return html.classList.remove('comment');/*core.closeOpenCommentPaneですぐまた開かれる*/
  331.             switch(true){
  332.               case(html.classList.contains('channel')):
  333.                 html.classList.remove('channel');
  334.                 return e.stopPropagation();
  335.               case(html.classList.contains('program')):
  336.                 html.classList.remove('program');
  337.                 return e.stopPropagation();
  338.               default:
  339.                 if(e.isTrusted){/*実クリックではコメントは閉じない*/
  340.                   e.stopPropagation();
  341.                   if(elements.commentPane.classList.contains('active')) return;/*コメントフォームからフォーカスを外すだけ*/
  342.                   html.classList.add('click');/*250msのtransition遅延をなくしてからキビキビactivate*/
  343.                   animate(function(){
  344.                     html.classList.toggle('active');
  345.                     elements.header.addEventListener('transitionend', function(e){
  346.                       html.classList.remove('click');
  347.                     }, {once: true});
  348.                     if(!configs.l_overlay) core.modify();
  349.                   });
  350.                   timer();
  351.                 }else{/*elements.closer.click()でのみ閉じる*/
  352.                   html.classList.remove('comment');
  353.                   if(!configs.l_overlay) core.modify();
  354.                   /* default and propagateする */
  355.                 }
  356.                 return;
  357.             }
  358.           default:
  359.             return;/*デフォルトの動作に任せる*/
  360.         }
  361.       }, true);
  362.       /* アベマ公式ブロックを「コメントクリックでトグル」に差し替える */
  363.       window.addEventListener('click', function(e){
  364.         if(!e.isTrusted) return;
  365.         let comment;
  366.         /* コメントのクリックを判定する */
  367.         for(let target = e.target; target; target = target.parentNode){
  368.           switch(true){
  369.             case(target === elements.board):
  370.             case(target === document.body):
  371.               return;
  372.             /* コメント */
  373.             case(target.dataset.selector === 'comment'):
  374.               comment = target;
  375.               break;
  376.             /* アベマ公式ブロックフォーム */
  377.             case(target.name && target.name.startsWith('comment-report-form')):
  378.               comment = target.previousElementSibling;
  379.               break;
  380.           }
  381.           if(comment) break;
  382.         }
  383.         if(!comment) return;
  384.         /* コメントをクリックしたようなので */
  385.         let cancel = site.get.commentBlockCancel(comment);
  386.         if(!cancel){/*ブロックフォームはまだ開かれていない*/
  387.           /* ブロックフォームを開く */
  388.           site.get.commentBlock(comment).click();
  389.           comment.style.transition = 'background 500ms ease';
  390.           comment.classList.add('blockform');
  391.           /* フォーム用のクラスは常にひとつだけ */
  392.           let last = comment.parentNode.lastBlockForm;
  393.           if(last && last.isConnected) last.classList.remove('blockform');
  394.           comment.parentNode.lastBlockForm = comment;
  395.           let observer = observe(comment, function(records){
  396.             if(site.get.commentBlockCancel(comment)) return;
  397.             comment.classList.remove('blockform');
  398.             observer.disconnect();
  399.           });
  400.         }else{/*ブロックフォームはすでに開かれている*/
  401.           /* ブロックフォームを閉じる */
  402.           comment.classList.remove('blockform');
  403.           comment.addEventListener('transitionend', function(e){
  404.             comment.style.transition = 'none';
  405.             cancel.click();
  406.           }, {once: true});
  407.         }
  408.       }, true);
  409.       /* 番組開始のタイミングを挟んだバックグラウンドからの復帰でコメント取得が停止する現象を防ぐ */
  410.       document.addEventListener('visibilitychange', function(e){
  411.         if(document.hidden) return;
  412.         if(site.cmNow()) return;/*CM中はクリックしない*/
  413.         if(html.classList.contains('comment')){
  414.           core.closeOpenCommentPane();
  415.         }
  416.       });
  417.       /* フルスクリーン */
  418.       document.addEventListener('fullscreenchange', function(e){
  419.         if(!document.fullscreen){
  420.           document.fullscreen = true;/*ブラウザサポート待ち*/
  421.           elements.fullscreenButton.dataset.icon = 'mini_screen';
  422.         }else{
  423.           document.fullscreen = false;/*ブラウザサポート待ち*/
  424.           elements.fullscreenButton.dataset.icon = 'full_screen';
  425.         }
  426.         core.modify();
  427.         setTimeout(core.modify, 2500);/*ダメ押し*/
  428.       });
  429.       /* ウィンドウリサイズ */
  430.       let resizing;
  431.       window.addEventListener('resize', function(e){
  432.         if(!resizing) core.modify();/*初動*/
  433.         clearTimeout(resizing), resizing = setTimeout(function(){
  434.           core.modify();
  435.           resizing = null;
  436.         }, 500);
  437.       });
  438.       /* コメント入力中にcssで表示を制御する */
  439.       window.addEventListener('focusin', function(e){
  440.         if(e.target.form && e.target.form.dataset.selector === 'commentForm') elements.commentPane.classList.add('active');
  441.       });
  442.       window.addEventListener('focusout', function(e){
  443.         if(e.target.form && e.target.form.dataset.selector === 'commentForm') setTimeout(function(){
  444.           elements.commentPane.classList.remove('active')
  445.         }, 250);/*clickイベントより先にactiveが外れてしまうのを防ぐ*/
  446.       });
  447.     },
  448.     createCanvas: function(){
  449.       if(canvas && canvas.isConnected) elements.screen.removeChild(canvas);
  450.       /* コメントcanvasたちを格納する親 */
  451.       canvas = createElement(core.html.canvasDiv());
  452.       /* テキストサイズ計測に使用 */
  453.       elements.preCanvas = createElement(core.html.preCanvas());
  454.       context = elements.preCanvas.getContext('2d', {alpha: false});
  455.       elements.screen.insertBefore(canvas, elements.screen.firstElementChild);
  456.       core.modify();
  457.     },
  458.     modify: function(){
  459.       if(!elements.screen || !canvas) return;
  460.       /* 新着コメント受信状態を保つ */
  461.       let newCommentsButton = elements.newCommentsButton, board = elements.board;
  462.       if(!newCommentsButton || !newCommentsButton.isConnected) board.scrollTop = (board.scrollHeight - board.clientHeight);
  463.       /* スクリーンサイズを適切に変化させる */
  464.       let beFullsize = [
  465.         (configs.l_overlay === 1),
  466.         !html.classList.contains('comment'),
  467.         (!configs.l_fix && html.classList.contains('comment') && !html.classList.contains('active')),
  468.       ].includes(true);
  469.       let fonts = (configs.font === '') ? FONT : `${configs.font}, ${FONT}`;
  470.       let width = (beFullsize) ? window.innerWidth : Math.round(window.innerWidth * (1 - configs.l_width / 100));
  471.       let height = atMost(width * (9/16), window.innerHeight);
  472.       elements.screen.style.width = canvas.style.width = width + 'px';
  473.       elements.screen.style.height = canvas.style.height = height + 'px';
  474.       canvas.width = width;
  475.       canvas.height = height;
  476.       canvas.fontsize = Math.round((canvas.height / (configs.maxlines || 1)) / (1 + configs.linemargin));
  477.       context.font = `bold ${canvas.fontsize}px ${fonts}`;
  478.       context.textBaseline = 'alphabetic';
  479.       context.fillStyle = 'white';
  480.       context.ngFillStyle = 'rgb(255,224,32)';/*独自指定*/
  481.       context.strokeStyle = 'black';
  482.       context.lineWidth = Math.round(canvas.fontsize * configs.owidth);
  483.       context.lineJoin = 'round';
  484.       canvas.topDelta = ((canvas.fontsize * configs.linemargin) - context.lineWidth - (canvas.fontsize * MARGIN)) / 2;/*canvasのtop計算に使用する*/
  485.     },
  486.     listenComments: function(){
  487.       if(elements.commentPane.isListening) return;
  488.       elements.commentPane.isListening = true;
  489.       /* 新着ボタン出現時の強制スクロールからいつでも復旧できるように準備 */
  490.       let scrolling, throttle = 100;
  491.       elements.board.addEventListener('scroll', function(e){
  492.         if(scrolling) return;
  493.         scrolling = true;
  494.         setTimeout(function(){
  495.           elements.board.dataset.scrollTop = elements.board.scrollTop;
  496.           scrolling = false;
  497.         }, throttle);
  498.       }, {passive: true})
  499.       observe(elements.commentPane.firstElementChild, function(records){
  500.         /* 新着コメント表示ボタン */
  501.         if(records[0].addedNodes.length === 1 && site.addedNode.newCommentsButton(records[0].addedNodes[0]) !== false){
  502.           let newCommentsButton = records[0].addedNodes[0];
  503.           elements.board.scrollTop = elements.board.dataset.scrollTop;/*新着ボタン出現時の強制スクロールから復旧*/
  504.           if(elements.board.classList.contains('mousedown')){/*テキスト選択を邪魔しないための配慮*/
  505.             window.addEventListener('mouseup', function(){
  506.               newCommentsButton.classList.add('shown');
  507.             }, {once: true});
  508.           }else{
  509.             newCommentsButton.classList.add('shown');
  510.           }
  511.         }
  512.       });
  513.       observe(elements.board.firstElementChild, function(records){
  514.         let newComments = [];
  515.         for(let i = 0, record; record = records[i]; i++){
  516.           /* 新着コメント */
  517.           if(record.addedNodes.length === 1 && site.addedNode.comment(record.addedNodes[0]) !== false){
  518.             newComments.push(record.addedNodes[0]);/*古い順に格納される*/
  519.           }
  520.         }
  521.         if(newComments.length) core.receiveNewComments(newComments);
  522.       });
  523.     },
  524.     receiveNewComments: function(newComments){
  525.       /* コメント表示中に停止してしまう視聴数とコメント数をこのタイミングで更新する */
  526.       if(!elements.commentButton.statsUpdated && !site.cmNow()/*CM中は更新しない*/){
  527.         elements.commentButton.statsUpdated = true;
  528.         core.updateStats();
  529.         setTimeout(function(){elements.commentButton.statsUpdated = false}, STATSUPDATE);
  530.       }
  531.       /* NGコメントをすぐ判定する */
  532.       core.ng.expire();
  533.       let filteredComments = newComments.filter(core.ng.filter);
  534.       /* コメントの再取得で重複コメントが流れるのを回避する(NG判定をすませた後で) */
  535.       let latest = parseInt(elements.board.dataset.latest);
  536.       if(latest) filteredComments = filteredComments.filter(function(comment){
  537.         return latest < parseInt(site.get.commentTime(comment));
  538.       });
  539.       latest = elements.board.dataset.latest = parseInt(site.get.commentTime(newComments[newComments.length - 1]));
  540.       /* バックグラウンドならここで終了 */
  541.       if(document.hidden) return;
  542.       /* スライドアップアニメーションを上書きする */
  543.       core.slideUpNewComments(filteredComments);
  544.       /* コメントを流す必要がなければここで終了 */
  545.       if(configs.maxlines === 0) return;
  546.       if(configs.transparency === 100) return;
  547.       if(configs.maxcomments === 0) return;
  548.       if(configs.maxcomments <= canvas.children.length) return;
  549.       /* 配列先頭の古いコメントから順に流す */
  550.       let earliest = atLeast(latest - AINTERVAL, parseInt(site.get.commentTime(filteredComments[0])));
  551.       for(let i = 0, comment; comment = filteredComments[i]; i++){
  552.         setTimeout(function(){
  553.           core.attachComment(site.get.commentText(comment), comment.dataset.ngTrial === 'true');
  554.         }, parseInt(site.get.commentTime(comment)) - earliest);
  555.       }
  556.     },
  557.     slideUpNewComments: function(newComments){
  558.       const DURATION = '500ms', EASING = 'ease', HIGHLIGHT = 5000;
  559.       let board = elements.board, parent = newComments[0].parentNode, height = 0;
  560.       let scrollHeight = board.scrollHeight, clientHeight = board.clientHeight;
  561.       for(let i = 0, comment; comment = newComments[i]; i++){
  562.         height += parseFloat(getComputedStyle(comment).height);
  563.         comment.dataset.new = 'true';
  564.       }
  565.       board.scrollTop = (scrollHeight - clientHeight) - 1;
  566.       parent.style.transform = `translateY(${height - 1}px)`;
  567.       animate(function(){
  568.         parent.style.transition = `transform ${DURATION} ${EASING}`;
  569.         parent.style.transform = `translateY(0)`;
  570.         parent.addEventListener('transitionend', function(e){
  571.           parent.style.transition = 'none';
  572.           /* 一度バウンスさせないとすぐに休止状態になる */
  573.           board.scrollTop = (scrollHeight - clientHeight) - 1;
  574.           animate(function(){board.scrollTop = (scrollHeight - clientHeight)});
  575.         }, {once: true});
  576.       });
  577.       setTimeout(function(){
  578.         for(let i = 0, comment; comment = newComments[i]; i++){
  579.           delete comment.dataset.new;
  580.         }
  581.       }, HIGHLIGHT);
  582.     },
  583.     attachComment: function(text, ngTrial = false){
  584.       /* 単一スクロールコメントcanvasを用意する */
  585.       let scrollComment, c, fonts = (configs.font === '') ? FONT : `${configs.font}, ${FONT}`;
  586.       let width = Math.round(context.measureText(text).width + context.lineWidth);
  587.       let height = Math.round(canvas.fontsize * (1 + MARGIN) + context.lineWidth);
  588.       scrollComment = createElement(core.html.scrollComment(width, height));
  589.       c = scrollComment.getContext('2d');
  590.       c.font         = `bold ${canvas.fontsize}px ${fonts}`;/*context.fontを参照したいがSafariでbold指定が文字列として残らないバグ*/
  591.       c.textBaseline = context.textBaseline;
  592.       c.fillStyle    = (ngTrial) ? context.ngFillStyle : context.fillStyle;
  593.       c.strokeStyle  = context.strokeStyle;
  594.       c.lineWidth    = context.lineWidth;
  595.       c.lineJoin     = context.lineJoin;
  596.       let left = Math.round(context.lineWidth/2);
  597.       let top  = Math.round((canvas.fontsize * MARGIN + context.lineWidth)/2 + canvas.fontsize * BASELINE);
  598.       c.strokeText(text, left, top);
  599.       c.fillText(text, left, top);
  600.       /* コメント位置データをまとめる */
  601.       let record = {};
  602.       record.text = text;/*流れる文字列*/
  603.       record.width = width;/*文字列の幅*/
  604.       record.ppms = (canvas.width + record.width) / (configs.duration * 1000);/*ミリ秒あたり移動距離*/
  605.       record.start = Date.now();/*開始時刻*/
  606.       record.reveal = record.start + (record.width / record.ppms);/*文字列が右端から抜ける時刻*/
  607.       record.touch = record.start + (canvas.width / record.ppms);/*文字列が左端に触れる時刻*/
  608.       record.end = record.start + (configs.duration * 1000);/*終了時刻*/
  609.       /* 追加されたコメントをどの行に流すかを決定する */
  610.       for(let i=0; i < configs.maxlines; i++){
  611.         let length = lines[i] ? lines[i].length : 0;/*同じ行に詰め込まれているコメント数*/
  612.         switch(true){
  613.           /* 行がなければ行を追加して流す */
  614.           case(length === 0):
  615.             lines[i] = [];
  616.           /* ひとつ先行するコメントより遅い(短い)文字列なら、現時点で先行コメントがすでに右端から抜けていれば流す */
  617.           case(record.ppms < lines[i][length - 1].ppms && lines[i][length - 1].reveal < record.start):
  618.           /* ひとつ先行するコメントより速い(長い)文字列なら、左端に触れる瞬間までに先行コメントが終了するなら流す */
  619.           case(lines[i][length - 1].ppms < record.ppms && lines[i][length - 1].end < record.touch):
  620.             record.top = Math.round(((canvas.height / configs.maxlines) * i) + canvas.topDelta);
  621.             //if(DEBUG) scrollComment.dataset.former = JSON.stringify(lines[i][length - 1]);
  622.             //if(DEBUG) scrollComment.dataset.self = JSON.stringify(record);
  623.             lines[i].push(record);
  624.             scrollComment.style.top = record.top + 'px';
  625.             canvas.appendChild(scrollComment);
  626.             animate(function(){
  627.               scrollComment.style.transform = `translateX(-${canvas.width + width}px)`;
  628.               scrollComment.addEventListener('transitionend', function(e){
  629.                 canvas.removeChild(scrollComment);
  630.                 lines[i].shift();
  631.               }, {once: true});
  632.             });
  633.             return;/*行に追加したら終了*/
  634.           default:
  635.             continue;/*条件に当てはまらなければforループを回して次の行に入れられるかの判定へ*/
  636.         }
  637.       }
  638.     },
  639.     ng: {
  640.       initialize: function(){
  641.         core.ng.read();
  642.         core.ng.listenSelection();
  643.       },
  644.       listenSelection: function(){
  645.         /* コメント上でmousedownした状態からのmousemove,mouseupでのみselect() */
  646.         let select = function(e){
  647.           let selection = window.getSelection(), selected = selection.toString();
  648.           let comment = (selection.anchorNode.length) ? selection.anchorNode.parentNode.parentNode.parentNode.parentNode : null;
  649.           /* テキスト選択なしなら登録フォームを閉じる */
  650.           if(selection.isCollapsed && e.type === 'mouseup' && !e.target.dataset.ngword) return core.ng.closeForm();
  651.           /* テキスト選択を邪魔しない場合にのみ登録フォームを表示 */
  652.           if(!elements.ngForm || elements.ngForm.classList.contains('hidden') || e.target.offsetTop < elements.ngForm.offsetTop || e.type === 'mouseup') core.ng.openForm(comment, e);
  653.           /* テキスト選択があれば初期値に */
  654.           if(!selection.isCollapsed) elements.ngForm.querySelector('input[type="text"]').value = selected;
  655.         };
  656.         window.addEventListener('mousedown', function(e){
  657.           for(let target = e.target; target.dataset; target = target.parentNode) if(target.dataset.selector === 'comment'){
  658.             elements.board.classList.add('mousedown');
  659.             window.addEventListener('mousemove', select);
  660.             window.addEventListener('mouseup', function(e){
  661.               animate(function(){select(e)});/*ダブルクリックでのテキスト選択をanimateで確実に補足*/
  662.               window.removeEventListener('mousemove', select);
  663.               elements.board.classList.remove('mousedown');
  664.             }, {once: true});
  665.             return;
  666.           }
  667.         });
  668.       },
  669.       createButton: function(){
  670.         if(elements.ngButton) return;
  671.         /* フルスクリーンボタンを元にNG一覧ボタンを追加する */
  672.         elements.ngButton = createElement(core.html.ngButton());
  673.         elements.ngButton.className = elements.fullscreenButton.className;
  674.         elements.ngButton.addEventListener('click', core.ng.toggleListPanel);
  675.         elements.fullscreenButton.parentNode.insertBefore(elements.ngButton, elements.fullscreenButton);/*元のDOM位置関係にできるだけ影響を与えない*/
  676.       },
  677.       createForm: function(comment){
  678.         elements.ngForm = createElement(core.html.ngForm());
  679.         elements.ngForm.querySelector('button.list').addEventListener('click', core.ng.toggleListPanel);
  680.         elements.ngForm.querySelector('button.help').addEventListener('click', core.ng.toggleHelpPanel);
  681.         elements.ngForm.querySelector('p.type').addEventListener('click', function(e){
  682.           let word = elements.ngForm.querySelector('p.word input');
  683.           if(word.value === '') return;
  684.           if(e.target.localName !== 'button') return;
  685.           core.ng.add(word, e.target);
  686.           core.ng.closeForm();
  687.           if(elements.ngListPanel) core.ng.buildList();
  688.         });
  689.       },
  690.       openForm: function(comment, e){
  691.         let append = function(comment, ngForm){
  692.           comment.insertBefore(ngForm, comment.firstElementChild.nextElementSibling);/*公式ブロックフォームが最後尾にある*/
  693.         };
  694.         let slideUpDown = function(){
  695.           elements.ngForm.slidingUp = true;
  696.           animate(function(){
  697.             elements.ngForm.classList.add('hidden');
  698.             if(elements.ngForm.isConnected){
  699.               elements.ngForm.addEventListener('transitionend', function(e){
  700.                 elements.ngForm.slidingUp = false;
  701.                 append(elements.ngForm.targetComment, elements.ngForm);
  702.                 slideDown();
  703.               }, {once: true});
  704.             }else{
  705.               elements.ngForm.slidingUp = false;
  706.               append(elements.ngForm.targetComment, elements.ngForm);
  707.               slideDown();
  708.             }
  709.           });
  710.         };
  711.         let slideDown = function(){
  712.           elements.ngForm.slidingDown = true;
  713.           if(elements.ngForm.parentNode !== elements.ngForm.targetComment) append(elements.ngForm.targetComment, elements.ngForm);
  714.           animate(function(){
  715.             elements.ngForm.classList.remove('hidden');
  716.             elements.ngForm.addEventListener('transitionend', function(e){
  717.               elements.ngForm.slidingDown = false;
  718.             }, {once: true});
  719.           });
  720.           let ngword = elements.ngForm.targetComment.dataset.ngword;
  721.           if(ngword && e.type === 'click') elements.ngForm.querySelector('input[type="text"]').value = ngword;
  722.           if(!html.classList.contains('ng')) html.classList.add('ng');/*チャンネル切り替えナビゲーションを隠すなど*/
  723.         };
  724.         if(elements.board.parentNode.scrollTop === 0) elements.board.parentNode.scrollTop = 1;/*新着コメントを停止する*/
  725.         if(elements.ngForm){/*表示位置の移し替え*/
  726.           elements.ngForm.targetComment = comment;/*既にslideDown中の処理も含めてターゲットを差し替える*/
  727.           if(elements.ngForm.classList.contains('hidden')){
  728.             if(elements.ngForm.slidingUp){/*Up中*/
  729.               if(elements.ngForm.parentNode === comment){
  730.                 slideDown();/*UpをやめてDownさせる*/
  731.               }else{
  732.                 /*予定通りUp後にDownさせる*/
  733.                 elements.ngForm.addEventListener('transitionend', function(e){
  734.                   slideDown();
  735.                 }, {once: true});
  736.               }
  737.             }else{/*hidden状態*/
  738.               slideDown();
  739.             }
  740.           }else{
  741.             if(elements.ngForm.slidingDown){/*Down中*/
  742.               if(elements.ngForm.parentNode === comment){
  743.                 /*なにもしなくてもよい*/
  744.               }else{
  745.                 slideUpDown();/*Downをやめて改めてUpDownさせる*/
  746.               }
  747.             }else{/*表示状態*/
  748.               if(elements.ngForm.parentNode === comment){
  749.                 /*なにもしなくてもよい*/
  750.               }else{
  751.                 slideUpDown();
  752.               }
  753.             }
  754.           }
  755.         }else{/*新規*/
  756.           core.ng.createForm(comment);
  757.           elements.ngForm.classList.add('hidden');
  758.           elements.ngForm.targetComment = comment;
  759.           slideDown();
  760.         }
  761.       },
  762.       closeForm: function(){
  763.         if(!elements.ngForm) return;
  764.         if(elements.ngForm.classList.contains('hidden')) return;
  765.         elements.ngForm.slidingUp = true;
  766.         animate(function(){
  767.           elements.ngForm.classList.add('hidden');
  768.           if(elements.ngForm.isConnected){
  769.             elements.ngForm.addEventListener('transitionend', function(e){
  770.               elements.ngForm.slidingUp = false;
  771.             }, {once: true});
  772.           }else{
  773.             elements.ngForm.slidingUp = false;
  774.           }
  775.         });
  776.         html.classList.remove('ng');/*チャンネル切り替えナビゲーションを隠すなど*/
  777.       },
  778.       toggleForm: function(comment, e){
  779.         if(!elements.ngForm) return core.ng.openForm(comment, e);
  780.         if(elements.ngForm.classList.contains('hidden')) return core.ng.openForm(comment, e);
  781.         if(elements.ngForm.parentNode !== comment) return core.ng.openForm(comment, e);
  782.         core.ng.closeForm();
  783.       },
  784.       openListPanel: function(){
  785.         core.panel.open(elements.ngListPanel || core.ng.createListPanel());
  786.       },
  787.       closeListPanel: function(){
  788.         core.panel.close(elements.ngListPanel);
  789.       },
  790.       toggleListPanel: function(){
  791.         core.panel.toggle(elements.ngListPanel || core.ng.createListPanel(), core.ng.openListPanel, core.ng.closeListPanel);
  792.       },
  793.       createListPanel: function(){
  794.         let ngListPanel = elements.ngListPanel = createElement(core.html.ngListPanel());
  795.         ngListPanel.querySelector('button.help').addEventListener('click', core.ng.toggleHelpPanel);
  796.         ngListPanel.querySelector('button.cancel').addEventListener('click', core.ng.closeListPanel);
  797.         ngListPanel.querySelector('button.save').addEventListener('click', function(e){
  798.           core.ng.save(core.ng.getNewNgwords().filter((ngword) => (ngword.type !== 'remove')));
  799.           core.ng.closeListPanel();
  800.         });
  801.         ngListPanel.querySelector('ul > li.add > p.words > textarea').addEventListener('keypress', function(e){
  802.           animate(function(){
  803.             let checked = ngListPanel.querySelector('ul > li.add > p.type input:checked');
  804.             if(e.target.value === '') return checked && (checked.checked = false);
  805.             if(!checked) ngListPanel.querySelector('ul > li.add > p.type input[value="forever"]').checked = true;
  806.           });
  807.         }, true);
  808.         /* 並べ替え */
  809.         configs.ng_sort = configs.ng_sort || {key: 'date', reverse: false};
  810.         ngListPanel.querySelector('p.sort').addEventListener('click', function(e){
  811.           if(e.target.localName !== 'label') return;
  812.           let input = document.getElementById(e.target.htmlFor);
  813.           if(input.checked) input.classList.toggle('reverse');
  814.           configs.ng_sort = {key: input.value, reverse: input.classList.contains('reverse')};
  815.           core.ng.buildList();
  816.         });
  817.         /* リスト構築 */
  818.         core.ng.buildList();
  819.         ngListPanel.keyAssigns = {
  820.           'Escape': core.ng.closeListPanel,
  821.         };
  822.         return ngListPanel;
  823.       },
  824.       getNewNgwords: function(){
  825.         let new_ngwords = Array.from(ngwords);/*clone*/
  826.         /* input */
  827.         let lis = elements.ngListPanel.querySelectorAll('ul > li.edit');
  828.         for(let i = 0, li; li = lis[i]; i++){
  829.           let word = li.querySelector('p.word input');
  830.           let checked = li.querySelector('p.type input:checked');
  831.           let match = word.value.match(/^\/(.+)\/([a-z]+)?$/);
  832.           new_ngwords[i] = {};
  833.           new_ngwords[i].original = word.value;
  834.           new_ngwords[i].value = (match) ? word.value : normalize(word.value).toLowerCase();
  835.           new_ngwords[i].regex = (match) ? new RegExp(match[1], match[2]) : null;
  836.           new_ngwords[i].type = checked.value;
  837.           new_ngwords[i].added = parseInt(li.dataset.added) || null;
  838.           new_ngwords[i].limit = (checked.value === 'for24h') ? parseInt(li.dataset.limit) : null;
  839.         }
  840.         /* textarea */
  841.         let add = elements.ngListPanel.querySelector('ul > li.add');
  842.         let textarea = add.querySelector('p.words textarea');
  843.         let lines = textarea.value.split('\n');
  844.         for(let i = 0; lines[i] !== undefined; i++){
  845.           let checked = add.querySelector('p.type input:checked');
  846.           let match = lines[i].match(/^\/(.+)\/([a-z]+)?$/);
  847.           let index = new_ngwords.length;
  848.           new_ngwords[index] = {};
  849.           new_ngwords[index].original = lines[i];
  850.           new_ngwords[index].value = (match) ? lines[i] : normalize(lines[i]).toLowerCase();
  851.           new_ngwords[index].regex = (match) ? new RegExp(match[1], match[2]) : null;
  852.           new_ngwords[index].type = (checked) ? checked.value : null;
  853.           new_ngwords[index].added = Date.now() + i;/*並べ替え用に同一時刻を避ける*/
  854.           new_ngwords[index].limit = (checked && checked.value === 'for24h') ? new_ngwords[index].added + 1000*60*60*24 : null;
  855.         }
  856.         textarea.value = '';
  857.         return new_ngwords.filter((ngword, index) => {
  858.           if(ngword.value === '') return false;/*空欄除外*/
  859.           for(let i = index + 1; new_ngwords[i]; i++) if(ngword.value === new_ngwords[i].value) return false;/*重複除外*/
  860.           return true;
  861.         });
  862.       },
  863.       buildList: function(){
  864.         /* 編集中の既存のリストがあればそのまま使う */
  865.         let new_ngwords = core.ng.getNewNgwords();
  866.         /* 並べ替え */
  867.         if(new_ngwords.length < 2){
  868.           elements.ngListPanel.querySelector('p.sort').classList.add('disabled');
  869.         }else{
  870.           elements.ngListPanel.querySelector('p.sort').classList.remove('disabled');
  871.           let sort = elements.ngListPanel.querySelector(`p.sort input[value="${configs.ng_sort.key}"]`);
  872.           sort.checked = true;
  873.           if(configs.ng_sort.reverse) sort.classList.add('reverse');
  874.         }
  875.         new_ngwords.sort(function(a, b){
  876.           let types = {trial: 1, for24h: 2, forever: 3, remove: 4};
  877.           switch(configs.ng_sort.key){
  878.             case('date'): return (a.added < b.added);
  879.             case('word'): return (a.original < b.original);
  880.             case('type'): return (a.limit && b.limit) ? (a.limit < b.limit) : (types[a.type] < types[b.type]);
  881.           }
  882.         });
  883.         if(configs.ng_sort.reverse) new_ngwords.reverse();
  884.         /* リスト構築 */
  885.         let ul = elements.ngListPanel.querySelector('ul');
  886.         while(2 < ul.children.length) ul.removeChild(ul.children[1]);/*冒頭のテンプレートと追加登録のみ残す*/
  887.         let template = ul.querySelector('li.template');
  888.         let now = Date.now();
  889.         let formatTime = function(limit){
  890.           let left = limit - now;
  891.           switch(true){
  892.             case(1000*60*60 <= left): return Math.floor(left/(1000*60*60)) + '時間';
  893.             case(0 <= left): return Math.floor(left/(1000*60)) + '分';
  894.             case(left < 0): return '0分';
  895.           }
  896.         };
  897.         for(let i = 0, new_ngword; new_ngword = new_ngwords[i]; i++){
  898.           let li = template.cloneNode(true);
  899.           li.className = 'edit';
  900.           li.innerHTML = li.innerHTML.replace(/\{i\}/g, i);
  901.           li.querySelector('p.word input').value = new_ngword.original || new_ngword.value/*移行用*/;
  902.           if(new_ngword.type) li.querySelector(`p.type input[value="${new_ngword.type}"]`).checked = true;
  903.           li.dataset.added = new_ngword.added || 0;
  904.           li.dataset.limit = new_ngword.limit || 0;
  905.           let for24h = li.querySelector('p.type label.for24h');
  906.           for24h.textContent = (new_ngword.limit) ? formatTime(new_ngword.limit) : '24時間';
  907.           for24h.addEventListener('click', function(e){
  908.             animate(function(){/*checked処理の後に*/
  909.               if(li.querySelector('p.type input[value="for24h"]').checked){
  910.                 if(for24h.classList.toggle('extended')){
  911.                   li.dataset.limit = Date.now() + 1000*60*60*24;
  912.                   for24h.textContent = '24時間';
  913.                 }else{
  914.                   li.dataset.limit = new_ngword.limit;
  915.                   for24h.textContent = formatTime(new_ngword.limit);
  916.                 }
  917.               }
  918.             });
  919.           });
  920.           ul.insertBefore(li, template.nextElementSibling);
  921.         }
  922.       },
  923.       showHelpPanel: function(){
  924.         core.panel.show(elements.ngHelpPanel || core.ng.createHelpPanel());
  925.       },
  926.       hideHelpPanel: function(){
  927.         core.panel.hide(elements.ngHelpPanel);
  928.       },
  929.       toggleHelpPanel: function(){
  930.         core.panel.toggle(elements.ngHelpPanel || core.ng.createHelpPanel(), core.ng.showHelpPanel, core.ng.hideHelpPanel);
  931.       },
  932.       createHelpPanel: function(){
  933.         let ngHelpPanel = elements.ngHelpPanel = createElement(core.html.ngHelpPanel());
  934.         ngHelpPanel.querySelector('button.ok').addEventListener('click', core.ng.hideHelpPanel);
  935.         ngHelpPanel.keyAssigns = {
  936.           'Escape': core.ng.hideHelpPanel,
  937.         };
  938.         return ngHelpPanel;
  939.       },
  940.       add: function(word, type){
  941.         let index = ngwords.length;
  942.         for(let i = 0; ngwords[i]; i++) if(ngwords[i].value === word.value) index = i;/*重複させない*/
  943.         let match = word.value.match(/^\/(.+)\/([a-z]+)?$/);
  944.         if(!ngwords[index]) ngwords[index] = {};
  945.         ngwords[index].original = word.value;
  946.         ngwords[index].value = (match) ? word.value : normalize(word.value).toLowerCase();
  947.         ngwords[index].regex = (match) ? new RegExp(match[1], match[2]) : null;
  948.         ngwords[index].type = type.classList[0];
  949.         ngwords[index].added = ngwords[index].added || Date.now();
  950.         switch(true){
  951.           case(type.classList.contains('for24h') && !ngwords[index].limit):
  952.           case(type.classList.contains('for24h') && type.classList.contains('extended')):
  953.             ngwords[index].limit = ngwords[index].added + 1000*60*60*24;
  954.             break;
  955.           case(type.classList.contains('for24h')):
  956.             ngwords[index].limit = ngwords[index].limit;
  957.             break;
  958.           default:
  959.             ngwords[index].limit = null;
  960.             break;
  961.         }
  962.         Storage.save('ngwords', ngwords);
  963.       },
  964.       read: function(){
  965.         /* 保存済みの設定を読む */
  966.         ngwords = Storage.read('ngwords') || [];
  967.         /* 正規表現(word.regex)はJSONに保存されないので復活させる */
  968.         for(let i = 0; ngwords[i]; i++){
  969.           let match = ngwords[i].value.match(/^\/(.+)\/([a-z]+)?$/);
  970.           ngwords[i].regex = (match) ? new RegExp(match[1], match[2]) : null;
  971.         }
  972.       },
  973.       save: function(new_ngwords){
  974.         ngwords = new_ngwords;
  975.         Storage.save('ngwords', ngwords);
  976.       },
  977.       expire: function(){
  978.         let now = Date.now();
  979.         ngwords = ngwords.filter(function(ngword, i, ngwords){
  980.           if(!ngword.limit || now < ngword.limit) return true;
  981.         });
  982.       },
  983.       filter: function(comment){
  984.         const match = function(comment, ngword){
  985.           let commentText = site.get.commentText(comment);
  986.           if(ngword.regex && ngword.regex.test(commentText)) return true;
  987.           if(normalize(commentText).toLowerCase().includes(ngword.value)) return true;
  988.         };
  989.         for(let i = 0, ngword; ngword = ngwords[i]; i++){
  990.           switch(ngword.type){
  991.             case('forever'):
  992.             case('for24h'):
  993.               if(match(comment, ngword)){
  994.                 comment.dataset.ngDeleted = 'true';
  995.                 return false;
  996.               }
  997.               break;
  998.             case('trial'):
  999.               if(match(comment, ngword)){
  1000.                 comment.dataset.ngTrial = 'true';
  1001.                 comment.dataset.ngWord = ngword.value;
  1002.                 comment.addEventListener('click', function(e){
  1003.                   if(e.target === comment && window.getSelection().isCollapsed) core.ng.toggleForm(comment, e);
  1004.                 });
  1005.               }
  1006.               break;
  1007.           }
  1008.         }
  1009.         return true;
  1010.       },
  1011.     },
  1012.     config: {
  1013.       read: function(){
  1014.         /* 保存済みの設定を読む */
  1015.         configs = Storage.read('configs') || {};
  1016.         /* 未定義項目をデフォルト値で上書きしていく */
  1017.         Object.keys(CONFIGS).forEach((key) => {if(configs[key] === undefined) configs[key] = CONFIGS[key].DEFAULT});
  1018.       },
  1019.       save: function(new_config){
  1020.         configs = {};/*CONFIGSに含まれた設定値のみ保存する*/
  1021.         /* CONFIGSを元に文字列を型評価して値を格納していく */
  1022.         Object.keys(CONFIGS).forEach((key) => {
  1023.           /* 値がなければデフォルト値 */
  1024.           if(new_config[key] === "") return configs[key] = CONFIGS[key].DEFAULT;
  1025.           switch(CONFIGS[key].TYPE){
  1026.             case 'bool':
  1027.               configs[key] = (new_config[key]) ? 1 : 0;
  1028.               break;
  1029.             case 'int':
  1030.               configs[key] = parseInt(new_config[key]);
  1031.               break;
  1032.             case 'float':
  1033.               configs[key] = parseFloat(new_config[key]);
  1034.               break;
  1035.             default:
  1036.               configs[key] = new_config[key];
  1037.               break;
  1038.           }
  1039.         });
  1040.         Storage.save('configs', configs);
  1041.       },
  1042.       createButton: function(){
  1043.         if(elements.configButton) return;
  1044.         /* フルスクリーンボタンを元に設定ボタンを追加する */
  1045.         let configButton = elements.configButton = createElement(core.html.configButton());
  1046.         configButton.className = elements.fullscreenButton.className;
  1047.         configButton.addEventListener('click', core.config.toggle);
  1048.         elements.fullscreenButton.parentNode.insertBefore(configButton, elements.fullscreenButton);/*元のDOM位置関係にできるだけ影響を与えない*/
  1049.       },
  1050.       open: function(){
  1051.         core.panel.open(elements.configPanel || core.config.createPanel());
  1052.       },
  1053.       close: function(){
  1054.         core.panel.close(elements.configPanel);
  1055.       },
  1056.       toggle: function(){
  1057.         core.panel.toggle(elements.configPanel || core.config.createPanel(), core.config.open, core.config.close);
  1058.       },
  1059.       createPanel: function(){
  1060.         let configPanel = elements.configPanel = createElement(core.html.configPanel());
  1061.         configPanel.querySelector('button.cancel').addEventListener('click', core.config.close);
  1062.         configPanel.querySelector('button.save').addEventListener('click', function(e){
  1063.           let inputs = configPanel.querySelectorAll('input'), new_configs = {};
  1064.           for(let i = 0, input; input = inputs[i]; i++){
  1065.             switch(CONFIGS[input.name].TYPE){
  1066.               case('bool'):
  1067.                 new_configs[input.name] = (input.checked) ? 1 : 0;
  1068.                 break;
  1069.               case('object'):
  1070.                 if(!new_configs[input.name]) new_configs[input.name] = {};
  1071.                 new_configs[input.name][input.value] = (input.checked) ? 1 : 0;
  1072.                 break;
  1073.               default:
  1074.                 new_configs[input.name] = input.value;
  1075.                 break;
  1076.             }
  1077.           }
  1078.           core.config.save(new_configs);
  1079.           core.config.close();
  1080.           /* 新しい設定値で再スタイリング */
  1081.           core.addStyle();
  1082.           core.createCanvas();/*modify含む*/
  1083.         }, true);
  1084.         configPanel.keyAssigns = {
  1085.           'Escape': core.config.close,
  1086.         };
  1087.         return configPanel;
  1088.       },
  1089.     },
  1090.     panel: {
  1091.       createPanels: function(){
  1092.         if(elements.panels) return;
  1093.         let panels = elements.panels = createElement(core.html.panels());
  1094.         panels.dataset.panels = 0;
  1095.         document.body.appendChild(panels);
  1096.         /* Escapeキーで閉じるなど */
  1097.         window.addEventListener('keydown', function(e){
  1098.           if(['input', 'textarea'].includes(document.activeElement.localName)) return;
  1099.           Array.from(panels.children).forEach((p) => {
  1100.             if(p.classList.contains('hidden')) return;
  1101.             /* 表示中のパネルに対するキーアサインを確認 */
  1102.             if(p.keyAssigns){
  1103.               if(p.keyAssigns[e.key]) return p.keyAssigns[e.key]();/*単一キーなら簡単に処理*/
  1104.               for(let i = 0, assigns = Object.keys(p.keyAssigns); assigns[i]; i++){
  1105.                 let keys = assigns[i].split('+');/*プラス区切りで指定*/
  1106.                 if(!['altKey','shiftKey','ctrlKey','metaKey'].every(
  1107.                   (m) => (e[m] && keys.includes(m)) || (!e[m] && !keys.includes(m)))
  1108.                 ) return;/*修飾キーの一致を確認*/
  1109.                 if(keys[keys.length - 1] === e.key) return p.keyAssigns[assigns[i]]();/*最後が通常キー*/
  1110.               }
  1111.             }
  1112.           });
  1113.         }, true);
  1114.       },
  1115.       open: function(panel){
  1116.         let panels = elements.panels;
  1117.         if(!panel.isConnected){
  1118.           panel.classList.add('hidden');
  1119.           panels.insertBefore(panel, Array.from(panels.children).find((p) => panel.dataset.order < p.dataset.order));
  1120.         }
  1121.         panels.dataset.panels = parseInt(panels.dataset.panels) + 1;
  1122.         animate(function(){panel.classList.remove('hidden')});
  1123.       },
  1124.       show: function(panel){
  1125.         core.panel.open(panel);
  1126.       },
  1127.       hide: function(panel, close = false){
  1128.         if(panel.classList.contains('hidden')) return;/*連続Escなどによる二重起動を避ける*/
  1129.         let panels = elements.panels;
  1130.         panel.classList.add('hidden');
  1131.         panel.addEventListener('transitionend', function(e){
  1132.           panels.dataset.panels = parseInt(panels.dataset.panels) - 1;
  1133.           if(close){
  1134.             panels.removeChild(panel);
  1135.             elements[panel.dataset.name] = null;
  1136.           }
  1137.         }, {once: true});
  1138.       },
  1139.       close: function(panel){
  1140.         core.panel.hide(panel, true);
  1141.       },
  1142.       toggle: function(panel, open, close){
  1143.         if(!panel.isConnected || panel.classList.contains('hidden')) open();
  1144.         else close();
  1145.       },
  1146.     },
  1147.     addStyle: function(){
  1148.       let style = createElement(core.html.style());
  1149.       document.head.appendChild(style);
  1150.       if(elements.style && elements.style.isConnected) document.head.removeChild(elements.style);
  1151.       elements.style = style;
  1152.     },
  1153.     html: {
  1154.       mini_screen: () => `<use xlink:href="/images/icons/mini_screen.svg#svg-body"></use>`,
  1155.       canvasDiv: () => `
  1156.         <div id="${SCRIPTNAME}-canvas"></div>
  1157.       `,
  1158.       preCanvas: () => `
  1159.         <canvas width="0" height="0"></canvas>
  1160.       `,
  1161.       scrollComment: (width, height) => `
  1162.         <canvas class="comment" width="${width}" height="${height}"></canvas>
  1163.       `,
  1164.       ngButton: () => `
  1165.         <button id="${SCRIPTNAME}-ng-button" title="${SCRIPTNAME} 登録NGワード一覧"><svg width="20" height="20"><use xlink:href="/images/icons/list.svg#svg-body"></use></svg></button>
  1166.       `,
  1167.       ngForm: () => `
  1168.         <div id="${SCRIPTNAME}-ng-form">
  1169.           <h1><span>NGワード登録</span><button class="list"><svg width="14" height="16"><use xlink:href="/images/icons/list.svg#svg-body"></use></svg></button></h1>
  1170.           <p class="word"><input type="text" value=""><button class="help">?</button></p>
  1171.           <p class="type"><button class="trial">お試し</button><button class="for24h">24時間</button><button class="forever">無期限</button></p>
  1172.         </div>
  1173.       `,
  1174.       ngListPanel: () => `
  1175.         <div class="panel" id="${SCRIPTNAME}-ng-list" data-name="ngListPanel" data-order="2">
  1176.           <header>
  1177.             <h1>登録NGワード一覧</h1>
  1178.             <p class="buttons"><button class="help">?</button></p>
  1179.           </header>
  1180.           <p class="sort">
  1181.             <input type="radio" name="sort" id="ngwords-sort-date" value="date"><label for="ngwords-sort-date">登録日時順</label>
  1182.             <input type="radio" name="sort" id="ngwords-sort-word" value="word"><label for="ngwords-sort-word">NGワード順</label>
  1183.             <input type="radio" name="sort" id="ngwords-sort-type" value="type"><label for="ngwords-sort-type">期限順</label>
  1184.           </p>
  1185.           <ul>
  1186.             <li class="template">
  1187.               <p class="word"><input type="text" name="ngwords[{i}][value]" value=""></p>
  1188.               <p class="type">
  1189.                 <input type="radio" name="ngwords[type][{i}]" id="ngwords-type-{i}-trial"   value="trial"  ><label class="trial"   for="ngwords-type-{i}-trial"  >お試し</label>
  1190.                 <input type="radio" name="ngwords[type][{i}]" id="ngwords-type-{i}-for24h"  value="for24h" ><label class="for24h"  for="ngwords-type-{i}-for24h" >24時間</label>
  1191.                 <input type="radio" name="ngwords[type][{i}]" id="ngwords-type-{i}-forever" value="forever"><label class="forever" for="ngwords-type-{i}-forever">無期限</label>
  1192.                 <input type="radio" name="ngwords[type][{i}]" id="ngwords-type-{i}-remove"  value="remove" ><label class="remove"  for="ngwords-type-{i}-remove" >削除</label>
  1193.               </p>
  1194.             </li>
  1195.             <li class="add">
  1196.               <p class="words"><textarea name="ngwords[add][value]" placeholder="追加"></textarea></p>
  1197.               <p class="type">
  1198.                 <input type="radio" name="ngwords[type][add]" id="ngwords-type-add-trial"   value="trial"  ><label class="trial"   for="ngwords-type-add-trial"  >お試し</label>
  1199.                 <input type="radio" name="ngwords[type][add]" id="ngwords-type-add-for24h"  value="for24h" ><label class="for24h"  for="ngwords-type-add-for24h" >24時間</label>
  1200.                 <input type="radio" name="ngwords[type][add]" id="ngwords-type-add-forever" value="forever"><label class="forever" for="ngwords-type-add-forever">無期限</label>
  1201.                 <input type="radio" name="ngwords[type][add]" id="ngwords-type-add-remove"  value="remove" ><label class="remove"  for="ngwords-type-add-remove" >削除</label>
  1202.               </p>
  1203.             </li>
  1204.           </ul>
  1205.           <p class="buttons"><button class="cancel">キャンセル</button><button class="save primary">保存</button></p>
  1206.         </div>
  1207.       `,
  1208.       ngHelpPanel: () => `
  1209.         <div class="panel" id="${SCRIPTNAME}-ng-help" data-name="ngHelpPanel" data-order="3">
  1210.           <h1>NGワードについて</h1>
  1211.           <p>登録したワードを含むコメントを削除します。</p>
  1212.           <p>お試しの場合はハイライト表示されるので、NG対象の確認や、NGとは逆の注目したいキーワードとしても活用できます。24時間の場合は登録時からの期限付きなので、ネタバレや時事ネタなど一時的なNGとしてご活用ください。</p>
  1213.           <p>コメント一覧のテキスト選択から登録できるほか、NGワード一覧ボタンをクリックして、登録したNGワードを編集したり、複数行での一括登録もできます。</p>
  1214.           <p>英数字と記号とカタカナは、全角半角や大文字小文字を区別しません。</p>
  1215.           <p>下記のような正規表現も使えます。</p>
  1216.           <section>
  1217.             <h2>「NGです」を消す登録例:</h2>
  1218.             <dl>
  1219.               <dt><code>NG</code></dt><dd>通常のNGワード</dd>
  1220.               <dt><code>/^NG/</code></dt><dd>前方一致</dd>
  1221.               <dt><code>/です$/</code></dt><dd>後方一致</dd>
  1222.               <dt><code>/^NGです$/</code></dt><dd>完全一致</dd>
  1223.             </dl>
  1224.             <h2>そのほかの例:</h2>
  1225.             <dl>
  1226.               <dt><code>/^.$/</code></dt><dd>1文字だけのコメント</dd>
  1227.               <dt><code>/.{30}/</code></dt><dd>30文字以上のコメント</dd>
  1228.               <dt><code>/^[a-z]+$/i</code></dt><dd>アルファベットだけのコメント</dd>
  1229.               <dt><code>/[0-9]{3}/</code></dt><dd>3桁以上の数字を含むコメント</dd>
  1230.             </dl>
  1231.           </section>
  1232.           <p class="buttons"><button class="ok primary">OK</button></p>
  1233.         </div>
  1234.       `,
  1235.       configButton: () => `
  1236.         <button id="${SCRIPTNAME}-config-button" title="${SCRIPTNAME} 設定"><svg width="20" height="20" role="img"><use xlink:href="/images/icons/config.svg#svg-body"></use></svg></button>
  1237.       `,
  1238.       configPanel: () => `
  1239.         <div class="panel" id="${SCRIPTNAME}-config-panel" data-name="configPanel" data-order="1">
  1240.           <h1>${SCRIPTNAME}設定</h1>
  1241.           <fieldset>
  1242.             <legend>スクロールコメント</legend>
  1243.             <p><label>最大行数(文字サイズ連動):       <input type="number"   name="maxlines"        value="${configs.maxlines}"        min="0"  max="50"  step="1"></label></p>
  1244.             <p><label>行間(比率):                     <input type="number"   name="linemargin"      value="${configs.linemargin}"      min="0"  max="1"   step="0.05"></label></p>
  1245.             <p><label>透明度(%):                      <input type="number"   name="transparency"    value="${configs.transparency}"    min="0"  max="100" step="5"></label></p>
  1246.             <p><label>縁取りの太さ(比率):             <input type="number"   name="owidth"          value="${configs.owidth}"          min="0"  max="0.5" step="0.01"></label></p>
  1247.             <p><label>横断にかける秒数:               <input type="number"   name="duration"        value="${configs.duration}"        min="1"  max="30"  step="1"></label></p>
  1248.             <p><label>最大同時表示数:                 <input type="number"   name="maxcomments"     value="${configs.maxcomments}"     min="0"  max="100" step="1"></label></p>
  1249.             <p><label>フォント指定<sup>※</sup>:      <input type="text"     name="font"            value="${configs.font.replace(/"/g, '&quot;')}" placeholder="Arial, sans-serif" pattern="[^/*{}:;]+"></label></p>
  1250.             <p class="note">※スクロールするコメント内の文字とフォントの組み合わせによっては、文字の上下が切れてしまうこともあります。</p>
  1251.           </fieldset>
  1252.           <fieldset>
  1253.             <legend>一覧コメント</legend>
  1254.             <p><label>常に画面内に表示する:           <input type="checkbox" name="l_fix"           value="${configs.l_fix}"           ${configs.l_fix       ? 'checked' : ''}></label></p>
  1255.             <p><label>映像に重ねる:                   <input type="checkbox" name="l_overlay"       value="${configs.l_overlay}"       ${configs.l_overlay   ? 'checked' : ''}></label></p>
  1256.             <p><label>投稿時刻を表示する:             <input type="checkbox" name="l_showtime"      value="${configs.l_showtime}"      ${configs.l_showtime  ? 'checked' : ''}></label></p>
  1257.             <p><label>横幅(%):                        <input type="number"   name="l_width"         value="${configs.l_width}"         min="0"  max="100" step="0.5"></label></p>
  1258.             <p><label>最大行数(文字サイズ連動):       <input type="number"   name="lc_maxlines"     value="${configs.lc_maxlines}"     min="10" max="100" step="1"></label></p>
  1259.             <p><label>改行されたコメントの行間(比率): <input type="number"   name="lc_linemargin"   value="${configs.lc_linemargin}"   min="0"  max="1"   step="0.05"></label></p>
  1260.             <p><label>コメント同士の間隔(比率):       <input type="number"   name="lc_margin"       value="${configs.lc_margin}"       min="0"  max="2"   step="0.05"></label></p>
  1261.             <p><label>文字の透明度(%):                <input type="number"   name="lc_transparency" value="${configs.lc_transparency}" min="0"  max="100" step="5"></label></p>
  1262.             <p><label>背景の透明度(%):                <input type="number"   name="lb_transparency" value="${configs.lb_transparency}" min="0"  max="100" step="5"></label></p>
  1263.           </fieldset>
  1264.           <fieldset>
  1265.             <legend>アベマのナビゲーション</legend>
  1266.             <p><label>画面クリック時のみ表示する:     <input type="checkbox" name="n_clickonly"     value="${configs.n_clickonly}"     ${configs.n_clickonly ? 'checked' : ''}></label></p>
  1267.             <p><label>隠れるまでの時間(秒):           <input type="number"   name="n_delay"         value="${configs.n_delay}"         min="1"  max="60"  step="1"></label></p>
  1268.             <p><label>透明度(%):                      <input type="number"   name="n_transparency"  value="${configs.n_transparency}"  min="0"  max="100" step="5"></label></p>
  1269.           </fieldset>
  1270.           <p class="buttons"><button class="cancel">キャンセル</button><button class="save primary">保存</button></p>
  1271.         </div>
  1272.       `,
  1273.       panels: () => `
  1274.         <div class="panels" id="${SCRIPTNAME}-panels"></div>
  1275.       `,
  1276.       style: () => `
  1277.         <style type="text/css">
  1278.           /* 共通変数 */
  1279.           /* opacity:                ${configs.opacity    = 1 - (configs.transparency / 100)} */
  1280.           /* lc_opacity:             ${configs.lc_opacity = 1 - (configs.lc_transparency / 100)} */
  1281.           /* lb_opacity:             ${configs.lb_opacity = 1 - (configs.lb_transparency / 100)} */
  1282.           /* n_opacity:              ${configs.n_opacity  = 1 - (configs.n_transparency / 100)} */
  1283.           /* opacityHover:           ${configs.opacityHover    = 1 - (configs.transparency / 200)} */
  1284.           /* lc_opacityHover:        ${configs.lc_opacityHover = 1 - (configs.lc_transparency / 200)} */
  1285.           /* lb_opacityHover:        ${configs.lb_opacityHover = 1 - (configs.lb_transparency / 200)} */
  1286.           /* n_opacityHover:         ${configs.n_opacityHover  = 1 - (configs.n_transparency / 200)} */
  1287.           /* fontsize:               ${configs.fontsize = (100 / (configs.maxlines || 1)) / (1 + configs.linemargin)} (設定値の表現をわかりやすくする代償はここで支払う) */
  1288.           /* lc_fontsize:            ${configs.lc_fontsize = (100 / (configs.lc_maxlines + 1)) / (1 + configs.lc_margin)} (設定値の表現をわかりやすくする代償はここで支払う) */
  1289.           /* header_height:          ${configs.header_height = configs.header_height || elements.header.firstElementChild.clientHeight} */
  1290.           /* footer_height:          ${configs.footer_height = configs.footer_height || elements.footer.firstElementChild.clientHeight} */
  1291.           /* channelButtons_size:    ${configs.channelButtons_size = configs.channelButtons_size || elements.channelButtons.firstElementChild.clientWidth} */
  1292.           /* screen_zIndex:          ${configs.screen_zIndex          =   2} */
  1293.           /* canvas_zIndex:          ${configs.canvas_zIndex          =   3} */
  1294.           /* header_zIndex:          ${configs.header_zIndex          =   8} */
  1295.           /* footer_zIndex:          ${configs.footer_zIndex          =   8} */
  1296.           /* commentPane_zIndex:     ${configs.commentPane_zIndex     =   9} */
  1297.           /* headerHover_zIndex:     ${configs.headerHover_zIndex     =  10} */
  1298.           /* footerHover_zIndex:     ${configs.footerHover_zIndex     =  10} */
  1299.           /* channelButtons_zIndex1: ${configs.channelButtons_zIndex1 =  10} */
  1300.           /* channelPane_zIndex:     ${configs.channelPane_zIndex     =  11} */
  1301.           /* programPane_zIndex:     ${configs.programPane_zIndex     =  11} */
  1302.           /* channelButtons_zIndex2: ${configs.channelButtons_zIndex2 =  12} */
  1303.           /* panel_zIndex:           ${configs.panel_zIndex           = 100} */
  1304.           /* nav_transition:         ${configs.nav_transition         = '500ms cubic-bezier(.17,.84,.44,1)'} (Quartic) */
  1305.           /* nav_transitionDelay:    ${configs.nav_transitionDelay    = '500ms cubic-bezier(.17,.84,.44,1) 250ms'} (Quartic) */
  1306.           /* アベマ公式の不要要素 */
  1307.           /* (レイアウトを崩す謎要素に、とりあえず穏便に表示位置の調整で対応する) */
  1308.           .pub_300x250,
  1309.           .pub_300x250m,
  1310.           .pub_728x90,
  1311.           .text-ad,
  1312.           .textAd,
  1313.           .text_ad,
  1314.           .text_ads,
  1315.           .text-ads,
  1316.           .text-ad-links,
  1317.           #announcer,
  1318.           dummy{
  1319.             position: absolute;
  1320.             bottom: 0;
  1321.           }
  1322.           /* ブラウザ警告の透過 */
  1323.           [data-selector="caution"]{
  1324.             opacity: ${configs.n_opacity};
  1325.           }
  1326.           [data-selector="caution"] *{
  1327.             background: transparent;
  1328.             color: white;
  1329.           }
  1330.           /* スクロールコメント */
  1331.           #${SCRIPTNAME}-canvas{
  1332.             z-index: ${configs.canvas_zIndex};
  1333.             pointer-events: none;
  1334.             position: absolute;
  1335.             top: 50%;
  1336.             left: 0;
  1337.             transform: translateY(-50%);
  1338.             overflow: hidden;
  1339.             opacity: 0;/*コメント非表示なら速やかに消える*/
  1340.             transition: opacity 500ms ease 250ms;
  1341.           }
  1342.           html.comment #${SCRIPTNAME}-canvas,
  1343.           #${SCRIPTNAME}-canvas.keep{
  1344.             opacity: ${configs.opacity};
  1345.           }
  1346.           #${SCRIPTNAME}-canvas > canvas{
  1347.             position: absolute;
  1348.             left: 100%;
  1349.             transition: transform ${configs.duration}s linear;
  1350.             will-change: transform;
  1351.             pointer-events: none;/*継承されないので*/
  1352.           }
  1353.           /* 映像 */
  1354.           [data-selector="screen"]{
  1355.             /* widthはコメントペインに応じて可変 */
  1356.             height: 100% !important;
  1357.             transition: ${configs.nav_transition};
  1358.           }
  1359.           [data-selector="screen"] > button + div,
  1360.           [data-selector="screen"] > button + div > div{
  1361.             width: 100% !important;
  1362.             height: 100% !important;
  1363.             top: 0;
  1364.             right: 0;
  1365.             transition: ${configs.nav_transition};
  1366.           }
  1367.           [data-selector="closer"]{
  1368.             pointer-events: auto;
  1369.           }
  1370.           /* コメントペインの表示非表示 */
  1371.           [data-selector="commentPane"]{
  1372.             width: auto;
  1373.             padding-left: ${configs.l_fix ? configs.l_width / 8 : configs.l_width}vw;/*隠れているときもマウスオーバー領域を確保する*/
  1374.             transform: translateX(100%);
  1375.             z-index: ${configs.commentPane_zIndex};
  1376.             transition: ${configs.nav_transitionDelay};
  1377.           }
  1378.           html.click [data-selector="commentPane"]{
  1379.             transition: ${configs.nav_transition};
  1380.           }
  1381.           html.comment [data-selector="commentPane"],
  1382.           [data-selector="commentPane"].keep/*core.closeOpenCommentPane用*/{
  1383.             transform: translateX(${configs.l_fix ? 0 : 50}%);
  1384.           }
  1385.           html.comment [data-selector="commentPane"]:hover,
  1386.           html.comment [data-selector="commentPane"].active,
  1387.           html.comment.active [data-selector="commentPane"]{
  1388.             transform: translateX(0);/*表示*/
  1389.             padding-left: ${configs.l_fix ? configs.l_width / 8 : configs.l_width / 8}vw;
  1390.           }
  1391.           [data-selector="commentPane"] > div{
  1392.             width: ${configs.l_width}vw;
  1393.             position: relative;
  1394.           }
  1395.           [data-selector="commentPane"] [class$="comment-SnackBarTransition"]{
  1396.             left: auto;
  1397.           }
  1398.           [data-selector="commentPane"] [data-selector="board"] > div > div:not([data-selector="comment"]) > div{
  1399.             margin: auto;/*全称セレクタ(*)のせいでローディングアニメーションが左に寄ってしまうので*/
  1400.           }
  1401.           html:not(.comment) [data-selector="commentPane"] [class$="Loading"] *{
  1402.             animation: none;/*画面外のローディングアニメーションにCPUを消費するアベマの悲しい仕様を上書き*/
  1403.           }
  1404.           /* コメントペインの透過 */
  1405.           [data-selector="commentPane"] > div{
  1406.             background: rgba(0,0,0,${configs.l_overlay ? configs.lb_opacity : 1});
  1407.             mask-image: linear-gradient(transparent 0%, black 25%, black 75%, transparent 100%);/*上下ともに透過していくマスクを用意しておいて...*/
  1408.             -webkit-mask-image: linear-gradient(transparent 0%, black 25%, black 75%, transparent 100%);/*まだ-webkit取れない*/
  1409.             /*Macのwebkitのみ(!)translateアニメーション時にmaskが無効になるバグがあるので上部の透過はさせないという方法もあるが...*/
  1410.             mask-size: 100% 200%;/*マスクの可視範囲を一部分に限定する(トリッキー!!)*/
  1411.             -webkit-mask-size: 100% 200%;/*まだ-webkit取れない*/
  1412.             mask-position: 0 ${configs.l_overlay ? '0' : '50%'};/*上部番組テロップなどが見やすいように上側だけを透過させる*/
  1413.             -webkit-mask-position: 0 ${configs.l_overlay ? '0' : '50%'};/*まだ-webkit取れない*/
  1414.             transition: 500ms ease;
  1415.           }
  1416.           [data-selector="commentPane"]:hover > div{
  1417.             background: rgba(0,0,0,${configs.l_overlay ? configs.lb_opacityHover : 1});
  1418.             mask-position: 0 50%;/*上側も下側も透過しない*/
  1419.             -webkit-mask-position: 0 50%;/*まだ-webkit取れない*/
  1420.           }
  1421.           [data-selector="commentPane"]:hover *{
  1422.             color: rgba(255,255,255,${configs.l_overlay ? configs.lc_opacityHover : 1});
  1423.           }
  1424.           [data-selector="footer"]:hover ~ div > [data-selector="commentPane"] > div/*フッタにマウスホバー中*/,
  1425.           html.active [data-selector="commentPane"] > div/*フッタを含むナビゲーション表示中*/{
  1426.             background: rgba(0,0,0,${configs.l_overlay ? configs.lb_opacity : '1'});/*透明度を指定しないと効かない*/
  1427.             mask-position: 0 100%;/*フッタが見やすいように下側だけを透過させる*/
  1428.             -webkit-mask-position: 0 100%;/*まだ-webkit取れない*/
  1429.           }
  1430.           [data-selector="commentPane"],
  1431.           [data-selector="commentPane"] *,
  1432.           [data-selector="commentPane"] *:hover{
  1433.             color: rgba(255,255,255,${configs.l_overlay ? configs.lc_opacity : 1}) !important;
  1434.             background: transparent;
  1435.           }
  1436.           /* コメントペインの統一フォントサイズ */
  1437.           [data-selector="commentPane"] *{
  1438.             font-size: ${configs.lc_fontsize}vh;
  1439.           }
  1440.           /* コメント投稿フォーム*/
  1441.           [class*="-comment-SnackBar"]/*投稿失敗時などの案内*/{
  1442.             pointer-events: none;/*なぜか入力欄を邪魔してしまうので*/
  1443.           }
  1444.           [data-selector="commentForm"],
  1445.           [data-selector="commentForm"] */*リセット*/{
  1446.             padding: 0;
  1447.             margin: 0;
  1448.           }
  1449.           [data-selector="commentForm"]{
  1450.             width: auto;
  1451.             padding: 0 .75vw;
  1452.             z-index: 10;/*新着コメントに隠れるバグを回避(公式もおかしい)*/
  1453.           }
  1454.           [data-selector="commentForm"] [class*="textarea-wrapper"]/*textareaの親*/{
  1455.             background: rgba(32,32,32,${configs.l_overlay ? configs.lb_opacity : 1});
  1456.             border-radius: .2vw;
  1457.             padding: .5vw;
  1458.             margin: .75vw 0;
  1459.           }
  1460.           [data-selector="commentForm"] textarea,
  1461.           [data-selector="commentForm"] textarea + div/*textareaの分身*/{
  1462.             width: calc(${configs.l_width}vw - 2.5vw);/*公式の指定を上書き*/
  1463.           }
  1464.           [data-selector="commentForm"] textarea + div > span:nth-child(2)/*文字数制限を超過した文字*/{
  1465.             border-bottom: 1px solid red;
  1466.           }
  1467.           [data-selector="commentForm"] [class*="twitter-wrapper"]/*(Twitter)連携する/連携中(バルーン含む)*/{
  1468.             width: 100%;
  1469.             padding-bottom: 1vw;
  1470.           }
  1471.           [data-selector="commentForm"] [class*="twitter-wrapper"] [class*="twitter-button"]/*(Twitter)連携する/連携中ボタン*/{
  1472.             width: calc(100% - 1vw);
  1473.             border-radius: .2vw;
  1474.             padding: 0 .5vw;
  1475.             height: ${configs.lc_fontsize * 2}vh;
  1476.             line-height: ${configs.lc_fontsize * 2}vh;
  1477.             overflow: hidden;
  1478.           }
  1479.           [data-selector="commentForm"] [class*="twitter-wrapper"] [class*="twitter-button--active"]/*(Twitter)連携中ボタン*/{
  1480.             background: rgba(80,163,225,${configs.l_overlay ? configs.lb_opacityHover : 1});
  1481.           }
  1482.           [data-selector="commentForm"] [class*="twitter-wrapper"] [class*="twitter-icon"]/*(Twitter)鳥アイコン*/{
  1483.             width: ${configs.lc_fontsize * (17/13)}vh;
  1484.             height: ${configs.lc_fontsize}vh;
  1485.             margin-right: 0.2vw;
  1486.           }
  1487.           [data-selector="commentForm"] [class*="CommentForm__etc-modules"] [class*="CommentForm__count"]/*残り文字数*/{
  1488.             padding: .5vw;
  1489.           }
  1490.           [data-selector="commentForm"] [class*="CommentForm__etc-modules"] [class*="post-button"]/*投稿する*/{
  1491.             border-radius: .2vw;
  1492.             padding: 0 .5vw;
  1493.             height: ${configs.lc_fontsize * 2}vh;
  1494.             line-height: ${configs.lc_fontsize * 2}vh;
  1495.             overflow: hidden;
  1496.             background: rgba(81,195,0,${configs.l_overlay ? configs.lb_opacityHover : 1});
  1497.           }
  1498.           [data-selector="commentForm"] [class*="twitter-balloon"]/*(Twitterアカウントバルーン)*/{
  1499.             border: 1px solid black;
  1500.             border-radius: .2vw;
  1501.             background: rgba(0,0,0,${configs.lb_opacityHover});
  1502.             width: calc(100% - 1.5vw);
  1503.             padding: .5em;
  1504.             top: .75vw;
  1505.             opacity: 0;/*transitionさせたいので*/
  1506.             display: block;/*transitionさせたいので*/
  1507.             pointer-events: none;/*transitionさせたいので*/
  1508.             transition: 500ms ease;
  1509.           }
  1510.           [data-selector="commentForm"] [class*="twitter-balloon--show"]/*(Twitterアカウントバルーン表示中)*/{
  1511.             opacity: 1;
  1512.             pointer-events: auto;
  1513.           }
  1514.           [data-selector="commentForm"] [class*="CommentForm__twitter-account"] > div:first-child > div/*アカウントアイコンの親*/{
  1515.             margin: .1vw;
  1516.           }
  1517.           [data-selector="commentForm"] [class*="CommentForm__twitter-account"] > div:first-child > div/*アカウントアイコンの親*/,
  1518.           [data-selector="commentForm"] [class*="CommentForm__twitter-profile-thumbnail"]/*アカウントアイコン*/{
  1519.             width: ${configs.lc_fontsize * 3}vh !important;
  1520.             height: ${configs.lc_fontsize * 3}vh !important;
  1521.             border-radius: .2vw;
  1522.           }
  1523.           [data-selector="commentForm"] [class*="CommentForm__twitter-account"] > div:last-child/*アカウント情報*/{
  1524.             line-height: ${configs.lc_fontsize * 3/2}vh;
  1525.             padding: .1vw .5vw;
  1526.             bottom: 0;
  1527.           }
  1528.           [data-selector="commentForm"] [class*="CommentForm__twitter-logout"]/*ログアウト*/{
  1529.             padding: .1vw .2vw;
  1530.             position: absolute;
  1531.             bottom: 0;
  1532.             right: 0;
  1533.           }
  1534.           /* コメント投稿フォームの表示制御 */
  1535.           [data-selector="commentPane"] [class*="CommentForm__etc-modules"]/*(Twitter)連携する/連携中・文字数・投稿するボタン*/{
  1536.             transition: height 500ms ease;
  1537.             height: 0;
  1538.             overflow: hidden;
  1539.           }
  1540.           [data-selector="commentPane"].active [class*="CommentForm__etc-modules"]/*(Twitter)連携する/連携中・文字数・投稿するボタン*/{
  1541.             height: calc(${configs.lc_fontsize * 1.5}vh + 1vw);
  1542.           }
  1543.           /* 新着コメント表示ボタン */
  1544.           [data-selector="commentPane"] > div > button/*セレクタ付与前から適用したい*/{
  1545.             height: 0;/*デフォルトで非表示*/
  1546.           }
  1547.           [data-selector="newCommentsButton"]{
  1548.             background: rgba(81,195,0,${configs.l_overlay ? configs.lb_opacityHover : 1}) !important;
  1549.             border: none;
  1550.             width: auto;
  1551.             min-width: 60%;
  1552.             margin: 0 auto;
  1553.             padding: 0 .5em;
  1554.             line-height: 3em;
  1555.             overflow: hidden !important;
  1556.             transition: height 500ms ease;
  1557.           }
  1558.           [data-selector="newCommentsButton"].shown{
  1559.             height: 3em;
  1560.           }
  1561.           [data-selector="newCommentsButton"]:hover{
  1562.             opacity: .75;
  1563.           }
  1564.           /* 新着コメントのスライドアップ */
  1565.           [data-selector="comment"]{
  1566.             transition: background 1000ms;
  1567.             animation: none !important;/*公式のハイライト処理を回避*/
  1568.           }
  1569.           [data-selector="comment"][data-new="true"]{
  1570.             background: rgba(255,255,255,.125);
  1571.             transition: background 0ms;
  1572.           }
  1573.           html:not(.active) [data-selector="commentPane"]:not(:hover) [data-selector="board"] > div{
  1574.             ${configs.l_fix ? '' : 'transition: none !important;'}/*画面外に隠れてるときはCPU負荷を下げる*/
  1575.           }
  1576.           /* コメント一覧 */
  1577.           /* (セレクタがNGワード登録フォームと合致しないように気を付ける) */
  1578.           [data-selector="board"] */*リセット*/{
  1579.             padding: 0;
  1580.             margin: 0;
  1581.           }
  1582.           [data-selector="board"] > div > span/*「まだ投稿がありません」のあやうい判定*/{
  1583.             margin-left: 20%;
  1584.             display: block;
  1585.           }
  1586.           [data-selector="comment"]{
  1587.             padding: 0 .75vw;
  1588.           }
  1589.           [data-selector="comment"] > div{
  1590.             flex-wrap: wrap;/*NGワード登録フォームの配置用*/
  1591.           }
  1592.           [data-selector="comment"]:not(.blockform) > div[class*=" "]/*自分が投稿したコメントのあやうい判定*/{
  1593.             background: rgba(255,255,255,.125) !important;
  1594.             padding: 0 .75vw;/*hack*/
  1595.             margin: 0 -.75vw;
  1596.           }
  1597.           [data-selector="board"] div:not([id]) > p/*コメント*/,
  1598.           [data-selector="board"] div:not([id]) > p + div/*経過時間・ブロックボタン*/{
  1599.             margin: ${configs.lc_fontsize * (configs.lc_margin - configs.lc_linemargin) / 2}vh 0;
  1600.             line-height: ${1 + configs.lc_linemargin};
  1601.           }
  1602.           [data-selector="board"] div:not([id]) > p/*コメント*/{
  1603.             word-wrap: break-word;
  1604.           }
  1605.           [data-selector="board"] div:not([id]) > p + div/*経過時間・ブロックボタン*/{
  1606.             display: ${(configs.l_showtime) ? 'block' : 'none'};
  1607.             filter: opacity(75%);
  1608.             width: 4em;/*00秒前*/
  1609.             white-space: nowrap;
  1610.           }
  1611.           [data-selector="board"] div:not([id]) > p + div > button/*ブロックボタン*/{
  1612.             padding: ${configs.lc_margin / 2}em  ${configs.lc_margin}em;
  1613.             margin: -${configs.lc_margin / 2}em -${configs.lc_margin}em;
  1614.           }
  1615.           [data-selector="board"] div:not([id]) > p + div > button/*ブロックボタン*/ > svg{
  1616.             width: ${configs.lc_fontsize}vh;
  1617.             max-width: ${configs.lc_fontsize}vh;/*max指定しておけばword-break-allしなくてすむ*/
  1618.             height: ${configs.lc_fontsize}vh;
  1619.           }
  1620.           /* アベマ公式ブロック */
  1621.           [data-selector="comment"]{
  1622.             cursor: pointer;
  1623.           }
  1624.           [data-selector="comment"] > div{
  1625.             background: transparent !important;
  1626.           }
  1627.           [data-selector="comment"].blockform{
  1628.             background: rgba(255,255,255,.25);
  1629.             border-bottom: 1px solid transparent;/*マージンの相殺を回避する*/
  1630.           }
  1631.           [data-selector="comment"] + form{
  1632.             background: rgba(255,255,255,.25) !important;
  1633.             height: 0;
  1634.             padding: 0 .75vw;
  1635.             overflow: hidden;
  1636.             transition: height 500ms ease;
  1637.           }
  1638.           [data-selector="comment"].blockform + form{
  1639.             height: calc(${configs.lc_fontsize * 2 + configs.lc_fontsize * (configs.lc_margin - configs.lc_linemargin) * 1.5}vh + .5em + .75vw);/*アニメーションのためにキッチリ計算*/
  1640.           }
  1641.           [data-selector="comment"] + form > div:first-child > *{
  1642.             white-space: nowrap;
  1643.             overflow: hidden;
  1644.             margin: 0 0 ${configs.lc_fontsize * (configs.lc_margin - configs.lc_linemargin) / 2}vh;
  1645.           }
  1646.           [data-selector="comment"] + form > div:first-child > p/*ブロックします*/{
  1647.             flex: 1;
  1648.           }
  1649.           [data-selector="comment"] + form > div:first-child > button/*キャンセル*/{
  1650.             text-align: right;
  1651.             width: 5em;
  1652.           }
  1653.           [data-selector="comment"] + form > div:last-child{
  1654.             margin-bottom: .75vw;
  1655.           }
  1656.           [data-selector="comment"] + form > div:last-child > div/*select*/{
  1657.             height: auto;
  1658.           }
  1659.           [data-selector="comment"] + form > div:last-child > div > span/*つまみ*/{
  1660.             right: .5em;
  1661.             top: calc(${configs.lc_fontsize / 2 + configs.lc_fontsize * (configs.lc_margin - configs.lc_linemargin) / 2}vh - .325em);
  1662.             border-width: 0.5em;
  1663.             border-top-width: .75em;
  1664.           }
  1665.           [data-selector="comment"] + form > div:last-child > div > select{
  1666.             border-radius: .2em 0 0 .2em;
  1667.             padding: .25em .125em;
  1668.             height: auto;
  1669.             border: none;
  1670.           }
  1671.           [data-selector="comment"] + form > div:last-child > div > select > option{
  1672.             padding: 0;
  1673.             margin: ${configs.lc_fontsize * (configs.lc_margin - configs.lc_linemargin) / 2}vh 0;
  1674.           }
  1675.           [data-selector="comment"] + form > div:last-child > button/*ブロック*/{
  1676.             background: #f0163a;
  1677.             border-radius: 0 .2em .2em 0;
  1678.             padding: 0 1em;
  1679.           }
  1680.           [data-selector="comment"] + form > div:last-child > button:hover/*ブロック*/{
  1681.             background: #bb122e;
  1682.           }
  1683.           [data-selector="comment"] + form > div:last-child > button > span{
  1684.             margin: ${configs.lc_fontsize * (configs.lc_margin - configs.lc_linemargin) / 2}vh 0;
  1685.             line-height: 1.5;
  1686.           }
  1687.           [data-selector="board"] div:not([id]) + form select,
  1688.           [data-selector="board"] div:not([id]) + form select > option{
  1689.             color: black !important;
  1690.             background: white !important;
  1691.           }
  1692.           /* コメント一覧のスクロールバー */
  1693.           [data-selector="commentPane"] > div > div{
  1694.             overflow-y: scroll;
  1695.             margin-right: -${getScrollbarWidth()}px;/*スクロールバーを隠す*/
  1696.             transition: margin-right 0ms;
  1697.           }
  1698.           /* 上下ナビゲーションの表示非表示 */
  1699.           [data-selector="header"]{
  1700.             background: transparent;/*hover用paddingを持たせたいのでbackgroundはdivに移譲*/
  1701.             min-width: auto;/*アベマの謎指定を解除*/
  1702.             height: auto;
  1703.             padding: 0 0 ${configs.header_height}px;
  1704.             transform: translateY(calc(-100% + ${configs.header_height}px)) !important;/*隠れているときもマウスオーバー領域を確保する*/
  1705.             visibility: visible !important;
  1706.             z-index: ${configs.header_zIndex};
  1707.             transition: ${configs.nav_transitionDelay};
  1708.           }
  1709.           [data-selector="header"] > *:first-child{
  1710.             padding-left: 16px;
  1711.           }
  1712.           [data-selector="header"] > *:last-child{
  1713.             padding-right: 16px;
  1714.           }
  1715.           html.active [data-selector="commentPane"] > div{
  1716.             padding-top: ${configs.header_height}px;/*右コメント一覧を映像に重ねたせいで上部ナビゲーションと重なるのを避ける*/
  1717.           }
  1718.           [data-selector="footer"]{
  1719.             transform: translateY(calc(100% - ${configs.footer_height}px));/*隠れているときもマウスオーバー領域を確保する*/
  1720.             padding-top: ${configs.footer_height}px;
  1721.             z-index: ${configs.footer_zIndex};
  1722.             visibility: visible !important;
  1723.             transition: ${configs.nav_transitionDelay};
  1724.           }
  1725.           html:not(.active) [data-selector="footer"]:not(:hover) > div > *{
  1726.             bottom: 0;/*フルスクリーンボタンと音量ボタンが突然消えないようにアベマが指定すべき値*/
  1727.           }
  1728.           html.click [data-selector="header"],
  1729.           html.click [data-selector="footer"]{
  1730.             transition: ${configs.nav_transition};
  1731.           }
  1732.           ${(configs.n_clickonly) ? '' : 'dummy'} [data-selector="header"]:hover,
  1733.           html.active [data-selector="header"]{
  1734.             padding-bottom: ${configs.header_height * (1/2)}px;
  1735.             z-index: 11;
  1736.           }
  1737.           ${(configs.n_clickonly) ? '' : 'dummy'} [data-selector="footer"]:hover,
  1738.           html.active [data-selector="footer"]{
  1739.             padding-top: ${configs.footer_height * (1/2)}px;
  1740.             z-index: ${configs.footerHover_zIndex};/*コメントペインに勝たなければならない*/
  1741.           }
  1742.           ${(configs.n_clickonly) ? '' : 'dummy'} [data-selector="header"]:hover,
  1743.           html.active [data-selector="header"],
  1744.           ${(configs.n_clickonly) ? '' : 'dummy'} [data-selector="footer"]:hover,
  1745.           html.active [data-selector="footer"]{
  1746.             transform: translateY(0%) !important;
  1747.           }
  1748.           html.active [data-selector="header"],
  1749.           html.active [data-selector="footer"]{
  1750.             padding-top: 0;
  1751.             padding-bottom: 0;
  1752.           }
  1753.           [data-selector="footer"] > div > div:last-child > div:first-child:hover{/*ここにだけ追加して背景色を指定してるのはアベマのミスだろう*/
  1754.             background: transparent;
  1755.           }
  1756.           /* 上下ナビゲーションの透過 */
  1757.           [data-selector="header"] > *,/*上部(hover用padding付き透明ラッパに包みたいのでdivに適用)*/
  1758.           [data-selector="header"] button + div,/*メニュードロップダウン*/
  1759.           [data-selector="footer"] > div > div:last-child/*下部*/{
  1760.             background: rgba(0,0,0,${configs.n_opacity}) !important;
  1761.             transition: 500ms ease;
  1762.           }
  1763.           [data-selector="header"]:hover > *,
  1764.           [data-selector="header"] button + div:hover,
  1765.           [data-selector="footer"] > div > div:last-child:hover{
  1766.             background: rgba(0,0,0,${configs.n_opacityHover}) !important;
  1767.           }
  1768.           [data-selector="footer"] > div > div:last-child{
  1769.             border-top: none;
  1770.           }
  1771.           [data-selector="programButton"] div{/*チャンネル画像の背景が透過されていないアベマの仕様(たぶんミス)に対応*/
  1772.             background: transparent !important;
  1773.           }
  1774.           /* 通知を受け取るボタン・視聴数・ローディングの表示非表示 */
  1775.           [class$="-AdReservationButton"]/*デフォルト(隠れているとき)*/{
  1776.             transition: ${configs.nav_transition};/*常に遅延なし*/
  1777.             right: 100vw;/*左側に変更*/
  1778.             bottom: ${configs.footer_height}px !important;
  1779.             transform: translate(-100%, 0);
  1780.             border-left: none;
  1781.             border-right: 1px solid #444;
  1782.             border-radius: 0 4px 4px 0;
  1783.           }
  1784.           [class$="-AdReservationButton"][aria-hidden="false"]/*出てきたとき*/{
  1785.             transform: translate(100%, 0);
  1786.           }
  1787.           [data-selector="viewCounter"]{
  1788.             position: absolute;
  1789.             top: ${configs.header_height}px;
  1790.             right: 0%;
  1791.             transform: translate(100%, .75vw);
  1792.             visibility: visible;
  1793.             transition: ${configs.nav_transition};/*常に遅延なし*/
  1794.           }
  1795.           [data-selector="viewCounter"]:hover,/*コメント一覧がない場合*/
  1796.           html.active [data-selector="viewCounter"]{
  1797.             transform: translate(-.75vw, .75vw);
  1798.           }
  1799.           html.comment [data-selector="viewCounter"]:hover,/*コメント一覧が表示されている場合*/
  1800.           html.comment.active [data-selector="viewCounter"]{
  1801.             right: ${configs.l_overlay ? configs.l_width : '0'}%;
  1802.           }
  1803.           [data-selector="loading"]{
  1804.             margin-right: 16px;/*デフォルトの位置を再現*/
  1805.             transform: translateY(${configs.footer_height}px);
  1806.           }
  1807.           /* 通知を受け取るボタン・視聴数・ローディングの透過 */
  1808.           [class$="-AdReservationButton"],
  1809.           [data-selector="viewCounter"]{
  1810.             background: rgba(0,0,0,${configs.n_opacity}) !important;
  1811.             transition: 500ms ease;
  1812.             pointer-events: auto;
  1813.           }
  1814.           [class$="-AdReservationButton"]:hover,
  1815.           [data-selector="viewCounter"]:hover{
  1816.             background: rgba(0,0,0,${configs.n_opacityHover}) !important;
  1817.           }
  1818.           [data-selector="screen"]/*視聴数をマウスオーバーにちゃんと反応させる工夫*/{
  1819.             z-index: ${configs.screen_zIndex};
  1820.             pointer-events: none;
  1821.           }
  1822.           [data-selector="screen"] button{/*補完*/
  1823.             pointer-events: auto;
  1824.           }
  1825.           /* 番組アンケートの透過 */
  1826.           [data-selector="enquete"] > div{
  1827.             background: rgba(255,255,255,${configs.n_opacityHover}) !important;
  1828.           }
  1829.           [data-selector="enquete"] > div button{
  1830.             background: rgba(255,255,255,${configs.n_opacityHover}) !important;
  1831.           }
  1832.           /* 裏番組一覧の表示非表示 */
  1833.           [data-selector="channelPane"]{
  1834.             z-index: ${configs.channelPane_zIndex};
  1835.             transform: translateX(100%);
  1836.           }
  1837.           html.channel [data-selector="channelPane"]{
  1838.             transform: translateX(0);
  1839.           }
  1840.           html:not(.channel) [data-selector="channelPane"] [role="progressbar"] *{
  1841.             animation: none;/*画面外のローディングアニメーションにCPUを消費するアベマの悲しい仕様を上書き*/
  1842.           }
  1843.           /* 裏番組一覧の透過 */
  1844.           [data-selector="channelPane"] > div{
  1845.             background: rgba(0,0,0,${configs.n_opacityHover});
  1846.           }
  1847.           [data-selector="channelPane"] > div > a{
  1848.             background: transparent;
  1849.           }
  1850.           [data-selector="channelPane"] > div > a:hover{
  1851.             background: rgba(34,34,34,${configs.n_opacityHover});
  1852.           }
  1853.           [data-selector="channelPane"] *{
  1854.             color: white;
  1855.           }
  1856.           /* 番組情報の表示非表示 */
  1857.           [data-selector="programPane"]{
  1858.             z-index: ${configs.programPane_zIndex};
  1859.             transform: translateX(100%);
  1860.           }
  1861.           html.program [data-selector="programPane"]{
  1862.             transform: translateX(0);
  1863.           }
  1864.           /* 番組情報の透過 */
  1865.           [data-selector="programPane"]{
  1866.             color: white;
  1867.             background: rgba(0,0,0,${configs.n_opacityHover});
  1868.             transition: 500ms ease;
  1869.           }
  1870.           [data-selector="programPane"] svg > use:not([*|href*="_rect.svg"]){/*rectは赤背景*/
  1871.             fill: white;
  1872.           }
  1873.           /* ボタン共通 */
  1874.           [data-selector="channelButtons"] button *,
  1875.           [data-selector="commentButton"] *,
  1876.           [data-selector="programButton"] *,
  1877.           [data-selector="fullscreenButton"] *{
  1878.             pointer-events: none;/*クリックイベント発生箇所を親のボタン要素に統一する*/
  1879.           }
  1880.           #${SCRIPTNAME}-ng-button svg,
  1881.           #${SCRIPTNAME}-config-button svg{
  1882.             fill: white;
  1883.             vertical-align: middle;
  1884.           }
  1885.           [data-selector="footer"] > div > button/*各ボタン*/,
  1886.           [data-selector="footer"] > div > [data-selector="VolumeController"] button/*ボリュームボタン*/{
  1887.             padding: 15px 15px 15px;/*クリック判定範囲を広くしてあげる*/
  1888.             margin: -15px -15px -15px;
  1889.             box-sizing: content-box;
  1890.             filter: drop-shadow(0 0 2.5px rgba(0,0,0,.75));/*白い背景で見にくいアベマの悲しい仕様を回避*/
  1891.           }
  1892.           [data-selector="footer"] > div > button/*各ボタン*/,
  1893.           [data-selector="footer"] > div > [data-selector="VolumeController"]/*ボリュームボタンセット*/{
  1894.             transition: bottom ${configs.nav_transitionDelay}, opacity ${configs.nav_transition};
  1895.           }
  1896.           html.click [data-selector="footer"] > div > button/*各ボタン*/,
  1897.           html.click [data-selector="footer"] > div > [data-selector="VolumeController"]/*ボリュームボタンセット*/{
  1898.             transition: ${configs.nav_transition};
  1899.           }
  1900.           /* 裏番組一覧・チャンネル切り替えボタン */
  1901.           [data-selector="channelButtons"]{
  1902.             filter: drop-shadow(0 0 2.5px rgba(0,0,0,.75));/*白い背景で見にくいアベマの悲しい仕様を回避*/
  1903.             transform: translate(calc(100% - ${configs.channelButtons_size}px), -50%);
  1904.             padding: ${configs.channelButtons_size * (1/2)}px 0 ${configs.channelButtons_size * (1/2)}px ${configs.channelButtons_size}px;/*隠れているときもサイズ3/4まではマウスオーバー領域を確保する*/
  1905.             transition: ${configs.nav_transitionDelay};/*アベマの指定漏れ？*/
  1906.             z-index: ${configs.channelButtons_zIndex1};/*フッタ操作を邪魔しない*/
  1907.           }
  1908.           [data-selector="channelButtons"] button{
  1909.             background: rgba(0,0,0,${configs.l_overlay ? configs.n_opacity : configs.n_opacityHover}) !important;
  1910.             transition: 500ms ease;
  1911.           }
  1912.           [data-selector="channelButtons"] button:hover{
  1913.             background: rgba(64,64,64,${configs.l_overlay ? configs.n_opacityHover : '1'}) !important;
  1914.           }
  1915.           html.click [data-selector="channelButtons"]{
  1916.             transition: ${configs.nav_transition};
  1917.           }
  1918.           [data-selector="channelButtons"]:hover,
  1919.           html.active [data-selector="channelButtons"]{
  1920.             padding: ${configs.channelButtons_size * (1/2)}px 0 ${configs.channelButtons_size * (1/2)}px ${configs.channelButtons_size * (1/2)}px;
  1921.             transform: translate(0%, -50%);
  1922.           }
  1923.           html.ng [data-selector="channelButtons"]/*NGワード登録中は控えて出しゃばらない*/{
  1924.             padding: 0;
  1925.             transform: translate(100%, -50%);
  1926.           }
  1927.           html.channel [data-selector="channelButtons"],
  1928.           html.program [data-selector="channelButtons"]{
  1929.             z-index: ${configs.channelButtons_zIndex2};/*フッタ操作中ではないはずなので*/
  1930.           }
  1931.           /* 登録NGワード一覧ボタン */
  1932.           #${SCRIPTNAME}-ng-button{
  1933.             right: 170px;
  1934.           }
  1935.           /* 設定ボタン */
  1936.           #${SCRIPTNAME}-config-button{
  1937.             right: 120px;
  1938.           }
  1939.           button[aria-label="フルスクリーン解除"] + div/*フルスクリーン時のボリュームUIセット*/{
  1940.             pointer-events: auto;
  1941.           }
  1942.           /* フルスクリーンボタン */
  1943.           [data-selector="fullscreenButton"]{
  1944.             right: 70px;
  1945.           }
  1946.           [data-selector="fullscreenButton"][data-icon="mini_screen"] use[*|href^="/images/icons/full_screen.svg"],
  1947.           [data-selector="fullscreenButton"][data-icon="full_screen"] use[*|href^="/images/icons/mini_screen.svg"]{
  1948.             display: none;
  1949.           }
  1950.           /* ボリュームボタン */
  1951.           [data-selector="VolumeController"]{
  1952.             right: 20px;
  1953.           }
  1954.           [data-selector="VolumeController"] button > svg{
  1955.             vertical-align: bottom;/*アベマのわずかなズレを修正*/
  1956.             transform: translateX(3px);/*アイコンの重心のズレを修正*/
  1957.           }
  1958.           [data-selector="VolumeController"] [class$="slider-container"] > div::before/*スライダ可動レール*/{
  1959.             content: "";
  1960.             position: absolute;
  1961.             width: calc(15px + 100% + 15px);/*クリック判定範囲を広くしてあげる*/
  1962.             height: calc(15px + 100% + 5px);/*クリック判定範囲を広くしてあげる*/
  1963.             left: -15px;
  1964.             top: -15px;
  1965.           }
  1966.           /* コメントボタン */
  1967.           [data-selector="commentButton"]{
  1968.             transition: 500ms ease;/*アベマの指定漏れ？*/
  1969.           }
  1970.           html.comment.active [data-selector="commentButton"] svg,
  1971.           html.comment [data-selector="footer"]:hover [data-selector="commentButton"] svg,
  1972.           [data-selector="commentPane"].keep [data-selector="commentButton"] svg{
  1973.             animation: spin 1s infinite alternate cubic-bezier(.45,.05,.55,.95)/*sin*/;
  1974.           }
  1975.           @keyframes spin{/*CPU食うので注意*/
  1976.             from{
  1977.               transform: scaleX(1);
  1978.             }
  1979.             to{
  1980.               transform: scaleX(-1);
  1981.             }
  1982.           }
  1983.           /* NGワード登録フォーム */
  1984.           #${SCRIPTNAME}-ng-form{
  1985.             border-radius: .5vw;
  1986.             margin-bottom: .75vw;/*お試しNGワードでハイライトされた場合に内包されるように*/
  1987.             width: 100%;
  1988.             background: rgba(32,32,32,${configs.l_overlay ? configs.lb_opacity : 1});
  1989.             height: calc(${configs.lc_fontsize}vh + 2 * ${configs.lc_fontsize * 2}vh + 4 * .5vw);/*アニメーションのためにキッチリ計算*/
  1990.             overflow: hidden;
  1991.             transition: 500ms ease;
  1992.           }
  1993.           #${SCRIPTNAME}-ng-form.hidden{
  1994.             height: 0;
  1995.             margin-bottom: 0;
  1996.           }
  1997.           #${SCRIPTNAME}-ng-form h1,
  1998.           #${SCRIPTNAME}-ng-form p{
  1999.             color: white;
  2000.             width: auto;
  2001.             margin: .5vw;
  2002.             display: flex;
  2003.           }
  2004.           #${SCRIPTNAME}-ng-form h1{
  2005.             line-height: ${configs.lc_fontsize}vh;
  2006.           }
  2007.           #${SCRIPTNAME}-ng-form p{
  2008.             line-height: ${configs.lc_fontsize * 2}vh;
  2009.           }
  2010.           #${SCRIPTNAME}-ng-form h1 span{
  2011.             flex-grow: 1;
  2012.           }
  2013.           #${SCRIPTNAME}-ng-form h1 button.list{
  2014.             width: ${configs.lc_fontsize * 2}vh;
  2015.             padding: ${configs.lc_fontsize / 2}vh 0;
  2016.             margin: -${configs.lc_fontsize / 2}vh 0;
  2017.           }
  2018.           #${SCRIPTNAME}-ng-form h1 button.list svg{
  2019.             vertical-align: top;
  2020.             width: ${configs.lc_fontsize}vh;
  2021.             height: ${configs.lc_fontsize}vh;
  2022.             fill: white;
  2023.           }
  2024.           #${SCRIPTNAME}-ng-form button.help{
  2025.             width: ${configs.lc_fontsize * 2}vh;
  2026.             margin-left: .5vw;
  2027.             background: rgba(0,0,0,${configs.lb_opacity});
  2028.             border-radius: .25vw;
  2029.           }
  2030.           #${SCRIPTNAME}-ng-form p.word input{
  2031.             color: white;
  2032.             border: none;
  2033.             border-radius: .25vw;
  2034.             background: rgba(0,0,0,${configs.lb_opacity});
  2035.             height: ${configs.lc_fontsize * 2}vh;
  2036.             padding: 0 .5vw;
  2037.             width: 50%;
  2038.             flex-grow: 1;
  2039.           }
  2040.           #${SCRIPTNAME}-ng-form p.type{
  2041.             border-radius: .25vw;
  2042.             overflow: hidden;
  2043.             display: flex;
  2044.           }
  2045.           #${SCRIPTNAME}-ng-form p.type button{
  2046.             color: white;
  2047.             font-weight: bold;
  2048.             width: 100%;
  2049.             margin-left: 1px;
  2050.             flex-grow: 1;
  2051.             height: ${configs.lc_fontsize * 2}vh;
  2052.           }
  2053.           #${SCRIPTNAME}-ng-form p.type button.trial{
  2054.             margin-left: 0;
  2055.             background: rgba(255,224,32,${configs.l_overlay ? configs.lb_opacity : .5});
  2056.           }
  2057.           #${SCRIPTNAME}-ng-form p.type button.for24h,
  2058.           #${SCRIPTNAME}-ng-form p.type button.forever{
  2059.             background: rgba(255,32,32,${configs.l_overlay ? configs.lb_opacity : .5});
  2060.           }
  2061.           #${SCRIPTNAME}-ng-form p.type button.trial:hover,
  2062.           #${SCRIPTNAME}-ng-form p.type button.trial:focus{
  2063.             color: black;
  2064.             background: rgba(255,224,32,${configs.l_overlay ? configs.lb_opacityHover : 1});
  2065.           }
  2066.           #${SCRIPTNAME}-ng-form p.type button.for24h:hover,
  2067.           #${SCRIPTNAME}-ng-form p.type button.for24h:focus,
  2068.           #${SCRIPTNAME}-ng-form p.type button.forever:hover,
  2069.           #${SCRIPTNAME}-ng-form p.type button.forever:focus{
  2070.             background: rgba(255,32,32,${configs.l_overlay ? configs.lb_opacityHover : 1});
  2071.           }
  2072.           #${SCRIPTNAME}-ng-form h1 button.list:hover svg,
  2073.           #${SCRIPTNAME}-ng-form h1 button.list:focus svg,
  2074.           #${SCRIPTNAME}-ng-form p.word button.help:hover,
  2075.           #${SCRIPTNAME}-ng-form p.word button.help:focus{
  2076.             filter: brightness(.5);
  2077.           }
  2078.           /* NGワードコメント */
  2079.           [data-selector="comment"][data-ng-trial]{
  2080.             background: rgba(255,224,32,${configs.l_overlay ? configs.lb_opacityHover : .75});
  2081.             border-bottom: 1px solid transparent;/*マージンの相殺を回避する*/
  2082.             cursor: pointer;
  2083.           }
  2084.           [data-selector="comment"][data-ng-trial]:hover{
  2085.             background: rgba(255,224,32,${configs.l_overlay ? configs.lb_opacity : .5});
  2086.           }
  2087.           [data-selector="comment"][data-ng-trial] > *:first-child/*NGワード登録フォームや公式ブロックには適用しない*/{
  2088.             pointer-events: none;/*イベントはcommentで発生させる*/
  2089.           }
  2090.           [data-selector="comment"][data-ng-deleted]{
  2091.             display: none;
  2092.           }
  2093.           /* パネル共通 */
  2094.           #${SCRIPTNAME}-panels{
  2095.             position: absolute;
  2096.             width: 100%;
  2097.             height: 100%;
  2098.             top: 0;
  2099.             left: 0;
  2100.             overflow: hidden;
  2101.             pointer-events: none;
  2102.           }
  2103.           #${SCRIPTNAME}-panels div.panel{
  2104.             position: absolute;
  2105.             max-height: 100%;/*小さなウィンドウに対応*/
  2106.             overflow: auto;
  2107.             left: 50%;
  2108.             bottom: 50%;
  2109.             transform: translate(-50%, 50%);
  2110.             z-index: ${configs.panel_zIndex};
  2111.             background: rgba(0,0,0,.75);
  2112.             transition: ${configs.nav_transition};
  2113.             padding: 5px 0;
  2114.             pointer-events: auto;
  2115.           }
  2116.           #${SCRIPTNAME}-panels div.panel.hidden{
  2117.             bottom: 0;
  2118.             transform: translate(-50%, 100%) !important;
  2119.           }
  2120.           #${SCRIPTNAME}-panels h1,
  2121.           #${SCRIPTNAME}-panels h2,
  2122.           #${SCRIPTNAME}-panels h3,
  2123.           #${SCRIPTNAME}-panels h4,
  2124.           #${SCRIPTNAME}-panels legend,
  2125.           #${SCRIPTNAME}-panels li,
  2126.           #${SCRIPTNAME}-panels dt,
  2127.           #${SCRIPTNAME}-panels dd,
  2128.           #${SCRIPTNAME}-panels code,
  2129.           #${SCRIPTNAME}-panels p{
  2130.             color: rgba(255,255,255,1);
  2131.             font-size: 14px;
  2132.             padding: 2px 10px;
  2133.             line-height: 1.4;
  2134.           }
  2135.           #${SCRIPTNAME}-panels header{
  2136.             display: flex;
  2137.           }
  2138.           #${SCRIPTNAME}-panels header h1{
  2139.             flex: 1;
  2140.           }
  2141.           #${SCRIPTNAME}-panels div.panel > p.buttons{
  2142.             text-align: right;
  2143.             padding: 5px 10px;
  2144.           }
  2145.           #${SCRIPTNAME}-panels div.panel > p.buttons button{
  2146.             width: 120px;
  2147.             padding: 5px 10px;
  2148.             margin-left: 10px;
  2149.             border-radius: 5px;
  2150.             color: rgba(255,255,255,1);
  2151.             background: rgba(64,64,64,1);
  2152.             border: 1px solid rgba(255,255,255,1);
  2153.           }
  2154.           #${SCRIPTNAME}-panels div.panel > p.buttons button.primary{
  2155.             font-weight: bold;
  2156.             background: rgba(0,0,0,1);
  2157.           }
  2158.           #${SCRIPTNAME}-panels div.panel > p.buttons button:hover,
  2159.           #${SCRIPTNAME}-panels div.panel > p.buttons button:focus{
  2160.             background: rgba(128,128,128,.875);
  2161.           }
  2162.           #${SCRIPTNAME}-panels .template{
  2163.             display: none !important;
  2164.           }
  2165.           #${SCRIPTNAME}-panels[data-panels="2"] div.panel:nth-child(1){
  2166.             transform: translate(-100%, 50%);
  2167.           }
  2168.           #${SCRIPTNAME}-panels[data-panels="2"] div.panel:nth-child(2){
  2169.             transform: translate(0%, 50%);
  2170.           }
  2171.           #${SCRIPTNAME}-panels[data-panels="3"] div.panel:nth-child(1){
  2172.             transform: translate(-150%, 50%);
  2173.           }
  2174.           #${SCRIPTNAME}-panels[data-panels="3"] div.panel:nth-child(3){
  2175.             transform: translate(50%, 50%);
  2176.           }
  2177.           /* NGワード一覧 */
  2178.           #${SCRIPTNAME}-ng-list{
  2179.             width: 360px;
  2180.           }
  2181.           #${SCRIPTNAME}-ng-list button.help{
  2182.             color: white;
  2183.             width: 20px;
  2184.             background: rgba(0,0,0,.5);
  2185.             border-radius: 5px;
  2186.           }
  2187.           #${SCRIPTNAME}-ng-list button.help:hover,
  2188.           #${SCRIPTNAME}-ng-list button.help:focus{
  2189.             filter: brightness(.5);
  2190.           }
  2191.           #${SCRIPTNAME}-ng-list p.sort{
  2192.             width: 80%;
  2193.             height: 20px;
  2194.             padding: 0;
  2195.             margin: 5px auto;
  2196.             border-radius: 5px;
  2197.             overflow: hidden;
  2198.             display: flex;
  2199.           }
  2200.           #${SCRIPTNAME}-ng-list p.sort.disabled{
  2201.             filter: brightness(.5);
  2202.             pointer-events: none;
  2203.           }
  2204.           #${SCRIPTNAME}-ng-list p.sort input{
  2205.             display: none;
  2206.           }
  2207.           #${SCRIPTNAME}-ng-list p.sort label{
  2208.             color: white;
  2209.             background: rgba(128,128,128,.25);
  2210.             font-size: 10px;
  2211.             line-height: 20px;
  2212.             text-align: center;
  2213.             width: 100%;
  2214.             margin-left: 1px;
  2215.           }
  2216.           #${SCRIPTNAME}-ng-list p.sort label:first-of-type{
  2217.             margin-left: 0;
  2218.           }
  2219.           #${SCRIPTNAME}-ng-list p.sort input + label::after{
  2220.             font-size: 75%;
  2221.             vertical-align: top;
  2222.             content: " ▼";
  2223.           }
  2224.           #${SCRIPTNAME}-ng-list p.sort input.reverse + label::after{
  2225.             content: " ▲";
  2226.           }
  2227.           #${SCRIPTNAME}-ng-list p.sort input:checked + label,
  2228.           #${SCRIPTNAME}-ng-list p.sort label:hover,
  2229.           #${SCRIPTNAME}-ng-list p.sort label:focus{
  2230.             background: rgba(128,128,128,.75);
  2231.           }
  2232.           #${SCRIPTNAME}-ng-list ul{
  2233.             max-height: calc(${window.innerHeight}px - (5px + 24px + 30px + 42px + 5px) - 20px);
  2234.             overflow-y: auto;
  2235.           }
  2236.           #${SCRIPTNAME}-ng-list ul > li{
  2237.             padding: 2px 10px;
  2238.             display: flex;
  2239.           }
  2240.           #${SCRIPTNAME}-ng-list p.word,
  2241.           #${SCRIPTNAME}-ng-list p.words{
  2242.             padding: 0;
  2243.             flex: 1;
  2244.           }
  2245.           #${SCRIPTNAME}-ng-list p.word input,
  2246.           #${SCRIPTNAME}-ng-list p.words textarea{
  2247.             font-size: 12px;
  2248.             width: 100%;
  2249.           }
  2250.           #${SCRIPTNAME}-ng-list p.word input{
  2251.             height: 20px;
  2252.           }
  2253.           #${SCRIPTNAME}-ng-list p.words textarea{
  2254.             height: 40px;
  2255.             resize: vertical;
  2256.           }
  2257.           #${SCRIPTNAME}-ng-list p.type{
  2258.             height: 20px;
  2259.             border-radius: 5px;
  2260.             overflow: hidden;
  2261.             padding: 0;
  2262.             margin-left: 10px;
  2263.             flex: 1;
  2264.             display: flex;
  2265.           }
  2266.           #${SCRIPTNAME}-ng-list p.type input{
  2267.             display: none;
  2268.           }
  2269.           #${SCRIPTNAME}-ng-list p.type label{
  2270.             text-align: center;
  2271.             font-size: 10px;
  2272.             line-height: 20px;
  2273.             font-weight: bold;
  2274.             width: 100%;
  2275.             margin-left: 1px;
  2276.           }
  2277.           #${SCRIPTNAME}-ng-list p.type label.trial{
  2278.             margin-left: 0;
  2279.             background: rgba(255,224,32,.25);
  2280.           }
  2281.           #${SCRIPTNAME}-ng-list p.type label.for24h,
  2282.           #${SCRIPTNAME}-ng-list p.type label.forever{
  2283.             background: rgba(255,32,32,.25);
  2284.           }
  2285.           #${SCRIPTNAME}-ng-list p.type input:checked + label.trial,
  2286.           #${SCRIPTNAME}-ng-list p.type label.trial:hover,
  2287.           #${SCRIPTNAME}-ng-list p.type label.trial:focus{
  2288.             color: black;
  2289.             background: rgba(255,224,32,.75);
  2290.           }
  2291.           #${SCRIPTNAME}-ng-list p.type input:checked + label.for24h,
  2292.           #${SCRIPTNAME}-ng-list p.type label.for24h:hover,
  2293.           #${SCRIPTNAME}-ng-list p.type label.for24h:focus,
  2294.           #${SCRIPTNAME}-ng-list p.type input:checked + label.forever,
  2295.           #${SCRIPTNAME}-ng-list p.type label.forever:hover,
  2296.           #${SCRIPTNAME}-ng-list p.type label.forever:focus{
  2297.             background: rgba(255,32,32,.75);
  2298.           }
  2299.           #${SCRIPTNAME}-ng-list p.type label.remove{
  2300.             background: rgba(128,128,128,.25);
  2301.           }
  2302.           #${SCRIPTNAME}-ng-list p.type input:checked + label.remove,
  2303.           #${SCRIPTNAME}-ng-list p.type label.remove:hover,
  2304.           #${SCRIPTNAME}-ng-list p.type label.remove:focus{
  2305.             background: rgba(128,128,128,.75);
  2306.           }
  2307.           #${SCRIPTNAME}-ng-list li.add p.type label.remove{
  2308.             visibility: hidden;
  2309.           }
  2310.           #${SCRIPTNAME}-ng-list input + label{
  2311.             cursor: pointer;
  2312.           }
  2313.           /* NGヘルプパネル */
  2314.           #${SCRIPTNAME}-ng-help{
  2315.             width: 360px;
  2316.           }
  2317.           #${SCRIPTNAME}-ng-help h2{
  2318.             margin-top: 10px;
  2319.           }
  2320.           #${SCRIPTNAME}-ng-help dl{
  2321.             display: flex;
  2322.             flex-wrap: wrap;
  2323.           }
  2324.           #${SCRIPTNAME}-ng-help dl dt{
  2325.             width: 100px;
  2326.             margin: 2px 0;
  2327.             background: rgba(0,0,0,.5);
  2328.             border-radius: 5px;
  2329.           }
  2330.           #${SCRIPTNAME}-ng-help dl dt code{
  2331.             padding:0 5px;
  2332.           }
  2333.           #${SCRIPTNAME}-ng-help dl dd{
  2334.             width: 230px;
  2335.             margin: 2px 0 2px 10px;
  2336.           }
  2337.           /* 設定パネル */
  2338.           #${SCRIPTNAME}-config-panel{
  2339.             width: 360px;
  2340.           }
  2341.           #${SCRIPTNAME}-config-panel fieldset p{
  2342.             padding-left: calc(10px + 1em);
  2343.           }
  2344.           #${SCRIPTNAME}-config-panel fieldset p:hover{
  2345.             background: rgba(255,255,255,.25);
  2346.           }
  2347.           #${SCRIPTNAME}-config-panel label{
  2348.             display: block;
  2349.           }
  2350.           #${SCRIPTNAME}-config-panel input{
  2351.             width: 80px;
  2352.             height: 20px;
  2353.             position: absolute;
  2354.             right: 10px;
  2355.           }
  2356.           #${SCRIPTNAME}-config-panel input[type="text"]{
  2357.             width: 160px;
  2358.           }
  2359.           #${SCRIPTNAME}-config-panel input[type="text"]:invalid{
  2360.             border: 1px solid rgba(255, 0, 0, 1);
  2361.             background: rgba(255, 0, 0, .5);
  2362.           }
  2363.           #${SCRIPTNAME}-config-panel p.note{
  2364.             color: gray;
  2365.             font-size: 75%;
  2366.             width: 100%;
  2367.           }
  2368.         </style>
  2369.       `,
  2370.     },
  2371.   };
  2372.   class Storage{
  2373.     static key(key){
  2374.       return (SCRIPTNAME) ? (SCRIPTNAME + '-' + key) : key;
  2375.     }
  2376.     static save(key, value, expire = null){
  2377.       key = Storage.key(key);
  2378.       localStorage[key] = JSON.stringify({
  2379.         value: value,
  2380.         saved: Date.now(),
  2381.         expire: expire,
  2382.       });
  2383.     }
  2384.     static read(key){
  2385.       key = Storage.key(key);
  2386.       if(localStorage[key] === undefined) return undefined;
  2387.       let data = JSON.parse(localStorage[key]);
  2388.       if(data.value === undefined) return data;
  2389.       if(data.expire === undefined) return data;
  2390.       if(data.expire === null) return data.value;
  2391.       if(data.expire < Date.now()) return localStorage.removeItem(key);
  2392.       return data.value;
  2393.     }
  2394.     static delete(key){
  2395.       key = Storage.key(key);
  2396.       delete localStorage[key];
  2397.     }
  2398.     static saved(key){
  2399.       key = Storage.key(key);
  2400.       if(localStorage[key] === undefined) return undefined;
  2401.       let data = JSON.parse(localStorage[key]);
  2402.       if(data.saved) return data.saved;
  2403.       else return undefined;
  2404.     }
  2405.   }
  2406.   let $ = function(s){return document.querySelector(s)};
  2407.   let $$ = function(s){return document.querySelectorAll(s)};
  2408.   let animate = function(callback, ...params){requestAnimationFrame(() => requestAnimationFrame(() => callback(...params)))};
  2409.   let observe = function(element, callback, options = {childList: true, attributes: false, characterData: false}){
  2410.     let observer = new MutationObserver(callback.bind(element));
  2411.     observer.observe(element, options);
  2412.     return observer;
  2413.   };
  2414.   let createElement = function(html){
  2415.     let outer = document.createElement('div');
  2416.     outer.innerHTML = html;
  2417.     return outer.firstElementChild;
  2418.   };
  2419.   let getScrollbarWidth = function(){
  2420.     let div = document.createElement('div');
  2421.     div.textContent = 'dummy';
  2422.     document.body.appendChild(div);
  2423.     div.style.overflowY = 'scroll';
  2424.     let clientWidth = div.clientWidth;
  2425.     div.style.overflowY = 'hidden';
  2426.     let offsetWidth = div.offsetWidth;
  2427.     document.body.removeChild(div);
  2428.     return offsetWidth - clientWidth;
  2429.   };
  2430.   let normalize = function(string){
  2431.     return string.replace(/[！-～]/g, function(s){
  2432.       return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  2433.     }).replace(normalize.RE, function(s){
  2434.       return normalize.KANA[s];
  2435.     }).replace(/　/g, ' ').replace(/～/g, '〜');
  2436.   };
  2437.   normalize.KANA = {
  2438.     ｶﾞ:'ガ', ｷﾞ:'ギ', ｸﾞ:'グ', ｹﾞ:'ゲ', ｺﾞ: 'ゴ',
  2439.     ｻﾞ:'ザ', ｼﾞ:'ジ', ｽﾞ:'ズ', ｾﾞ:'ゼ', ｿﾞ: 'ゾ',
  2440.     ﾀﾞ:'ダ', ﾁﾞ:'ヂ', ﾂﾞ:'ヅ', ﾃﾞ:'デ', ﾄﾞ: 'ド',
  2441.     ﾊﾞ:'バ', ﾋﾞ:'ビ', ﾌﾞ:'ブ', ﾍﾞ:'ベ', ﾎﾞ: 'ボ',
  2442.     ﾊﾟ:'パ', ﾋﾟ:'ピ', ﾌﾟ:'プ', ﾍﾟ:'ペ', ﾎﾟ: 'ポ',
  2443.     ﾜﾞ:'ヷ', ｦﾞ:'ヺ', ｳﾞ:'ヴ',
  2444.     ｱ:'ア', ｲ:'イ', ｳ:'ウ', ｴ:'エ', ｵ:'オ',
  2445.     ｶ:'カ', ｷ:'キ', ｸ:'ク', ｹ:'ケ', ｺ:'コ',
  2446.     ｻ:'サ', ｼ:'シ', ｽ:'ス', ｾ:'セ', ｿ:'ソ',
  2447.     ﾀ:'タ', ﾁ:'チ', ﾂ:'ツ', ﾃ:'テ', ﾄ:'ト',
  2448.     ﾅ:'ナ', ﾆ:'ニ', ﾇ:'ヌ', ﾈ:'ネ', ﾉ:'ノ',
  2449.     ﾊ:'ハ', ﾋ:'ヒ', ﾌ:'フ', ﾍ:'ヘ', ﾎ:'ホ',
  2450.     ﾏ:'マ', ﾐ:'ミ', ﾑ:'ム', ﾒ:'メ', ﾓ:'モ',
  2451.     ﾔ:'ヤ', ﾕ:'ユ', ﾖ:'ヨ',
  2452.     ﾗ:'ラ', ﾘ:'リ', ﾙ:'ル', ﾚ:'レ', ﾛ:'ロ',
  2453.     ﾜ:'ワ', ｦ:'ヲ', ﾝ:'ン',
  2454.     ｧ:'ァ', ｨ:'ィ', ｩ:'ゥ', ｪ:'ェ', ｫ:'ォ',
  2455.     ｯ:'ッ', ｬ:'ャ', ｭ:'ュ', ｮ:'ョ',
  2456.     "｡":'。', "､":'、', "ｰ":'ー', "｢":'「', "｣":'」', "･":'・',
  2457.   };
  2458.   normalize.RE = new RegExp('(' + Object.keys(normalize.KANA).join('|') + ')', 'g');
  2459.   let atLeast = function(min, b){
  2460.     return Math.max(min, b);
  2461.   };
  2462.   let atMost = function(a, max){
  2463.     return Math.min(a, max);
  2464.   };
  2465.   let between = function(min, b, max){
  2466.     return Math.min(Math.max(min, b), max);
  2467.   };
  2468.   let log = function(){
  2469.     if(!DEBUG) return;
  2470.     let l = log.last = log.now || new Date(), n = log.now = new Date();
  2471.     let stack = new Error().stack, callers = stack.match(/^([^/<]+(?=<?@))/gm) || stack.match(/[^. ]+(?= \(<anonymous)/gm) || [];
  2472.     console.log(
  2473.       SCRIPTNAME + ':',
  2474.       /* 00:00:00.000  */ n.toLocaleTimeString() + '.' + n.getTime().toString().slice(-3),
  2475.       /* +0.000s       */ '+' + ((n-l)/1000).toFixed(3) + 's',
  2476.       /* :00           */ ':' + stack.match(/:[0-9]+:[0-9]+/g)[1].split(':')[1],/*LINE*/
  2477.       /* caller.caller */ (callers[2] ? callers[2] + '() => ' : '') +
  2478.       /* caller        */ (callers[1] || '')  + '()',
  2479.       ...arguments
  2480.     );
  2481.   };
  2482.   core.initialize();
  2483.   if(window === top && console.timeEnd) console.timeEnd(SCRIPTNAME);
  2484. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址