のみぱら 🍺

[]()

🎥 作品紹介動画

https://youtu.be/JB3t8Gnhozg

✨ 作品 URL

一時停止中 <継続開発中>

🖋 スライド URL

Google スライド

💪 製品概要

オンライン飲み会に最適化された新しいビデオ通話サービスです！

オンライン飲み会の課題を解決し、快適なオンライン飲み会体験を提供します。

🔥 背景 (製品開発のきっかけ、課題等)

皆さん、大人数での飲み会は好きですか？🍻

対面での飲み会は、いろんな人同士がさまざまな話題でグループを作って会話を楽しんでいました。

しかし、オンライン飲み会には、「複数人が並行して会話することができない」という大きな課題があります。

並行して会話ができないと以下のようなデメリットがあります。

大勢参加者がいたとしても、話す話題が一つになり、並行して会話を進めることができない

- ルームの参加者が強制的に発言者の話題に縛られてしまう

話すタイミングを見失う

- 同時に話し始めると気まずい - 誰かが話し始めるのを待って沈黙の時間が続く - 悪魔の沈黙、誰か話してくれーー 😢

ほかの参加者に気を使って好きな話題を話すことができない

- 多くの人がわからない推しの技術など - 自分はクリーンアーキテクチャの話が好きです 👀 @mahiro72

対面時のように複数人が並行して会話することが難しいのです。

そこで私たちは、上記の悩みを解決し、

オンライン飲み会をさらに楽しくするサービス、「のみぱら 🍺」を開発しました。

📝 製品説明（具体的な製品の説明）

既存のビデオ通話機能に加え、一つのビデオ通話にいながら、並行して別々の話題で会話することができるサービスです！

また、視線トラッキングを活用することでより対面でのオンライン飲み会体験に近づけています。

使い方

大きく分けて３つのステップです。

1. 部屋を作成する

   こちら から room 作成ページにアクセスし、好きな部屋番号を入力します (例:1111)

   入力したら作成ボタンを押して、部屋を作成します。

   部屋を作成したら、カメラをオンにしてほかの参加者を待ちましょう！

   ※下の写真はレッドブルを持っていますが、このサービスはビールが推奨です。

   

2. 部屋番号を参加者に共有する

   部屋を作成する際に入力した番号を、参加者に共有します。

   参加者はこちらにアクセスし、部屋番号を入力して参加を押します。

3. オンライン飲み会を楽しむ！🍻

   あとは楽しむだけです！！

   のみぱら！🍺

   

余談ですが

「のみぱら 🍺」の、のみは飲み会の、のみですが、ぱらには２つの意味があります。

１つめは、parallel(並行)のぱらです。 並行して会話ができるサービスなので、パラレルのぱらを使いました。

２つめは、パラダイスのぱらです。 パラダイスは楽園などの意味があります。

ようは思いっきり楽しんで飲み会をしましょうということです！！🍻

🥳 特長

1. 一つのビデオ通話にいながら、別々の話題で会話することができる

フォーカス機能

フォーカスについてはこちらをご覧ください。

クリックでフォーカスする、解除する

クリックした人をフォーカスできます。

フォーカスするとオレンジの枠で接続している状態となり、

お互いの声が大きく聞こえ、ほかの人の声は小さく聞こえます。

さらにほかの人をクリックすると、フォーカスする人数を増やせます。

下記の状態では２人と接続している状態となっており、

２人の声が大きく聞こえます。

もう一度クリックしてフォーカス状態を解除できます。

左下の人がたくさんいるボタンを押すとすべてのフォーカスを解除できます。

誰もフォーカスしていない状態だと、参加者全員の声が同じ大きさで聞こえます。

この機能により、お互いに接続状態のユーザーは周りの声が気にならず

自由に会話を楽しむことができます。

2. 視線操作で会話する相手を選択する

視線でフォーカスする

右下の目のボタンを押すと、赤色の点が表示されます。

これはあなたの視線を追跡しています。

あなたの視線が、誰かを見ているかログをとり、

あなたがよくみているユーザーと接続状態にします。

✅ 解決出来ること

• 1 つのビデオ通話にいながら複数人が並行して会話することで、参加者みんなが会話を自由に楽しむことができる！
• オンライン飲み会をより楽しめるサービスを提供し、コロナ禍で減っていた人とのつながりの機会を提供する！

✨ 今後の展望

私たちの作ったのみぱら 🍺は既存の課題であった「並行して会話することができないこと」を解決しました。

そこで次の目標となるのは、さらに楽しいオンライン飲み会プラットフォームを提供することです。

具体的には、オンライン飲み会をさらに盛り上げるため、以下の機能を実装します。

チャット機能

- ユーザー同士のチャット用 - 定期的に話題を提供する bot の導入

スクショ機能

- スクショ時にエフェクトをつけて、飲み会が盛り上がっている様子を演出する

飲みすぎパラメータ(実装済み)

- お酒を飲む動作をした場合、ゲージが上昇していき、飲みすぎてないか常に確認できる - 逆に飲んでない人もわかりますが、アルハラしないように気を付けましょう ⚠️

一気飲み警告エフェクト(実装済み)

- お酒を飲む動作をした場合、そのユーザーに盛り上がっているエフェクトがつく - エフェクトが付きますが、お酒に強くなったわけではありません - お酒は楽しんで飲みましょう！🍻

😆 注力したこと（こだわり等）

• 並行して複数人が会話できる機能を追加し、参加者が自由に会話できる環境を提供できるようにした
• 視線を計測し、現実の飲み会のように自分がみているユーザーの声が大きく聞こえる
• weboskcet 通信で、常に誰と誰がフォーカスしているかの情報を共有できるようにした
• DB に保存せずオンメモリでデータを管理することで、さらに高速に情報の共有をできるようにした
• サーバーサイドをクリーンアーキテクチャで実装したことで、DB を利用することになってもすぐに変更できるようにした
• デフォルトのクリックによる精度調整を行いやすいようなフォームとカルマンフィルタによるより正確な視点情報収集機能の作成により視覚トラッキングパッケージの精度向上を行った
• 自分の声は、一部のユーザー同士にしか大きく聞こえないようにできるため、各々が自由に話せる環境を作った

開発技術

アーキテクチャ

活用した技術

API・データ

• SkyWay

フレームワーク・ライブラリ・モジュール

• フロントエンド
  • Nuxt.js
  • HTML,SCSS
  • JavaScript
  • Prettier
  • vuetifyjs
• サーバーサイド
  • Golang
  • gorilla/websocket
  • gin-gonic/gin
• インフラ
  • 開発環境
  • Docker / Docker Compose
  • 本番環境
  • フロントエンド
    • Heroku
  • サーバーサイド
    • GCP
    • Cloud Run
    • Cloud Build
• CI/CD
  • GitHub Actions
  • heroku
  • Cloud Run / Cloud Build / Container Registry
• 開発環境整備
  • Make

デバイス

• PC (google chrome 推奨)

独自技術

ハッカソンで開発した独自機能・技術

フォーカス機能

フォーカス機能はユーザー同士を接続する機能です。

下記の図のように、

B さんから A さん、C さんから A さん、D さんから A さんに focus のリクエストを送ると、

A さんと B さん、C さんと A さん、D さんと A さん、それぞれが接続している状態になります。

このとき、A さんは全員と接続しているので B,C,D さんの声が通常通り聞こえますが、

B,C,D さんは A さんの声以外、小さく聞こえるようになります。

このように、誰かをフォーカスすることで、 その対象のユーザーと強制的にお互いにフォーカスしあっている状態とする機能がフォーカス機能です。

この機能を使うことで、 話したいユーザー以外の声を小さくし、好きな話題をそれぞれが並行して会話できる環境ができます。

つづいて具体例をみます。

この場合、A さんと B さんはお互いにフォーカスしあっており、 また、C さんと D さんもお互いにフォーカスしあっています。

このとき彼らはお互いの声以外は小さく聞こえており、 自分たちの好きな話題に集中して会話できます。

E さんはだれともフォーカスしあってないので、 参加者全員の声が通常の大きさで聞こえます。

視線操作による会話相手決定機能

こちらは、自分が話したいと思った相手をみることでその人に上記のフォーカス機能が適用される機能です。

今回使用した WebGazer は一般的な Web カメラを使用して、ページ上の Web 訪問者の視線位置をリアルタイムで推測するアイトラッキングライブラリです。

今回自分が話たいと思った相手を認識させるために以下のような手順を踏む処理を構築しました。

1. webgazer を起動し,ユーザーの視線みている場所を現在使っているブラウザからみた相対値の x,y 座標として数ミリ秒ごとに取得する

2. 取得した x,v 座標から現在みている HTML の element 要素を取得する

3. 2 で取得した element 要素が 10 回連続ユーザー画面を表すもの稼働かを判定する。(サーバー負荷対策)

4. 3 で true になった場合上記のフォーカス機能を走らせる

webgazer 認識精度調整機能

また webgazer は初期状態では精度に課題を抱えていました。

そのためデフォルトで備わっているマウスクリックによるフィードバック修正に加えて、カルマンフィルタを使った視点認識の調整機能、

収集した視点データから現在の webgazer の認識精度の計算表示機能を実装しました。

またこの収集データを localstorage に保存し二回目以降のみぱらを立ち上げた際に参照することで、

認識能力を維持する機能もあわせて実装しました。

製品に取り入れた研究内容（データ・ソフトウェアなど）（※アカデミック部門の場合のみ提出必須）

• カルマンフィルタ
  • 参考 : https://inzkyk.xyz/kalman_filter/designing_kalman_filters/

WebGazer: Scalable Webcam Eye Tracking Using User Interactions

• MediaPipe Facemesh
• WebGazer (GitHub)

プロダクト開発

MVP,Usecase の検討

私たちのチームは Miro で事前に MVP や Usecase を検討したことで、

必要な機能をしっかりと選定したうえで開発を進めることができました。

デザイン

また、Figma を用いてデザインを行い、

チーム内でのプロダクトのデザインの共通認識を行ってスムーズに開発を進めました。

タスク管理

私たちのチームではタスクを ISSUE で管理していました。

ISSUE のラベルを使うことで、タスクの優先度や分野について、わかりやすいように工夫しました。

作業・進捗管理

Discord のボットを利用することで、

誰が今どの作業をしているのかを全体で共有しました。

Miro

この miro.md に miro に書いた設計などをまとめてあります。