Clubhouseのような仕組みを 使ったオンライン展覧会を 作ってみましたが何か質問ある？👋

2021/07/17に開催された「夏のJavascript祭り Online」において、Clubhouseのような仕組みを使ったオンライン展覧会作った時の技術的な話あれこれと詰まりポイントなどを話しました。

https://javascript-fes.doorkeeper.jp/events/123412

Transcript

1. #　jsfes Clubhouseのような仕組みを 使ったオンライン展覧会を 作ってみましたが何か質問ある？
2. #　jsfes 自己紹介
3. #　jsfes croe_c https://akihirokato.com https://startbahn.jp/ croe https://drawcircle.jp/ 加藤 明洋 スタートバーン株式会社/drawcircle合同会社 1992年、愛知生まれ。大学卒業後ウェブ制作会社を経て、情報科学芸術大学院大 学（IAMAS）に進学、メディア表現専攻修了。ブロックチェーンが新しい社会 を作る一つの可能性を持っていると考え、それを伝えるための表現としてボード ゲーム「TRUSTLESS LIFE」を制作。CREATIVE HACK AWARD 2018 SONY 特別賞を始め各方面からの評価を得る。スタートバーン株式会社でエンジ ニアとして従事する傍、個人・周辺パートナーと連携し複数のプロジェクトを進 めていくために、2019年drawCircle合同会社を設立。現在に至る。
4. #　jsfes Clubhouseってなに？
5. #　jsfes 今年の2月くらいにリリースされ たiOSアプリ。有名人の話が気軽 に聞けると話題に。 「ルーム」と呼ばれる個別のボイ スチャットが一覧でみれたり、 ルームに入って話を聞いたり、会 話に参加することもできる。 最初は招待制だったこともあり、 限定感から急速に広まった？ （最近は失速してるみたい）
6. #　jsfes 今回作ったClubhouseみたいな オンライン展覧会プラットフォーム 「i.frame」
7. #　jsfes iframe（インラインフレーム）を用い ることにより、インターネット上で展 開している様々なセッションや展示を 一箇所に集めることなく、イベント期 間中に繋がりと纏まりを提供します。 また、音声とテキストの2つのメディ アを使ったチャットを提供すること で、別々の場所から訪れた人々が、あ たかも同じ場所に集まっているかのよ うに感じることができます。今回のイ ベント終了後、「i.frame」をオープン ソースで公開する予定です。
8. #　jsfes 少しだけデモします
9. #　jsfes Clubhouseと違うところ 特別なアプリなどを必要とせず、ブラウザ でウェブサイトにアクセスするだけでボイ スチャットができます！ アカウント登録も必要ありません、匿名で 利用することができます！個人が特定でき るような情報も一切取得しません！ （展覧会イベントのウェブサイトなので）
 それぞれの展示を閲覧したりチャットを書き 込んだりできます！また（特設サイト上は） どのページに遷移しても参加しているボイス チャットが途切れることはありません！
10. #　jsfes 技術スタックや構成図
11. Server Webapp Code hosting Build & Hosting VoiceChat Firebase function Firebase firestore Spread sheet App script Contents #　jsfes
12. #　jsfes スプレッド シート App Script Firebase イベント 全体設定 情報追加・変更 開始・終了 イベント 展示 展示 情報追加・変更 情報追加・変更 情報追加・変更 ユーザー削除 展示 ユーザー グループ/個人 通知 通知 送信 全体通知 サイト設定 BAN 設定 メッセージ ルーム BAN UID ルーム開設 ルーム Webapp exhibit or Particip ant リアルタイム同期 Admin タイムテーブル Exhibitorが開く ボイスルーム Participantが開く ボイスルーム
13. #　jsfes 基本的には普通の create-react-app。 ルーティングトップのAppコンポーネ ントにAgora関係のコンポーネントを マウントすることでアプリ全体で永続 化。（後述しますがAgoraはSSR未対 応）
14. #　jsfes 詰まりポイントや課題
15. #　jsfes 通話以外の情報を持てない
16. #　jsfes 音声通信を橋渡ししてくれるだけのサービスなので、ユーザー のニックネームやサムネイルなどは別で管理する必要がある。 ユーザーがルームを作成した り閲覧しつつ、ルームに入れ るようにしたいので、agoraの ルームと一対になるルーム テーブルをFirestoreに作成。 アクセスされた端末でデバ イスIDを生成、ローカルス トレージとFirestoreのユー ザーテーブルに保存して、 ニックネームなど管理でき るようにする。 それぞれのルームレコード に誰が今そのルームに入っ ているか、ユーザーIDやデ バイスIDを紐付ける。 agoraはWebRTCなのでそれぞれの通信はP2Pでやりとり される。agoraはそれぞれのユーザーをつなげる役割。 課題
17. #　jsfes agoraからの情報が遅い・使いづらい
18. #　jsfes ボイスチャットしている時によく見るアイコンの周りがぴこぴ こするやつ、ができない（わけではないけど現実的でない） 課題 他のユーザーの音量レベル（が入った情報）を受 け取るイベントが用意されているが、更新間隔が 2秒ごと。。 ユーザーのミュート状態も音量レベルから取れな くもないが判定が曖昧＆使いづらいので、結局 Firebase側でユーザーごとのミュートも管理
19. #　jsfes 通話中のチャンネルを運営から強制的 に切る手段がない（BANできない）
20. #　jsfes P2Pだからなのか、特定の通話をコンソール上からも削除 できない（切断できない） BANの仕組みを無理矢理作ったとしても、今回のプラット フォームの特性で、匿名でのボイスチャットができるよう にしてあるので、最終的にはユーザーの善意を信じるしか ない。（悪意なくうるさくなってしまっている場合など、 対処が難しい）
21. #　jsfes SSRに対応していない
22. #　jsfes たぶんWebでボイスチャットを組み込む分の基本的な機能 提供ができているので、これ以上のバージョンアップはあ んまりやる気ないんじゃないか...公式のReact対応とかも Video chatだけだったりあんまり活動してない感じ... SDKは新しいパッケージ作ったりしてたので、完全に消し ているわけではないと思うが。。（ドキュメントはまぁ まぁよくできてます...たぶん）
23. #　jsfes 宣伝
24. #　jsfes 今回紹介した「i.frame」を使ったオンラインイベント「iamas open_house: 2021」が7月22日（木・ 祝）、23日（金・祝）の2日間に渡り開催されます！ このイベントでは、研究成果や学生作品の展示、学校説明会、進学相談会などが行われます。教員や在学生 と、直接話す機会にもなります。 IAMASの多様な研究活動に興味をお持ちの方は、お気軽に来場してください。 最新情報は、公式SNS（Twitter・Facebook）で告知しています。ぜひフォローしてください。 告知ページ 特設サイト
25. #　jsfes インターネット上で個別に展開する多 様な企画群に繋がりと纏まりを提供 し、全てが一箇所にあるかのように提 示しています。本イベントの枠組 み《i.frame》について、経緯、参照事 例、実装の詳細を紹介、資料を展示し ます。構築を担当したメンバーによる トークイベントも開催。 「i.frame」の概念視点でのトークイベントも あるのでぜひ遊びにきてください！ ご静聴ありがとうございました！！