☰

Greasy Fork镜像 支持简体中文。

AbemaTV Screen Comment Scroller

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

目前為 2019-01-18 提交的版本，檢視 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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