技術
約2分で読めます
ブラウザで動画が作れるツールを作った
ラボにアニメーションエディターを追加した。画像を並べてパタパタ動かすだけの素朴な動画が、ブラウザ上で作れる。
できること
- 画像レイヤーを時間軸で配置
- 字幕レイヤーを追加（縦書きにも対応）
- WebM/MP4/SRTで出力
すべての処理がブラウザ上で完結する。サーバーへのアップロードは発生しない。
画面構成
画面は大きく4つのエリアに分かれている。
- ツールバー: 再生・停止、FPS、解像度、長さの設定
- プレビュー: 現在のフレームをリアルタイム表示
- レイヤーパネル: レイヤーの追加・設定
- タイムライン: 各レイヤーの時間配置を視覚的に管理
基本的な使い方
画像を追加する
- レイヤーパネルの「画像」ボタンをクリック
- 画像ファイルを選択（複数選択可）
- 選択した画像がそれぞれレイヤーとして追加される
時間を調整する
レイヤーを選択すると、開始・終了時間を設定できる。タイムライン上でも視覚的に確認できる。
再生して確認
ツールバーの再生ボタンでプレビュー。タイムラインをドラッグすると任意の位置にシークできる。
画像レイヤーの設定
画像レイヤーには配置オプションがある。
横配置:
- 元サイズ（左寄せ/中央/右寄せ）
- 横幅に合わせる
- 縦幅に合わせる
縦配置:
- 上揃え / 中央 / 下揃え
複数のレイヤーを重ねると、リスト上位のレイヤーが手前に表示される。順序はドラッグで変更可能。
字幕機能
「字幕」ボタンで字幕レイヤーを追加できる。
設定項目:
- テキスト: 表示する文字列
- 位置: 下 / 左（縦書き）/ 右（縦書き）
- サイズ: フォントサイズ（px）
- 色: テキストカラー
SRTインポート
既存のSRTファイルを読み込むと、字幕レイヤーを一括で追加できる。タイミング情報もそのまま反映される。
出力
WebM
MediaRecorder APIを使ったブラウザネイティブのエンコード。高速で、モダンブラウザなら問題なく再生できる。
MP4
ffmpeg.wasmを使ってエンコードする。WebMより時間がかかるが、互換性が高い。iPhoneやSNSへの投稿にはこちらが安全。
SRT
字幕レイヤーだけをSRT形式でエクスポート。動画編集ソフトに読み込ませて使える。
Tips
- FPSを下げると処理が軽くなる。パタパタ感を出すなら12fpsで十分
- 解像度は後から変更可能。最初は小さめで作業して、最後に上げるのもあり
- 長い動画を作るときは「長さ」を先に設定しておくとタイムラインが見やすい
ちょっとした解説動画や、イラストを動かしてみたいときに使えると思う。