型付き配列を使用したバイナリデータの操作

HTML5とともに、新しいAPIはUXを拡張するWeb開発を拡大し、新しいマルチメディアとリアルタイムの接続性をもたらします。 多くの場合、この機能は、MP3オーディオ、PNG画像などのバイナリファイル形式の使用に関連付けられています。

またはMP4ビデオ。 このコンテキストでは、バイナリファイルの使用が非常に重要です。これにより、チャネル幅の要件を軽減し、必要なパフォーマンスを達成し、同時に既存の技術との互換性を維持できます。 最近まで、Web開発者はこれらのバイナリファイルまたはその他のバイナリファイル形式のコンテンツに直接アクセスできませんでした。



この記事では、ウェブ開発者がこの障壁をどのように取り除くことができるかを見ていきます。

JavaScript用の型付き配列API 、およびIE Test Driveの Binary File Inspectorデモでの新しいAPIの使用。



IE10 Platform Preview 4で使用できる型付き配列により、Webアプリケーションはさまざまなバイナリファイルを操作でき、ブラウザーファイルでサポートされているバイナリコンテンツを直接操作できます。 型付き配列のサポートがIE10全体に追加されました：JavaScript、XMLHttpRequest、File APIおよびStream API。

バイナリファイルインスペクター

バイナリファイルインスペクターの例は、これらの機能を組み合わせたときに機能するいくつかの新しい機能を示しています。 音楽ファイルのID3ヘッダー、ビデオファイルでの生データの表示、およびサポート可能なPCXイメージなどの他の形式のファイルを確認できます。

JavaScriptとCanvasを使用するブラウザ。







上記の例では、.mp4ビデオは左側の<video>要素を使用してレンダリングされ、ファイルのバイナリコンテンツは16進数（HEX）形式で対応するASCII文字の形式で右側に表示されます。 この例では、「mp4」の「ftyp」など、MPEGファイルに固有のいくつかの要素を確認できます。

型付き配列とArrayBuffer

型付き配列は、特定の型付き表現を通じて生のバイナリコンテンツを見る機会を提供します。 たとえば、バイナリデータストリームをバイト配列として見たい場合、Uint8Arrayを使用できます（Uint8は、通常バイトと呼ばれる8ビットの符号なし整数値を表します）。 生データを浮動小数点数の配列として読み取りたい場合、Float32Arrayを使用できます（Float32はIEE754標準に従って32ビット浮動小数点数を記述します）。 次のタイプがサポートされています。

配列タイプ	アイテムのサイズと説明
Int8array	8ビット符号付き整数
Uint8Array	8ビット符号なし整数
Int16array	16ビット符号付き整数
Uint16Array	16ビット符号なし整数
Int32array	32ビット符号付き整数
Uint32Array	32ビット符号なし整数
Float32配列	32ビットIEEE754浮動小数点数
Float64配列	64ビットIEEE754浮動小数点数

配列の各タイプは、ArrayBufferの表現です。 ArrayBufferはバイナリデータストリームへの参照ですが、データと対話する直接的な方法を表すものではありません。 ArrayBufferのTypedArrayビューを作成すると、バイナリコンテンツへの読み取りおよび書き込みアクセスが提供されます。





次の例では、新しい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オブジェクトも提供します。このオブジェクトを使用して、ArrayBufferの内容を非構造化方法で読み書きできます。 これは、通常、混合データ型の上に構築される新しいファイル形式の読み取りに適しています。



バイナリファイルインスペクターは、DataViewを使用してPCXファイルを読み取り、<canvas>要素を使用してレンダリングします。 以下は、幅と高さ、DPI、および色深度（ピクセルあたりのビット数）に関する情報の取得を含む、ファイルヘッダーを読み取るためのデモの簡易バージョンです。

 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);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記と同様のコードを使用して、ネイティブ画像形式、追加のビデオファイル形式、特定の領域に固有のデータ形式など、幅広い新しいファイルタイプのブラウザレンダリングサポートを追加できます。

XHRおよびFile APIを介したバイナリデータの取得

Typed Arrays APIを使用してファイルのコンテンツを操作する前に、適切なブラウザーAPIを使用して生データにアクセスする必要があります。 サーバーからファイルにアクセスするために、XMLHttpRequest APIが拡張され、さまざまな種類の応答（responseType）のサポートが追加されました。 したがって、「arraybuffer」の形式の答えは、JavaScriptのArrayBufferオブジェクトの形式でサーバーから要求されたリソースのコンテンツを表します。 「blob」、「text」、および「document」応答もサポートされています。

 function getServerFileToArrayBufffer(url, successCallback) { // Create an XHR object var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == xhr.DONE) { if (xhr.status == 200 && xhr.response) { // The 'response' property returns an ArrayBuffer successCallback(xhr.response); } else { alert("Failed to download:" + xhr.status + " " + xhr.statusText); } } } // Open the request for the provided url xhr.open("GET", url, true); // Set the responseType to 'arraybuffer' for ArrayBuffer response xhr.responseType = "arraybuffer"; xhr.send(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多くの場合、ユーザーは、たとえばメール用のWebクライアントのレターの添付ファイルとしてファイルを選択できます。 File APIを使用すると、Web開発者は、ドラッグアンドドロップ時に、または別のソース（Blob、File）から<input>要素を介して指定されたファイルのコンテンツを読み取ることができます。 ファイルの内容を読み取るために、ArrayBufferはFileReaderオブジェクトを使用し、XHRオブジェクトと同様に、ディスクからの読み取りがユーザーインターフェイスをブロックしないようにするために非同期で使用されます。

 function readFileToArrayBuffer(file, successCallback) { // Create a FileReader var reader = new FileReader(); // Register for 'load' and 'error' events reader.onload = function () { // The 'result' property returns an ArrayBuffer for readAsArrayBuffer var buffer = reader.result; successCallback(buffer); } reader.onerror = function (evt) { // The error code indicates the reason for failure if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) { alert("Failed to read file: " + file.name); } } // Begin a read of the file contents into an ArrayBuffer reader.readAsArrayBuffer(file); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

バイナリデータは、Webブラウザで積極的に使用されています。 型付き配列、XHR2、およびIE10のFile APIのサポートの追加により、Webアプリケーションは、バイナリデータを直接操作したり、バイトレベルでデータを操作したり、追加のバイナリデータ形式を表示したり、既存のメディア形式から追加のデータを抽出したりできるようになりました。 IE Test DriveのBinary File Inspectorの例、およびIE10の Typed Arraysの実装を試してください。