$30 off During Our Annual Pro Sale. View Details »

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

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

ニフティ株式会社

November 22, 2022
Tweet

More Decks by ニフティ株式会社

Other Decks in Programming

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