Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Electronで動画プレイヤー開発
Search
Yuta Imanishi
February 25, 2021
Technology
1
1.3k
Electronで動画プレイヤー開発
Think! FrontEnd by DMM #3 (
https://dmm.connpass.com/event/203178/)での登壇資料
Yuta Imanishi
February 25, 2021
Tweet
Share
More Decks by Yuta Imanishi
See All by Yuta Imanishi
動画配信の フロントエンドを支える 4年間とこれから
nisshii0313
0
110
動画配信のフロントエンドって何やってるの
nisshii0313
0
66
"動画"配信のお話
nisshii0313
0
14
Prometheusの話
nisshii0313
0
180
Other Decks in Technology
See All in Technology
ヤプリQA課題の見える化
gu3
0
150
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
240
ZOZOTOWN の推薦における KPI モニタリング/KPI monitoring for ZOZOTOWN recommendations
rayuron
1
910
生成AIによるテスト設計支援プロセスの構築とプロセス内のボトルネック解消の取り組み / 20241220 Suguru Ishii
shift_evolve
0
180
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
140
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
410
大規模言語モデルとそのソフトウェア開発に向けた応用 (2024年版)
kazato
2
450
Unsafe.BitCast のすゝめ。
nenonaninu
0
160
Fearsome File Formats
ange
0
550
20241220_S3 tablesの使い方を検証してみた
handy
4
870
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
1k
NOT VALIDな検査制約 / check constraint that is not valid
yahonda
1
110
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Facilitating Awesome Meetings
lara
50
6.2k
Mobile First: as difficult as doing things right
swwweet
222
9k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Done Done
chrislema
182
16k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Writing Fast Ruby
sferik
628
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Fireside Chat
paigeccino
34
3.1k
Transcript
© DMM.com Electronで動画再生プレイヤー開発 合同会社DMM.com 動画配信事業部 配信基盤グループ 今西勇太 Think ! FrontEnd
by DMM #03
© DMM.com 2 自己紹介 • 名前:今西勇太(@nisshii0313) • 所属:東京理科大学 理学部 数学科
4年 • 現在: 2021卒内定者アルバイトとして動画配信事業部でお世 話になってます • 趣味: 日常系アニメ見たり、ゲームしたり、友人とwebサービ ス作ってみたり、たまーに電子工作 などなど
© DMM.com (余談) 内定者アルバイトの働き方 休日はゼミの準備 や、個人開発をして 自由に過ごしてます こんな感じの生活を かれこれ1年近く続 けています
3 平日のスケジュール (自分の例)
© DMM.com 今日話すこと • Electronの概要 • 新機能をリリースした話 (同時複数再生機能) 今日話さないこと •
Electronでの開発の 0→1部分 (チュートリアルを見た方が早そ う) • Electronの最新情報 (公式docをキャッチアップしてみ てください) 4 はじめに
© DMM.com Electronについてざっくりと 5
© DMM.com Electronとは 6 JavaScript、HTML、CSS でデスクトップアプリを作成できるフレームワーク クロスプラットフォーム対応ができる 中身はChromiumとNode.js Chrome(Chromium)対応だけで良いので、ブラウザ間の差分で苦しまずに済む 一方でクロスプラットフォーム対応の際に、OS間の差分で割と苦しんだりする
(MacとWindowsでのアプリ起動方式の違いなどなど…)
© DMM.com どんな感じで動いているか(ざっくり) Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
7
© DMM.com Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス どんな感じで動いているか(ざっくり)
• BrowserWindowインスタンスを作り、ウェブページを作成 • BrowserWindowインスタンスを破棄することでRendererプロ セスを終了し、ウェブページを閉じる → 全ての作成されるウェブページと、対応するRendererプロセ スを管理している (backend node.js のようなイメージ) 8
© DMM.com どんな感じで動いているか(ざっくり) Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
• BrowserWindowインスタンスを作り、ウェブページを作成 • BrowserWindowインスタンスを破棄することでRendererプロ セスを終了し、ウェブページを閉じる → 全ての作成されるウェブページと、対応するRendererプロセ スを管理している (backend node.js のようなイメージ) 9
© DMM.com どんな感じで動いているか(ざっくり) Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
Mainプロセスで作成されたBrowserWindowインス タンスによってウェブページが実行される → html/css/jsを使ってChromeの画面に描画す るのとやっていることはほぼ同じ プロセス間通信によって柔軟な表現が可能 10
© DMM.com ここからが本題 11
© DMM.com DMM Player V2とは Silverlight製だった先代に代わる新しい動 画再生プレイヤー 12 ダウンロードした動画をPC上で再生するこ とができる
Electron製
© DMM.com 新機能をリリースしました 13
© DMM.com 複数ウィンドウでの同時再生機能 • 有効にすると、今現在再生しているウィンドウをそのままにして、別ウィン ドウで他の動画を自由に再生できる • ファイル関連付けを行なっておけば、見たい動画を複数選択、ダブルクリ ック、一気にプレイヤーが開かれて再生開始、なんていうこともできたり する
14
© DMM.com 15
© DMM.com 要件の整理 16
© DMM.com • on時に新しくウィンドウが開かれるタイミングは • 既に開いているウィンドウから「ファイルを開く」で複数選択した場合 • 関連付けをした状態で、動画ファイルを複数選択し、ダブルクリック • off時はこれまでのプレイヤーの機能を提供して、デグレーションが無いよ
うにする • 共通して持つべきデータ(認証情報、同時再生機能等の設定情報)と、共 通させないべきデータ(音量、再生速度など)がある 17
© DMM.com 実装 18
© DMM.com 19 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
© DMM.com 20 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
再生する動画情報を、各Rendererプロセスに分配 (Browserwindowインスタンスを立ち上げる時に、プロセス 間通信経由で動画のpath情報を渡す)
© DMM.com 21 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
UIから変更される各種設定(ログイン認証、音量、 再生速度、同時再生のon/offなど)を、 localstorageに保存、都度参照 (音量、再生速度等以外の同期すべき設定につ いては保存時に同期)
© DMM.com 22 これで設計ができたので、後は書くだけ
© DMM.com 23 めでたしめでたし
© DMM.com 24 とはなりませんでした ...
© DMM.com 何がいけなかったのか?? 25
© DMM.com 26 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
UIから変更される各種設定(ログイン認証、音量、 再生速度、同時再生のon/offなど)を、 localstorageに保存、都度参照 (音量、再生速度等以外の同期すべき設定につ いては保存時に同期)
© DMM.com 27 Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス
UIから変更される各種設定(ログイン認証、音量、 再生速度、同時再生のon/offなど)を、 localstorageに保存、都度参照 (音量、再生速度等以外の同期すべき設定につ いては保存時に同期) 同時再生のon/offはlocalstorageに入れちゃだめだった…
© DMM.com 同時再生設定はlocalstorageに入れちゃだめ なぜか? • localstorageはブラウザの持ち物であり、 Chromiumが立ち上がるまで、 つまりrendererプロセスが立ち上がるまでは参照できない つまり、このままでは 少なくとも1枚ウィンドウが開かれている状況でないと、設定をonにしていて
も同時再生できない… 関連付け再生を使っているユーザーにとっては致命的😢 28
© DMM.com そこで、同時再生設定の保存先を変更 localstorageではなく、アプリケーションディレクトリ内に直に保存する (覗かれて困るようなデータではなかったため、この方法が可能) 使用ライブラリ: electron-store (保存、読み込みのプロセスを扱いやすくラップしてくれる) 29
© DMM.com これで、正真正銘「後は書くだけ」 30
© DMM.com 無事リリースまで辿り着きました 31
© DMM.com ログ分析 32
© DMM.com • リリースして終了、ではなくリリース後のユーザーの反応を可視化し、そ の後の改善につなげています • 弊チームではほぼ全員が、自分でRe:dash(基盤を用意してもらっていま す)を使ってクエリを書いて測定・可視化しています (これは”FEがSQLかけるべき”って話ではないですが、個人的には開発した機能・UI に責任を持つという意味で、書けて困ることはないと思ってます)
33
© DMM.com 同時再生機能の利用者率 34
© DMM.com • コアなユーザー向け機能ではあるかもしれないが、思ったよりも有効化し ているユーザー数が少ない… • 原因の一つであろうレスポンシブ対応について、最新版で対応中 (この動画が流れる頃にはリリースされているかもです!) • 使っていただいて、気になる点・要望・不満等あれば、お寄せいただけれ
ばありがたいです! 35
© DMM.com まとめ 36
© DMM.com まとめ • Electronではブラウザ依存しない形でのクライアントサイドでのデータ保 存ができるので、用途に応じて使い分けていくと良さそうです。 もっと良い方法があれば是非教えていただきたいです! • FEでもクエリを書いて、軽くでもリリースの効果測定ができると良いのか なって個人的には考えてます
37
© DMM.com 良ければこちらもどうぞ 38
© DMM.com 39
© 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
© DMM.com ご清聴ありがとうございました 41