Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Electronで動画プレイヤー開発

3f001aaf60bab10db9740d0d95dd85d2?s=47 Yuta Imanishi
February 25, 2021

 Electronで動画プレイヤー開発

3f001aaf60bab10db9740d0d95dd85d2?s=128

Yuta Imanishi

February 25, 2021
Tweet

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