One Japanハッカソンでオンラインディスカッションが楽しくなるWeb会議アプリ「言霊くん」を開発した話

オンライン・コミュニティ

こんにちは。ICT4D Labメンバーのyushin_nです。今回、ICT4D Labメンバー有志5名で、One Japanハッカソンに参加して、オンライン会議が楽しくなるWeb会議アプリ「言霊くん」を開発したので、そのレポートをまとめました。イベントの3日間でどう取り組んだか、何を学んだかについてお伝えしたいと思います。

One Japanハッカソン2020の概要

背景

ICT4D Labとして参加するはじめてのハッカソン。「国際開発に資するサービスを開発しよう」と意気込んでいましたが、冒頭、主催者より「審査基準はおもしろさ。SDGsや社会課題解決などは考えず、自己表現やアートを楽しむようなアウトプットを期待します!」との説明。だいぶ出鼻を挫かれます(笑)

審査基準をきいて困惑するメンバー。ハッカソンはオンラインツールをふんだんに使って開催されました。

序盤から「うーん・・」という重い雰囲気が漂います。しかし、ここはオンラインディスカッション慣れしたICT4D Labメンバー。Jamboardを使って、各人のアイデアを持ち寄って発散していくと、どんどんキーワードが出てきます。

Jamboardでアイデアを付箋に貼っていきます。5次元が気になりますね。

2時間ほどアイデア出しをして、「オンラインディスカッションを楽しくするWeb会議アプリ」というコンセプトが固まりました。新型コロナウィルスの影響で、オンラインでの出会いはますます増えています。ICT4D Labもオンラインコミュニティで、メンバーの大半はオフラインでの面識がありません。「自分たちが所属するオンラインコミュニティを楽しくしたい!前向きな発言がたくさん出るようにしたい!」という想いで開発をすることにしました。プロダクト名は、「言霊(ことだま)くん」です。

「言霊くん」の役割

「言霊くん」のアプリを使ってWeb会議をすると、言霊くんが、参加者のポジティブ発言、ネガティブ発言を検出して、可視化して画面上に表示してくれます。前向きな発言が多いと花が咲き、後ろ向きな発言・攻撃的な発言が多いと花が枯れます。一人で勝手に盛り上がって話続けていると、徐々に画面から消えて、最後には透明になります(笑)

「言霊くん」の画面です。画面中央に、参加者のビデオが表示され、画面右の対話ログに、参加者の発言内容が記録されます。画面左に、発言内容を感情分析して算出されるポジネガスコア(言霊スコア)が表示され、スコアに応じて画面にエフェクトがかかります。

ファシリテーター専用の「話が長い参加者を強制的に透明にするボタン」なども搭載。

開発の流れ

ICT4D Labチームは、メンバーが5名。うち、現役のエンジニアが2名、IT業界経験のあるメンバーが3名という構成でした。全員でコンセプトを固めた後、エンジニア2名が実装を担当し、残り3名がプレゼン作成、デモ動画のシナリオ作成・編集、素材収集・作成と役割分担をしました。

システムに必要な構成要素は、以下の4つです。

  • 参加者の発言のリアルタイム音声認識
  • 参加者の発言の感情分析・ポジネガスコア計算
  • ポジネガスコアに応じた画面効果の生成
  • リアルタイム音声認識・画面効果の表示ができるWeb会議アプリケーション

開発期間は平日の夜+土曜日のみ。APIや技術提供企業のリソースを活用して、シンプルな構成で開発を行いました。シンプルにしたつもりが、デモの前日に、会議参加者5人中2人分しか音声を認識しなくなったり、認識した音声が2重3重にログに保存されたりと、予期せぬ不具合が発生して、対応が深夜に及ぶことに・・。本当にお疲れさまでした。

システム構成

システム構成図は、以下のとおりです。

  • リアルタイム音声認識は、Google Web Speech APIを使用
  • 感情分析・ポジネガスコア計算は、Pythonで形態素解析+極性辞書で実装
  • 画面のエフェクトの画像生成・オーバレイは、JavaScriptで実装
  • Web会議アプリは、Twilioのビデオの機能(Programmable Video)をフル活用して、Vue.jsでサーバレスで実装

実装にあたっては、以下の情報を参考にしました。

Web Speech API

感情分析(形態素解析と日本語評価極性辞書)

Twilio Programmable Video

デモ

ハッカソン最終日に発表した「言霊くん」のデモ動画はこちら。エンジニアと役者の二足の草鞋を履くメンバーの厳しい指導の下、8回ほど収録をやり直しています。画面効果のお花はメンバーのお子さん(5歳)が作画しており、動画は息子がユーチューバーのICT4D.JPの代表が編集。動画を使ったプレゼンは、トーク巧者のメンバー(タモリ役も兼務)が担当。まさに、チームワークの結晶。

デモver0 9

「言霊くん」があれば、オンラインコミュニティがより楽しい場になりますね!実際、「言霊くん」を使ってハッカソン期間中のミーティングを実施していましたが、「最高」という言葉が、音声認識されやすくスコアが上がりやすいため、皆が「最高です!最高です!」と呪文のように唱える状態になっていました(笑)

また、「ある言葉(滅びの言葉)を言うと全員が消える」という隠し機能を搭載したところ、全員がその言葉を連呼するカオスな状況に。オンラインコミュニティごとに推奨ワードや禁句を設定すると、コミュニティの特徴が出て、おもしろくなりそうです。(隠し機能の使用イメージはデモをご覧ください!)

おわりに

「社会課題などは考えなくてよいから、おもしろいものを」という、普段のICT4D Labとは全く違うテーマの取り組みとなったハッカソンでしたが、最終的に、イメージした以上の作品を開発することができました。また、結果的に、コンセプトとTwilio Programmable Videoの使い方を評価いただき、KDDI賞(Twilio賞)を受賞することができました。

ICT4D Labのメンバーのバックグラウンドは皆ばらばらで、ハッカソンは初参加(しかもフルリモート)であるにも関わらず、チームワークを最大限に発揮してアウトプットを出せたのは、チームで「自分たちが所属するオンラインコミュニティを楽しくしたい!前向きな発言がたくさん出るようにしたい!」という想いを共有できたからだと思います。

また、チームのメンバーのバランスも、良かったと感じています。今回のハッカソンは、3〜6名のチーム応募が要件になっており、各チーム異なる人数・メンバー構成(エンジニア比率)でしたが、その構成によって、特色が現れていました。例えば、エンジニア中心のチームは、提供リソースの活用の幅や技術的な作り込みが半端ではなく、デザイナーがいるチームは、デモが洗練されており、プロダクトを人に伝えるという点が圧倒的でした。ICT4D Labチームは、技術面やデザイン面で突出したところはありませんでしたが、チームのメンバーがバランスよく役割を担うことで、審査員に想いを伝えることができたと思います。

社会課題からはじめるだけではなく、「自分たちの想いからはじめることの大事さ」「チームの多様性とバランスの大切さ」を実感したハッカソンでした。One Japanハッカソン運営の皆さま、メンバーの皆さん、ありがとうございました。最高です!

ニュースレターはじめました。テクノロジーと国際開発(ICT4D)に関する新規ブログ記事・海外ニュース・イベント情報などを月1〜2回発信しています。以下フォームからご参加ください。詳細はこちら

ICT4D Lab
フォローする
オンライン・コミュニティ
ICT for Development .JP

コメント

タイトルとURLをコピーしました