HTML5手習い

Blobオブジェクトのスライス

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Blobオブジェクトを利用して、巨大なデータを細切れにして読み出して処理する方法について学びます。
講師:
10:23

字幕

このレッスンでは Blob オブジェクトを使用して ファイルを部分的に読み込む 方法について学びます FileReader オブジェクトを使用すれば ユーザーのローカル環境にあるデータを ブラウザの中に読み込むことが可能ですが ムービーファイルのような 数GB もあるような 巨大なファイルをブラウザの中に 一気に読み込むことはできません そのような場合には Blob の slice メソッドを使って ファイルを細切れにして 読み出す必要があります まずは巨大なファイルを生成しましょう アセットの中にある generate.js は 1GB ほどの巨大な ASCII ファイルを 生成してくれる Node.js 用の スクリプトです 生成されるファイルの中身は 0 から 9 のランダムな並びとなります node generate.js と打って Enter これで実行ができます 実行完了までには暫く 時間がかかりますのでお待ち下さい 実行が完了しました この script によって生成されるファイルは largefile.txt というファイルになります ファイルのサイズを確認してみましょう ls-lh オプションを使って largefile.txt のサイズを見てみます 約1GB 程のサイズであることが分かります ファイルの中身も確認してみましょう head コマンドの -c 100 という オプションをつければ ファイルの先頭 100 バイトの中身を 覗き見ることができます このように 0 から 9 の数値が 羅列されていることが分かります なお この数値自体は 毎回ランダムに決定される為 実行する前に結果が変わることにご注意下さい それではこれを実際ブラウザの中に 読み込んでみましょう blob.html アセットからコピーしてきた ファイルをテキストエディタで開いて下さい 下部に JavaScript のコードが 記述されており このように input 要素の change イベントを使って FileReader でファイルを一気に 読み出すことが分かります 読み出しが完了すると このように console log で 読み出しが完了したことを知らせます Chrome から HTML を開いて ファイルを選択 そして largefile.txt を選択して下さい すると暫く間をおいて このようにブラウザが クラッシュしてしまいました これは余りにも大きすぎるファイルを 一気にメモリの中に 読み込もうとした為です このような場合には Blob の slice メソッドを使うことによって クラッシュを回避することができます それでは Blob オブジェクトを使って ファイルを細切れにしましょう 先程の largefile.txt の こちらの数値の羅列― 各桁を足し合わせて その結果を計算するという プログラムを書いてみます 因みに足し合わせた結果は 先程 generate.js を 実行した結果に出ている こちらの数値です 4294760138 が各桁の合計値で あることが分かります それではテキストエディタで blob.html を開いて こちらのコードはもう要りませんので 一旦削除します そしてファイルを部分的に読み込む 関数を定義します 今回は partialRead という 関数を定義してみます そのファイルはこのように1番目に ファイルオブジェクトをパラメータにとり 2番目のパラメータに offset をとり offset ではファイルの何バイト目から 読み出すかを指定します そして3番目の total で 現在までの合計値を渡すようにします partialRead の最初の読み出しは このようになるでしょう partialRead input files の 0 input 要素の files というプロパティに 実際にユーザーが指定した ファイルが入っています その 0 番目を使い 最初の offset は 0 そして最初の合計値は 0 になる筈です それから blob オブジェクトを 作成しましょう file の slice メソッドを使います file オブジェクト自身が blob オブジェクトの一種ですので slice メソッドを使用することができます offset は offset 変数を そのまま与えて それから範囲の終端としては offset + 今回は 512 KB ごとに 読み出すことにしますので 512 x 1024 これで 512 KB ずつ blob を 切り取ることができます そして blob オブジェクトを作成したら FileReader で blob を読み取りましょう FileReader reader の readAsText を 今回は使用します readAsText に blob オブジェクトを そのまま与えることができます そして 読み出し完了後の EventListener を設定しましょう これで blob が部分的に 読み出された場合の 処理を記述することができます reader の result というプロパティに 実際に読み出されたデータが入っていますが 今回の場合は 512 KB の長さの 文字列が入っています ですので これを for ループで回して 各文字の内容を読み取りましょう for を使う為にループ用の変数を用意して i が reader result の length より 小さい場合には i ++ でループを回します そしてその中では parseInto メソッドを使って 実際に文字で記述されている数字を 数値型に変更します reader の result i parseInto のメソッドの2番目の パラメータには引数を指定します 今回は 10 進数で解釈しますので 10 と指定します そして数値に変換した値を total に足し合わせます total というのはこの3番目の パラメータですね これにどんどん数値を 足し合わせていってやります そして各桁の数値の和が求まったら また自分自身で partialRead を 再帰的に呼び出してあげましょう まずは再帰の条件を記述します 再帰の条件は― offset がファイルの総サイズより 小さい場合には ファイルの総サイズは file オブジェクトの サイズプロパティで取得できます まだファイルの総サイズに offset が達していない場合には partialRead を再度呼び出します file オブジェクトはそのままで結構です そして offset が 今現在の offset プラス 新たに作成した blob のサイズ そして total はこちらで 先程計算したものですね このような形で 再帰呼び出ししてあげることによって total がどんどん増えて offset もどんどん 増加していくという動作になります そして再帰条件を満たさない場合には つまり再帰が― 計算が完了した場合には console.log に total サイズを 出力してあげましょう これで基本的な計算としては完了になります ですが今回の場合処理に 非常に時間がかかりますので こちらの output タグの中に 進捗率を表示してリアルタイムに 更新していくことにしましょう output の dom 要素は こちらで取得済みです そして ここに次の再帰に移る前に total を計算し終えた段階で progress の innerHTML を更新します そこには完了具合の パーセンテージを表示します % の計算は このように 総ファイルサイズ分の offset ですね そして % 記号を付与してあげて それから更に計算が完了した場合には innerHTML を finished という 表示にしてあげましょう これでどんどん進捗率が更新されていく筈です ではリロードして 実行してみましょう このように進捗率が進んでいきます 計算には暫く時間がかかりますので お待ち下さい 計算が完了しました 各桁の数値の合計は 4294760138 であると示されました 実際にターミナルに戻って 結果を確認してみると generate.js が出力した結果と 一致しています このレッスンでは blob オブジェクトを使用して ファイルを部分的に 処理する方法について学びました

HTML5手習い

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

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

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

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

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