© DMM.com CONFIDENTIAL © DMM.com 配信システムをFlashから WebRTCにリプレイスしている DMM Meetup in 金沢 EC&デジタルコンテンツ本部　香林辰哉 2019/12/12 話 

© DMM.com 自己紹介 • 香林 辰哉（こうりん たつや） • 2012年4月入社 • ライブ配信システムの開発、保守 ( Flash / Javascript ) • 2018年からリプレイス案件に参加 スノーボードの時期が来た 2 

© DMM.com • 1対多で映像を視聴するサービス • チャット機能 • 1対1でのビデオチャット機能も搭載 ライブ配信システム 3 • 遅延が品質に大きく影響する 

© DMM.com 2020年問題 4 • Adobe Flashが2020年末ブラウザサポート終了 • Flashにかわるシステムの構築が急務 • 段階的に終了に向けて進んでいる • 配信：WebRTC • フロント：HTML5 + Javascript 

© DMM.com WebRTC 5 • Web Real-Time Communication • ブラウザ上でビデオチャットが出来る技術 • 各種ブラウザが徐々に対応してきた • 遅延が1秒未満 

© DMM.com デモ 6 受信 送信 

© DMM.com 基盤リプレイスは大変…！ 7 • 約3年にわたる大規模プロジェクト • プロジェクトを成功させるための工夫 • 開発手法 • 技術 

© DMM.com 開発の 8 話 

© DMM.com スクラム開発 9 • 開発 → テストを細かく回す • 1週間スプリントで都度軌道修正 • 業務を分担して対応 • フロントエンド開発メンバー • バックエンド開発メンバー 

© DMM.com • スクラムイベントは変則的 • チーム間の連携も都度行う LeSS（Large-Scale Scrum） 10 • 六本木と金沢でそれぞれチームを編成 • 複数のプロダクトを並行で作っていける • 六本木とは常時映像共有 • チーム間の代表者が集まるイベントも 

© DMM.com 開発の様子 11 

© DMM.com スクラムイベントの様子 12 

© DMM.com 技術的な 13 話 

© DMM.com フロントエンド 14 • 言語：TypeScript & ES2015+ • FW：React + Redux • テスト：Jest + Enzyme • フォーマッタ：ESLint + Prettier • UI：Storybook、Atomic Design 

© DMM.com Storybook 15 

© DMM.com • APIサーバ：PHP + Laravel • DB、Webサーバは既存のものを利用 バックエンド 16 • AWS上で構築 • EC2 / ECS / S3 / ElastiCache / Lambda Elasticsearch Service / Cloud Front Route 53 / VPC / API Gateway 

© DMM.com 今後の 17 話 

© DMM.com • 来年度もリプレイス作業は続く 今後の予定 18 • 年明け以降のリリースに向けて最終調整中！ • β版としてFlash版と並行稼動 • スマホ対応 • 正式リリース etc...