$30 off During Our Annual Pro Sale. View Details »

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

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

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

TVer Inc.
PRO

July 29, 2023
Tweet

More Decks by TVer Inc.

Other Decks in Technology

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