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

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

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

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

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

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

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

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');

}

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

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

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

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

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

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

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

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

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