62
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

blob & createObjectURL について

Last updated at Posted at 2019-12-07

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 は有効 , ただし 閉じるまでは メモリに常駐するため 明示的に 削除する必要あり。

まとめ

今後は createObjectURL の実装なども追ってみたいなぁ :smile:

参照

62
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?