クライアントサイドJSで 兵めるファイル燕幣
?Download as ODP, PDF?
1 like?2,116 views
クライアントサイドの干温厩温皆界姻庄沿岳を聞ったファイル燕幣
![ファイルiみzみコ`ド箭
function handleFiles(file) {
var fileReader = new FileReader();
var file = file[0];
//iみzみ撹孔rのイベント
fileReader.onload = (function(event) {
//ここにiみzみ撹孔rのI尖をく
})();
fileReader.readAsArrayBuffer(file); //バイナリ
//Shift_JISのテキスト
fileReader.readAsText(file, 'shift-jis');
}](https://image.slidesharecdn.com/20140613mod-141020092227-conversion-gate01/85/JS-7-320.jpg)
クライアントサイドJSで 兵めるファイル燕幣
- 1. クライアントサイドJSで 兵めるファイル燕幣 Tom Konda
- 2. 徭失B初 ¢ Twitter : @tom_k_en ¢ プログラミングにvして C PHPよりJavaScriptが挫き ¢ 恷除の箸龍 C OpenStreetMap(OSM)のマッピング┰のバス揃 、ポスト etc. C OSM ID:tom_konda C OSMのマッパ`寄勅鹿嶄
- 3. JavaScript聞喘のファイル燕幣箭 ¢ PDF.js PDFをHTML5で燕幣 Firefox複 ¢ Shumway (SWFをHTML5で燕幣) ¢ MMD.js (MikuMikuDanceをWebGLで燕幣) ¢ MIDI.js (MidiをSoundfontの咄弼を児にoggに Qし、audio勣殆を聞喘して壅伏) JavaScriptとファイル盾裂によってブラウザ貧 でデ`タ燕幣させることがごく匯何で瓩
- 4. ファイルデ`タ燕幣の送れ 1.ファイルをフォ`ムからiみzむ 2.ファイルの坪否を盾裂する 3.盾裂潤惚を燕幣する
- 5. ファイルiみzみフォ`ム ¢ File APIの聞喘 C 恷除のデスクトップブラウザIE9茅くなら聞喘 辛嬬 C HTML箸 <input type=￣file￣> でフォ`ム恬撹 ¢ バイナリとテキストでiみ函りv方を笋┐ C バイナリreadAsArrayBuffer メソッド C テキストreadAsText メソッド
- 6. ファイルiみzみコ`ド箭 // イベントリスナの鞠h var fileForm = document.getElementById('fileForm'); fileForm.addEventListener('change', inputFiles, false); function inputFiles(e){ handleFiles(e.target.files); }
- 7. ファイルiみzみコ`ド箭 function handleFiles(file) { var fileReader = new FileReader(); var file = file[0]; //iみzみ撹孔rのイベント fileReader.onload = (function(event) { //ここにiみzみ撹孔rのI尖をく })(); fileReader.readAsArrayBuffer(file); //バイナリ //Shift_JISのテキスト fileReader.readAsText(file, 'shift-jis'); }
- 8. ファイルデ`タの盾裂 WebWorkerの試喘 C 恷除のデスクトップブラウザIE9茅くなら聞喘 辛嬬 C 盾裂のスレッドを仟たに羨てるので、ペ`ジ燕幣の rgに唹を嚥えにくい
- 9. 愔瓦箸留否^ ¢ 愔瓦JS ¢ 恷除のJS ファイル盾裂+ デ`タ燕幣 ファイル盾裂を eスレッドで佩う シングルスレッドのた め、盾裂I尖蛍ペ`ジ 燕幣がWい 盾裂はeスレッドのた め、盾裂がペ`ジ燕幣 に唹しにくい
- 10. WebWorkerの廣吭泣 ¢ DOMなどJavaScript碧が聞えない C JSONならJavaScriptで盾裂?紗垢辛嬬 C もしXMLを盾裂するなら徭薦パ`スが駅勣 ¢ Same Origin Policyの崙sを鞭ける
- 11. ファイル盾裂のコ`ド箭 fileReader.onload = (function() { return function(e) { //Worker伏撹 var worker = new Worker('盾裂JSのパス'); worker.postMessage(e.target.result); }; })();
- 12. ファイル盾裂のコ`ド箭 //メッセ`ジを鞭佚 self.onmessage = function(event){ // バイナリなら TypedArray でiみzむ // var buffer = new Uint8Array(event.data); var fileData = event.data; //デ`タ盾裂 var result = analytics(fileData); self.postMessage(result); self.close(); };
- 13. 盾裂Y惚の燕幣 ¢ WebWorkerで佩った盾裂をブラウザで燕幣 C WebWorker から postMessageメソッドを聞い ブラウザ箸惱睥Y惚をす C 燕幣のHは、ファイルデ`タに隠贋された秤鵑鮖 に啜弔CSSを伏撹すると措いかも C Web Storageでデ`タを隠贋できるなら、デ`タ ｼアプリケ`ションとしての喘余もあり C Download奉來鬋屮薀Ε僑Firefox、Chromeな ら隠贋ファイル兆をJSでQ協できる
- 14. 盾裂Y惚の燕幣コ`ド箭 fileReader.onload = (function() { return function(e) { //Worker伏撹 var worker = new Worker('盾裂JSのパス'); worker.onmessage = function(event){ // ブラウザ貧で燕幣するI尖をく }; worker.postMessage(e.target.result); }; })();
- 15. 嘛デモ ¢ デモ1 C テキストデ`タの燕幣 ¢ デモ2 C バイナリデ`タの燕幣
- 16. まとめ ¢ クライアントサイドJSを聞ったファイル燕幣の 圭隈を幣した C ┯櫃気┐△譴丕蒙協OSのソフトのデ`タが ウェブ貧で燕幣辛嬬になる C いままで、梨れ肇られていたデ`タがウェブ貧で晩 の朕をるかもしれない