Yu0614です!
この記事は Oysters Advent Calender 集え、牡蠣戦士！！！7日目の記事です。
はじめに
業務で初めて使ったので 使い方や利点、注意点など 必要そうな情報だけまとめました。
ほぼ作業メモ程度なので 参考資料程度にどぞ！
Blob とは
- Blob = Binary Large OBjectの略、バイナリデータを表すオブジェクト,格納するための型
- Blob は “タイプを持つバイナリデータ” を表す。
- 巨大な画像、音声ファイル、動画ファイルなどを扱うことができる
- immutable = 不変
- blob を直接変更できないけれど、blobから値を切り出したり新しい blob を作ることは可能
- ECMA で規定された標準規格であり, html5 File API で定義されている
※ File API とは、JavaScript からクライアント側のファイルにアクセスするための API
構成
Blob = [type] + [blobParts](blob1,blob2,....str,buffer)
- type (option)
- 通常 MIMEType ※ MIME Type : 拡張子以外の方法で、転送するドキュメントの種類をブラウザに伝える方法
- blobParts
- Blob/BufferSource/String からなる値の配列
例
// 文字列から Blob を作成
let blob = new Blob(["<html>…</html>"], {type: 'text/html'});
// 注意: 最初の引数は配列である必要あり
// 型付き配列(Uint8Array)と文字列から Blob を作成
let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二進での "hello"
let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});
URL としての Blob
- type があるので ダウンロード /アップロードが容易
-
URL.createObjectURL を使って クライアント(ブラウザ) のメモリに保存された blobに アクセス可能な一意のURLを生成可能
- 形式は
blob:<origin>/<uuid> - メモリに ある blob へのアクセスマッピング を行っている
- 形式は
blob URL は他者に共有したところで 意味がない (blobがクライアント内に保存されてるため)
-
ブラウザを閉じるまで URL は有効 , ただし 閉じるまでは メモリに常駐するため 明示的に 削除する必要あり。
- URL.revokeObjectURL を使って メモリ開放してあげよう！
まとめ
今後は createObjectURL の実装なども追ってみたいなぁ 