AOYAMA Koji's プログラミングブログ - プログラミングを楽しく体験

バイナリデータをファイルに保存【mp4ファイル生成解説】プログラマー向け実装解説

2025/05/11
バイナリデータをファイルに保存【mp4ファイル生成解説】

　mp4動画ファイル生成について、プログラマー向けに解説します。 大まかな流れとしては、各フレーム画像をエンコードし、mp4フォーマットに合わせてまとめます。 本記事では、その最後の工程、生成されたバイナリデータをファイルに保存する処理について、簡潔に記載します。
　なお、実際にこれを用いて作られたWebアプリケーションがこの記事などにありますので、 プログラマー以外の方も、ぜひお試しください。
バイナリデータをファイルに保存【mp4ファイル生成解説】

プログラミングブログ記事一覧


[PR]

mp4動画ファイル生成の工程


　当ブログにおける、mp4動画ファイルを生成する工程は、以下の4ステップです。 本記事では、バイナリデータが手元にある状態から解説します。
  1. WebCodecsのVideoEncoderで各フレーム画像をエンコードWebCodecsのVideoEncoderで各フレーム画像をエンコード
  2. エンコード結果から NAL Unit を取得エンコード結果から NAL Unit を取得
  3. NAL Unit 等からボックス形式のバイナリデータを生成ボックス形式のバイナリデータを生成
  4. バイナリデータをファイルに保存 ← 本記事で解説

アンカーリンクのクリックで保存する


　Webアプリケーション内でのファイル保存は、以下の概念で行います。 要は、ダウンロードリンクを動的に生成して、自動でクリックする、という処理です。
  1. バイナリデータを仮想的なファイルにしてURLを生成する
  2. アンカーリンクを生成しhrefにそのURLを設定する
  3. JavaScriptからクリックイベントを発火する

コーディング


　これをコーディングすると以下の通りです。
//*****************************************************************
// downloadBinary : バイナリデータをファイルとしてダウンロード
//   引数
//     sFileNameo .. ダウンロードするファイル名
//     aBinary    .. バイナリデータ
//*****************************************************************
function downloadBinary( sFileName , aBinary  ) {
  // Blob生成
  let oBlob = new Blob( [aBinary] , { type: 'video/mp4' } );
  // BlobからURLを生成※バイナリデータを仮想ファイル化したURLを得る
  let sUrl = URL.createObjectURL( oBlob );
  // 一時的なアンカーリンクを生成(画面には映らない)
  let oAnchor = document.createElement('a');
  oAnchor.download = sFileName; // ファイル名
  oAnchor.href = sUrl;          // 仮想ファイルのURL
  oAnchor.type = 'video/mp4';   // mime type
  // アンカーリンクのクリックイベント発火
  oAnchor.click();
  // 生成されたオブジェクトURLを回収(メモリー解放)
  URL.revokeObjectURL( sUrl );
}

補足説明


　詳細には、前記ソースコード内の注釈をご確認ください。 これで、バイナリデータをファイルに保存できます。
　一点、JavaScript でメモリー確保されたオブジェクト等は、基本的には、参照が消えると破棄されて、ガベージコレクションにまわります。 しかし URL.createObjectURL は、内部に「オブジェクトURL」を生成し、返り値への参照が消えてもそのオブジェクトURLは残り続けます。 そのため、URL.revokeObjectURL を呼び出して、そのメモリーを解放し、メモリーリークを回避します。

実践コード


　本記事のコードは、読みやすく整形して開示しています。 実際のコードは、設定変更に対応するなど、より実践的です。
　もし参考にされたい場合は、 この記事など、各mp4クリエイター記事のソースから、import 先を調べてみてください。 プログラムを読める方に限定するため、ここではあえて不親切にさせていただきますが、コードの再利用は、悪意の無い範囲でしたら、まったく問題ありません

アンカーで良いのかという疑問


　アンカーを生成し、プログラムからクリックする、という方式は、正直なところ違和感があります。
　ファイルダウンロードするだけなら、わざわざ人間の操作を再現する必要はありません。 クリックした先で動くダウンロード処理を、直接プログラムから呼ぶべきです。
　本記事作成後、生成AI(Claude)にここにあるファイルシステムAPIを教えてもらいました。 まさにこれが、求めているものです。
　ただし、現時点ではApple系が非対応のため、まだ本記事解説のプログラムは必要ですし、このAPIを使用したやり方が普及していないようです。 将来的に対応されれば、改修を検討したいと思います。
[PR]

まとめ


　本記事では、mp4動画ファイルを生成する最終工程、バイナリデータをファイルに保存する処理について解説しました。
　ここまでの全4工程で、mp4ファイルを作成することができます！
　また、この記事でファイル内容を閲覧できます。 プログラムが完成し、mp4ファイルが生成できたら、ぜひ確認してみてください。
　これらの記事が、少しでも皆さまの参考になりましたら幸いです。

補足

  • 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
  • 画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
  • ※各社の登録商標または商標について「®」「™」等の表記はしておりません。
  • (本記事公開後)本記事公開後に公開された記事へのリンクを追加しております。
カテゴリー：プログラミング解説,mp4ファイル生成解説
[PR]