Electronで動画プレイヤー開発

Transcript

1. © DMM.com Electronで動画再生プレイヤー開発 合同会社DMM.com 動画配信事業部 配信基盤グループ 今西勇太 Think ! FrontEnd

   by DMM #03

2. © DMM.com 2 自己紹介 • 名前：今西勇太（@nisshii0313） • 所属：東京理科大学 理学部 数学科

   4年 • 現在： 2021卒内定者アルバイトとして動画配信事業部でお世 話になってます • 趣味： 日常系アニメ見たり、ゲームしたり、友人とwebサービ ス作ってみたり、たまーに電子工作 などなど

3. © DMM.com (余談) 内定者アルバイトの働き方 休日はゼミの準備 や、個人開発をして 自由に過ごしてます こんな感じの生活を かれこれ1年近く続 けています

   3 平日のスケジュール (自分の例)

4. © DMM.com 今日話すこと • Electronの概要 • 新機能をリリースした話 （同時複数再生機能） 今日話さないこと •

   Electronでの開発の 0→1部分 (チュートリアルを見た方が早そ う) • Electronの最新情報 (公式docをキャッチアップしてみ てください) 4 はじめに

5. © DMM.com Electronについてざっくりと 5

6. © DMM.com Electronとは 6 JavaScript、HTML、CSS でデスクトップアプリを作成できるフレームワーク クロスプラットフォーム対応ができる 中身はChromiumとNode.js Chrome(Chromium)対応だけで良いので、ブラウザ間の差分で苦しまずに済む 一方でクロスプラットフォーム対応の際に、OS間の差分で割と苦しんだりする

   (MacとWindowsでのアプリ起動方式の違いなどなど…)

7. © DMM.com どんな感じで動いているか（ざっくり） Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

   7

8. © DMM.com Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス どんな感じで動いているか（ざっくり）

   • BrowserWindowインスタンスを作り、ウェブページを作成 • BrowserWindowインスタンスを破棄することでRendererプロ セスを終了し、ウェブページを閉じる → 全ての作成されるウェブページと、対応するRendererプロセ スを管理している (backend node.js のようなイメージ) 8

9. © DMM.com どんな感じで動いているか（ざっくり） Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

   • BrowserWindowインスタンスを作り、ウェブページを作成 • BrowserWindowインスタンスを破棄することでRendererプロ セスを終了し、ウェブページを閉じる → 全ての作成されるウェブページと、対応するRendererプロセ スを管理している (backend node.js のようなイメージ) 9

10. © DMM.com どんな感じで動いているか（ざっくり） Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

    Mainプロセスで作成されたBrowserWindowインス タンスによってウェブページが実行される → html/css/jsを使ってChromeの画面に描画す るのとやっていることはほぼ同じ プロセス間通信によって柔軟な表現が可能 10

11. © DMM.com ここからが本題 11

12. © DMM.com DMM Player V2とは Silverlight製だった先代に代わる新しい動 画再生プレイヤー 12 ダウンロードした動画をPC上で再生するこ とができる

    Electron製

13. © DMM.com 新機能をリリースしました 13

14. © DMM.com 複数ウィンドウでの同時再生機能 • 有効にすると、今現在再生しているウィンドウをそのままにして、別ウィン ドウで他の動画を自由に再生できる • ファイル関連付けを行なっておけば、見たい動画を複数選択、ダブルクリ ック、一気にプレイヤーが開かれて再生開始、なんていうこともできたり する

    14

15. © DMM.com 15

16. © DMM.com 要件の整理 16

17. © DMM.com • on時に新しくウィンドウが開かれるタイミングは • 既に開いているウィンドウから「ファイルを開く」で複数選択した場合 • 関連付けをした状態で、動画ファイルを複数選択し、ダブルクリック • off時はこれまでのプレイヤーの機能を提供して、デグレーションが無いよ

    うにする • 共通して持つべきデータ(認証情報、同時再生機能等の設定情報)と、共 通させないべきデータ(音量、再生速度など)がある 17

18. © DMM.com 実装 18

19. © DMM.com 19 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

20. © DMM.com 20 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

    再生する動画情報を、各Rendererプロセスに分配 (Browserwindowインスタンスを立ち上げる時に、プロセス 間通信経由で動画のpath情報を渡す)

21. © DMM.com 21 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

    UIから変更される各種設定(ログイン認証、音量、 再生速度、同時再生のon/offなど)を、 localstorageに保存、都度参照 (音量、再生速度等以外の同期すべき設定につ いては保存時に同期)

22. © DMM.com 22 これで設計ができたので、後は書くだけ

23. © DMM.com 23 めでたしめでたし

24. © DMM.com 24 とはなりませんでした ...

25. © DMM.com 何がいけなかったのか？？ 25

26. © DMM.com 26 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

    UIから変更される各種設定(ログイン認証、音量、 再生速度、同時再生のon/offなど)を、 localstorageに保存、都度参照 (音量、再生速度等以外の同期すべき設定につ いては保存時に同期)

27. © DMM.com 27 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス

    UIから変更される各種設定(ログイン認証、音量、 再生速度、同時再生のon/offなど)を、 localstorageに保存、都度参照 (音量、再生速度等以外の同期すべき設定につ いては保存時に同期) 同時再生のon/offはlocalstorageに入れちゃだめだった…

28. © DMM.com 同時再生設定はlocalstorageに入れちゃだめ なぜか？ • localstorageはブラウザの持ち物であり、 Chromiumが立ち上がるまで、 つまりrendererプロセスが立ち上がるまでは参照できない つまり、このままでは 少なくとも1枚ウィンドウが開かれている状況でないと、設定をonにしていて

    も同時再生できない… 関連付け再生を使っているユーザーにとっては致命的😢 28

29. © DMM.com そこで、同時再生設定の保存先を変更 localstorageではなく、アプリケーションディレクトリ内に直に保存する （覗かれて困るようなデータではなかったため、この方法が可能） 使用ライブラリ: electron-store （保存、読み込みのプロセスを扱いやすくラップしてくれる） 29

30. © DMM.com これで、正真正銘「後は書くだけ」 30

31. © DMM.com 無事リリースまで辿り着きました 31

32. © DMM.com ログ分析 32

33. © DMM.com • リリースして終了、ではなくリリース後のユーザーの反応を可視化し、そ の後の改善につなげています • 弊チームではほぼ全員が、自分でRe:dash(基盤を用意してもらっていま す)を使ってクエリを書いて測定・可視化しています （これは”FEがSQLかけるべき”って話ではないですが、個人的には開発した機能・UI に責任を持つという意味で、書けて困ることはないと思ってます）

    33

34. © DMM.com 同時再生機能の利用者率 34

35. © DMM.com • コアなユーザー向け機能ではあるかもしれないが、思ったよりも有効化し ているユーザー数が少ない… • 原因の一つであろうレスポンシブ対応について、最新版で対応中 （この動画が流れる頃にはリリースされているかもです！） • 使っていただいて、気になる点・要望・不満等あれば、お寄せいただけれ

    ばありがたいです！ 35

36. © DMM.com まとめ 36

37. © DMM.com まとめ • Electronではブラウザ依存しない形でのクライアントサイドでのデータ保 存ができるので、用途に応じて使い分けていくと良さそうです。 もっと良い方法があれば是非教えていただきたいです！ • FEでもクエリを書いて、軽くでもリリースの効果測定ができると良いのか なって個人的には考えてます

    37

38. © DMM.com 良ければこちらもどうぞ 38

39. © DMM.com 39

40. © DMM.com • 配信基盤グループの活動についてもっと知りたければこちら https://inside.dmm.com/archive/category/配信基盤 • Electronでのプレイヤー開発についてもっと知りたければ特にこちら 『Electron製動画再生プレイヤー「DMM Player v2」』

    https://inside.dmm.com/entry/2020/02/06/evolving_content_delivery_platform _01 40

41. © DMM.com ご清聴ありがとうございました 41