mozilla
Your Search Results

    Blob

    Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。File インターフェースは Blob を基礎にしており、その機能を継承する一方で、ユーザのシステム上のファイルをサポートするための機能を拡張しています。

    Blob を生成する簡単な方法は Blob() コンストラクタを使用することです。他にも、slice() メソッドを利用し、他の blob データからその一部を blob として生成する方法があります。

    コンストラクタ

    Blob()
    引数に取ったデータの連続する配列を内包する、新しく生成した Blob オブジェクトを返します。

    プロパティ

    Blob.size 読取専用
    Blob オブジェクトが含むデータのバイトサイズ
    Blob.type 読取専用
    Blob に含まれるデータの MIME タイプを表す文字列。もしタイプが不明な場合はから文字列となる。

    メソッド

    Blob.slice()
    sourceBlob 内の指定した範囲のデータを含む新しい Blob オブジェクトを返す。
    Note:slice() メソッドは Firefox では blob.mozSlice(), WebKit では blob.webkitSlice() とベンダー接頭辞つきで実装されています。また、古いバージョンにおいて slice() がベンダー接頭辞なしで実装されていることがありますが、現状と異なる古いセマンティクスの場合があります。Firefox 30 では、 blob.mozSlice() は削除されています。

    使用例

    Blob コンストラクタの使用例

    次のコードは:

    var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
    var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
    

    次のコードと同等です:

    var oBuilder = new BlobBuilder();
    var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
    oBuilder.append(aFileParts[0]);
    var oMyBlob = oBuilder.getBlob('text/xml'); // the blob

    Blob を生成するために BlobBuilder インタフェースを利用することもできましたが、現在は非推奨となっているため使用するべきではありません。

    Blob を用いて Typed Array の URL を生成する例。

    コード:

    var typedArray = GetTheTypedArraySomehow();
    var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
    var url = URL.createObjectURL(blob);
    // url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
    // now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

    Blob からデータを読み出す例

    Blob からコンテンツを読み出す唯一の方法は、 FileReader を用いることです。次のコードは、 Blob からコンテンツを typed array として読み出します。

    var reader = new FileReader();
    reader.addEventListener("loadend", function() {
       // reader.result contains the contents of blob as a typed array
    });
    reader.readAsArrayBuffer(blob);

    FileReader の他のメソッドを用いることで、 Blob のコンテンツを文字列や data URL で取り出すこともできます。

    仕様

    Specification Status Comment
    File API
    The definition of 'Blob' in that specification.
    草案 Initial definition.

    ブラウザ互換性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 5 4 10 11.10 5.1
    slice() 10 webkit
    21
    5 moz
    13
    10 12 5.1 (534.29) webkit
    Blob()constructor 20 13.0 (13.0) 10 12.10 6 (536.10)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 13.0 (13.0) ? ? ?

    slice() の実装について

    slice はもともと第2引数に length をとり、新しい Blob のバイト長を指定するものとして定義されていました。start + length がもとの Blobsize を超えた場合、返ってくる Blob は、start からもとの Blob の末端までを含みます。

    この slice メソッドは Firefox 4, WebKit, そして Opera 11.10 で実装されました。しかし、構文が Array.slice()String.slice() と異なることが分かり、Gecko と WebKit はこのメソッドを削除し、現在の構文を Blob.mozSlice/Blob.webkitSlice として実装しました。

    Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) 以降と Chrome 21 以降では, slice() のプレフィックスは削除されています。mozSlice() のサポートも Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) 以降削除されています。‡

    Gecko notes

    Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 以前では, slice() に影響を及ぼすバグがありました。符号有 64-bit の範囲を超える start と end のポジションをしていすると正常に動作しなくなるというバグですが、現在は符号なし 64-bit の範囲で正常に動作するように修正されています。

    Chrome Code - Scope Availability

    To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

    Cu.importGlobalProperties(['Blob']);

    Blob は Worker スコープでも使用することができます。

    See also

    ドキュメントのタグと貢献者

    Contributors to this page: fscholz, myakura, Jxck
    最終更新者: myakura,