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
160
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 Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
640
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2.4k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
190
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
680
codemodとうまく付き合うには
shuta13
0
2.5k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
940
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
250
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.6k
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
820
Other Decks in Technology
See All in Technology
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.1k
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
150
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.3k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
200
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
4
1.2k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
140
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
160
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
100
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
120
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
370
Agile PBL at New Grads Trainings
kawaguti
PRO
1
320
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How STYLIGHT went responsive
nonsquared
100
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
It's Worth the Effort
3n
187
28k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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/
ご清聴ありがとうございました