Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.
    オンライン会議を盛り上げる!
    音声リアクションツール
    「もじこえ」の開発
    基幹システムグループ サービスインフラチーム
    小松 初
    若手エンジニアによるリモートワーク支援ツールの開発 その②

    View full-size slide

  2. 自己紹介
    Copyright © NIFTY Corporation All Rights Reserved. 2
    • 新卒4年目
    • WEBアプリケーション
    エンジニア
    • 美味しい食べ物好き
    小松 初

    View full-size slide

  3. 本セッションで話すこと
    Copyright © NIFTY Corporation All Rights Reserved. 3
    • オンライン会議を盛り上げるために、
    音声リアクションツールを作ったら、
    予想以上に良かったという話。
    • そのツールの紹介。

    View full-size slide

  4. オフィスに行っても、オンライン会議
    Copyright © NIFTY Corporation All Rights Reserved. 4
    社内イベントもオンラインに
    手軽で便利だけど…

    View full-size slide

  5. カメラ・マイク オフの時
    通信状況、ノイズ、処理落ち
    参加者のリアクションわかりづらい
    Copyright © NIFTY Corporation All Rights Reserved. 5
    伝わってる
    かな?

    View full-size slide

  6. 参加者のリアクションわかりづらい
    Copyright © NIFTY Corporation All Rights Reserved. 6
    画面共有中、コメント気づけない
    何か質問ありますか?
    伝わってる
    かな?
    コメント欄
    A:音量小さいの私
    だけ?
    B: 文字大きくして
    C:そこらへんもう
    少し詳しく

    View full-size slide

  7. 盛り上がりにかける
    Copyright © NIFTY Corporation All Rights Reserved. 7
    笑い声など「わいわい感」がない
    参加者50人 盛り上がっているな
    ここは静かだけど…

    View full-size slide

  8. 前から思っていたこと
    Copyright © NIFTY Corporation All Rights Reserved. 8
    • コメントを読み上げさせればいいのでは?
    • コメントが気づきやすくなる
    • わいわい感もでるのでは?
    • 音声読み上げ機能付きの
    チャットツールを作ってみる

    View full-size slide

  9. 音声チャットツール の開発
    Copyright © NIFTY Corporation All Rights Reserved. 9
    • 社内の勉強時間で、テキスト音声変換のサン
    プルを動かすところからスタート。
    • ニフティは、技術を学べる環境が多い。
    • 社内勉強会など
    • 便利ツール作成に寛容
    • noPhoneなど

    View full-size slide

  10. 音声チャットツール の開発
    Copyright © NIFTY Corporation All Rights Reserved. 10
    • WebSocketを使ったチャット
    部分
    • 以前、プランニングポーカー
    Webアプリをつくった経験が
    活きた。
    • 社内の勉強時間も利用
    • 社内の他のスクラムチームも
    使ってくれている
    Qiita に記事あります。
    https://qiita.com/hajimete/items/77e8047cb4244b758dd9

    View full-size slide

  11. もじこえ の 誕生
    Copyright © NIFTY Corporation All Rights Reserved. 11
    • もじ を こえ で読み上げる
    チャットツールWebアプリ
    • デザインは開発中
    社内専用ツールのため一般公開はしてません。

    View full-size slide

  12. もじこえ の使い方
    Copyright © NIFTY Corporation All Rights Reserved. 12
    • オンライン会議時にブラウザで開き、コメント
    していく。
    • URLパスで部屋分け ~/room/{任意の部屋名}
    はーい、文字大きく
    します

    View full-size slide

  13. もじこえ の使い方
    Copyright © NIFTY Corporation All Rights Reserved. 13
    匿名なので、コメントのハードルが下がる。
    コメントによる、リアクションが増える。
    質問来ましたね

    View full-size slide

  14. もじこえ の音声
    Copyright © NIFTY Corporation All Rights Reserved. 14
    • 読み上げ音声は3種類
    • コメントごとに音声が紐づくので、にぎやか。
    • ミズキ(女性)
    • タクミ(男性)
    • マシュー(日本語も
    話せる外国籍男性)

    View full-size slide

  15. 声の主
    Copyright © NIFTY Corporation All Rights Reserved. 15
    • AWSのAmazon Pollyを使用。
    • テキストをリアルな音声に変換してくれる。
    • 様々な言語にも対応。
    • 100万文字で4ドル。
    • 商用利用もできる。

    View full-size slide

  16. もじこえ の使い方
    Copyright © NIFTY Corporation All Rights Reserved. 16
    音声だけでなく、拍手ボタンも。
    イベントなどの盛り上げに。

    View full-size slide

  17. アプリの概要
    Copyright © NIFTY Corporation All Rights Reserved. 17

    View full-size slide

  18. Slack連携機能
    Copyright © NIFTY Corporation All Rights Reserved. 18
    実況チャンネルの分裂を解消
    双方向に送信できる

    View full-size slide

  19. もじこえの構成
    Copyright © NIFTY Corporation All Rights Reserved. 19

    View full-size slide

  20. アプリ本体
    Copyright © NIFTY Corporation All Rights Reserved. 20

    View full-size slide

  21. もじこえ → Slack
    Copyright © NIFTY Corporation All Rights Reserved. 21
    もじこえの部屋番号
    /room/{SlackのチャンネルID}
    Webhook URLでチャンネルに
    送信

    View full-size slide

  22. Slack → もじこえ
    Copyright © NIFTY Corporation All Rights Reserved. 22
    もじこえAPI
    メッセージと部屋番号を受け取り、
    各部屋に音声URLとメッセージを送信
    Slack App作成

    View full-size slide

  23. 実際に社内使われているところ
    Copyright © NIFTY Corporation All Rights Reserved. 23
    • 社内のLT大会
    • 人気のあるイベント
    • 現在はオンライン開催
    わいわい感UP・コメント増
    運営の方から、とにかく盛り上がったと
    感想をもらいました。

    View full-size slide

  24. 実際に社内使われているところ
    Copyright © NIFTY Corporation All Rights Reserved. 24
    • 社内の勉強会
    • オンライン開催が多い。
    もじこえで気軽にコメントできるため、
    質問を受けながら話すのに便利という感想を
    もらいました。

    View full-size slide

  25. 全社会議 でも使われました!
    Copyright © NIFTY Corporation All Rights Reserved. 25
    • 全社員参加の半期振返り、活躍表彰イベント。
    • 以前は会場を借りて開催
    • 現在はハイブリット開催
    オンラインでも一体感がでたという感想をもら
    い、盛り上げに貢献できたと思います!

    View full-size slide

  26. もじこえ が全社会議で表彰されました!
    Copyright © NIFTY Corporation All Rights Reserved. 26
    大きな案件のみならず、
    小さな便利ツールまで表彰されるのも、
    ニフティのいいところだと思います。
    先程発表のnoPhoneも表彰されました!

    View full-size slide

  27. もじこえ の今後
    Copyright © NIFTY Corporation All Rights Reserved. 27
    • デザインを整える
    • 機能追加等
    • 社内OSS化
    進展は、 NIFTY engineeringのブログにでも書
    きたいと思います。
    もじこえ の記事あります。
    https://engineering.nifty.co.jp/blog/11500

    View full-size slide