こんにちは。ICT4D Labメンバーのyushin_nです。今回、ICT4D Labメンバー有志5名で、One Japanハッカソンに参加して、オンライン会議が楽しくなるWeb会議アプリ「言霊くん」を開発したので、そのレポートをまとめました。イベントの3日間でどう取り組んだか、何を学んだかについてお伝えしたいと思います。
背景
ICT4D Labとして参加するはじめてのハッカソン。「国際開発に資するサービスを開発しよう」と意気込んでいましたが、冒頭、主催者より「審査基準はおもしろさ。SDGsや社会課題解決などは考えず、自己表現やアートを楽しむようなアウトプットを期待します！」との説明。だいぶ出鼻を挫かれます（笑）
序盤から「うーん・・」という重い雰囲気が漂います。しかし、ここはオンラインディスカッション慣れしたICT4D Labメンバー。Jamboardを使って、各人のアイデアを持ち寄って発散していくと、どんどんキーワードが出てきます。
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
感情分析（形態素解析と日本語評価極性辞書）
- https://upura.hatenablog.com/entry/2018/09/18/203540
- https://www.cl.ecei.tohoku.ac.jp/index.php?Open%20Resources%2FJapanese%20Sentiment%20Polarity%20Dictionary
Twilio Programmable Video
- https://www.twilio.com/blog/build-a-video-chat-with-vue-js
- https://www.twilio.com/blog/add-an-overlay-to-web-video-chat
デモ
ハッカソン最終日に発表した「言霊くん」のデモ動画はこちら。エンジニアと役者の二足の草鞋を履くメンバーの厳しい指導の下、8回ほど収録をやり直しています。画面効果のお花はメンバーのお子さん（5歳）が作画しており、動画は息子がユーチューバーのICT4D.JPの代表が編集。動画を使ったプレゼンは、トーク巧者のメンバー（タモリ役も兼務）が担当。まさに、チームワークの結晶。
「言霊くん」があれば、オンラインコミュニティがより楽しい場になりますね！実際、「言霊くん」を使ってハッカソン期間中のミーティングを実施していましたが、「最高」という言葉が、音声認識されやすくスコアが上がりやすいため、皆が「最高です！最高です！」と呪文のように唱える状態になっていました（笑）
また、「ある言葉（滅びの言葉）を言うと全員が消える」という隠し機能を搭載したところ、全員がその言葉を連呼するカオスな状況に。オンラインコミュニティごとに推奨ワードや禁句を設定すると、コミュニティの特徴が出て、おもしろくなりそうです。（隠し機能の使用イメージはデモをご覧ください！）
おわりに
「社会課題などは考えなくてよいから、おもしろいものを」という、普段のICT4D Labとは全く違うテーマの取り組みとなったハッカソンでしたが、最終的に、イメージした以上の作品を開発することができました。また、結果的に、コンセプトとTwilio Programmable Videoの使い方を評価いただき、KDDI賞（Twilio賞）を受賞することができました。
ICT4D Labのメンバーのバックグラウンドは皆ばらばらで、ハッカソンは初参加（しかもフルリモート）であるにも関わらず、チームワークを最大限に発揮してアウトプットを出せたのは、チームで「自分たちが所属するオンラインコミュニティを楽しくしたい！前向きな発言がたくさん出るようにしたい！」という想いを共有できたからだと思います。
また、チームのメンバーのバランスも、良かったと感じています。今回のハッカソンは、3〜6名のチーム応募が要件になっており、各チーム異なる人数・メンバー構成（エンジニア比率）でしたが、その構成によって、特色が現れていました。例えば、エンジニア中心のチームは、提供リソースの活用の幅や技術的な作り込みが半端ではなく、デザイナーがいるチームは、デモが洗練されており、プロダクトを人に伝えるという点が圧倒的でした。ICT4D Labチームは、技術面やデザイン面で突出したところはありませんでしたが、チームのメンバーがバランスよく役割を担うことで、審査員に想いを伝えることができたと思います。
社会課題からはじめるだけではなく、「自分たちの想いからはじめることの大事さ」、「チームの多様性とバランスの大切さ」を実感したハッカソンでした。One Japanハッカソン運営の皆さま、メンバーの皆さん、ありがとうございました。最高です！
コメント