HTML5手習い

バイナリデータとArrayBuffer

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
hexdumpコマンドを使用してファイルの中身をバイナリデータとして表示することで、テキストデータを含め、すべてのデータがバイナリデータであることを学びます。また、ArrayBuffer,TypedArrayといったオブジェクトを使用して、Java Scriptで直接バイナリデータを扱う方法について説明します。
講師:
09:05

字幕

このレッスンではバイナリデータとは何か また JavaScript から バイナリデータを扱うための機能である― ArrayBuffer の基本的な 使い方について説明します バイナリデータとは 0と1の並びで 表されるデータの事です 実際にはコンピュータ上で扱われる すべてのデータはバイナリデータです 例えば 一見文字のように見える HTML ファイルやテキストファイルなども その中身はバイナリデータなのです このことを実感するためには ファイルの中身を実際にバイナリデータとして 見てみるのがいいでしょう バイナリデータとして中身を見るためには hexdump コマンドを使います アセットの canvas_basic.html を バイナリデータとして見てみましょう hexdump -C canvas_basic.html 実行するとこのような内容が表示されます こちらの右側に表示されているのが バイナリデータをテキストとして 解釈した場合の内容です そして真ん中のあたりが 実際のバイナリデータ― 0と1の並びです バイナリデータを人間が見る場合には 実際には 16 進数として 表示する場合が多いです その方が0と1の並びで 表示するよりも見やすくなるからです ファイルの先頭を見てみましょう 例えば ファイル先頭の このバイナリ記号は― バイナリデータでは 3c と表されることが分かります その隣の ! マークはバイナリデータとして 見ると 21 であることが分かります その隣の D は 44 O は 4f というように バイナリを生で見るとどのような数値が 対応するのかという事が確認できます 画像データも見てみましょう hexdump - C アセットから gomoku.jpg というデータを見てみます するとこのような表示になります 右側のデータを ASCII 文字として解釈した場合の表示が 意味の分からない文字になっています このように画像データを文字として 解釈する事はできないことが分かります しかしながら画像データの中身も やはり0と1の並び― バイナリデータなのです 以前の JavaScript ではバイナリデータを 直接効率的に扱う手段がありませんでした そのため文字列を使って 無理やり効率の悪い方法で バイナリデータを扱っていたのです 最近の JavaScript では ArrayBuffer というバイナリデータを 直接効率よく扱えるデータ型が導入されました また ArrayBuffer と関連して これらの TypedArray と呼ばれる いくつかのデータ型が実際には使われます TypedArray は― 基本的には JavaScript の組み込みの アレイ型の様に使うことができます しかしながら ひとつ決定的な違いがあります それは TypedArray の各要素には― 必ず厳密に同じデータ型が 格納されるという事です 例えばアレイ型には 1番目の要素は文字列 2番目の要素はオブジェクト 3番目の要素は数値といったような 格納の仕方ができますが TypedArray では そのようにはいきません 例えば Uint8Array であれば 全ての要素は Uint8 ― すなわち 8ビットの符号なし整数型なのです それでは実際に ArrayBuffer と TypedArray を使ってみましょう Chrome を開いてください ページはどこでも構いません JavaScript コンソールを開きましょう Mac の方は Command + Option + I Windows の方は Ctrl +Shift + I でしたね そして Console のタブを選択します 先程 テキストファイルでもその中身は 実際にはバイナリファイルであると言いました ここでは JavaScript の文字列を バイナリデータとして ArrayBuffer の中に格納してみましょう まずは文字列を作ります var str = 'Sample Text' これは文字列です JavaScript の文字列の1文字は 基本的には 16 ビットのサイズになります 厳密にいうとこれは文字ではなく コードポイントというサイズなのですが ほとんどの場合は 1文字 = 16 ビットです JavaScript で文字列の生のデータを 取得するためには str. charCodeAt という メソッドを使います このメソッドに取得したい文字の 添え字を与えればいいのです 例えば 0番目の文字のデータを 取得したい場合には このようにします すると S に相当するデータは 83 であることが分かります 1と取得すれば A は 97 であることが分かります この文字の長さは length で見てみると 11 文字です それでは この 11 文字分のデータを格納できる TypedArray を生成してみましょう var a = 1文字が 16 ビットであると言いましたので Uint16Array を使ってみます new UintArray そしてコンストラクターには そのサイズを渡します これで a が生成できました 初期状態では全ての要素に 0が入っています 普通の配列と同様に length というプロパティを持っており 要素数を返します また普通の配列にはないプロパティとして byteLength というプロパティがあります これを見てみると 実際のバイト数が返ってきます 1文字が 16 ビットなので 11 × 2 バイトで 22 バイトになります これに先程の文字列のデータを 格納したければ for 文でループを回して str. length 文字の要素数の分だけループを回します そしてその中では このように普通の配列のように カギ括弧と添え字を使って アクセスすることができます str.charCodeAt (i) これで先程の文字が バイナリデータに変換されて a の中に格納されるはずです a を再度見てみましょう このように数値データとして 格納されています この a は普通の配列と同じように 添え字を付ければ 中身を見ることができます また TypedArray の実際のデータは ArrayBuffer に格納されています TypedArray のデータを保持する ArrayBuffer にアクセスするには Buffer プロパティを使用すれば OK です このように Buffer プロパティの中身が ArrayBuffer 型であることがわかります 本レッスンでは バイナリデータとは何か また JavaScript から バイナリデータを扱うための― ArrayBuffer の基本的な 使用方法について説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。