ビジネス動画編集クラウドツールにおけるパフォーマンス最適化の道

Video BRAIN

Transcript

1. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential ビジネス動画編集クラウドツールにおける パフォーマンス最適化の道 株式会社オープンエイト プロダクトマネージャー 古⼭亜⼈
2. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 株式会社オープンエイト ˔ 2015年創業 ˔ 「0から無限⼤の可能性をひらく」 ˔ アドネットワーク事業、動画メディア事業などを経て、 現在はSaaS事業「Video BRAIN」を軸に展開 ˔ 累計調達額70億円以上 ˔ 社員の55%が開発メンバー
3. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 株式会社オープンエイト ⼈の気持ちを動かす 質の⾼い情報を体験できる世界を創造する our Mission 世界を豊かにする コンテンツテクノロジーカンパニーになる our Vision
4. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential AIのサポートを受けながら “誰でも” “かんたんに” 動画をつくることができる、 ビジネス動画編集クラウドサービス。 2018年リリース。 Video BRAINについて
6. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 快適な動画CMSのUXの敵 直感的で⾃由な編集機能 パフォーマンス課題 VS フロントエンド、バックエンド、インフラ 即時反映でパワポのように「誰でもかんたん」に編集ができる
7. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 顧客の求めるクオリティを実現するため、様々な戦いをしてきました。 ˔ メディアライブラリ（保存された素材の⼀覧ページ）で取得すべきmetaデータを厳選 ˔ DOMの世界とCanvasの世界のシームレスな⾏き来を実現するレンダリングモジュール ˔ レンダリングモジュールの処理並列化 ˔ 編集画⾯では⼊稿された動画素材を劣化させて編集させる このあたりの話も機会があれば… これまでにやったUX向上施策
8. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential サービスのつくり 適宜責任範囲を区分するかたちで マイクロサービスでの運⽤ リアルタイム プレビュー mp4⽣成
9. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential サービスのつくり こんな注⽂ ⼊ってるんで よろしくね 同じ味を ご⾃宅で！ テイクアウト お願いします 美味しい寿司 をつくるぞ！ 適宜責任範囲を区分するかたちで マイクロサービスでの運⽤
10. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド レンダリング モジュール バックエンド
11. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 編集したよ バックエンド レンダリング モジュール
12. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新 バックエンド レンダリング モジュール
13. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新 バックエンド レンダリング モジュール
14. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新できたよ バックエンド シーンごとの情報.json レンダリング モジュール
15. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 描画してー シーンごとの情報.json バックエンド レンダリング モジュール
16. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド Canvasで再⽣するJS どうぞー バックエンド レンダリング モジュール
17. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 課題 ブリじゃなくて マグロ！
18. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ：Deep-Marge 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 編集したよ バックエンド レンダリング モジュール
19. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ：Deep-Marge 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 更新できたよ 差分.json バックエンド オブジェクト のIDから更新 対象を照会 シーンごとの情報.json レンダリング モジュール
20. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ：Deep-Marge 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド 描画してー シーンごとの情報.json バックエンド レンダリング モジュール
21. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ：Deep-Marge 動画全体の情報 └シーンごとの情報 └動画オブジェクトの情報 └テキストオブジェクトの情報 └シーンのトランジション情報 └アニメーションの情報 └⾳声の情報 ・・・ フロントエンド Canvasで再⽣するJS どうぞー バックエンド レンダリング モジュール
22. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential 解決のアプローチ ブリじゃなくて マグロ！
23. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential リリース後の改善状況 バックエンド全体の応答秒数（週平均） 各改修対象個別の応答秒数（週平均） 22% 23% 37% 83% リリース リリース
24. © 2021 OPEN8 Inc. All rights reserved. Strictly Confidential これから倒すべき敵 ˔ 今回の差分通信の知⾒を他パートにも適⽤ ˔ 他にもひそむ無駄なAPIコールの最適化 ˔ メモ化を活⽤したレンダリングモジュールの⾼速化 ˓ ϝϞԽͱ͸ɺ ࢀߟ
    IUUQTRJJUBDPNTFJSBJUFNTFDEB ˙ ಉ݁͡ՌΛฦ͢ॲཧʹ͍ͭͯॳճͷΈॲཧΛ࣮ߦͯ͠ه࿥͢Δ ˙ ஋͕ඞཁͱͳͬͨճ໨Ҏ߱͸ɺอ͍࣋ͯͨ͠ܭࢉ݁ՌΛ࠶ར༻͢Δ 他にも仕組み化できておらず溜まった負債がたくさんありますね…