Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for did0es did0es
July 25, 2023
Technology
200
0

CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3

Momentoを活用して実装を行った、CADC(CyberAgent Developer Conference) 2023 LPにおけるライブ配信の裏側についてお話します。

Avatar for did0es

did0es

July 25, 2023

More Decks by did0es

See All by did0es
うわっ...私のSwagger、古すぎ...？grpc-gateway向けのSwaggerと向き合う
Avatar for did0es shuta13
0
130
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
Avatar for did0es shuta13
3
340
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
Avatar for did0es shuta13
8
840
なぜクラウドサービスで Web コンソールを提供するのか
Avatar for did0es shuta13
4
2.5k
5分でわかるPreactのVDOMで作るWebエディタ
Avatar for did0es shuta13
0
250
TailwindCSSでUIライブラリを作る際のハマりどころ
Avatar for did0es shuta13
0
790
codemodとうまく付き合うには
Avatar for did0es shuta13
0
2.9k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
Avatar for did0es shuta13
4
990
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
Avatar for did0es shuta13
0
300

Other Decks in Technology

See All in Technology
GKE Agent SandboxでAIが生成したコードを 安全に実行してみた
Avatar for Lamaglama39 lamaglama39
0
110
生成AIが変える SaaS の競争原理と弁護士ドットコムのプロダクト戦略
Avatar for 弁護士ドットコム bengo4com
1
2.5k
ネットワーク運用を楽にするAWS DevOps Agent活用法！！ / 20260421 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
240
Microsoft 365 / Microsoft 365 Copilot : 自分の状態を確認する「ラベル」について
Avatar for Taichi Nakamura taichinakamura
0
370
コミュニティ・勉強会を作るのは目的じゃない
Avatar for uutan1108 ohmori_yusuke
0
270
20260428_Product Management Summit_tadokoroyoshiro
Avatar for tadokoro_yoshiro tadokoro_yoshiro
14
15k
今年注目する！データ分析プラットフォームでのAIの活用
Avatar for Nayuta S. nayuts
0
170
Standards et agents IA : un tour d’horizon de MCP, A2A, ADK et plus encore
Avatar for Guillaume Laforge glaforge
0
210
色を視る
Avatar for yuzneri yuzneri
0
170
ServiceNow Knowledge 26 の歩き方
Avatar for ServiceNow Japan Meetup manarobot
0
220
Revisiting [CLS] and Patch Token Interaction in Vision Transformers
Avatar for yu4u yu4u
0
400
「AIに部下10人」を3ヶ月運用してわかった、生成AI駆動開発のリアル
Avatar for おしお yoheinabe777
0
110

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
200
Done Done
Avatar for chrislema chrislema
186
16k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
680
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
340
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
190
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
980
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
440
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k

Transcript

  1. None

  2. 株式会社サイバーエージェント
 フロントエンドエンジニア
 平井 柊太 | Shuta Hirai
 @did0es @shuta13

  3. CADC 2023について
 LPの概要
 チャット機能の裏側
 振り返り
 01
 02
 03
 04
 CONTENTS

  4. 01
CADC 2023について


  5. CADC 2023について
 01
 CADC = CyberAgent Developer Conference


  6. CADC 2023について
 01
 ご視聴頂いた皆様ありがとうございました
 アーカイブはこちら：https://cadc.cyberagent.co.jp/2023


  7. CADC 2023について
 概要
 ・2023 06/28 - 06/29の2日間開催 　オンライン形式　YouTubeで配信
 
 ・DAY

    1 - NEXT
 　次世代を担う若手による2 ~ 30分の録画セッション
 
 ・DAY 2 - EXPERT
 　各分野のベテラン社員による約 1時間のライブセッション
 01


  8. 02
LPの概要


  9. LPの概要
 02
 TOP


  10. LPの概要
 02
 Session


  11. LPの概要
 02
 Admin


  12. LPの概要
 LPの目標
 ・Web & 3DCGによる表現 　Webの技術を活用した表現による技術的挑戦 ・ライブ配信
 　Momentoを活用した、ライブ配信 & 配信のモデレート環境開発

    02


  13. 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


  14. 03
チャット機能の裏側


  15. チャット機能の裏側 
 03
 チャット実装の裏側についてお話します


  16. チャット機能の裏側 
 要件
 ・匿名で投稿可能なライブチャット 　コメントの心理的なハードルをなくす　 LPで視聴・コメントの全てが収まるように ・管理画面によるモデレート
 　各セッションで運営からのアナウンスや、コメントの管理ができるように 
 


    03


  17. チャット機能の裏側 
 03
 アーキテクチャ


  18. チャット機能の裏側 
 Momento Web SDKを用いた実装
 ・適切な権限を付与したユーザーの作成
 　あらかじめMomento側で発行した、ユーザー/Admin用Tokenで作成
 
 ・ルーム・コメントの作成や削除の実装
 　フォームなどのUIの実装　ルームの操作、削除はTokenでAdminだけに権限を絞っておく


    ・pub/subの実装
 　コメント・ルームの作成や削除を publishし、LP・Admin面でsubscribe 03


  19. チャット機能の裏側 
 定義
 ・@User → LPを使用する方
 
 ・@Admin →CADC運営チーム
 


    ・@Common → User と Admin 共通 03


  20. チャット機能の裏側 
 03
 @Common - Cache/TopicのClient作成


  21. チャット機能の裏側 
 03
 @Admin - ルーム作成・削除のpublish


  22. チャット機能の裏側 
 03
 @Admin - ルーム更新のsubscribe


  23. チャット機能の裏側 
 03
 @Admin - コメント作成・削除のpublish


  24. チャット機能の裏側 
 03
 @User - コメント作成のpublish


  25. チャット機能の裏側 
 03
 @Common - コメント更新のsubscribe


  26. チャット機能の裏側 
 03
 実際の動作の様子


  27. 04
振り返り


  28. 振り返り
 まとめ
 ・Momentoを活用し、2人日ほどでコメント機能を実装できた 　Serverlessという強みを活かし、想定の 3 〜 5人日よりも遥かに短い期間で実装 ・複数のライブセッションの運用も問題なく進行できた
 　当日サポートいただいたMomentoの皆様、ありがとうございました 


    04


  29. CADC 2023について
 01
 本日の内容はこちらのブログでもご覧になれます
 https://developers.cyberagent.co.jp/blog/archives/42887/


  30. ご清聴ありがとうございました