HTML5手習い

FileReaderによるデータの読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
FileReaderオブジェクトを利用して、ファイルデータをテキスト、データURL、ArrayBufferといった様々形式で読み出す方法について学びます。
講師:
08:32

字幕

このレッスンでは HTML5 アプリケーションから ユーザーのローカルにあるファイルの データを読み出す方法について学びます HTML5 でユーザーのファイルを ロードするには FileReader という オブジェクトを使います FileReader には次のような4種類の ファイルを読み出す為のメソッドがありますが これらはいずれもファイル型のオブジェクトを パラメータとしてとります ファイル型のデータは input 要素または ドラッグ&ドロップを使用して 予め取得しておく必要があります 1番上の readAsArrayBuffer はファイルの 中身を ArrayBuffer として読み出します 2番目の readAsBinaryString は ファイルの中身を バイナリとして読み出すのですが それを文字列の中に そのまま詰め込んで読み込みます readAsDataURL はファイルを バイナリとして読み出した後に BASE64 でエンコードした状態で 取得します readAsText はファイルの中身を 文字列として読み出します またエンコーディングパラメータを 指定することで そのファイルに記述されているテキストの エンコーディングを指定することができ 自動的に文字エンコードの変換を 行ってくれます エンコーディングパラメータを 省略した場合には 自動的に UTF-8 エンコーディングと みなされます それでは実際に JavaScript で ファイルを読み込んでみましょう アセットから file.html を テキストエディタと Google Chrome で開いて下さい まずは input 要素から ファイルオブジェクトを取得するところまで 記述しましょう input = document.getElementById の files そして input に対して EventListener を設定します addEventListener change ですね これでファイルをユーザーが指定したときの 処理を記述することができます そしてこのメソッドの中で input の files にアクセスすれば 実際にファイルオブジェクトを 使うことができます ファイルを複数選択できるように しておりますので for ループで回して各ファイルに対して アクセスしましょう i がファイルの要素数より少ない i for ループを回します これで各ファイルにアクセスできます ファイルのデータ型が テキストだった場合には console log に出力してみましょう データ型が何であるかを判別するためには type プロパティを見ます type プロパティは string ですので 正規表現でマッチングをかけましょう これでファイルのタイプが テキストだった場合の処理を この中に記述することができます そして実際に中身を読み出す為に FileReader オブジェクトを作成します FileReader を作成して テキストの場合は reader の readAsText で 読み込みましょう ファイルオブジェクトを パラメータとして渡します そしてこの readAsText や readAsDataURL などは 非同期で実行されますので 実行された結果を受け取る為には EventListener を設定する必要があります addEventListener の load イベントを取得して このように書きます そして実際に取得された中身は reader の result という プロパティの中に入っています これで実行してみましょう テキストファイルを選択してみます console のスペルが間違っていました 修正して 再度リロード そして読み出し このようにテキストの中に書いてあった 内容がログに出力されました それでは今度はファイルの中身が 画像であった場合には これをキャンバスに描画してみましょう タイプに対してマッチングをかけて 今度は image であった場合ですね これで image であった場合の 処理をこの中に書けます image であった場合には reader の readAsDataURL を使います これでバイナリデータを BASE64 で エンコードされた状態で取得できますので image 要素の ソースにそのまま 貼ることができます そして この場合も addEventListener で load イベントを補足します 中カッコが逆ですね これで OK です そしてこの中で image を dom の image を生成しましょう そして image の src に読み込んだ― BASE64 のデータを設定します reader の result ですね そして これで画像の生成ができましたので キャンバスの Context こちらで取得しているものです こちらに対して drawImage メソッドを使って 描画ができます context の drawImage 1番目のパラメータは画像オブジェクトです そして2番目と3番目は画像の描画先の基点 4番目と5番目に画像のサイズですね これで画像の描画ができる筈です function のスペルが 間違っていましたね 修正して 再度リロード これで今度は画像ファイルを 選択してみましょう files は input のプロパティでした 修正して 再度リロードして このように猫の画像が描画できました このレッスンでは HTML5 アプリケーションから ファイルのデータを ロードする方法について学びました

HTML5手習い

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

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

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

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

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