#typedarray

JavaScriptのTypedArrayのInt32Arrayなどのエンディアンは 環境依存である。(ただしDataViewはエンディアンを意識した バッファアクセスができ、 デフォルトではビッグエンディアンになっている)。

decompose.jsは、doubleの符号、桁、2進数の分解構築を TypedArrayを用いて行う例であり、DataViewを用いている。

また、1要素のUint16Arrayに1をセットし、Uint8Arrayとして 1があるのが0番目か1番目かを調べることで、 その環境のエンディアンを判定できる。

デモ: https://rawgit.com/bellbind/5738c56d812190179259/raw/index.html

Pot.js 1.19 と PotLite.js 1.36 リリースしました。

Download

Pot.js+PotLite.js-zip

Changelog

ja:

Pot.MimeType に ogg 追加

Pot.base64Decode() で Pot.base64URLEncode() したのもデコード可能に

Pot.alphanumSort() に添字の指定可能なコールバック関数を引数に指定できるよう追加

Pot.isTypedArray() と Pot.isArrayBufferoid() を実装

ArrayBuffer と DataView をクロスブラウザにミックスしたような Pot.ArrayBufferoid の実装

文字コード変換関数 Pot.convertEncodingToUnicode() の実装 (Thanks haxe)

WebKitBlobBuilder が自動文字コード判別できないのを Fix

Pot.Base64 で Typed Array も扱えるよう改訂

Pot.Crypt で Typed Array も扱えるよう改訂

Pot.isArrayBuffer() の実装

Pot.Signal で FileReader によるエラーが発生するのを修正

Pot.ArrayBufferoid から Array, String, Blob に変換するのを最適化

Pot.UTF8 と Pot.ArrayBufferoid でサロゲートペアの問題を修正 (Thanks kefir_)

Pot.DropFile に 'readAs', 'onProgress', 'onProgressFile' オプション/イベントを追加

Pot.DropFile のオプションのイベントコールバック関数に渡る引数を変更

Pot.DropFile でテキストかどうか判別するのを改善

Pot.toCharCode() を実装 (Pot.Text)

Pot.isBlob() と Pot.isFileReader() を実装

Pot.Deferred コールバック内で FileReader を返すと結果ファイルが次のチェインに渡るよう改訂

en:

Added ogg in Pot.MimeType.

Improved compatibility with Pot.base64Decode() and Pot.base64URLEncode().

Added Pot.alphanumSort() callback argument to specify object property.

Added Pot.isTypedArray() and Pot.isArrayBufferoid() in Core.

Implemented Pot.ArrayBufferoid.

Added Pot.convertEncodingToUnicode().

Fixed: WebKitBlobBuilder cannot detect encoding automatically.

Improved Pot.Base64 to treat Typed Array.

Added support for specify Array (Typed Array) argument with Crypt functions.

Added Pot.isArrayBuffer() function in Core.

Fixed exception by FileReader in Pot.Signal.

Optimized Pot.ArrayBufferoid conversion functions.

Fixes the surrogate pair range bug in Pot.UTF8 and Pot.ArrayBufferoid reported by kefir_.

Added "readAs", "onProgress" and "onProgressFile" event options in Pot.DropFile.

Changed DropFile.prototype.on* event callback arguments in Pot.DropFile.

Fixed the text mode detection in Pot.DropFile.

Added Pot.toCharCode() function in Pot.Text.

Added Pot.isBlob() and Pot.isFileReader() function in Core.

Improved Pot.Deferred can replies if an instance of FileReader returned in callback.

大きな(?)変更点は Pot.DropFile のイベント関数の引数が変わったことです。

var dropFile = new Pot.DropFile(elem, { onLoadImage : function(data, name, size, type) {}, onLoadText : function(data, name, size, type) {}, onLoadUnknown : function(data, name, size, type) {}, // こうだったのが↓の引数になりました onLoadImage : function(data, fileinfo) { var name = fileinfo.name; var size = fileinfo.size; var type = fileinfo.type; }, onLoadText : function(data, fileinfo) { // 上と同じ }, onLoadUnknown : function(data, fileinfo) { // 上と同じ }, // そして実装された進歩時のイベント onProgress : function(percent) { // 複数ファイルがドロップされた時も含めて // ファイル全部に対する読み込み状況のパーセンテージ console.log(percent + '%'); }, onProgressFile : function(percent, fileinfo) { // ファイル 1つに対する読み込み状況のパーセンテージ console.log(fileinfo.name + ': ' + percent + '%'); }, // ドロップされたファイルの読み込む形式が指定できるようになりました readAs : 'arraybuffer' // - readAs : // - 'text' : テキストとして読み込みます (readAsText) // - 'binary' : バイナリとして読み込みます (readAsBinaryString) // - 'arraybuffer' : ArrayBufferとして読み込みます (readAsArrayBuffer) // - 'datauri' : DataURIとして読み込みます (readAsDataURL) // - null : テキストファイルは 'text'、それ以外は 'datauri' で読み込みます (デフォルト) });

この変更は リファレンス も更新してあります。 Pot.DropFile の 動作サンプル そして、主な実装は Pot.ArrayBufferoid です。 ArrayBufferoid は、ArrayBuffer (Typed Array) の変換器を中心として DataView の機能も兼ねたストリームに適したオブジェクト/コンストラクタです。 Array.prototype も持っててちょっとカオスに混ぜてますが、 クロスブラウザに使えるようにしたのが目的です。 まだリファレンスが作れてない (2012-05-13 現在) ので、ソースコードまたは JSDoc を参照ください。

var buffer = new Pot.ArrayBufferoid(); var i = 0; // 配列のように値を埋めたり buffer[i++] = 255; buffer[i++] = 254; // Array.prototype.push を使ってみたり buffer.push(253); buffer.push(252); // DataView がない環境でも使えるように Pot.debug(buffer.getUint16(0, true)); // 65279 // length は size() を使います Pot.debug('buffer.length = ' + buffer.size()); // 4 // Typed Array に変換 (ない環境は Array になる) var arrayBuffer = buffer.toArrayBuffer(); var uint8Array = buffer.toUint8Array(); // ストリームな使い方 buffer.seek(0); var data1 = buffer.read(1); Pot.debug(data1[0]); // 255 Pot.debug(buffer.tell()); // 1 var data2 = buffer.read(2); Pot.debug(data2); // [254, 253] buffer.seek(0); buffer.write([100, 101]); Pot.debug(buffer); // [100, 101, 253, 252]

でもやっぱり Typed Array を使うような場合は速度を重視すると思います。 その場合、直接 Uint8Array などを扱ったほうが速いです。 ArrayBufferoid はクロスブラウザなバッファとして扱うと楽になってます。

// 変換用に利用したり var uint8array = Pot.ArrayBufferoid.toUint8Array([0x61, 0x62, 0x63]); // コピー時に利用したり var copy = Pot.ArrayBufferoid.copyBuffer(uint8array); // 文字列に変換したり var binary = Pot.ArrayBufferoid.bufferToBinary(copy); Pot.debug(binary); // 'abc' // 巨大な配列を var view = new Pot.ArrrayBufferoid(1000000).toUint8Array(); for (var i = 0; i < 1000000; i++) { view[i] = 0x61; } // 非同期で負荷をかけずに変換したり Pot.ArrayBufferoid.bufferToBinary.deferred(view).then(function(res) { Pot.debug(res); // 'aaaaaaaaaaa...' }); // UTF-16 文字列から UTF-8 Buffer に変換したり戻したり var s = 'hogeほげ'; var buffer = Pot.ArrayBufferoid.stringToBuffer(s); var string = Pot.ArrayBufferoid.bufferToString(buffer); Pot.debug(buffer); // buffer: // [104, 111, 103, 101, 227, 129, 187, 227, 129, 146] Pot.debug(s === string); // true

といった時に役立てると思います。 そして、個人的に楽になった改善点は Pot.Deferred のコールバック関数内で FileReader インスタンスを返すと ファイル読み込みが完了してから次のチェインが実行され、 結果に読み込んだファイルが渡るようになりました。

Pot.Deferred.begin(function() { // readAsTextの例 var reader = new FileReader(); var bb = new Pot.System.BlobBuilder(); bb.append('hoge'); reader.readAsText(bb.getBlob()); // readerを返すと結果が次のチェインで取得できる return reader; }).then(function(res) { // 結果は FileReader の onload の event.target.result Pot.debug(res); // 'hoge' }).rescue(function(err) { // エラー時 (FileReader の onerror) alert(err); });

Node でバイナリ操作とかしたい時だってあるさ。というわけで Node でバイナリ操作をするときに使える Buffer と ArrayBuffer との違いについて簡単にだけど調べてみた。

由来

Buffer オブジェクトは Node v0.1.90 にて CommonJS の Binary/F のいくつかのメソッドを実装する形で登場した。その後、Node における Binary オブジェクトは CommonJS とは独自の発展を遂げる。

一方 ArrayBuffer は Node v0.5.5 にて Plesk というプロジェクトの Typed Array の実装を借用する形で登場した。Typed Array の仕様は WebGL などの仕様と併せて Khronos Group が策定している。

初期化

Buffer は確保したメモリの内容で初期化される。

> var buffer = new Buffer(0x0F); undefined > buffer <Buffer 7d 2c 0a 20 20 47 4c 4f 42 41 4c 3a 20 5b 43> 

ArrayBuffer は \0 で初期化される。

> var arrayBuffer = new ArrayBuffer(0x0F); undefined > arrayBuffer { '0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0, '11': 0, '12': 0, '13': 0, '14': 0, byteLength: 15 }

buffer オブジェクトは予め決められた内容で初期化するか、buffer.fill() で初期化しないとあぶない。

配列のように扱う

Buffer, ArrayBuffer ともに可能だが、バイト長を図る場合 Buffer の場合は length プロパティ、ArrayBuffer の場合は byteLength プロパティを参照しなければいけないので注意が必要。

> buffer[0] 125 > buffer.length 15 > arrayBuffer[0] 0 > arrayBuffer.byteLength 15

Typed Array への変換

ドキュメント化されていないが Node の Buffer からの変換も可能。

> var uint8sFromBuffer = new Uint8Array(buffer); undefined > uint8sFromBuffer { '0': 125, '1': 44, '2': 10, '3': 32, '4': 32, '5': 71, '6': 76, '7': 79, '8': 66, '9': 65, '10': 76, '11': 58, '12': 32, '13': 91, '14': 67, buffer: { '0': 125, '1': 44, '2': 10, '3': 32, '4': 32, '5': 71, '6': 76, '7': 79, '8': 66, '9': 65, '10': 76, '11': 58, '12': 32, '13': 91, '14': 67, byteLength: 15 }, BYTES_PER_ELEMENT: 1, length: 15, set: [Function: set], byteOffset: 0, slice: [Function: slice], byteLength: 15, subarray: [Function: subarray] }

ArrayBuffer についてはもともと Typed Array の仕様の一部なのでもちろん可能。

> var uint8sFromArrayBuffer = new Uint8Array(arrayBuffer); undefined > uint8sFromArrayBuffer { '0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0, '11': 0, '12': 0, '13': 0, '14': 0, buffer: { '0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0, '11': 0, '12': 0, '13': 0, '14': 0, byteLength: 15 }, BYTES_PER_ELEMENT: 1, length: 15, set: [Function: set], byteOffset: 0, slice: [Function: slice], byteLength: 15, subarray: [Function: subarray] }

関連かも

http://nodejs.org/api/buffer.html