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
動画配信の フロントエンドを支える 4年間とこれから
Search
Yuta Imanishi
December 20, 2024
Technology
1
400
動画配信の フロントエンドを支える 4年間とこれから
https://connpass.com/event/333153/
での発表資料
Yuta Imanishi
December 20, 2024
Tweet
Share
More Decks by Yuta Imanishi
See All by Yuta Imanishi
動画配信のフロントエンドって何やってるの
nisshii0313
0
77
"動画"配信のお話
nisshii0313
0
29
Electronで動画プレイヤー開発
nisshii0313
1
1.3k
Prometheusの話
nisshii0313
0
190
Other Decks in Technology
See All in Technology
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
2
110
Lazy application authentication with Tailscale
bluehatbrit
0
220
PO初心者が考えた ”POらしさ”
nb_rady
0
220
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.9k
What’s new in Android development tools
yanzm
0
340
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
410
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Orchestrator
shlominoach
189
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Automating Front-end Workflow
addyosmani
1370
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
© DMM.com 動画配信の フロントエンドを支える 4年間とこれから 動画配信開発部 配信基盤グループ 今西勇太 2024/12/20 【学生向け勉強会】
teamLab×DMM tech meetup ~frontend~
© DMM 2 自己紹介 名前: 今西勇太 (@nisshii0313) 所属: DMM.com 動画配信開発部
配信基盤G 2021年新卒で、4年目です。 最近は主にPS4/5、テレビ向けの 動画再生プレイヤーを作ってます。 (for DMM TV) 外部向けな勉強会のメイン運営もやってます。 Think! Frontend by DMM まんがタイムきららが好きなオタクです。 ふるさと納税でみかんが10kg来て、 頑張って消費してます🍊
© DMM アドベントカレンダー書いたので、気になる方はぜひ! 3
© DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 動画配信のフロントエンド、DMMで新卒エンジニアとして働くこと、 その辺りに興味を持ってもらえると嬉しいです。
4
© DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 5分LTという時間の都合上、あまり詳しい内容に触れられません。 興味を持っていただいた方はこちらの資料も併せてご覧ください。
https://speakerdeck.com/nisshii0313/dong-hua-pei-xin-noohua 5
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する
早い、うまい、やすい。どこかで聞いたことのある売り文句ですね。 6
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する
7
© DMM DMMの動画配信のフロントエンドについてざっくり - “早く”再生できるようにする 基本的なアプローチとしては普通のフロントエンド最適化と同じで、 レンダリングサイクルの整理が挙げられます。 (無駄な読み込み、再レンダリング防止、state管理の最適化など) コンテンツ自体の容量として、画像 <<<<
動画 なので、 上記のアプローチ1つ1つがより顕著に効いてきます。 ここは”動画配信だから”という色がそこまで出ないので割愛します。 8
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが “うまく”再生できるようにする -
どんな通信環境のユーザーでも視聴し”やすく”する 9
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - 権利のあるユーザーだけが“うまく”再生できるようにする 著作権保護の話です。DRMって聞いたことがあるかもしれません。 スマホの録画などでmp4とかmov形式が馴染み深いと思いますが、 それらは容易に複製して再生できてしまいます。 弊社で配信しているアニメ・ドラマ等が 権利のないユーザーによって不正視聴されると困る。
10
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - 権利のあるユーザーだけが“うまく”再生できるようにする そこで視聴権利のないユーザーによる再生を防止するために、 権利のあるユーザーだけが動画を復号できる仕組みが必要です。 → Encrypted Media
Extensions (以降EME) 細かいフローは複雑なので省略しますが、 あらかじめ動画を暗号化しておき、適切な権利を持つユーザーに 鍵を付与し、ブラウザで復号させて再生させる、という仕組みです。 11
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し
”やすく”する 12
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 全てのユーザーが4K動画の視聴を望んでいると思いますか? 13
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 全てのユーザーが4K動画の視聴を望んでいると思いますか? → 答えは No。(厳密には、Yesとは限らない。) ユーザーの回線状況はまちまちで、
画質よりも安定視聴を求めるユーザーも多いです。 → そこで「ABR」という仕組みが必要になってきます。 14
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 「ABR」(アダプティブビットレート) 画角の異なる複数(たくさん)の動画を、ユーザーの状況に合わせて 動的に切り替える仕組みです。 → これの実現のために、Media
Source Extensions (以降 MSE) の技術を使って再生する必要があります。 それにより、ストリーミング配信の細かい制御が可能になります。 15
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する MSEの技術を使ってABR再生 あくまで厳密性を排除したという前提で、 「あらかじめ動画を短い尺に分割し、1秒ごとにユーザーの回線状況 を監視して、次にどの画角(4K・HD・SD相当 …
etc)で取得するか 調整している」ようなイメージだと分かりやすいかもしれません。 16
© DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 急に話の毛色が変わりますが、温度差で風邪引かないでください笑 学生の皆さんにとって、4年目というとまだまだ先の未来の話だと思いますが、
頭の片隅に残してもらえると嬉しいです。 17
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 個人的に、エンジニアリングに関わらず、仕事の評価って - X軸: 規模、関わった(まとめた)人数 - Y軸: 質、専門性、練度
の掛け算で求まると考えています。 実際に、弊社の評価基準にも - 規模: 個人→チーム→チームを超えた活躍→組織 - 質: 指示通り→自走→専門性の発揮や指示出し、指導、育成 という尺度で含まれています。 18
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 個人的に理想的なロードマップはこんな感じだと考えています。 1年目 指示通りの仕事が責任を伴ってできる→軽い指示から自走できる 2, 3年目 チーム目線で必要なタスクを自走する →
チーム目線で専門性を発揮したり、リーダーとして指示を出したり 19
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 4年目以降 チームを超えたり、組織目線でのリーダーシップや専門性が求められてくる どういうことか? → (2,3年目に求められていることをクリアしている前提で) 個人の成果に加えて、成果を挙げられるチーム・組織作りが求められる 例えば、自分よりも優秀なメンバーが生まれやすかったり、集まってくるような
環境づくりやそのサポートが求められる 20 って理解してます
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 自分よりも優秀なメンバーが生まれやすい環境づくりやそのサポート 平たく言えば育成ですが、あくまで仕組み化しないと長続きしません。 出来ることはたくさんあると思いますが、今回特に例として挙げるのが 登壇等の外部へのアウトプットの場の提供、およびそのサポートです。 今回の合同勉強会を持ちかけ・企画したのも実はその一環だったりします。 これから定期的に開催していきたいですね! それ以外にもThink!
Frontendでは登壇内容・スライドのレビューを行っています。 21
© DMM まとめ - DMMの動画配信のフロントエンドについて 早く視聴できて、権利のある人だけがうまく見れて、どんな回線状況でも 視聴しやすい、を作るために色々な技術を使ってます。 (DRM, EME, MSE,
ABR などなど) - DMMで新卒4年目のエンジニアとして求められる仕事内容 あくまで僕自身の考えと弊社の評価基準の共通部分をお伝えした形です。 ぜひ各々のロードマップの参考になればと思います。 ご清聴ありがとうございました! 22