動画の視聴ログの実装について

2019年2月8日にTECH PLAY Shibuya で行われた [ スタディサプリ/Quipper Product Meetup #2 〜64万人が利用する教育サービスを作る技術と育てる技術〜 ] のイベント登壇資料です。

Transcript

1. #sapurimeetup 動画の視聴ログの実装について 動画の視聴ログの実装について Kohei Hasegawa / @banyan StudySapuri/Quipper Product Meetup #2
2. #sapurimeetup 動画の視聴ログの実装について Agenda | 01 02 03 04 05 自己紹介 動画の視聴ログとは？ サーバに対してどうデータを送信するか クライアント側でデータをロストさせないようにする まとめ 2
3. #sapurimeetup 動画の視聴ログの実装について 3 @banyan / Kohei Hasegawa Engineering Manager 2013年5月に join。2015年にリクルートに買収された後は受験サプリからスタ ディサプリへの移行プロジェクトに関わる。その後先生用のサービスをリニューア ルして現在は生徒用のサービスのリニューアルに関わっている
4. #sapurimeetup 動画の視聴ログの実装について 動画の視聴ログとは？ 02 4
5. #sapurimeetup 動画の視聴ログの実装について 5
6. #sapurimeetup 動画の視聴ログの実装について なぜ視聴ログを取るのか？ ➔ ユーザーのアクティビティを把握するため ➔ 学校の先生がどれくらい生徒が視聴したかを把握するため ➔ 保護者がどれくらい子供が視聴したかを把握するため ➔ UI として視聴済みを表示するため ➔ ユーザが異なるデバイス (e.g. Web と Native app) で動画を見た場合に見 ていないところから再生したい ➔ etc... 6
7. #sapurimeetup 動画の視聴ログの実装について どう視聴ログを取るのか？ ➔ ユーザが動画を見続けた場合20秒に1回サーバにデータを送信する ➔ また、pause, seek, resume 等のタイミングでも適宜データを送信する必要 がある 7
8. #sapurimeetup 動画の視聴ログの実装について サーバに対してどうデータを送信するか 03 8
9. #sapurimeetup 動画の視聴ログの実装について 問題 ➔ 視聴をしたはずがしていないことになっているという問い合わせが定期的にく る ◆ データがどこかでロストしている 9
10. #sapurimeetup 動画の視聴ログの実装について Before: [[start, end], ...] E.g. [[0, 40], [60, 80]] 10
11. #sapurimeetup 動画の視聴ログの実装について Before: 1. あるユーザが動画を見始める: [[0, 0]] 2. そのまま視聴し続けた a. 20秒毎に position を送信するため [[0, 20]] -> [[0, 40]] -> [[0, 60]] と 更新される 3. そして 121秒経った時に stop を押した: [[0, 121]] 4. 9秒後に seek して視聴を再開した: [[0, 121], [130, 130]] 11
12. #sapurimeetup 動画の視聴ログの実装について また送るデータはイベントの意味を持つようにしていた 12
13. #sapurimeetup 動画の視聴ログの実装について Before: 1. あるユーザが動画を見始める: [[0, 0]] ← video_start 2. そのまま視聴し続けた a. 20秒毎に position を送信するため [[0, 20]] -> [[0, 40]] -> [[0, 60]] と 更新される← video_update 3. そして 121秒経った時に stop を押した: [[0, 121]] ← video_stop 4. 9秒後に seek して視聴を再開した: [[0, 121], [130, 130]] ← video_start 13
14. #sapurimeetup 動画の視聴ログの実装について 調べていくと以下のことが分かる ➔ データが届く順序が保証されていない ◆ API サーバは複数のインスタンスがある ◆ 複数のサーバの負荷の違いによりデータが処理される時間が異なる ➔ またそれぞれのデータがイベントの意味を持つようにしていたことも原因があ りそう 14
15. #sapurimeetup 動画の視聴ログの実装について 理想的なケース > video_start # => [[0, 0]] video_update # => [[0, 20]] video_stop # => [[0, 20]] video_start # => [[0, 20], [30, 30]] # seek forward video_update # => [[0, 20], [30, 50]] video_update # => [[0, 20], [30, 60]] video_stop 15
16. #sapurimeetup 動画の視聴ログの実装について 理想的なケース video_start # => [[0, 0]] > video_update # => [[0, 20]] video_stop # => [[0, 20]] video_start # => [[0, 20], [30, 30]] # seek forward video_update # => [[0, 20], [30, 50]] video_update # => [[0, 20], [30, 60]] video_stop 16
17. #sapurimeetup 動画の視聴ログの実装について 理想的なケース video_start # => [[0, 0]] video_update # => [[0, 20]] > video_stop # => [[0, 20]] video_start # => [[0, 20], [30, 30]] # seek forward video_update # => [[0, 20], [30, 50]] video_update # => [[0, 20], [30, 60]] video_stop 17
18. #sapurimeetup 動画の視聴ログの実装について 理想的なケース video_start # => [[0, 0]] video_update # => [[0, 20]] video_stop # => [[0, 20]] > video_start # => [[0, 20], [30, 30]] # seek forward video_update # => [[0, 20], [30, 50]] video_update # => [[0, 20], [30, 60]] video_stop 18
19. #sapurimeetup 動画の視聴ログの実装について 理想的なケース video_start # => [[0, 0]] video_update # => [[0, 20]] video_stop # => [[0, 20]] video_start # => [[0, 20], [30, 30]] # seek forward > video_update # => [[0, 20], [30, 50]] video_update # => [[0, 20], [30, 60]] video_stop 19
20. #sapurimeetup 動画の視聴ログの実装について 理想的なケース video_start # => [[0, 0]] video_update # => [[0, 20]] video_stop # => [[0, 20]] video_start # => [[0, 20], [30, 30]] # seek forward video_update # => [[0, 20], [30, 50]] > video_update # => [[0, 20], [30, 60]] video_stop 20
21. #sapurimeetup 動画の視聴ログの実装について 理想的なケース video_start # => [[0, 0]] video_update # => [[0, 20]] video_stop # => [[0, 20]] video_start # => [[0, 20], [30, 30]] # seek forward video_update # => [[0, 20], [30, 50]] video_update # => [[0, 20], [30, 60]] > video_stop 21
22. #sapurimeetup 動画の視聴ログの実装について (Welcome to) Real World > video_start # => [[0, 0]] 22
23. #sapurimeetup 動画の視聴ログの実装について (Welcome to) Real World video_start # => [[0, 0]] > video_start # => [[0, 0], [30, 30]] # seek forward # video_update # => [[0, 20]] # video_stop # => [[0, 20]] 23
24. #sapurimeetup 動画の視聴ログの実装について (Welcome to) Real World video_start # => [[0, 0]] video_start # => [[0, 0], [30, 30]] # seek forward # video_update # => [[0, 20]] # video_stop # => [[0, 20]] > video_update # => [[0, 0], [30, 50]] video_update # => [[0, 0], [30, 60]] video_stop 24
25. #sapurimeetup 動画の視聴ログの実装について (Welcome to) Real World video_start # => [[0, 0]] video_start # => [[0, 0], [30, 30]] # seek forward # video_update # => [[0, 20]] # video_stop # => [[0, 20]] video_update # => [[0, 0], [30, 50]] > video_update # => [[0, 0], [30, 60]] video_stop 25
26. #sapurimeetup 動画の視聴ログの実装について (Welcome to) Real World video_start # => [[0, 0]] video_start # => [[0, 0], [30, 30]] # seek forward # video_update # => [[0, 20]] # video_stop # => [[0, 20]] video_update # => [[0, 0], [30, 50]] video_update # => [[0, 0], [30, 60]] > video_stop 26
27. #sapurimeetup 動画の視聴ログの実装について データ構造を以下のようにする ➔ 冪等にする ◆ 最後のデータを更新する、等のロジックを廃止し、基本的に array に追 加していくだけにする ➔ Stateless にする ◆ イベントをデータが持つことを廃止した。video_start, video_update, video_stop などをやめ video_attempt に統一。 27
28. #sapurimeetup 動画の視聴ログの実装について After: [[start, prev, current], …] E.g. [[0, 0, 20], [0, 20, 40]] 28
29. #sapurimeetup 動画の視聴ログの実装について After: 1. あるユーザが動画を見始める: [[0, 0, 0]] 2. そのまま視聴し続けた a. 20秒毎に position を送信し [[0, 0, 20], [0, 20, 40], [0, 40, 60]] となる 3. そして 121秒経った時に stop を押した: [[0, 0, 20], [0, 20, 40], [0, 40, 60], …, [0, 120, 121]] 4. 数秒先に seek して視聴を再開した: [[0, 0, 20], …, [0, 120, 121], [130, 130, 130]] 29
30. #sapurimeetup 動画の視聴ログの実装について 結果 ➔ レースコンディションがなくなり壊れにくくなった ➔ 送られてくるデータ構造からデバッグ / 調査もしやすくなった 30
31. #sapurimeetup 動画の視聴ログの実装について クライアント側でデータをロストさせないよう にする 04 31
32. #sapurimeetup 動画の視聴ログの実装について サーバにデータが届かなかった場合 ➔ 通常の場合問題はないが、例えば一時的にサーバが落ちている場合クライ アントのデータがロストしてしまうと、生徒の視聴履歴も消えてしまうことにな る。 ➔ また特に Native アプリではオフラインの状態になることも多く、アプリ自体も オフラインでの対応しているため、最初からサーバにデータを送信できないこ とは考慮にいれる必要がある。 32
33. #sapurimeetup 動画の視聴ログの実装について 届くまでデータを送るようにする ➔ そのためまず視聴履歴等のデータは、Web の場合であれば localforage と いうライブラリを使って IndexedDB か localstorage にデータを enqueue します。 ➔ 適切な回数 retry を行い、もし規定の回数を超えて失敗した場合は一旦は 何もしません。また違う画面に行った場合は reload などのタイミングで retry を行います。 ➔ Android では当初から細かいロジックは異なりますが、基本的にはこれと同 じでデータをなるべく失わないための実装をしていた。 33
34. #sapurimeetup 動画の視聴ログの実装について まとめ 04 34
35. #sapurimeetup 動画の視聴ログの実装について まとめ ➔ データ構造はシンプルに壊れにくくする ➔ クライアント側でのデータの保持は最善を尽くす ➔ 今日話したものは一例で他にも改修をしたりしましたが、問題を直した以降 はお問い合わせがなくなりました 35
36. #sapurimeetup 動画の視聴ログの実装について ご清聴ありがとうございました 36