HTML5のBlob.slice()メソッドの使い方を解説

Blob.slice()メソッドとは

HTML5で導入されたBlob.slice()メソッドは、元のBlobオブジェクトから指定したバイト範囲のデータを抽出し、新しいBlobオブジェクトを作成するための便利なメソッドです。

大きなファイルを分割してアップロードしたい場合や、ファイルの一部だけを処理したい場合に特に役立ちます。slice()メソッドには、開始位置と終了位置（オプション）を引数として指定できます。

slice()を使ったバイナリデータの送受信例

以下は、slice()メソッドを使用してバイナリデータを送受信する例です。このサンプルコードでは、テキストデータを持つBlobオブジェクトを作成し、POSTメソッドを使ってサーバーへ「file」として送信しています。

var val = new XMLHttpRequest();
val.open("POST", url, true);
val.onload = function (event) {
};
var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

コードのポイント

• new XMLHttpRequest()：サーバーとの通信を行うためのXMLHttpRequestオブジェクトを生成します。
• open("POST", url, true)：POSTメソッドで非同期通信を開始する設定を行います。
• new Blob(['demo'], {type: 'text/plain'})：「demo」というテキストデータを含むBlobオブジェクトを、MIMEタイプ「text/plain」で作成します。
• send(blob)：作成したBlobオブジェクトをサーバーへ送信します。

実際にslice()を使用する場合は、blob.slice(start, end)のようにバイト範囲を指定することで、元のBlobから必要な部分だけを切り出した新しいBlobを取得できます。これにより、大容量ファイルの分割送信（チャンクアップロード）なども効率的に実装可能です。