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

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会
   

   View Slide

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

   View Slide

3. 自己紹介
   

   View Slide

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

   View Slide

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

   View Slide

6. TVerについて
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

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

    View Slide

18. 地上波とWeb配信の違い
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. 視聴体験の可視化
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. View Slide

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

    View Slide

47. 動画プレイヤーの挙動？
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. View Slide

57. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

64. View Slide