Windows Internet Explorer 10

IE10 PP4はJavaScriptからバイナリデータを扱うための機能が導入されているが、実際にどういった仕組みの機能が導入されたのかがIEBlogにおいて「Working with Binary Data using Typed Arrays」として公開された。サンプルコードと共に説明が簡潔にまとまっており参考になる。

HTML5で導入される機能はますますブラウザ側で処理できる内容を増やしている。そうした流れの取り組みのひとつにブラウザ側におけるバイナリデータの処理がある。これまでJavaScriptでバイナリデータを使うことはほとんどなかった。しかし、バイナリ形式のフォーマットはデータサイズの削減などの観点から必要。クライアント側でよりリッチな操作を提供しようとした場合には、テキストデータのみならずバイナリデータも処理できた方が都合が良いことが多い。

IE10 PP4ではこうした処理を可能にするためのバイナリデータ関連API(型付けされた配列)と機能の導入が実施されている。導入されている配列型は次のとおり。

配列型 内容
Int8Array 符号付き8ビット整数
Uint8Array 符号なし8ビット整数
Int16Array 符号付き16ビット整数
Uint16Array 符号なし16ビット整数
Int32Array 符号付き32ビット整数
Uint32Array 符号なし32ビット整数
Float32Array IEEE754 32ビット浮動小数点数
Float64Array IEEE754 64ビット浮動小数点数

IEBlogには次のサンプルが掲載されており、これら配列型がArrayBufferに対する「ビュー」になっていることがわかる。

// Create an 8 byte buffer
var buffer = new ArrayBuffer(8);

// View as an array of Uint8s and put 0x05 in each byte
var uint8s = new Uint8Array(buffer);
for (var i = 0; i < 8; i++) {
    uint8s[i] = 5; // fill each byte with 0x05
}

// Inspect the resulting array
uint8s[0] === 5; // true - each byte has value 5
uint8s.byteLength === 8; // true - there are 8 Uint8s

// View the same buffer as an array of Uint32s
var uint32s = new Uint32Array(buffer);

// The same raw bytes are now interpreted differently
uint32s[0] === 84215045 // true - 0x05050505 == 84215045

固定された型の配列という実装ではないための、任意のバイナリ形式として読み取るには別の方法が必要となる。そのために用意されているのがDataView。次のサンプルを見ると、DataViewを経由して任意のデータとして読み込みが実施されていることがわかる。

var buffer = getPCXFileContents();
var reader = new DataView(buffer);

// Read the header of the PCX file
var header = {}

// The first section is single bytes
header.manufacturer = reader.getUint8(0);
header.version = reader.getUint8(1);
header.encoding = reader.getUint8(2);
header.bitsPerPixel = reader.getUint8(3);

// The next section is Int16 values, each in little-endian
header.xmin = reader.getInt16(4, true);
header.ymin = reader.getInt16(6, true);
header.xmax = reader.getInt16(8, true);
header.ymax = reader.getInt16(10, true);
header.hdpi = reader.getInt16(12, true);
header.vdpi = reader.getInt16(14, true);

配列型は処理の高速化にも関与する。JavaScriptは型付けの強い言語ではないため、実装時に型を特定してJITで高速化するのが難しいという特徴を備えている。明示的に型を指定する型付けされた配列は、こうした処理においてJITがコンパイルを実施する際の手助けをすることになり、結果として高速な動作が期待できる。

バイナリデータ操作に関してはIE10のみならず他のブラウザも積極的に開発を進める分野であり、今後さまざまな実装例やデモンストレーションサイトなどが登場することになるものと見られる。