$30 off During Our Annual Pro Sale. View Details »

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

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

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

did0es

July 25, 2023
Tweet

More Decks by did0es

Other Decks in Technology

Transcript

  1. View Slide

  2. 株式会社サイバーエージェント

    フロントエンドエンジニア

    平井 柊太 | Shuta Hirai

    @did0es
    @shuta13

    View Slide

  3. CADC 2023について

    LPの概要

    チャット機能の裏側

    振り返り

    01

    02

    03

    04

    CONTENTS

    View Slide

  4. 01
CADC 2023について


    View Slide

  5. CADC 2023について

    01

    CADC = CyberAgent Developer Conference


    View Slide

  6. CADC 2023について

    01

    ご視聴頂いた皆様ありがとうございました

    アーカイブはこちら:https://cadc.cyberagent.co.jp/2023


    View Slide

  7. CADC 2023について

    概要

    ・2023 06/28 - 06/29の2日間開催
     オンライン形式 YouTubeで配信


    ・DAY 1 - NEXT

     次世代を担う若手による2 ~ 30分の録画セッション


    ・DAY 2 - EXPERT

     各分野のベテラン社員による約
    1時間のライブセッション

    01


    View Slide

  8. 02
LPの概要


    View Slide

  9. LPの概要

    02

    TOP


    View Slide

  10. LPの概要

    02

    Session


    View Slide

  11. LPの概要

    02

    Admin


    View Slide

  12. LPの概要

    LPの目標

    ・Web & 3DCGによる表現
     Webの技術を活用した表現による技術的挑戦
    ・ライブ配信

     Momentoを活用した、ライブ配信 & 配信のモデレート環境開発
    02


    View Slide

  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


    View Slide

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


    View Slide

  15. チャット機能の裏側 

    03

    チャット実装の裏側についてお話します


    View Slide

  16. チャット機能の裏側 

    要件

    ・匿名で投稿可能なライブチャット
     コメントの心理的なハードルをなくす 
    LPで視聴・コメントの全てが収まるように
    ・管理画面によるモデレート

     各セッションで運営からのアナウンスや、コメントの管理ができるように


    03


    View Slide

  17. チャット機能の裏側 

    03

    アーキテクチャ


    View Slide

  18. チャット機能の裏側 

    Momento Web SDKを用いた実装

    ・適切な権限を付与したユーザーの作成

     あらかじめMomento側で発行した、ユーザー/Admin用Tokenで作成


    ・ルーム・コメントの作成や削除の実装

     フォームなどのUIの実装 ルームの操作、削除はTokenでAdminだけに権限を絞っておく

    ・pub/subの実装

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


    View Slide

  19. チャット機能の裏側 

    定義

    ・@User → LPを使用する方


    ・@Admin →CADC運営チーム


    ・@Common → User と Admin 共通
    03


    View Slide

  20. チャット機能の裏側 

    03

    @Common - Cache/TopicのClient作成


    View Slide

  21. チャット機能の裏側 

    03

    @Admin - ルーム作成・削除のpublish


    View Slide

  22. チャット機能の裏側 

    03

    @Admin - ルーム更新のsubscribe


    View Slide

  23. チャット機能の裏側 

    03

    @Admin - コメント作成・削除のpublish


    View Slide

  24. チャット機能の裏側 

    03

    @User - コメント作成のpublish


    View Slide

  25. チャット機能の裏側 

    03

    @Common - コメント更新のsubscribe


    View Slide

  26. チャット機能の裏側 

    03

    実際の動作の様子


    View Slide

  27. 04
振り返り


    View Slide

  28. 振り返り

    まとめ

    ・Momentoを活用し、2人日ほどでコメント機能を実装できた
     Serverlessという強みを活かし、想定の
    3 〜 5人日よりも遥かに短い期間で実装
    ・複数のライブセッションの運用も問題なく進行できた

     当日サポートいただいたMomentoの皆様、ありがとうございました

    04


    View Slide

  29. CADC 2023について

    01

    本日の内容はこちらのブログでもご覧になれます

    https://developers.cyberagent.co.jp/blog/archives/42887/


    View Slide

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


    View Slide