Electronで動画プレイヤー開発

Think! FrontEnd by DMM #3 (https://dmm.connpass.com/event/203178/)での登壇資料

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