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

2023/07/29
[秋田][オフライン開催] JAWS-UG 東北 〜東北エンジニアの祭典〜 [初心者大歓迎]
イベントURL :
https://jaws-tohoku.doorkeeper.jp/events/156109

2023/08/18
[東北][岩手][オフライン開催]JAWS-UGいわて 特別編 Media-JAWSコラボ LT会
イベントURL :
https://jaws-tohoku.doorkeeper.jp/events/157194

Transcript

1. 配信サービスを作るなら 視聴者の体験も可視化してみませんか？ 株式会社 TVer / 加我 貴志 2023/08/18 JAWS-UG いわて 特別編 Media-JAWS コラボ LT会
2. 自己紹介 ・加我 貴志 (@TAKA_0411) ・株式会社TVer 　 サービス事業本部 SRE ・趣味はカメラとサウナとVTuber ・JAWS-UG 東北 初参加 ・好きなサービス : GuardDuty
3. 自己紹介
4. アジェンダ • TVerについて • 地上波とWeb配信の違い • 視聴体験の可視化 • まとめ
5. アジェンダ • TVerについて • 地上波とWeb配信の違い • 視聴体験の可視化 • まとめ
6. TVerについて
17. アジェンダ • TVerについて • 地上波とWeb配信の違い • 視聴体験の可視化 • まとめ
18. 地上波とWeb配信の違い
19. 地上波とWeb配信の違い 技術的な違い • 放送の仕組みと配信設備 • 視聴環境 • 守備範囲
20. 地上波とWeb配信の違い 技術的な違い • 放送の仕組みと配信設備 • 視聴環境 • 守備範囲
21. 地上波とWeb配信の違い 放送の仕組みと配信設備 (地上波) • 番組を電波で配信 ◦ 電波を送信する設備が必要 ▪ 東京スカイツリー ▪ 東京タワー ◻ 現在は予備送信所 ◦ 電波を受信する設備が必要 ▪ アンテナ & テレビ IIJ インターネット図鑑 - テレビ放送とネット動画の違い https://www.iij.ad.jp/cm/i_book/chapter1_2.html 電波を送信する 送信所・中継局 が必要
22. 放送の仕組みと配信設備 (Web配信) • 番組をデータで配信 ◦ データを送信する設備が必要 ▪ 配信サーバー ◻ ストリーミングサーバー ◻ CDN (キャッシュサーバー) ◻ Webサーバー ◦ データを受信する端末が必要 ▪ PC, スマホ, タブレット 地上波とWeb配信の違い IIJ インターネット図鑑 - テレビ放送とネット動画の違い https://www.iij.ad.jp/cm/i_book/chapter1_2.html データを送信する サーバーが必要
23. 地上波とWeb配信の違い 技術的な違い • 放送の仕組みと配信設備 • 視聴環境 • 守備範囲
24. 地上波とWeb配信の違い 視聴環境 (地上波) • 単一の視聴環境 ◦ テレビ受像機という専用機 • 長い歴史と枯れた技術 ◦ 1953 年 白黒放送開始 ◦ 1960 年 カラー放送開始 ◦ 2003 年 地デジ放送開始
25. 地上波とWeb配信の違い 視聴環境 (Web配信) • 多様な視聴環境 ◦ PC、スマホ、タブレット ◦ コネクテッドTV • 新しい技術 ◦ インターネット ◦ アプリケーション ◦ 動画配信
26. 地上波とWeb配信の違い 技術的な違い • 放送の仕組みと配信設備 • 視聴環境 • 守備範囲
27. 守備範囲 (地上波) • 番組は電波で配信 ◦ 電波を送信するのは 事業者 (放送局) の 基本的な守備範囲 ◦ 電波を受信するのは テレビメーカーの 基本的な守備範囲 地上波とWeb配信の違い
28. 守備範囲 (Web配信) • 番組はデータで配信 ◦ データを送信するのは 事業者の守備範囲 ◦ データを受信するのは 誰の守備範囲？メーカー？ 地上波とWeb配信の違い
29. 守備範囲 (Web配信) • 番組はデータで配信 ◦ データを送信するのは 事業者の守備範囲 ◦ データを受信するのは 誰の守備範囲？メーカー？ 　 　 送受信が同一の事業者なので 　 　 現時点では両方の面倒を見る 地上波とWeb配信の違い 配信が見れません！ 責任範囲外です
30. アジェンダ • TVerについて • 地上波とWeb配信の違い • 視聴体験の可視化 • まとめ
31. 視聴体験の可視化
32. 視聴体験の可視化 なぜ視聴体験を可視化する必要があるのか
33. 視聴体験の可視化 なぜ視聴体験を可視化する必要があるのか ↓ 事業者が送受信両方の面倒を見る必要がある
34. 視聴体験の可視化 なぜ視聴体験を可視化する必要があるのか ↓ 事業者が送受信両方の面倒を見る必要がある ↓ 視聴者のデータも分析して改善したい
35. 視聴者の体験を 計測しようとしていますか？
36. 視聴体験の可視化 あるあるパターン : モニタリング自体が後回し Amazon IVSが〜 AWS Elemental MediaConvertは〜 AWS Amplify ってさ〜 (誰もモニタリングの 話をしていない！？)
37. あるあるパターン : バックエンドだけ監視している 視聴体験の可視化 サービスのユーザー サービスの開発者 JavaScript のエラー アプリの クラッシュ 予期せぬ巨大な 画像データ デバイスの発熱 でアプリが強制 終了 サービスが 使えないんだけど！！ システムに問題は 出てないですね メモリリークで スローダウン
38. ユーザ体験はサービス全体で 作り上げるもの
39. 視聴体験の可視化 視聴体験はユーザーとシステムから観測する • フロントエンド (ユーザー) ◦ アプリやブラウザで計測 ▪ ユーザーに近い箇所のデータ • バックエンド (システム) ◦ APIサーバーやインフラで計測 ▪ システムに近い箇所のデータ バックエンドのログ とリソース状況を分 析します フロントエンドで 発生したイベント を分析しますね
40. 視聴体験の可視化 視聴体験はユーザーとシステムから観測する • フロントエンド (ユーザー) ◦ アプリやブラウザで計測 ▪ ユーザーに近い箇所のデータ • バックエンド (システム) ◦ APIサーバーやインフラで計測 ▪ システムに近い箇所のデータ
41. 視聴体験の可視化 フロントエンドの 観測データ バックエンドの 観測データ 観測データ を集約
42. 視聴体験の可視化 フロントエンドの 観測データ
43. 視聴体験の可視化 フロントエンドで何を見る？ • エラー系 ◦ JavaScriptエラー, http通信エラー ◦ アプリのクラッシュ • レスポンスタイム • Core Web Vitals ◦ 実際のユーザー体験を測定する一連の指標 ◦ Googleがランキングを決定する際に考慮する要素
46. 視聴体験の可視化 フロントエンドで何を見る？ • エラー系 ◦ JavaScriptエラー, http通信エラー ◦ アプリのクラッシュ • レスポンスタイム • Core Web Vitals • 動画プレイヤーの挙動
47. 動画プレイヤーの挙動？
48. 視聴体験の可視化 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
49. 視聴体験の可視化 取得できるイベントと属性
50. 動画再生時はデバイス に起因するエラーが 発生していそう 動画再生後は純粋な アプリ起因のエラーが 多そう
51. 視聴体験の可視化 Media and Entertainment Observability • メディア系に特化したデータのダッシュボード • GitHubで公開されているものを追加 ◦ https://github.com/newrelic/nr1-mande • 自分でダッシュボードを作らなくて良い (最高)
53. 視聴体験の可視化 視聴体験はユーザーとシステムから観測する • フロントエンド (ユーザー) ◦ アプリやブラウザで計測 ▪ ユーザーに近い箇所のデータ • バックエンド (システム) ◦ APIサーバーやインフラで計測 ▪ システムに近い箇所のデータ
54. 視聴体験の可視化 バックエンドの 観測データ
55. 視聴体験の可視化 バックエンドで何を見る？ • リクエスト数 • レイテンシ • スループット • エラー • キャパシティ (リソース)
58. アジェンダ • TVerについて • 地上波とWeb配信の違い • 可用性とスケーラビリティ • 視聴体験の可視化 • まとめ
59. まとめ サービス全体をモニタリングし 視聴者の体験を可視化することで サービス改善につなげよう！
60. SaaSを使わないと 視聴体験は可視化できない？
61. まとめ 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
62. まとめ 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
63. まとめ 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/