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

Transcript

• 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. ファイル読み込みコード例 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のソフトのデータが ウェブ上で表示可能になる – いままで、忘れ去られていたデータがウェブ上で日 の目を見るかもしれない