NIFTY Tech Day 2022 オンライン会議を盛り上げる！音声リアクションツール「もじこえ」の開発

NIFTY Tech Day 2022 セッション資料

ニフティには技術を学べる環境、文化があります。
作成したオンライン会議のリアクション不足を解決するツールを例にツールを作るときの考え方や構成について語ります。

本セッションのアーカイブ動画：
https://youtu.be/N4FEjH6yfeg

NIFTY Tech Day 2022 アーカイブ動画一覧：
https://www.youtube.com/playlist?list=PLYJnnMO84Y4ScTbh4EB5F-xVwgmPv_cM3

Transcript

1. Copyright ©NIFTY Corporation All Rights Reserved. オンライン会議を盛り上げる！ 音声リアクションツール 「もじこえ」の開発 基幹システムグループ サービスインフラチーム 小松 初 若手エンジニアによるリモートワーク支援ツールの開発 その②
2. 自己紹介 Copyright © NIFTY Corporation All Rights Reserved. 2 • 新卒4年目 • WEBアプリケーション エンジニア • 美味しい食べ物好き 小松 初
3. 本セッションで話すこと Copyright © NIFTY Corporation All Rights Reserved. 3 • オンライン会議を盛り上げるために、 音声リアクションツールを作ったら、 予想以上に良かったという話。 • そのツールの紹介。
4. オフィスに行っても、オンライン会議 Copyright © NIFTY Corporation All Rights Reserved. 4 社内イベントもオンラインに 手軽で便利だけど…
5. カメラ・マイク オフの時 通信状況、ノイズ、処理落ち 参加者のリアクションわかりづらい Copyright © NIFTY Corporation All Rights Reserved. 5 伝わってる かな？
6. 参加者のリアクションわかりづらい Copyright © NIFTY Corporation All Rights Reserved. 6 画面共有中、コメント気づけない 何か質問ありますか？ 伝わってる かな？ コメント欄 A:音量小さいの私 だけ？ B: 文字大きくして C:そこらへんもう 少し詳しく
7. 盛り上がりにかける Copyright © NIFTY Corporation All Rights Reserved. 7 笑い声など「わいわい感」がない 参加者50人 盛り上がっているな ここは静かだけど…
8. 前から思っていたこと Copyright © NIFTY Corporation All Rights Reserved. 8 • コメントを読み上げさせればいいのでは？ • コメントが気づきやすくなる • わいわい感もでるのでは？ • 音声読み上げ機能付きの チャットツールを作ってみる
9. 音声チャットツール の開発 Copyright © NIFTY Corporation All Rights Reserved. 9 • 社内の勉強時間で、テキスト音声変換のサン プルを動かすところからスタート。 • ニフティは、技術を学べる環境が多い。 • 社内勉強会など • 便利ツール作成に寛容 • noPhoneなど
10. 音声チャットツール の開発 Copyright © NIFTY Corporation All Rights Reserved. 10 • WebSocketを使ったチャット 部分 • 以前、プランニングポーカー Webアプリをつくった経験が 活きた。 • 社内の勉強時間も利用 • 社内の他のスクラムチームも 使ってくれている Qiita に記事あります。 https://qiita.com/hajimete/items/77e8047cb4244b758dd9
11. もじこえ の 誕生 Copyright © NIFTY Corporation All Rights Reserved. 11 • もじ を こえ で読み上げる チャットツールWebアプリ • デザインは開発中 社内専用ツールのため一般公開はしてません。
12. もじこえ の使い方 Copyright © NIFTY Corporation All Rights Reserved. 12 • オンライン会議時にブラウザで開き、コメント していく。 • URLパスで部屋分け ~/room/{任意の部屋名} はーい、文字大きく します
13. もじこえ の使い方 Copyright © NIFTY Corporation All Rights Reserved. 13 匿名なので、コメントのハードルが下がる。 コメントによる、リアクションが増える。 質問来ましたね
14. もじこえ の音声 Copyright © NIFTY Corporation All Rights Reserved. 14 • 読み上げ音声は3種類 • コメントごとに音声が紐づくので、にぎやか。 • ミズキ（女性） • タクミ（男性） • マシュー（日本語も 話せる外国籍男性）
15. 声の主 Copyright © NIFTY Corporation All Rights Reserved. 15 • AWSのAmazon Pollyを使用。 • テキストをリアルな音声に変換してくれる。 • 様々な言語にも対応。 • 100万文字で4ドル。 • 商用利用もできる。
16. もじこえ の使い方 Copyright © NIFTY Corporation All Rights Reserved. 16 音声だけでなく、拍手ボタンも。 イベントなどの盛り上げに。
17. アプリの概要 Copyright © NIFTY Corporation All Rights Reserved. 17
18. Slack連携機能 Copyright © NIFTY Corporation All Rights Reserved. 18 実況チャンネルの分裂を解消 双方向に送信できる
19. もじこえの構成 Copyright © NIFTY Corporation All Rights Reserved. 19
20. アプリ本体 Copyright © NIFTY Corporation All Rights Reserved. 20
21. もじこえ → Slack Copyright © NIFTY Corporation All Rights Reserved. 21 もじこえの部屋番号 /room/{SlackのチャンネルID} Webhook URLでチャンネルに 送信
22. Slack → もじこえ Copyright © NIFTY Corporation All Rights Reserved. 22 もじこえAPI メッセージと部屋番号を受け取り、 各部屋に音声URLとメッセージを送信 Slack App作成
23. 実際に社内使われているところ Copyright © NIFTY Corporation All Rights Reserved. 23 • 社内のLT大会 • 人気のあるイベント • 現在はオンライン開催 わいわい感UP・コメント増 運営の方から、とにかく盛り上がったと 感想をもらいました。
24. 実際に社内使われているところ Copyright © NIFTY Corporation All Rights Reserved. 24 • 社内の勉強会 • オンライン開催が多い。 もじこえで気軽にコメントできるため、 質問を受けながら話すのに便利という感想を もらいました。
25. 全社会議 でも使われました！ Copyright © NIFTY Corporation All Rights Reserved. 25 • 全社員参加の半期振返り、活躍表彰イベント。 • 以前は会場を借りて開催 • 現在はハイブリット開催 オンラインでも一体感がでたという感想をもら い、盛り上げに貢献できたと思います！
26. もじこえ が全社会議で表彰されました！ Copyright © NIFTY Corporation All Rights Reserved. 26 大きな案件のみならず、 小さな便利ツールまで表彰されるのも、 ニフティのいいところだと思います。 先程発表のnoPhoneも表彰されました！
27. もじこえ の今後 Copyright © NIFTY Corporation All Rights Reserved. 27 • デザインを整える • 機能追加等 • 社内OSS化 進展は、 NIFTY engineeringのブログにでも書 きたいと思います。 もじこえ の記事あります。 https://engineering.nifty.co.jp/blog/11500