What's Up!

製品概要

位置情報を用いることで、近距離にいる人と自動的にグループを作り、リアルタイムチャットができる。

リリース

https://www.lc-chat.com/
※ Safari以外のブラウザでご利用ください
※ 位置情報をオンにして、利用を求められた場合は許可してください

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

イベントに参加したいけど、同じ趣味の友達がいなかったり、都合が合う友達がいなかったりと一人で参加する必要がある。
しかし、イベントの感想や体験をすぐに共有できる仲間がいないことで、寂しい思いをすることも考えられる。
イベントをより楽しい思い出にするために、1人でイベントに参加していても、匿名で感想を共有できる仲間を作りたい。

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

位置情報を活用し、近くにいる人と自動でグループを作成することで、リアルタイムで感想や体験を共有できる。 人が集まるイベントでの交流を深め、瞬時に盛り上がることができる場所を提供する。

特長

1. アクセスが容易

Webアプリに表示名を入力するだけでチャットを開始できる。

2. オートグループ

位置情報を元にアプリが100m以内のユーザーと自動でグループを作成するため、自分で話し相手を探す必要がない。

3. 匿名チャット

原則匿名で交流をするため、感想や体験を共有するために「新たに友だちを作る」必要がない。

解決出来ること

1人でイベントに参加することが多い人や、対面でのコミュニケーションが苦手な人でも、「What's Up?」を通して体験を共有することで、 イベントを最大限楽しむことができる。

デモ

左・中央タブは愛知、右タブは東京の位置情報で接続しています
https://www.youtube.com/watch?v=0CxI8DH2g2M

今後の展望

1.個人チャット機能の追加

仲良くなったユーザーと二人だけで話せる個人チャット機能を導入し、よりプライベートな会話を可能にする。

2.入退室の表示

チャットルームへの入退室時に通知を表示することで、誰が参加しているかを把握しやすくする。

3.グループチャットの人数制限

グループチャットの参加人数に上限を設け、上限に達した場合は自動で新しいチャットグループを作成する。

4.特定ユーザーのミュート機能

不快な発言をするユーザーをミュートできるようにし、快適なチャット環境を提供する。

5.画像送信機能

テキストだけでなく画像も共有できるようにし、会話の幅を広げる。

6.すれ違い回数の確認

他のユーザーと何回すれ違ったかを確認できる機能を追加し、交流のきっかけを増やす。

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

• Webページにアクセスしてから、チャットを始めるまでの手軽さ
• 近くの人とのみ会話できるので、その場の話題を共有することができる
• ハッシュ値を用いたなりすまし防止

開発技術

活用した技術

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

• Node.js
• Next.js
• socket.io
• Material UI

独自技術

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

• WebSocket通信と位置情報を活用したユーザーのグルーピング
  • https://github.com/jphacks/ng_2408/blob/main/backend/src/websocket/websocket.ts
  • https://github.com/jphacks/ng_2408/blob/main/backend/src/websocket/events.ts

ローカルでの使用方法

clone後に/frontendと/backendの両方で

npm run dev

を実行後にhttp://localhost:3000/にアクセス