クライアントサイドJSで 始めるファイル表示

749 Views

November 14, 14

スライド概要

profile-image

Web developer, OpenStreetMap mapper. This Account tweets only Tech or OSM, sometimes something like geography except for reply or fav.

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

クライアントサイドJSで 始めるファイル表示 Tom Konda

2.

自己紹介 ● Twitter : @tom_k_en ● プログラミングに関して – PHPよりJavaScriptが好き ● 最近の趣味 – OpenStreetMap(OSM)のマッピング(近場のバ ス路線、ポスト etc.) – OSM ID:tom_konda – OSMのマッパー大募集中

3.

JavaScript使用のファイル表示例 ● PDF.js (PDFをHTML5で表示 Firefox標準) ● Shumway (SWFをHTML5で表示) ● MMD.js (MikuMikuDanceをWebGLで表示) MIDI.js (MidiをSoundfontの音色を基にoggに変換し 、audio要素を使用して再生) ● JavaScriptとファイル解析によってブラウザ上 でデータ表示させることがごく一部で熱い

4.

ファイルデータ表示の流れ 1.ファイルをフォームから読み込む 2.ファイルの内容を解析する 3.解析結果を表示する

5.

ファイル読み込みフォーム ● File APIの使用 – 最近のデスクトップブラウザ(IE9除く)なら 使用可能 – HTML側は <input type=”file”> でフォーム作成 ● バイナリとテキストで読み取り関数を変える – バイナリ:readAsArrayBuffer メソッド – テキスト:readAsText メソッド

6.

ファイル読み込みコード例 // イベントリスナの登録 var fileForm = document.getElementById('fileForm'); fileForm.addEventListener('change', inputFiles, false); function inputFiles(e){ handleFiles(e.target.files); }

7.
[beta]
functionファイル読み込みコード例
handleFiles(file) {
var fileReader = new FileReader();
var file = file[0];
//読み込み成功時のイベント
fileReader.onload = (function(event) {

//ここに読み込み成功時の処理を書く
})();
fileReader.readAsArrayBuffer(file); //バイナリ
//Shift_JISのテキスト
fileReader.readAsText(file, 'shift-jis');

}

8.

ファイルデータの解析 WebWorkerの活用 – 最近のデスクトップブラウザ(IE9除く)なら 使用可能 – 解析のスレッドを新たに立てるので、ページ 表示の時間に影響を与えにくい

9.

従来との比較 ● 従来のJS ファイル解析+ データ表示 ● 最近のJS ファイル解析を 別スレッドで行う シングルスレッドのため、解析処理分ページ表示が遅 解析は別スレッドのため、

10.

WebWorkerの注意点 ● DOMなどJavaScript拡張仕様が使えない – JSONならJavaScriptで解析・加工可能 – もしXMLを解析するなら自力パースが必要 ● Same Origin Policyの制約を受ける

11.

ファイル解析のコード例 fileReader.onload = (function() { return function(e) { //Worker生成 var worker = new Worker('解析側JSのパス'); worker.postMessage(e.target.result); }; })();

12.

ファイル解析のコード例 //メッセージを受信 self.onmessage = function(event){ // バイナリなら TypedArray で読み込む // var buffer = new Uint8Array(event.data); var fileData = event.data; //データ解析 var result = analytics(fileData); self.postMessage(result); self.close(); };

13.

解析結果の表示 ● WebWorkerで行った解析をブラウザで表示 – WebWorker から postMessageメソッドを使い ブラウザ側へ解析結果を戻す – 表示の際は、ファイルデータに保存された情 報を基に動的にCSSを生成すると良いかも – Web Storageでデータを保存できるなら、デー タ 編集アプリケーションとしての用途もあり – Download属性対応ブラウザ(Firefox、Chrome )なら保存ファイル名をJSで決定できる

14.

fileReader.onload = (function() { 解析結果の表示コード例 return function(e) { //Worker生成 var worker = new Worker('解析側JSのパス'); worker.onmessage = function(event){ // ブラウザ上で表示する処理を書く }; worker.postMessage(e.target.result); }; })();

15.

動作デモ ● デモ1 ●デモ2 – テキストデータの表 – バイナリデータの表 示 示

16.

まとめ クライアントJSを使ったファイル表示の方法を示 した ● – (根気さえあれば)特定OSのソフトのデータ がウェブ上で表示可能になる – いままで、忘れ去られていたデータがウェブ 上で日の目を見るかもしれない