配信サービスを作るなら視聴者の体験も可視化してみませんか？

by TVer Inc.

Slide 1

Slide 1 text

配信サービスを作るなら視聴者の体験も可視化してみませんか？株式会社 TVer / 加我貴志 2023/08/18 JAWS-UG いわて特別編 Media-JAWS コラボ LT会

Slide 2

Slide 2 text

自己紹介・加我貴志 (@TAKA_0411) ・株式会社TVer 　サービス事業本部 SRE ・趣味はカメラとサウナとVTuber ・JAWS-UG 東北初参加・好きなサービス : GuardDuty

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

アジェンダ ● TVerについて ● 地上波とWeb配信の違い ● 視聴体験の可視化 ● まとめ

Slide 5

Slide 5 text

アジェンダ ● TVerについて ● 地上波とWeb配信の違い ● 視聴体験の可視化 ● まとめ

Slide 6

Slide 6 text

TVerについて

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

アジェンダ ● TVerについて ● 地上波とWeb配信の違い ● 視聴体験の可視化 ● まとめ

Slide 18

Slide 18 text

地上波とWeb配信の違い

Slide 19

Slide 19 text

地上波とWeb配信の違い技術的な違い ● 放送の仕組みと配信設備 ● 視聴環境 ● 守備範囲

Slide 20

Slide 20 text

地上波とWeb配信の違い技術的な違い ● 放送の仕組みと配信設備 ● 視聴環境 ● 守備範囲

Slide 21

Slide 21 text

地上波とWeb配信の違い放送の仕組みと配信設備 (地上波) ● 番組を電波で配信 ○ 電波を送信する設備が必要 ■ 東京スカイツリー ■ 東京タワー ◻ 現在は予備送信所 ○ 電波を受信する設備が必要 ■ アンテナ & テレビ IIJ インターネット図鑑 - テレビ放送とネット動画の違い https://www.iij.ad.jp/cm/i_book/chapter1_2.html 電波を送信する送信所・中継局が必要

Slide 22

Slide 22 text

放送の仕組みと配信設備 (Web配信) ● 番組をデータで配信 ○ データを送信する設備が必要 ■ 配信サーバー ◻ ストリーミングサーバー ◻ CDN (キャッシュサーバー) ◻ Webサーバー ○ データを受信する端末が必要 ■ PC, スマホ, タブレット地上波とWeb配信の違い IIJ インターネット図鑑 - テレビ放送とネット動画の違い https://www.iij.ad.jp/cm/i_book/chapter1_2.html データを送信するサーバーが必要

Slide 23

Slide 23 text

地上波とWeb配信の違い技術的な違い ● 放送の仕組みと配信設備 ● 視聴環境 ● 守備範囲

Slide 24

Slide 24 text

地上波とWeb配信の違い視聴環境 (地上波) ● 単一の視聴環境 ○ テレビ受像機という専用機 ● 長い歴史と枯れた技術 ○ 1953 年白黒放送開始 ○ 1960 年カラー放送開始 ○ 2003 年地デジ放送開始

Slide 25

Slide 25 text

地上波とWeb配信の違い視聴環境 (Web配信) ● 多様な視聴環境 ○ PC、スマホ、タブレット ○ コネクテッドTV ● 新しい技術 ○ インターネット ○ アプリケーション ○ 動画配信

Slide 26

Slide 26 text

地上波とWeb配信の違い技術的な違い ● 放送の仕組みと配信設備 ● 視聴環境 ● 守備範囲

Slide 27

Slide 27 text

守備範囲 (地上波) ● 番組は電波で配信 ○ 電波を送信するのは事業者 (放送局) の基本的な守備範囲 ○ 電波を受信するのはテレビメーカーの基本的な守備範囲地上波とWeb配信の違い

Slide 28

Slide 28 text

守備範囲 (Web配信) ● 番組はデータで配信 ○ データを送信するのは事業者の守備範囲 ○ データを受信するのは誰の守備範囲？メーカー？地上波とWeb配信の違い

Slide 29

Slide 29 text

守備範囲 (Web配信) ● 番組はデータで配信 ○ データを送信するのは事業者の守備範囲 ○ データを受信するのは誰の守備範囲？メーカー？　　送受信が同一の事業者なので　　現時点では両方の面倒を見る地上波とWeb配信の違い配信が見れません！責任範囲外です

Slide 30

Slide 30 text

アジェンダ ● TVerについて ● 地上波とWeb配信の違い ● 視聴体験の可視化 ● まとめ

Slide 31

Slide 31 text

視聴体験の可視化

Slide 32

Slide 32 text

視聴体験の可視化なぜ視聴体験を可視化する必要があるのか

Slide 33

Slide 33 text

視聴体験の可視化なぜ視聴体験を可視化する必要があるのか ↓ 事業者が送受信両方の面倒を見る必要がある

Slide 34

Slide 34 text

視聴体験の可視化なぜ視聴体験を可視化する必要があるのか ↓ 事業者が送受信両方の面倒を見る必要がある ↓ 視聴者のデータも分析して改善したい

Slide 35

Slide 35 text

視聴者の体験を計測しようとしていますか？

Slide 36

Slide 36 text

視聴体験の可視化あるあるパターン : モニタリング自体が後回し Amazon IVSが〜 AWS Elemental MediaConvertは〜 AWS Amplify ってさ〜 (誰もモニタリングの話をしていない！？)

Slide 37

Slide 37 text

あるあるパターン : バックエンドだけ監視している視聴体験の可視化サービスのユーザーサービスの開発者 JavaScript のエラーアプリのクラッシュ予期せぬ巨大な画像データデバイスの発熱でアプリが強制終了サービスが使えないんだけど！！システムに問題は出てないですねメモリリークでスローダウン

Slide 38

Slide 38 text

ユーザ体験はサービス全体で作り上げるもの

Slide 39

Slide 39 text

視聴体験の可視化視聴体験はユーザーとシステムから観測する ● フロントエンド (ユーザー) ○ アプリやブラウザで計測 ■ ユーザーに近い箇所のデータ ● バックエンド (システム) ○ APIサーバーやインフラで計測 ■ システムに近い箇所のデータバックエンドのログとリソース状況を分析しますフロントエンドで発生したイベントを分析しますね

Slide 40

Slide 40 text

視聴体験の可視化視聴体験はユーザーとシステムから観測する ● フロントエンド (ユーザー) ○ アプリやブラウザで計測 ■ ユーザーに近い箇所のデータ ● バックエンド (システム) ○ APIサーバーやインフラで計測 ■ システムに近い箇所のデータ

Slide 41

Slide 41 text

視聴体験の可視化フロントエンドの観測データバックエンドの観測データ観測データを集約

Slide 42

Slide 42 text

視聴体験の可視化フロントエンドの観測データ

Slide 43

Slide 43 text

視聴体験の可視化フロントエンドで何を見る？ ● エラー系 ○ JavaScriptエラー, http通信エラー ○ アプリのクラッシュ ● レスポンスタイム ● Core Web Vitals ○ 実際のユーザー体験を測定する一連の指標 ○ Googleがランキングを決定する際に考慮する要素

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

視聴体験の可視化フロントエンドで何を見る？ ● エラー系 ○ JavaScriptエラー, http通信エラー ○ アプリのクラッシュ ● レスポンスタイム ● Core Web Vitals ● 動画プレイヤーの挙動

Slide 47

Slide 47 text

動画プレイヤーの挙動？

Slide 48

Slide 48 text

視聴体験の可視化 New Relic Video Agent ● 動画プレイヤーのイベントを検知, 取得 ○ 動画広告のイベントにも対応 ● iOS, Android, JSなどに対応 ○ https://github.com/newrelic/video-agent-iOS ○ https://github.com/newrelic/video-agent-android ○ https://github.com/newrelic/video-videojs-js

Slide 49

Slide 49 text

視聴体験の可視化取得できるイベントと属性

Slide 50

Slide 50 text

動画再生時はデバイスに起因するエラーが発生していそう動画再生後は純粋なアプリ起因のエラーが多そう

Slide 51

Slide 51 text

視聴体験の可視化 Media and Entertainment Observability ● メディア系に特化したデータのダッシュボード ● GitHubで公開されているものを追加 ○ https://github.com/newrelic/nr1-mande ● 自分でダッシュボードを作らなくて良い (最高)

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Slide 54

Slide 54 text

視聴体験の可視化バックエンドの観測データ

Slide 55

Slide 55 text

視聴体験の可視化バックエンドで何を見る？ ● リクエスト数 ● レイテンシ ● スループット ● エラー ● キャパシティ (リソース)

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

アジェンダ ● TVerについて ● 地上波とWeb配信の違い ● 可用性とスケーラビリティ ● 視聴体験の可視化 ● まとめ

Slide 59

Slide 59 text

まとめサービス全体をモニタリングし視聴者の体験を可視化することでサービス改善につなげよう！

Slide 60

Slide 60 text

SaaSを使わないと視聴体験は可視化できない？

Slide 61

Slide 61 text

まとめ Amazon CloudWatch RUM - AWS Black Belt Online Seminar https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_Amazon-CloudWatch-RUM_0430_v1.pdf

Slide 62

Slide 62 text

まとめ AWS X-Ray - AWS Black Belt Online Seminar https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_AWS-X-Ray_0228_v1.pdf

Slide 63

Slide 63 text

まとめ Amazon CloudWatch Agent adds support for OpenTelemetry traces and AWS X-Ray https://aws.amazon.com/about-aws/whats-new/2023/08/amazon-cloudwatch-agent-opentelemetry-traces-x-ray/

Slide 64

Slide 64 text

No content