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
ビジネス動画編集クラウドツールにおけるパフォーマンス最適化の道
Search
kymtgt
July 13, 2021
0
84
ビジネス動画編集クラウドツールにおけるパフォーマンス最適化の道
Video BRAIN
kymtgt
July 13, 2021
Tweet
Share
More Decks by kymtgt
See All by kymtgt
企業向けNo.1動画編集ツール 「Video BRAIN」の開発を いいかんじにプロダクトマネジメントする
kymtgt
0
5.1k
B2B_SaaS_一年生の私たちが辿り着いた_プロダクト開発の進め方.pdf
kymtgt
0
1.2k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
A designer walks into a library…
pauljervisheath
207
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Adopting Sorbet at Scale
ufuk
77
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
A better future with KSS
kneath
239
17k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Practical Orchestrator
shlominoach
188
11k
Transcript
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential ビジネス動画編集クラウドツールにおける
パフォーマンス最適化の道 株式会社オープンエイト プロダクトマネージャー 古⼭亜⼈
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 株式会社オープンエイト
˔ 2015年創業 ˔ 「0から無限⼤の可能性をひらく」 ˔ アドネットワーク事業、動画メディア事業などを経て、 現在はSaaS事業「Video BRAIN」を軸に展開 ˔ 累計調達額70億円以上 ˔ 社員の55%が開発メンバー
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 株式会社オープンエイト
⼈の気持ちを動かす 質の⾼い情報を体験できる世界を創造する our Mission 世界を豊かにする コンテンツテクノロジーカンパニーになる our Vision
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential AIのサポートを受けながら
“誰でも” “かんたんに” 動画をつくることができる、 ビジネス動画編集クラウドサービス。 2018年リリース。 Video BRAINについて
None
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 快適な動画CMSのUXの敵
直感的で⾃由な編集機能 パフォーマンス課題 VS フロントエンド、バックエンド、インフラ 即時反映でパワポのように「誰でもかんたん」に編集ができる
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 顧客の求めるクオリティを実現するため、様々な戦いをしてきました。
˔ メディアライブラリ(保存された素材の⼀覧ページ)で取得すべきmetaデータを厳選 ˔ DOMの世界とCanvasの世界のシームレスな⾏き来を実現するレンダリングモジュール ˔ レンダリングモジュールの処理並列化 ˔ 編集画⾯では⼊稿された動画素材を劣化させて編集させる このあたりの話も機会があれば… これまでにやったUX向上施策
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential サービスのつくり
適宜責任範囲を区分するかたちで マイクロサービスでの運⽤ リアルタイム プレビュー mp4⽣成
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential サービスのつくり
こんな注⽂ ⼊ってるんで よろしくね 同じ味を ご⾃宅で! テイクアウト お願いします 美味しい寿司 をつくるぞ! 適宜責任範囲を区分するかたちで マイクロサービスでの運⽤
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド レンダリング モジュール バックエンド
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 編集したよ バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新 バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新 バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新できたよ バックエンド シーンごとの情報.json レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 描画してー シーンごとの情報.json バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド Canvasで再⽣するJS どうぞー バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題
ブリじゃなくて マグロ!
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ:Deep-Marge
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 編集したよ バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ:Deep-Marge
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新できたよ 差分.json バックエンド オブジェクト のIDから更新 対象を照会 シーンごとの情報.json レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ:Deep-Marge
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 描画してー シーンごとの情報.json バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ:Deep-Marge
動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド Canvasで再⽣するJS どうぞー バックエンド レンダリング モジュール
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ
ブリじゃなくて マグロ!
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential リリース後の改善状況
バックエンド全体の応答秒数(週平均) 各改修対象個別の応答秒数(週平均) 22% 23% 37% 83% リリース リリース
© 2021 OPEN8 Inc. All rights reserved. Strictly Confidential これから倒すべき敵
˔ 今回の差分通信の知⾒を他パートにも適⽤ ˔ 他にもひそむ無駄なAPIコールの最適化 ˔ メモ化を活⽤したレンダリングモジュールの⾼速化 ˓ ϝϞԽͱɺ ࢀߟIUUQTRJJUBDPNTFJSBJUFNTFDEB ˙ ಉ݁͡ՌΛฦ͢ॲཧʹ͍ͭͯॳճͷΈॲཧΛ࣮ߦͯ͠ه͢Δ ˙ ͕ඞཁͱͳͬͨճҎ߱ɺอ͍࣋ͯͨ͠ܭࢉ݁ՌΛ࠶ར༻͢Δ 他にも仕組み化できておらず溜まった負債がたくさんありますね…
None