動画制作ツールの最小機能製品
レイヤー・キャンバス・タイムラインを備えたブラウザ編集ツールを初期版として作りました。
- 開発期間
- 約5か月
- 体制
- 4名
- 対応プラットフォーム
- ウェブ · サーバー
- バージョン範囲
- 初期最小限の機能を備えた製品
背景
動画編集をブラウザ内で完結させたいという顧客でした。デスクトップ編集ソフトのインストールなしにレイヤーとタイムラインを扱える初期バージョンが必要でした。
実装範囲
- キャンバスベースのレイヤー編集
- タイムラインの構成
- ブラウザ内でのレンダリングプレビュー
- プロジェクトの保存・読み込み
- 基本編集ツール一式
技術選定
その状況で何をなぜ選んだかキャンバスのレンダリングをWebGLで実装
レイヤーが何層も重なり、タイムラインをスクラブするたびに再描画が必要でしたが、通常のCanvas 2Dではレイヤーが増えるほど画面がカクついていました。GPUを使うWebGLへ移行したことで、レイヤー数が増えても編集中の画面応答を保てるようになりました。
レンダリングサーバーをNode.jsで別途構成しブラウザと分離
最終出力ファイルを生成する処理はブラウザで扱うには重く、利用者が編集中のブラウザ性能に影響を与えてはいけませんでした。レンダリングをサーバー側の別処理に移し、編集画面は軽量に保ちました。
技術課題
課題
タイムラインで複数のレイヤーを同時に再生しながらプレビューすると、フレームが遅延する現象がありました。
アプローチ
画面に実際に表示される区間のレイヤーだけをあらかじめ描画しておき、再生中はすでに描画済みのフレームを順番に出力する方式に変えました。
結果
レイヤー数が増えた状態でも、タイムラインの再生が途切れず続くようになりました。
課題
最小限の機能を備えた製品の段階のため機能の優先順位が頻繁に変わりましたが、編集ツールを一つ追加するたびに既存のキャンバスロジックへ手を入れる必要がありました。
アプローチ
編集ツールをキャンバスのコアから分離したプラグイン形式に構成し、新しいツールの追加が既存コードを修正せずに行えるようにしました。
結果
優先順位が変わりツールの追加・削除が必要になった際も、キャンバスのコアに手を入れずに対応できました。
引き継ぎと運用
ソースコードとレンダリングサーバーの配布構成を併せて引き渡し、キャンバス・タイムライン構造に関する技術文書を残しました。以降の機能拡張は顧客企業の自社開発チームが引き継げるよう、コード構造を文書にまとめて提供しました。