ツイート読み上げスクリプト

※ツイッターのバージョンアップで動かなくなることが予測されるので、気づいたらりしゃるまでよろしっく！

概要
・ツイッターのTLを読み上げてくれるスクリプトです。※PC：Chrome用です。（Firefox動作未確認）
・TweetDeck（Twitter公式webクライアント）から実行すると、再生専用の小ウィンドウが表示され、新しいツイートが来れば読み上げます。

仕組みや制作意図など
・2019年7月、棒読みちゃんのTwitter読み上げ機能が使えなくなり、手頃な代わりの手段が全然見つからないのでしびれを切らして自分で作成したもよう（
・文字列を読み上げる機能と、ページの更新を検知する機能があったので、その組み合わせ。（参考サイト：https://chao.tokyo/archives/1141）
・文字列を読み上げる機能は結構バグって止まりやすい難点があったため、なるべく細かく切り溜めることで対策済。

使い方（いつものやつ）
※PC用です、利用する場合は以下の操作をおこないます。
①TweetDeckに移動（TLを読み上げたいアカウントでログインする）
②コンソールの表示
・Chromeの場合→Ctrl+Shift+J（マウス操作のみ：右クリック→「検証(I)」をクリック→「Console」をクリック）
・Firefoxの場合→Ctrl+Shift+K（マウス操作のみ：右上のメニュー「≡」クリック→「ウェブ開発」をクリック→「ウェブコンソール」をクリック）
③コードの実行
・パターンＡ：下記からコピーしたものをコンソールの入力欄にペーストしてEnter！
・パターンＢ※：コンソールの入力欄で「↑」キーを押してEnter！(※コンソールは過去に実行したコードの履歴を呼び出す機能があり、このプログラムコードを実行した直後などは、「↑」キーを押せばコピペすること無くコードを呼び出せます、つまりいちいちこのページにコピーに来る必要はないということでｓ)
④以上、あとは勝手に動いてくれるはずです。コード実行後はコンソールの画面は即刻閉じて大丈夫です。（左上に出てくる小ウィンドウは閉じるのNG）
⑤補足：↓コードのRATEとかの数字を変更すると読み上げの速さを変えたりできます。コード実行後に左上に出てくる小ウィンドウはサイズ変更可、サイズを縮めて好きなところに置いとこう。

//TWDECK_SPEAKER v20201006ris //"voice設定追加
//v20190922ris //"URL正規表現修正、読み上げクリアなど
//ref="https://github.com/chao7150/ReadTweetDeck"

function twdeck_speaker(){
  //"RATEしゃべる速さ、PITCH声の高さ、VOLUME音の大きさ設定
  let RATE=1.2
  let PITCH=1.0
  let VOLUME=0.5
  //"読み上げるTLのタイトル
  const TARGET_TL_TITLE="Home"

//ここじゃ使えませんアラート
  let isTweetDeck = (~document.location.href.indexOf("tweetdeck.twitter.com"))
  if(isTweetDeck==false){alert("tweetdeck.twitter.comのページから実行して下さい。"); script_end();}

//"ボイス設定（仕様変更で必須に、以降も要警戒）//20201006ris
  let VOICE=speechSynthesis.getVoices()[12];
  function get_voice(){
    if(speechSynthesis.getVoices().length==0) return setTimeout(get_voice,100);
    //voice = speechSynthesis.getVoices().find(function(voice){ return voice.name === 'Google 日本'; });
    VOICE = speechSynthesis.getVoices()[12];
  }get_voice()

//"HomeTimeline探す時に使う
  const isHomeTimeline = container => container.parentNode.parentNode.previousElementSibling.textContent.trim().substr(0, 4) === "Home"
  //"ターゲットTL指定用
  const isTargetTL = container => container.parentNode.parentNode.previousElementSibling.textContent.trim().indexOf(TARGET_TL_TITLE)==0 | isHomeTimeline

//"テキストを読み上げ用の形式に
  const uttr = function(text,rate=RATE,pitch=PITCH,volume=VOLUME){
    const utr = new SpeechSynthesisUtterance(text)
    utr.rate = rate; utr.pitch = pitch; utr.volume = volume; utr.voice = VOICE;//"20201006ris voise追加
    return utr
  }
  //"ツイート取ってくるやつ
  const extractText = node => {
    const tweetElement = node.firstElementChild.firstElementChild
    //"RT処理
    let name = tweetElement.getElementsByClassName("nbfc")[0].textContent
    if(~name.indexOf("Retweeted")) name=name.split(/@|＠|　|Retweeted/)[0].trim()+"ｶﾞﾘｯﾂｲｰﾄ "; else name=""
    //"＠で長い名前はカット
    name += tweetElement.getElementsByClassName("fullname")[0].textContent.split(/@|＠|　/)[0]+"ﾉﾂｲｰﾄ "
    const text = tweetElement.getElementsByClassName("js-tweet-text")[0].textContent
    return {name, text}
  }
  //"TLの更新見張るやつ
  const run = () => {
    console.log('run')
    const target = sub_window.document.getElementsByClassName("js-chirp-container")
      Array.from(target).filter(isTargetTL).forEach(column => {
        const observer = new MutationObserver(mutations => {
          mutations.forEach(mutation => {
            Array.from(mutation.addedNodes).reverse().forEach((tweetNode,i,ary) => {
              const {name, text} = extractText(tweetNode)
              //"多すぎる場合はスキップ
              if(i<=(ary.length-5)) return console.log("skip node :"+i);
              speechArrayEnter(name +text+" "+EOT);
            });
          })
        })
        observer.observe(column, {childList: true})
      })
    }

var speaking_text = "";
  var speechArray =["読み上げ","script ready"]
  const EOT = "[END_OF_TWEET]"
  const SPLIT_STR ="[SPLIT_STR]"
  var speech_bot_run = false

//"読み上げ文章を追加格納していくやつ
  function speechArrayEnter(str){
    console.log(str);
    console.log("rep1:url:" + (str = str.replace(/([:\/\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)/g,"URL")))
    console.log("rep2:splitin:" + (str = str.replace( /[,\s「（　）」、。?!？！\n]+/g, SPLIT_STR )))//"区切文字やその連続
   // console.log("rep2:splitin:" + (str = str.replace( /([\u3040-\u309Fー])([^\u3040-\u309Fー])/g, "$1"+SPLIT_STR+"$2" )))//"ひらがなからひらがな以外の文字の境目
    console.log("splited:array:" + (str = str.split( SPLIT_STR )))
    str.forEach( txt=>{
      if(txt.length<=30) { speechArray.push(txt); return;}
      //"↓長すぎる場合は細切れに
      let txts = txt.replace( /([\u3040-\u309F])([^\u3040-\u309Fー])/g, "$1"+SPLIT_STR+"$2").split( SPLIT_STR );
      let keep = ""
      txts.forEach( tx=>{
        if((keep.length + tx.length)>=30&& keep!="" ) { speechArray.push(keep); keep="";}
        keep+=tx;
        if(keep.length<=30) return;
        else speechArray.push(keep.slice(0,30))//"↓それでも長すぎる場合はさらに細切れに
        if(keep.length>=30) speechArray.push(keep.slice(30,60));else return keep="";
        if(keep.length>=60) speechArray.push(keep.slice(60,90));else return keep="";
        if(keep.length>=90) speechArray.push(keep.slice(90,120));else return keep="";
        if(keep.length>=120) speechArray.push(keep.slice(120));else return keep="";      
      })
      if(keep!="") speechArray.push(keep);
    })
    if(speech_bot_run) { console.log(speech_bot_run); return;};
    console.log("spbrun"); speech_bot_run = true; speech_bot();
  }
  var count=0,busycount=0
  //"しゃべる頃合いを見計らって待機させるやつ
  function speech_bot(){
    let delay_time = 100; cnslogtext = "call count :"+count++
    if(speechArray.length==0) {speech_bot_run = false; count=0; return;}
    if(speechSynthesis.pending==false || speechSynthesis.speaking==false) {
      cnslogtext+="[speech okey]"
      speaking_text = speechArray.shift(); console.log(speaking_text);
      if(speaking_text == EOT) delay_time = 500;//"EOTは読まない
      else speechSynthesis.speak( uttr(speaking_text) )
      busycount=0;
    }else{
      cnslogtext+="[speech busy]" 
      if(++busycount>=50) { busycount=0; speechSynthesis.cancel();
        speechSynthesis.speak( uttr("読み上げスキップしました★") ) }
    }
    if(count%5==0) console.log(cnslogtext + "|setTimeout(speech_bot(),"+delay_time+") (x5)")
    setTimeout(()=>speech_bot(), delay_time)
  }
  //"サブウィンドウで実行
  sub_window = window.open('https://tweetdeck.twitter.com/', 'TweetDeck読上げ用', 'resizable,top=0,left=0,width=1,height=1')
  //"リロード時に閉じる
  window.addEventListener('beforeunload', function(e){
    sub_window.close();  console.log('beforeunload'); });
  
  speechSynthesis.cancel()//"念の為クリア
  
  //"スターター（読み込むまで繰り返し）
  function starter(){
    let load_num = sub_window.document.getElementsByClassName("js-chirp-container").length
    if(load_num==0){
      setTimeout(function(){starter()},1000); console.log("load .js-chirp-container not yet") }
    else{ run(); console.log("load .js-chirp-container :"+load_num) }
  }starter();
}twdeck_speaker();//"start script