tweetdeckを読み上げる

こんにちは。
twitterをずっとやっていると目がしょぼしょぼしてきますよね。このままじゃ目に悪い、でもツイッターはやめたくない、そうだ、目を使わずにツイッターをすればいいじゃん!ということでGoogle Chromeでtweetdeckを自動読み上げできるようにしました。
ほぼ丸パクリしたサイトは
qiita.com
で、
他にも
ブラウザのみで音声認識とテキスト読み上げを実現する Web Speech API | CYOKODOG
SpeechSynthesisUtterance.rate - Web APIs | MDN
などのサイトを参考にツギハギしました。

超絶簡単 TweetDeckをしゃべるクライアントに変える! (コード量: 254バイト)に大事なことは載っているのでそっちを見てほしいのですが、tweetdeckの特定のカラムをそのまま読み上げる上でリツイートも読み上げてほしかったこと、読み上げる速度が遅すぎてTLを追いきれなくなってしまうことが個人的に気になったので改善(?)しました。




Google Chromeにはブックマークレットというものがあって、これはブックマークバーにURLを登録する代わりにコードを登録しておけば他のサイトを開きながらワンクリックで実行できる、という便利なものです。tweetdeckを開いた状態でカラムが更新されたらその文章を読み上げるスクリプトを実行することでtweetdeckの読み上げを実現しているようです。
ブックマークレットの登録方法を一応説明しておくと、右上の設定→ブックマーク→ブックマークマネージャ→右上の設定→新しいブックマークを追加  でできます。他にも既存のブックマークのURLを編集する形でもよくて、とにかくURLの欄にコピペできれば問題ないです。


この一行コードをブックマークのURL欄にコピペして、tweetdeckを開いた状態でクリックすればtweetdeckが読み上げられます。2回クリックすると2回読み上げられるので注意してください。ページを閉じれば読み上げが終了します。リロードだと終了したりしなかったりするようです。わかりません。

javascript:function speakText(text){var utterThis=new SpeechSynthesisUtterance(text);utterThis.rate=3.5;utterThis.volume=1;utterThis.pitch=1.5;speechSynthesis.speak(utterThis);}var observer=new MutationObserver(function(mutationRecords,_observer){var record=mutationRecords[0];var element=record.addedNodes[0];var text=element.innerText;var tweet=text.split("\n").slice(0,-5).join("\n");speakText(tweet);});var targetElement=$(".chirp-container").get(0);observer.observe(targetElement,{childList:true});

utterThis.rate=3.5というところの数字を変えれば読み上げスピードを変えることができます。
utterThis.pitch=1.5というところの数字を0~2の範囲で変えれば声の高さを変えることができます。
utterThis.volume=1というところの数字を変えれば音量が変更できるのですが、範囲が0~1なのでそんなに変更したくならないと思います。
最後の方に出てくる.get(0)の0という数字を変えれば読み上げるカラムを変更できます。0オリジンなので左から3番目のカラムを読み上げさせたいときはget(2)にしてください。右から2番目のカラムを指定したいときには.get(-2)のようにすることもできます。

変数名を変えても同じタブで複数個同時に実行すると声の高さや読み上げ速度などの設定はどちらかに統合されてしまうようなので(プログラミングがわからないのでなぜそうなるかわからない)、複数個のカラムを別の声で読み上げさせたいときには複数個のタブでtweetdeckを開いて、それぞれについて異なるカラム番号を指定したブックマークレットを使用してください。複数タブでやる時は変数名の被りとか気にしなくてよさそうな感じがします(適当)。



これでgoogle chromeツイッターを読み上げさせられるようになりました。tweetdeckにはNで新規ツイート・Ctrl+Enterでツイート投稿・数字キーでカラムの指定・矢印キーでツイートの選択・Rでリプライなどといったショートカットが備えられているので、これで目をつぶっていてもツイッターができるようになりましたね。皆さんの眼球は守られました。ところで僕はこの設定をしたり記事を書いたりするために画面を見ていたら目がしんどくなってきたので本末転倒ですね。童話にしてください。

残された改善点としてはリンクを無意味に読み上げてしまうこと、英語のツイートも日本語っぽく発音してしまうことなどがあります。うまいことやればそういうのは回避できるようになると思いますが、自分でなんとかするモチベーションはあまりありません。

androidツイッターを読み上げたいときにはアカイトリというアプリを使っています。このアプリは公開されているstreaming APIを使ってリアルタイムでツイートを表示してくれるツイッタークライアントで、アプリをバックグラウンドで起動しておけばタイムライン更新時にそのツイートをスマホ画面上に四角いポップアップを表示してくれるという優れもので、ポップアップの位置や透明度を調整できたり、特定のキーワードを含むツイートは固定ポップアップで表示できたり、いいかんじです。音声読み上げにも対応していて、N2 TTSという音声合成のアプリと組み合わせて使うといい感じに読み上げてくれます。読み上げ速度や声の高さや声の種類も選べます。バックグラウンドでツイッターを読み上げさせてポップアップを表示させながらソシャゲができるので眼球破壊ライフが二倍に凝縮されます。眼球破壊度が1/2になると見せかけて、人間は愚かなので別にスマホ使用時間が短くなることはなく、眼球破壊度は変化しません。これは個人の感想であり、愚かでない人間の存在も認めています。
iphoneのことはわからないのでわかりません。


画像付きツイートは音声のみだとどうにもならない部分があるのですが、実はツイッターには画像の説明という機能があります。これは画像に420字までの説明を追加することが出来るという機能で、画像の代替となる文章を書いておけば画像がもともと見れない人や画像が表示されない状況にある人にとって便利だね!という当たり前に便利な機能なのですが、いかんせん知名度が低いうえに、画像の説明に簡単にアクセスできないという問題点があってあまり使われていない印象があります。
qiita.com
この記事の最後の方にツイートを指定すると画像の説明が読めるサイトへのリンクが貼ってあります。このサイト以外で簡単に画像の説明にアクセスできる手段を僕は知らないです。あったら教えてください。ただそもそも画像の説明を画像に追加している人がたぶんあまりいないと思うので、簡単にアクセスできてもほとんど意味ないんじゃないかと言う気もします。まあそこはどっちが先かみたいな話でもし簡単にアクセスできるようになったら利用者も増えて利用者が増えたら需要も増えて簡単にアクセスできるようになるのかもしれないですね。420字という文字数制限は普通のツイートの140字に比べてかなり大きいので、それを多くの人が利用するようになるとツイッターの性質が変わってきてしまうことが考えられ、それを避けるためにあえて使いにくくしているのかもしれません。これは陰謀論です。全ての悪は政府から生まれる。権力は宇宙人と繋がっている。月の裏側には基地がある。太陽の反対側にはもう一つ地球がある。後頭部に空いたプラグ受けとそこに刺さったプラグの存在に気付いている人はどれくらいいますか?さっきから黄緑の液体に浮かんでいる気がしてきました。脳だけが。



視覚に依存しないツイッター生活、送っていけるといいですね。