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

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

5c556c8f172b4b7e8a992ceddac9e196?s=47 kymtgt
July 13, 2021
61

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

5c556c8f172b4b7e8a992ceddac9e196?s=128

kymtgt

July 13, 2021
Tweet

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について
  5. None
  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 ˙ ಉ݁͡ՌΛฦ͢ॲཧʹ͍ͭͯॳճͷΈॲཧΛ࣮ߦͯ͠ه࿥͢Δ ˙ ஋͕ඞཁͱͳͬͨճ໨Ҏ߱͸ɺอ͍࣋ͯͨ͠ܭࢉ݁ՌΛ࠶ར༻͢Δ 他にも仕組み化できておらず溜まった負債がたくさんありますね…
  25. None