ArrayBuffer クラスについて
| ・ | ArrayBuffer クラスとは？ |
| ・ | ArrayBuffer オブジェクトを作成する |
| ・ | バイナリデータに入出力アクセスする |
| ・ | ArrayBuffer クラスのプロパティについて |
| ・ | ArrayBuffer クラスのメソッドについて |
| ・ | DataView クラスのプロパティについて |
| ・ | DataView クラスのメソッドについて |
ArrayBuffer クラスとは？
■ArrayBuffer クラスについて
■ArrayBuffer クラスについて（バッファ）
ArrayBuffer クラスを使用すると、バイナリデータを取り扱う事ができます。
ArrayBuffer クラスを使用すると、物理メモリの領域（バッファ）を確保する事ができます。
ArrayBuffer クラスだけでは、バッファに入出力アクセスする事はできません。
バッファに入出力アクセスするには、別途 ArrayBufferView（ビュー） のサブクラスを使用する必要があります。
■ArrayBufferView クラスについて（ビュー）
ArrayBufferView のサブクラスを使用すると、バイナリデータに入出力アクセスする事ができます。
ArrayBuffer の実体は、物理メモリの領域（バッファ）です。
よってビューには、Array クラスにあるような、配列の挿入や切除といった便利なメソッドは存在しません。
ビューには、大きく分けて TypedArray と DataView の２つの種類があります。
■TypedArray クラスについて （型付き配列）
高速でバッファに入出力アクセスするには、TypedArray クラスを使用します。
TypedArray クラスについては、こちらで解説しています。
アライメント（バイト境界）や、エンディアン方式を考慮する必要があり、少々難解です。
■DataView クラスについて
より高機能なメソッドを使って、バッファに入出力アクセスするには、DataView クラスを使用します。
通常は、こちらのクラスを使用するといいでしょう。
■ブラウザが ArrayBuffer をサポートしているか調べる
window.ArrayBuffer が真であるか比較します。
Internet Explorer 9 以前では利用できません。
ArrayBuffer オブジェクトを作成する
■ ArrayBuffer オブジェクトを作成する（ArrayBuffer コンストラクタ）
ArrayBuffer オブジェクトを作成するには、new 演算子を使って、ArrayBuffer クラスをインスタンス化します。
new ArrayBuffer ( バイトサイズ ) :ArrayBuffer
| 第01引数(略可) | Number | 確保したいバッファのサイズをバイト数で指定。最大で 4294967295。デフォルトでは 0。 |
| 戻り値 | ArrayBuffer | ArrayBuffer オブジェクトが得られる |
■第01引数（確保したいバッファのバイトサイズ）
第01引数から、確保したいバッファのバイトサイズを指定します。
これは、仮想的な数値ではありません。実際に物理メモリの確保を試みます。
巨大なバイト数を指定した場合、環境によって失敗する事がありえるので注意して下さい。
物理メモリの確保に失敗した場合、エラーが発生します。
物理メモリの確保に成功した場合、バイナリの中身は、すべて 0 で初期化されています。
ArrayBuffer オブジェクトを生成した後で、バッファのサイズを変更する事はできません。
よって、サイズの指定は重要です。第01引数を省略しても意味がありません。
■作成例
初期サイズを指定して、ArrayBuffer オブジェクトを作成する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// 初期サイズを指定して、ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(1024);
// 出力テスト
console.log(ary_buffer);
}
巨大なバイトサイズを指定して、生成に失敗した場合の動作を確認する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
var ary_buffer;
try{
// 約 4 GByte を指定して、ArrayBuffer オブジェクトの生成を試みる
ary_buffer = new ArrayBuffer(0xffffffff);
console.log("メモリの確保に成功:" + ary_buffer.byteLength);
}catch(e){
console.log("メモリの確保に失敗した");
}
}
バイナリデータに入出力アクセスする
■バイナリデータに入出力アクセスする（TypedArray クラスを使用）
■TypedArray クラスの特長
TypedArray クラスを使用すると、「ArrayBuffer オブジェクトが保有しているバッファ」に高速でアクセスできます。
TypedArray クラスには、高機能なメソッドがありません。
アライメント（バイト境界）やエンディアン方式の違いなどを、自前で考慮する必要があります。
■ArrayBuffer オブジェクトを使って、TypedArray オブジェクトを作成する
第01引数に、ArrayBuffer オブジェクトを指定した場合の動作です。
new TypedArray ( ArrayBuffer , 開始位置 , 配列の個数 ) :TypedArray
| 第01引数 | ArrayBuffer | アクセスしたい ArrayBuffer オブジェクトを指定する。 |
| 第02引数(略可) | Number | ビューの開始位置を、バイト数で指定する。 |
| 第03引数(略可) | Number | ビューからアクセス可能なサイズを、配列の個数で指定する。（バイトサイズではない） 省略した場合、最後尾まで含まれる。 |
| 戻り値 | TypedArray | TypedArray オブジェクトが得られる。 |
■アライメント（バイト境界）について
第02引数と第03引数は、アライメント（バイト境界）を守る必要があります。
違反した場合、エラーが発生します。
例えば、Uint16Array クラスを使用する場合、2 の倍数 (2,4,6,8,10,12 ...) である必要があります。
例えば、Int32Array クラスを使用する場合、4 の倍数 (4,8,12,16,20,24 ...) である必要があります。
例えば、Float64Array クラスを使用する場合、8 の倍数 (8,16,24,32,40,48 ...) である必要があります。
第03引数は、省略した場合に違反となる事があります。
例えば、バッファのサイズが 11 Byte であるときに、Float32Array クラスを使用すると、最後尾の要素が 4 の倍数に収まらない為に違反となります。
■エンディアン方式の違いについて
■作成例
Int8Array オブジェクトを作成する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(8);
// Int8Array オブジェクトを作成する
var ary_s8 = new Int8Array( ary_buffer );
// 出力テスト
console.log(ary_s8); // [0, 0, 0, 0, 0, 0, 0, 0]
}
開始位置を指定して、Uint16Array オブジェクトを作成する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(8);
// 開始位置を指定して、Uint16Array オブジェクトを作成する（開始位置は、2 の倍数である必要がある）
var ary_u16 = new Uint16Array( ary_buffer , 2 );
// 出力テスト
console.log(ary_u16); // [0, 0, 0]
}
開始位置と配列の個数を指定して、Uint32Array オブジェクトを作成する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(128);
// 開始位置と配列の個数を指定して、Uint32Array オブジェクトを作成する（開始位置は、4 の倍数である必要がある）
var ary_u32 = new Uint32Array( ary_buffer , 32 , 2);
// 出力テスト
console.log(ary_u32); // [0, 0]
}
■TypedArray オブジェクトからバイナリデータにアクセスする
TypedArray オブジェクトは、配列アクセス演算子を使って、配列のようにアクセスする事ができます。
配列としてアクセス可能なサイズを取得するには、length プロパティを使用します。
■読み取りアクセス例
読み取りアクセス例
// ------------------------------------------------------------
// リトルエンディアン方式で動作しているか調べる関数
// ------------------------------------------------------------
function SystemGetExecutedInLittleEndian(){
if((new Uint8Array((new Uint16Array([0x00ff])).buffer))[0]) return true;
return false;
}
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ビッグエンディアン方式を使用する
var little_endian = false;
// バッファの位置
var pos = 0;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f] );
// ArrayBuffer オブジェクトを取得する
var ary_buffer = ary_u8.buffer;
// ------------------------------------------------------------
// CPU のエンディアン方式と、バッファのエンディアン方式が一致しているか調べる
// ------------------------------------------------------------
if(SystemGetExecutedInLittleEndian() == little_endian){
// ------------------------------------------------------------
// エンディアン方式が一致しているので、TypedArray クラスを採用する
// ------------------------------------------------------------
// Uint32Array オブジェクトを作成する
var ary_u32 = new Uint32Array( ary_buffer , pos );
// 4 Byte ずつ読み込み
console.log( ary_u32[0] ); // 0x00010203
pos += ary_u32.BYTES_PER_ELEMENT;
console.log( ary_u32[1] ); // 0x04050607
pos += ary_u32.BYTES_PER_ELEMENT;
// Uint16Array オブジェクトを作成する
var ary_u16 = new Uint16Array( ary_buffer , pos );
// 2 Byte ずつ読み込み
console.log( ary_u16[0] ); // 0x0809
pos += ary_u16.BYTES_PER_ELEMENT;
console.log( ary_u16[1] ); // 0x0a0b
pos += ary_u16.BYTES_PER_ELEMENT;
console.log( ary_u16[2] ); // 0x0c0d
pos += ary_u16.BYTES_PER_ELEMENT;
console.log( ary_u16[3] ); // 0x0e0f
pos += ary_u16.BYTES_PER_ELEMENT;
}else{
// ------------------------------------------------------------
// エンディアン方式が一致していないので、DataView クラスを採用する
// ------------------------------------------------------------
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 4 Byte ずつ読み込み
console.log( data_view.getUint32(pos,little_endian) ); // 0x00010203
pos += 4;
console.log( data_view.getUint32(pos,little_endian) ); // 0x04050607
pos += 4;
// 2 Byte ずつ読み込み
console.log( data_view.getUint16(pos,little_endian) ); // 0x0809
pos += 2;
console.log( data_view.getUint16(pos,little_endian) ); // 0x0a0b
pos += 2;
console.log( data_view.getUint16(pos,little_endian) ); // 0x0c0d
pos += 2;
console.log( data_view.getUint16(pos,little_endian) ); // 0x0e0f
pos += 2;
}
}
■書き込みアクセス例
書き込みアクセス例
// ------------------------------------------------------------
// リトルエンディアン方式で動作しているか調べる関数
// ------------------------------------------------------------
function SystemGetExecutedInLittleEndian(){
if((new Uint8Array((new Uint16Array([0x00ff])).buffer))[0]) return true;
return false;
}
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// リトルエンディアン方式を使用する
var little_endian = true;
// バッファの位置
var pos = 0;
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(16);
// ------------------------------------------------------------
// CPU のエンディアン方式と、バッファのエンディアン方式が一致しているか調べる
// ------------------------------------------------------------
if(SystemGetExecutedInLittleEndian() == little_endian){
// ------------------------------------------------------------
// エンディアン方式が一致しているので、TypedArray クラスを採用する
// ------------------------------------------------------------
// Uint32Array オブジェクトを作成する
var ary_u32 = new Uint32Array( ary_buffer , pos );
// 4 Byte ずつ書き込み
ary_u32[0] = 0x03020100;
pos += ary_u32.BYTES_PER_ELEMENT;
ary_u32[1] = 0x07060504;
pos += ary_u32.BYTES_PER_ELEMENT;
// Uint16Array オブジェクトを作成する
var ary_u16 = new Uint16Array( ary_buffer , pos );
// 2 Byte ずつ書き込み
ary_u16[0] = 0x0908;
pos += ary_u16.BYTES_PER_ELEMENT;
ary_u16[1] = 0x0b0a;
pos += ary_u16.BYTES_PER_ELEMENT;
ary_u16[2] = 0x0d0c;
pos += ary_u16.BYTES_PER_ELEMENT;
ary_u16[3] = 0x0f0e;
pos += ary_u16.BYTES_PER_ELEMENT;
}else{
// ------------------------------------------------------------
// エンディアン方式が一致していないので、DataView クラスを採用する
// ------------------------------------------------------------
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 4 Byte ずつ書き込み
data_view.setUint32( pos , 0x03020100 , little_endian );
pos += 4;
data_view.setUint32( pos , 0x07060504 , little_endian );
pos += 4;
// 2 Byte ずつ書き込み
data_view.setUint16( pos , 0x0908 , little_endian );
pos += 2;
data_view.setUint16( pos , 0x0b0a , little_endian );
pos += 2;
data_view.setUint16( pos , 0x0d0c , little_endian );
pos += 2;
data_view.setUint16( pos , 0x0f0e , little_endian );
pos += 2;
}
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( ary_buffer );
// 出力テスト
console.log(ary_u8); // [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f]
}
■バイナリデータに入出力アクセスする（DataView クラスを使用）
■DataView クラスの特長
DataView クラスを使用すると、「ArrayBuffer オブジェクトが保有しているバッファ」に低速でアクセスできます。
DataView クラスには、高機能なメソッドが存在します。
エンディアン方式は、メソッドを利用する事で使い分けることができます。
アライメント（バイト境界）を考慮する必要はありません。
エラーが発生するのは、アクセスを試みた領域が、バッファの総サイズを超えていた時だけです。
■ArrayBuffer オブジェクトを使って、TypedArray オブジェクトを作成する
new 演算子を使って、DataView のサブクラスをインスタンス化します。
第01引数に、ArrayBuffer オブジェクトを指定します。
new DataView ( ArrayBuffer , 開始位置 , サイズ ) :DataView
| 第01引数 | ArrayBuffer | アクセスしたい ArrayBuffer オブジェクトを指定する。 |
| 第02引数(略可) | Number | ビューの開始位置を、バイト数で指定する。 |
| 第03引数(略可) | Number | ビューからアクセス可能なサイズを、バイト数で指定する。 |
| 戻り値 | DataView | DataView オブジェクトが得られる。 |
■作成例
DataView オブジェクトを作成する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(8);
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 出力テスト
console.log(data_view);
}
■DataView オブジェクトからバイナリデータにアクセスする
バイナリデータにアクセスするためには、必ずメソッドを使用する必要があります。
DataView クラスのメソッドの一覧については、こちらで解説しています。
DataView オブジェクトから、配列アクセス演算子を使用する事はできません。
■読み取りアクセス例
読み取りアクセス例
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ビッグエンディアン方式を使用する
var little_endian = false;
// バッファの位置
var pos = 0;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f] );
// ArrayBuffer オブジェクトを取得する
var ary_buffer = ary_u8.buffer;
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 4 Byte ずつ読み込み
console.log( data_view.getUint32(pos,little_endian) ); // 0x00010203
pos += 4;
console.log( data_view.getUint32(pos,little_endian) ); // 0x04050607
pos += 4;
// 2 Byte ずつ読み込み
console.log( data_view.getUint16(pos,little_endian) ); // 0x0809
pos += 2;
console.log( data_view.getUint16(pos,little_endian) ); // 0x0a0b
pos += 2;
console.log( data_view.getUint16(pos,little_endian) ); // 0x0c0d
pos += 2;
console.log( data_view.getUint16(pos,little_endian) ); // 0x0e0f
pos += 2;
}
■書き込みアクセス例
書き込みアクセス例
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// リトルエンディアン方式を使用する
var little_endian = true;
// バッファの位置
var pos = 0;
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(16);
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 4 Byte ずつ書き込み
data_view.setUint32( pos , 0x03020100 , little_endian );
pos += 4;
data_view.setUint32( pos , 0x07060504 , little_endian );
pos += 4;
// 2 Byte ずつ書き込み
data_view.setUint16( pos , 0x0908 , little_endian );
pos += 2;
data_view.setUint16( pos , 0x0b0a , little_endian );
pos += 2;
data_view.setUint16( pos , 0x0d0c , little_endian );
pos += 2;
data_view.setUint16( pos , 0x0f0e , little_endian );
pos += 2;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( ary_buffer );
// 出力テスト
console.log(ary_u8); // [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f]
}
■バイナリデータと文字列を相互変換する（Encoding API を使用）
■「ArrayBuffer」から「文字列」に変換する
TextDecoder クラスを使用します。
■「文字列」から「ArrayBuffer」に変換する
TextEncoder クラスを使用します。
ArrayBuffer クラスのプロパティについて
■ArrayBuffer クラスのプロパティ
ArrayBuffer クラスには、以下のプロパティがあります。
| プロパティ | 型 | 説明 |
| byteLength | Number | バッファの総バイトサイズを取得する（読み取り専用） |
■ byteLength プロパティ
ArrayBuffer オブジェクト内部で確保している、バッファの総バイトサイズを取得するには、byteLength プロパティを使用します。
byteLength プロパティは、読み取り専用です。
■取得例
バッファの総バイトサイズを調べる
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// 初期サイズを指定して、ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer(1024);
// バッファの総バイトサイズを取得する
var byte_size = ary_buffer.byteLength;
// 出力テスト
console.log(byte_size); // 1024
}
ArrayBuffer クラスのメソッドについて
■ArrayBuffer クラスのメソッド一覧
ArrayBuffer クラスには、以下のメソッドがあります。
| メソッド | 説明 |
| slice() | バッファの開始位置と終了位置を指定して、新しい ArrayBuffer オブジェクトを生成する。 |
■slice() メソッド
バッファの開始位置と終了位置を指定して、新しい ArrayBuffer オブジェクトを生成するには、slice() メソッドを使用します。
第02引数で指定する終了位置は、取得対象に含まれません。
ArrayBuffer.slice( 開始位置 , 終了位置 ) :ArrayBuffer
| 第01引数 | Number | 開始位置をバイト数で指定する。 |
| 第02引数(略可) | Number | 終了位置をバイト数で指定する。省略した場合、最後尾まで含まれる。 |
| 戻り値 | ArrayBuffer | 新しい ArrayBuffer オブジェクトが得られる。 |
■取得例
バッファの開始位置と終了位置を指定して、新しい ArrayBuffer を生成する
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// 初期パラメータを指定しつつ、ArrayBuffer オブジェクトを作成する
var ary_buffer0 = (new Uint8Array([0,1,2,3,4,5])).buffer;
// バッファの開始位置と終了位置を指定して、新しい ArrayBuffer を生成する
var ary_buffer1 = ary_buffer0.slice(1,3);
// 出力テスト
console.log(new Uint8Array(ary_buffer0)); // [0,1,2,3,4,5]
console.log(new Uint8Array(ary_buffer1)); // [1,2]
}
DataView クラスのプロパティについて
■DataView クラスのプロパティ
DataView クラスには、以下のプロパティがあります。
| プロパティ | 型 | 説明 |
| buffer | ArrayBuffer | ArrayBuffer オブジェクトを取得する。（読み取り専用） |
| byteOffset | Number | ビューの開始位置（バイト数）を取得する。 |
| byteLength | Number | ビューからアクセス可能なサイズ（バイト数）を取得する。（読み取り専用） |
■byteOffset と byteLength プロパティ
ビューの開始位置（バイト数）を取得するには、byteOffset プロパティを使用します。
ビューからアクセス可能なサイズ（バイト数）を取得するには、byteLength プロパティを使用します。
■取得例
ビューの開始位置とアクセス可能なサイズを調べる
// ArrayBuffer に対応している
if(window.ArrayBuffer){
var dat_view;
// ------------------------------------------------------------
// 初期サイズを指定して、ArrayBuffer オブジェクトを作成する
// ------------------------------------------------------------
var ary_buffer = new ArrayBuffer(128);
// バッファの総サイズ
console.log(ary_buffer.byteLength); // 128
// ------------------------------------------------------------
// 開始位置を指定して、DataView オブジェクトを作成する
// ------------------------------------------------------------
var dat_view = new DataView(ary_buffer,32);
// ビューの開始位置（バイト数）
console.log(dat_view.byteOffset); // 32
// ビューからアクセス可能なサイズ（バイト数）
console.log(dat_view.byteLength); // 96
// ------------------------------------------------------------
// 開始位置とサイズを指定して、DataView オブジェクトを作成する
// ------------------------------------------------------------
var dat_view = new DataView(ary_buffer,64,16);
// ビューの開始位置（バイト数）
console.log(dat_view.byteOffset); // 64
// ビューからアクセス可能なサイズ（バイト数）
console.log(dat_view.byteLength); // 16
}
DataView クラスのメソッドについて
■DataView クラスのメソッド一覧
DataView クラスには、以下のメソッドがあります。
| メソッド | 説明 |
| getInt8() | バッファから 8bit整数値（符号あり）を読み込む。 |
| getUint8() | バッファから 8bit整数値（符号なし）を読み込む。 |
| getInt16() | バッファから 16bit整数値（符号あり）を読み込む。 |
| getUint16() | バッファから 16bit整数値（符号なし）を読み込む。 |
| getInt32() | バッファから 32bit整数値（符号あり）を読み込む。 |
| getUint32() | バッファから 32bit整数値（符号なし）を読み込む。 |
| getFloat32() | バッファから 32bit浮動小数点数を読み込む。 |
| getFloat64() | バッファから 64bit浮動小数点数を読み込む。 |
| setInt8() | バッファへ 8bit整数値（符号あり）を書き込む。 |
| setUint8() | バッファへ 8bit整数値（符号なし）を書き込む。 |
| setInt16() | バッファへ 16bit整数値（符号あり）を書き込む。 |
| setUint16() | バッファへ 16bit整数値（符号なし）を書き込む。 |
| setInt32() | バッファへ 32bit整数値（符号あり）を書き込む。 |
| setUint32() | バッファへ 32bit整数値（符号なし）を書き込む。 |
| setFloat32() | バッファへ 32bit浮動小数点数を書き込む。 |
| setFloat64() | バッファへ 64bit浮動小数点数を書き込む。 |
■シングルバイトサイズの値を読み取るメソッド
シングルバイトサイズの値を読み取る、メソッドの仕様です。
DataView.getXXXXX( 開始位置 ) :Number
| 第01引数 | Number | 読み取り開始位置をバイト数で指定する。（ビューの開始位置が 0 となる） |
| 戻り値 | Number | メソッドに応じた値が得られる。 |
■使用例
DataView のメソッドを使って、シングルバイトサイズの値を読み取る
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// バッファの位置
var pos = 0;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( [0x00,0x01,0x02,0xFF,0xFE,0xFD] );
// ArrayBuffer オブジェクトを取得する
var ary_buffer = ary_u8.buffer;
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 1 Byte ずつ読み込み
console.log( data_view.getUint8(pos) ); // 0 (0x00)
pos += 1;
console.log( data_view.getUint8(pos) ); // 1 (0x01)
pos += 1;
console.log( data_view.getUint8(pos) ); // 2 (0x02)
pos += 1;
console.log( data_view.getInt8(pos) ); // -1 (0xff)
pos += 1;
console.log( data_view.getInt8(pos) ); // -2 (0xfe)
pos += 1;
console.log( data_view.getInt8(pos) ); // -3 (0xfd)
pos += 1;
}
■マルチバイトサイズの値を読み取るメソッド
マルチバイトサイズの値を読み取る、メソッドの仕様です。
第02引数から、エンディアン方式の指定が可能です。
DataView.getXXXXX( 開始位置 , リトルエンディアンを使用するか？ ) :Number
| 第01引数 | Number | 読み取り開始位置をバイト数で指定する。（ビューの開始位置が 0 となる） |
| 第02引数(略可) | Boolean | リトルエンディアン方式を使用する場合 true を指定。省略した場合ビッグエンディアン方式を使用する。デフォルトは false。 |
| 戻り値 | Number | メソッドに応じた値が得られる。 |
■使用例
DataView のメソッドを使って、マルチバイトサイズの値を読み取る
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// ビッグエンディアン方式を使用する
var little_endian = false;
// バッファの位置
var pos = 0;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( [0x12,0x34 , 0xfe,0xdc , 0x12,0x34,0x56,0x78 , 0xfe,0xdc,0xba,0x98 , 0x40,0x12,0x00,0x00 , 0xc0,0xfe,0xdc,0xba,0x00,0x00,0x00,0x00] );
// ArrayBuffer オブジェクトを取得する
var ary_buffer = ary_u8.buffer;
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 2 Byte ずつ読み込み
console.log( data_view.getUint16(pos,little_endian) ); // 4660 (0x1234)
pos += 2;
console.log( data_view.getInt16(pos,little_endian) ); // -292 (0xfedc)
pos += 2;
// 4 Byte ずつ読み込み
console.log( data_view.getUint32(pos,little_endian) ); // 305419896 (0x12345678)
pos += 4;
console.log( data_view.getInt32(pos,little_endian) ); // -19088744 (0xfedcba98)
pos += 4;
console.log( data_view.getFloat32(pos,little_endian) ); // 2.28125 (0x40120000)
pos += 4;
// 8 Byte ずつ読み込み
console.log( data_view.getFloat64(pos,little_endian) ); // -126411.625 (0xc0fedcba00000000)
pos += 8;
}
■シングルバイトサイズの値を書き込むメソッド
シングルバイトサイズの値を書き込む、メソッドの仕様です。
DataView.setXXXXX( 開始位置 , 値 ) :Void
| 第01引数 | Number | 書き込み開始位置をバイト数で指定する。（ビューの開始位置が 0 となる） |
| 第02引数 | Number | 書き込みたい値を指定する。 |
| 戻り値 | Void | なし。 |
■使用例
DataView のメソッドを使って、シングルバイトサイズの値を書き込む
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// バッファの位置
var pos = 0;
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer( 6 );
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 1 Byte ずつ書き込み
data_view.setUint8(pos , 0); // 0x00
pos += 1;
data_view.setUint8(pos , 1); // 0x01
pos += 1;
data_view.setUint8(pos , 2); // 0x02
pos += 1;
data_view.setInt8(pos , -1); // 0xff
pos += 1;
data_view.setInt8(pos , -2); // 0xfe
pos += 1;
data_view.setInt8(pos , -3); // 0xfd
pos += 1;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( ary_buffer );
// 出力テスト
console.log( ary_u8 ); // [0x00,0x01,0x02,0xFF,0xFE,0xFD]
}
■マルチバイトサイズの値を書き込むメソッド
マルチバイトサイズの値を書き込む、メソッドの仕様です。
第03引数から、エンディアン方式の指定が可能です。
DataView.setXXXXX( 開始位置 , 値 , リトルエンディアンを使用するか？ ) :Void
| 第01引数 | Number | 書き込み開始位置をバイト数で指定する。（ビューの開始位置が 0 となる） |
| 第02引数(略可) | Number | 書き込みたい値を指定する。 |
| 第03引数(略可) | Boolean | リトルエンディアン方式を使用する場合 true を指定。省略した場合ビッグエンディアン方式を使用する。デフォルトは false。 |
| 戻り値 | Void | なし。 |
■使用例
DataView のメソッドを使って、マルチバイトサイズの値を書き込む
// ArrayBuffer に対応している
if(window.ArrayBuffer){
// リトルエンディアン方式を使用する
var little_endian = true;
// バッファの位置
var pos = 0;
// ArrayBuffer オブジェクトを作成する
var ary_buffer = new ArrayBuffer( 24 );
// DataView オブジェクトを作成する
var data_view = new DataView( ary_buffer );
// 2 Byte ずつ書き込み
data_view.setUint16(pos , 4660 , little_endian); // 0x1234
pos += 2;
data_view.setInt16(pos , -292 , little_endian); // 0xfedc
pos += 2;
// 4 Byte ずつ書き込み
data_view.setUint32(pos , 305419896 , little_endian); // 0x12345678
pos += 4;
data_view.setInt32(pos , -19088744 , little_endian); // 0xfedcba98
pos += 4;
data_view.setFloat32(pos , 2.28125 , little_endian); // 0x40120000
pos += 4;
// 8 Byte ずつ書き込み
data_view.setFloat64(pos , -126411.625 , little_endian); // 0xc0fedcba00000000
pos += 8;
// Uint8Array オブジェクトを作成する
var ary_u8 = new Uint8Array( ary_buffer );
// 出力テスト
console.log( ary_u8 ); // [0x34,0x12 , 0xdc,0xfe , 0x78,0x56,0x34,0x12 , 0x98,0xba,0xdc,0xfe , 0x00,0x00,0x12,0x40 , 0x00,0x00,0x00,0x00,0xba,0xdc,0xfe,0xc0]
}