cas_speaker

※今後もツイキャスのバージョンアップで動かなくなることが予測されるので、気づいたらりしゃるまでよろしっく！
※2020/10/06：いつのまにか動かなくなっていたので対応（ツイキャス由来かと思ってたけどブラウザ側の仕様変更だったっぽい）
※2020/10/13：録画コメントリプレイ２に対応（要併用）
※2021/10/17：しばらく放って置いたら案の定使えなくなっていたので対応（ブラウザ側の仕様とツイキャスとダブルで逝ってｔ）
※2022/1/3-5：ブックマークレット用に微改修。音声切り替えボタン追加。※実質未対応だったfirefox対策。
短いURL：https://syseesaawiki.jp/liveguide/d/cas_speaker ※コメント欄に貼り付けるときなどにどうぞ

概要
・ツイキャスのコメントを読上げてくれるスクリプトです。※PC用です。
・ライブ、録画共に利用可能。
・再生時間にコメントが連動しない古い録画でもコメントリプレイと組み合わせることで利用可能になります。

仕組みや制作意図など
・~~ツール配信では公式の提供する読上げ機能が利用できない、~~また他の人の配信を視聴するときもコメント読上げ機能がほしかった。

※読み上げ機能なくて不便だったので作ったんだけどいつの間にか公式にも実装されてｔ（公式発表見つからないので時期不明だけど2021年台後半の気配）

・TL読み上げスクリプト同様、文字列を読み上げる機能と、ページの更新を検知する機能を組み合わせ。

使い方（逆順になってます）
※PC用です、利用する場合は以下の操作をおこないます。
③以上、あとは再生に合わせて勝手に動いてくれるはずです。
②ブックマークバーにドロップしたショートカットをクリック。
①コメント読み上げを使いたいツイキャスの放送のページに行く
　※⓪は初回だけで大丈夫です。（修正のあった場合などは適宜差し替えてください。）
⓪以下の「オレンジ色のボタン」をブックマークバーにドラッグ＆ドロップ
 cas🔈

//CAS_REC_LISTER 20220130ris

let range='all', date_neer, date_far;
  let REC_ONLY_PARAM = (~location.href.indexOf(p='filter=watchable')?('?'+p):'');

let page_base_url = (tmp=location.href.split('/show'))[0]+'/show'+(tmp.lenth==2?tmp[1]:'')+'/';
  let page_count = -1;
  let page_count_lim=1;
  let next_page_url = '';
  let $work_elm;
  let next_list_html ='not yet';
  let $work_space;
  let CONTAINER_selector='.recorded-movie-box';
  let DATE_selector='.tw-movie-thumbnail-date';
  let $main_box;

let a_title=[], a_date=[], a_play_time=[], a_view=[], a_comment=[], a_img=[], a_url=[];

//"サイトによって都度適宜書き換え
  function CHANGE_URL_NEXT(){
    page_count++;//"20220130ris{
    q='.tw-pager-wrapper a';
    len=(a=($work_space.contentWindow).document.querySelectorAll(q)).length;
    for(i=0;i<len;i++) {
      if(a[i].innerText==(page_count+1)) return (next_page_url=(a[i].href));//+REC_ONLY_PARAM);
    }
    return next_page_url=page_base_url+'0'+REC_ONLY_PARAM;//"20220130ris}
    //return (next_page_url=page_base_url+(page_count)+REC_ONLY_PARAM);
  }
  function ON_LOAD(){ if(clog)console.log('ON_LOAD');
    //"iframe読み込み完了後の処理
    ct.innerText=(page_count+'/'+page_count_lim);
    
    if(page_count>=page_count_lim) return END_PROC();

$work_elm=get_work_elm();
  
    //PROC(){
    q=CONTAINER_selector+'>a';
    len=(a=$work_elm.querySelectorAll(q)).length;
    for(i=0;i<len;i++){a[i].setAttribute('target','_blank');}
    if(a[0].getElementsByClassName('tw-movie-thumbnail-badge').length==1)a[0].remove();
    len=(t=$work_elm.querySelectorAll(DATE_selector)).length;
    for(i=0;i<len;i++){ dt = new Date(t[i].innerText); a=t[i].closest('a');
      ///console.log(dt.toLocaleString()+'|'+date_neer.toLocaleString()+'~'+date_far.toLocaleString());
      if(dt<=date_neer&&dt>=date_far){
        a_url.push(a.href);
        a_title.push(a.getElementsByClassName('tw-movie-thumbnail-title')[0].innerText);
        a_img.push(a.getElementsByClassName('tw-movie-thumbnail-image')[0].src);
        a_view.push(a.getElementsByClassName('tw-movie-thumbnail-view')[0].innerText);
        a_comment.push(a.getElementsByClassName('tw-movie-thumbnail-comment')[0].innerText);
        a_date.push(a.getElementsByClassName('tw-movie-thumbnail-date')[0].innerText);
        a_play_time.push( ( (a=a.getElementsByClassName('tw-movie-thumbnail-duration')).length==0 )?-1:a[0].innerText );

if(clog)console.log(dt);
      }else{a.remove();if(dt<=date_far) page_count=page_count_lim-1;}
    }

next_list_html=$work_elm.innerHTML;
  
    attach_next_list();
    load_next_work();
///    if(page_count<page_count_lim) load_next_work();
///    else END_PROC();
  }

function SET_LIMIT(){
    q='.tw-pager>a';
    page_count_lim=document.querySelectorAll(q);
    if(page_count_lim.length==0) alert(`'${q}' was not found.`);
    page_count_lim=parseInt( page_count_lim[(page_count_lim.length-1)].innerText );

}

function PROC(){
  }

function INIT(){
    len=(a=document.getElementsByTagName('a')).length;
    for(i=0;i<len;i++){a[i].setAttribute('target','_blank');}
  
    $main_box = document.querySelector(CONTAINER_selector);
    $main_box.innerHTML='';
    
    date_neer= (rangeA.value==''?new Date():new Date(rangeA.value));
    date_far= new Date(rangeB.value==''?0:rangeB.value);
    if(date_neer<date_far) {tmp=date_neer; date_neer=date_far; date_far=tmp;}
    alert(date_neer.toLocaleString()+'~'+date_far.toLocaleString());

SET_LIMIT();//"ページ数把握

//"work space
    ($work_space = document.createElement('iframe')).style.display='block';
    document.body.appendChild($work_space);
    ($work_space).addEventListener('load', ON_LOAD );
    load_next_work();

}///INIT();//実行ボタンから実行
  
  function load_next_work(){
    if(true)console.log(`change url from : ${next_page_url} to ${CHANGE_URL_NEXT()}`);
    $work_space.src=next_page_url;
    if(clog)console.log('load next work');
  }
  function get_work_elm(){
    return ($work_space.contentWindow).document.querySelector(CONTAINER_selector);
  }
  function attach_next_list(){
    $main_box.insertAdjacentHTML('beforeend',next_list_html);
  }
  
}cas_rec_lister();

※宣伝用リンク：http://seesaawiki.jp/liveguide/d/cas_speaker