Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
Search
did0es
July 25, 2023
Technology
0
150
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
Momentoを活用して実装を行った、CADC(CyberAgent Developer Conference) 2023 LPにおけるライブ配信の裏側についてお話します。
did0es
July 25, 2023
Tweet
Share
More Decks by did0es
See All by did0es
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2.3k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
170
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
650
codemodとうまく付き合うには
shuta13
0
2.1k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
920
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
240
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.5k
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
790
天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament
shuta13
0
360
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
460
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
350
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
250
IIWレポートからみるID業界で話題のMCP
fujie
0
780
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
300
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
Wasm元年
askua
0
140
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
170
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
330
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1031
460k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Scaling GitHub
holman
459
140k
Building an army of robots
kneath
306
45k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Transcript
None
株式会社サイバーエージェント フロントエンドエンジニア 平井 柊太 | Shuta Hirai @did0es @shuta13
CADC 2023について LPの概要 チャット機能の裏側 振り返り 01 02 03 04 CONTENTS
01 CADC 2023について
CADC 2023について 01 CADC = CyberAgent Developer Conference
CADC 2023について 01 ご視聴頂いた皆様ありがとうございました アーカイブはこちら:https://cadc.cyberagent.co.jp/2023
CADC 2023について 概要 ・2023 06/28 - 06/29の2日間開催 オンライン形式 YouTubeで配信 ・DAY
1 - NEXT 次世代を担う若手による2 ~ 30分の録画セッション ・DAY 2 - EXPERT 各分野のベテラン社員による約 1時間のライブセッション 01
02 LPの概要
LPの概要 02 TOP
LPの概要 02 Session
LPの概要 02 Admin
LPの概要 LPの目標 ・Web & 3DCGによる表現 Webの技術を活用した表現による技術的挑戦 ・ライブ配信 Momentoを活用した、ライブ配信 & 配信のモデレート環境開発
02
LPの概要 使用技術 ・基盤:Next.js LP・管理面共にNext.jsのSGで運用 ・UI:Three.js, TailwindCSS, daisyUI LP面はThree.js, TailwindCSS Admin面はdaisyUI
・インフラ:S3, CloudFront, Momento SGの成果物をS3, CFで配信 ライブ機能は全て Momentoで構築 02
03 チャット機能の裏側
チャット機能の裏側 03 チャット実装の裏側についてお話します
チャット機能の裏側 要件 ・匿名で投稿可能なライブチャット コメントの心理的なハードルをなくす LPで視聴・コメントの全てが収まるように ・管理画面によるモデレート 各セッションで運営からのアナウンスや、コメントの管理ができるように
03
チャット機能の裏側 03 アーキテクチャ
チャット機能の裏側 Momento Web SDKを用いた実装 ・適切な権限を付与したユーザーの作成 あらかじめMomento側で発行した、ユーザー/Admin用Tokenで作成 ・ルーム・コメントの作成や削除の実装 フォームなどのUIの実装 ルームの操作、削除はTokenでAdminだけに権限を絞っておく
・pub/subの実装 コメント・ルームの作成や削除を publishし、LP・Admin面でsubscribe 03
チャット機能の裏側 定義 ・@User → LPを使用する方 ・@Admin →CADC運営チーム
・@Common → User と Admin 共通 03
チャット機能の裏側 03 @Common - Cache/TopicのClient作成
チャット機能の裏側 03 @Admin - ルーム作成・削除のpublish
チャット機能の裏側 03 @Admin - ルーム更新のsubscribe
チャット機能の裏側 03 @Admin - コメント作成・削除のpublish
チャット機能の裏側 03 @User - コメント作成のpublish
チャット機能の裏側 03 @Common - コメント更新のsubscribe
チャット機能の裏側 03 実際の動作の様子
04 振り返り
振り返り まとめ ・Momentoを活用し、2人日ほどでコメント機能を実装できた Serverlessという強みを活かし、想定の 3 〜 5人日よりも遥かに短い期間で実装 ・複数のライブセッションの運用も問題なく進行できた 当日サポートいただいたMomentoの皆様、ありがとうございました
04
CADC 2023について 01 本日の内容はこちらのブログでもご覧になれます https://developers.cyberagent.co.jp/blog/archives/42887/
ご清聴ありがとうございました