【JavaScript】ファイル関連のAPIやオブジェクト(「ArrayBuffer」など）

ファイルにまつわるオブジェクトやエンコード形式など

Blob(バイナリ・ラージ・オブジェクト)

• HTML5のFile APIで定義されたインターフェイス
• 生のバイナリデータが格納されている。
• プロパティはsizeとtypeのみで中のデータに直アクセスはできない。
• immutable(不変）なので直編集はできない。
• sliceによる分割、コンストラクタによる結合はできる。

File

• HTML5のFile APIで定義されたインターフェイス
• Blobインターフェイスを継承しているのでBlobを引数にとるメソッドをそのまま使える。
• name、lastModifiedプロパティが追加されている。
• フォームで<input type="file">にローカルファイルを与えるとFileListオブジェクトが得られてその中からインデックスを渡すと取得できる。

Base64

• クラスやインターフェイスなどは存在しない。
• バイナリデータをStringに変換するためのエンコード形式
• 64種類の英数字のみ用いているのでどのデバイスでも使える。
• エンコード前のバイナリデータに比べてデータサイズが増加する。

データURL

• 「data:[<mediatype>][;base64],<data>」という形式で記述されたURL

ファイルを扱うためのオブジェクト

ArrayBuffer

JavaScriptでバイナリを扱うためのクラスです。直接読み書きはできません。物理メモリの領域(バッファ）を確保するためのクラス。ただしメモリを確保するだけでバッファに対する操作は提供していないです。Blobに比べて直接操作ができる。(ミュータブルなクラス)

宣言

以下を宣言することで指定した長さの物理メモリ空間がバイナリ保存用に確保されます。

あまりにも大きい長さを指定しようとするとメモリ不足で怒られます。

読み書き

型付き配列(Typed Array)で行う。

Unit8Array

バイナリへのアクセス方式を8bit整数（符号なし）で行いたい時に使用する型付き配列のサブクラスの一種

byteLengthプロパティ

バッファの総バイトサイズ

sliceメソッド

バッファの開始位置と終了位置を指定して新しいArrayBufferを生成します。

TypedArrays

バッファの操作ができます。Float32ArrayやUnit8Arrayなど型を指定してバッファから配列を生成します。

通常の配列のように添字によってバッファにアクセス可能で高速読み書きができます。

Blobに比べて直接操作ができる。(ミュータブルなクラス)

なお、CanvasのgetImageDataで取得できるImageDataはTypedArrayで直接操作することで画像をバイナリとして扱えます。

DataView

TypedArrayより高機能なバッファの操作ができます。

FileReader

File APIの機能の一つ。ユーザーのローカルに保存されているデータ（Blob(File)オブジェクト内のバイナリデータ）を非同期に読み込むためのオブジェクト

readAsArrayBuffer

ArrayBuffer形式で読み取れる。

readAsDataURL

DataURL形式で読み取れる。DataURLなのでbase64のデータなども取得できます。

readAsText

文字列形式で読み取れる。

abort

読み取り中断

BlobやFileをブラウザ上に表示する。

Blob(File）をデータURLとして読み取る。

FileReaderのreadAsDataURLを使います。

デメリット

• base64にするので、データサイズが増える。(サイズは4/3倍になるようです。)
• メモリ上に展開するためメモリを逼迫する。(100MBを超える場合はまずブラウザが応答停止になります。)

Blobを参照するURL（Blob URL Schema）を生成する。

window.URL.createObjectURLでURLを生成する。

デメリット

一時的なものなので他端末や他ブラウザに渡してもアクセスできない。