BETA

blob & createObjectURL について

投稿日:2019-12-07
最終更新:2019-12-09

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:

参照

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@azu369yuの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう