Help us understand the problem. What is going on with this article?

blob & createObjectURL について

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:

参照

azu369yu
Web Developper. TypeScript,Angular,Ruby,Ruby on rails
embrace
全国で110,000人以上の医療介護従事者の方にご利用いただいている医療介護連携SNS「メディカルケアステーション(MCS)」の企画・開発・運営をしています。医療介護従事者の多職種、多施設連携や、患者・家族とのコミュニケーションツールとしてだけでなく、医療治療支援も提供することで社会的課題の解決を目指しています。https://www.medical-care.net
https://www.embrace.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした