1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Slackを喋らせてリモートワークを賑やかにしよう:smiley:

Last updated at Posted at 2020-06-27

皆さん、リモートワーク捗っていますか?この記事では、現在アクティブなSlackチャンネルの内容を発話させて物理オフィスの賑やかなイメージを取り戻すことができます。

使う技術の紹介

Web Speech API

ブラウザ上で文字から音声を再生することができるAPIです。意外と多くのブラウザがサポートしていてびっくり。

Mutation Observer

DOM が変わったときに通知を受ける事ができる機能です。Slackのアクティブなチャンネルに新たな投稿があったのをフックするために使います。

ちょっと手こずったのは、子孫の要素の変更を受け取るためには子の要素の変更を受け取らないといけないこと。つまり、subtree:true だけではダメで、childList:trueも指定する必要があります。

発話させよう

この2つが揃ったあとは

  • DOMの変更を受け取って
  • テキストを発話させる

と良いです。というわけで、サクッと下記を Chrome の開発者ツールのコンソールに突っ込むと喋りだします。

const elem = document.querySelectorAll(".c-virtual_list__scroll_container")[1];
const observer = new MutationObserver(records => {
  const record = records[records.length - 1];
  if (record.nextSibling) return;
  record.addedNodes.forEach(node => {
    if (node.ariaExpanded !== "false") return;
    const matchResult = /:\d\d(.+)/gs.exec(node.textContent);
    if (matchResult) {
      const text = matchResult[1];
      speechSynthesis.speak(new SpeechSynthesisUtterance(text));
    }
  });
});
const config = {subtree: true, childList: true, characterData: true};
observer.observe(elem, config);
//observer.disconnect(); // 発話を終了する

普段からコピペするのも大変なので、ブックマークレットにすると便利でしょう。下記ブックマークレットでは、再度実行すると「現在の発話を中断し」「Observerを切断し」ます。何かおかしくなったら再度実行してください。

やってみた感想

  • Botがいるチャンネルとかだと微妙かも。
  • チャンネルを変更すると、そのチャンネルの最後の発言が発話される。
  • [追記] 過去の発言を表示するとそれを延々と喋り続けてしまう。 -> 修正した
  • 3日くらいは楽しめそう。
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?