Web Worker ã使ã£ã¦ web ãã¼ã¸å ã®ç»åã zip ãã¦ãã¦ã³ãã¼ããã
ã¯ãã¹ãã¡ã¤ã³å¶ç´ããªãç¶æ³ã§ãWeb ãã¼ã¸å ã«è¡¨ç¤ºããã¦ããç»åãä¸æ¬ã§ zip ãã¦ãã¦ã³ãã¼ããããã¿ãããªæ¬²æ±ããã¾ããããç§ã«ã¯ããã¾ããã
ããããããã¨ã« jsZip ã¨ããã©ã¤ãã©ãªããããããã使ãã° JavaScript 㧠zip ãã¡ã¤ã«ãä½æãããã¨ãã§ãã¾ããæé ã¨ãã¦ã¯ä»¥ä¸ã®ãããªæãã§ãããã
- ãã¦ã³ãã¼ããããç»åã® url ä¸è¦§ãä½ã
- ç»åããã¹ã¦ãã¦ã³ãã¼ã
- å®äºãããç»åãã¼ã¿ã jsZip 㧠zip ãã
- zip ãããã®ã blob ã«ãã¦ããã¦ã³ãã¼ãç¨ã®ãªã³ã¯ãä½ã
ãåç¥ã®ããã«ãã©ã¦ã¶ã® JavaScript ã¯ã·ã³ã°ã«ã¹ã¬ããã§åä½ãã¦ãããJavaScript ã§æéã®ãããå¦çãè¡ãã¨ã¦ã¼ã¶ã¼ã®æä½ããããã¯ããã¾ããjsZip ã«ãã zip å¦çããã¡ã¤ã«æ°ãå°ãªããã¡ã¯ããã®ã§ããããã¡ã¤ã«æ°ãå¢ãã¦ããã¨çµæ§æéãããã£ã¦ãã¾ãããã§ãããã®éãªã®ã§ç»åããã¦ã³ãã¼ãããå¦çãããã㦠WebWorker ã«ãã£ã¦ããããã¨ã«ãã¾ãããã以ä¸ã§ã¯ 2, 3 ã®æé ã«ã¤ãã¦èª¿ã¹ãï¼æ¸ãããã¨ãç´¹ä»ãã¾ãã
Web Workers
ã¦ã§ãã¯ã¼ã«ã¼ã®åºæ¬ ã«ã¦ã§ãã¯ã¼ã«ã¼ã®åºæ¬ãæ¸ãã¦ããã¾ãã大ã¾ãã«è¨ãã¨ããã JavaScript ãã¡ã¤ã«ãæå®ã㦠new Worker("worker.js")
ãã¦ãããã¨ãã®ã¹ã¯ãªãããå¥ã¹ã¬ããã§å®è¡ããããã¡ã¤ã³ã¹ã¬ããã¨ã®ããåã㯠postMessage
ã¡ã½ãã㨠message
ã¤ãã³ãã使ããå¥ã¹ã¬ããã®å¦çãçµãã£ãã worker.terminate()
ãå¼ãã§ã¯ã¼ã«ã¼ãçµäºãããã¨ãã£ãæãã§ãã
ç»åããã¦ã³ãã¼ããã
ããã§æ³¨æãããã®ã¯ãã¯ã¼ã«ã¼ã¹ã¬ãããã㯠window ãªãã¸ã§ã¯ããDOMãªã©ã«ã¢ã¯ã»ã¹ãããã¨ãåºæ¥ãªãã¨ãããã¨ã§ãã
ã¯ã¼ã«ã¼ã§æ¬¡ã®æ©è½ã«ã¯ã¢ã¯ã»ã¹ã§ãã¾ãã:
- DOMï¼éã¹ã¬ããã»ã¼ãï¼
- window ãªãã¸ã§ã¯ã
- document ãªãã¸ã§ã¯ã
- parent ãªãã¸ã§ã¯ã
ã³ã³ã½ã¼ã«ã§ã¡ããã¡ããã¨ç¢ºèªããã ãã§ãããã©ããã Image ã¯ã©ã¹ããªãããã§ãã以ä¸ã®ãæ軽ç»åãã¦ã³ãã¼ããç¦ãããã¦ãã¾ãã¾ããã
var img = new Image(); img.src = url; img.onload = ...
éæ¹ã«æ®ãã¦ããã®ã§ãã XMLHttpRequest ã¯ä½¿ããã¨ãããã¨ã§ãxhr ã§ç»åãåå¾ã§ããã ããã¨èª¿ã¹ã¦ã¿ã¾ãããGoogle å çã«ãã¤ããèããã¨ããç§ã«ã´ã£ããã®è¨äºãæãã¦ããã¾ããã
xhr.responseType
ã«å¸æã®åãæå®ããã°ããããã§ãã
var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.responseType = "arraybuffer"; xhr.onload = function (event) { var arrayBuffer = xhr.response; ... }
ããã§ç»åã arrayBuffer ã blob ã§åå¾ãããã¨ãã§ãã¾ããããã§ããã§ããã
ãã¦ã³ãã¼ãå®äºãã¾ã£ã¦ zip ãã
ã¦ã§ãã¯ã¼ã«ã¼ä¸ã§åãã XMLHttpRequest ããã¯ãéåæå¦çãè¡ããã¨ãã§ãã¾ããã¯ã¼ã«ã¼èªä½ãéåæãªã®ã§ãããã«ãã®ä¸ã§éåæã«ããã®ããã¨ããæ°æã¡ãããã¾ããç»åããããããã¦ã³ãã¼ãããã«ã¯ãã¯ãéåæã«ããã»ããããã§ããããåé¡ã¯ãã¹ã¦ã®ç»åããã¦ã³ãã¼ããããã®ãå¾ ã£ã¦å¦çãè¡ããªããã°ãªããªãã¨ãããã¨ã§ãã
æ®æ®µãã jQuery ã«çãã£ã±ãªããªã®ã§ããã $.when(deferreds)
ã¨ããããã¨ããã§ããã¯ã¼ã«ã¼å
ã§ä»ã®ã¹ã¯ãªãããèªã¿è¾¼ãã«ã¯ importScripts("script1.js", "script2.js")
ãªã©ã®ããã«ãã¾ããscript1.js ã®ä¸ã§ã°ãã¼ãã«ã«ã»ãããããå¤ãã¯ã¼ã«ã¼å
ã§ä½¿ããã¨ãåºæ¥ãããã«ãªãã¾ãããã jQuery ãèªã¿è¾¼ããã¨ã¨ãã¾ããã
importScripts("jquery.js") // -> Uncaught ReferenceError: window is not defined
ãªã㨠jQuery ã¯èªã¿è¾¼ã¿æç¹ã§ window ãªãã¸ã§ã¯ããªã©ã«ã¢ã¯ã»ã¹ããã®ã§ãworker ããã¯ä½¿ããªãããã§ããæ®å¿µã§ããä»å㯠deferred ã§ããã°ããã®ã§ããããã jQuery ã¯å¤§ãããããããããã¾ãããPromise ã使ã£ã¦ã¿ã¾ããä»åº¦ã¯ global is not defined
ã¨è¨ããã¦ãã¾ãã¾ãããããã¯ã°ãã¼ãã«ã«Promiseãã»ãããããã¨ãã¦ããã ãã ã£ãã®ã§ä»¥ä¸ã®ã³ã¼ãã§åé¿ãããã¨ãã§ãã¾ããã
var global = self; importScripts("/public/js/promise-3.2.0.js");
ã¡ã¤ã³ã¹ã¬ããã¨éä¿¡ãã
ã¡ã¤ã³ã¹ã¬ããããã¯çæããã¯ã¼ã«ã¼ãªãã¸ã§ã¯ãã® postMessage
ã¡ã½ããã使ãã¾ããã¯ã¼ã«ã¼ã¹ã¬ããã«ã¯ãã°ãã¼ãã«ã« postMessage
ãããã®ã§ããã使ãã¾ãã
ã ããããããªæãã«ãªãã¾ããã
- main.js
var worker = new Worker("path/to/worker.js"); worker.postMessage({urls:urls}); worker.addEventListener('message', function(event) { var command = event.data.command; if (command === 'download') { var filename = event.data.filename; console.log((++i) + ':' + filename); } if (command === 'complete') { var blob = event.data.blob; var $a = $('a.download'); $a.attr('href', window.URL.createObjectURL(blob)); $a.attr('download', "hoge.zip"); worker.terminate(); } });
- worker.js
var global = self; importScripts("/path/to/jszip.js"); importScripts("/path/to/promise-3.2.0.js"); var zip = new JSZip(); self.addEventListener('message', function (event) { var urls = event.data.urls; var promises = urls.map(function (url) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.responseType = "arraybuffer"; xhr.onload = function (event) { var arrayBuffer = xhr.response; var filename = url.replace(/^(.*)\//, ''); zip.file(filename, arrayBuffer, { binary: true }); postMessage({ command: 'download', filename: filename }); resolve(true); }; xhr.onerror = function (event) { resolve(false); }; xhr.send(); }); }); Promise.all(promises).then(function () { postMessage({ command: 'complete', blob: zip.generate({ type: "blob" }) }); }); });
ã¡ã¤ã³ã¹ã¬ããããè½ã¨ãã¦ã»ãã url ã®é
åã渡ãã¾ããã¯ã¼ã«ã¼ã¯ self.addEventListener('message', ...)
ã§ã¡ãã»ã¼ã¸ãåãåã£ã¦å¦çãè¡ãã¾ããã¡ã¤ã³ã¹ã¬ããã«é²æãä¼ããããã«ç»åã®ãã¦ã³ãã¼ããçµãããã³ã«éç¥ããããã«ãã¦ã¿ã¾ãããã¡ã¤ã³ã¹ã¬ããããã¯ãã¹ã¦ message
ã¤ãã³ãã¨ãã¦éç¥ãããã®ã§ãé²æå ±åãªã®ãå®äºå ±åãªã®ããããããã« command ããããã£ãå«ã¾ãã¦ã¿ã¾ããã
ãã¨ãã¨ããã¯ã°ã©ã¦ã³ãã§åãæ¡å¼µã¨ããã¯ãã¹ãã¡ã¤ã³ã§ããªãæ®éã®webãµã¤ãã§ã¯ã»ã¨ãã©å½¹ã«ç«ããªã話ã§ãããChromeã¢ããªãªããã ã¨ä½¿ããããããªããã¨æãã¾ãã
ã©ããã¦ãã¡ã¢ãªãé£ãããã§ããããã¾ã大éã« zip ãããã¨ããã¨ãã¼ã¸ãè½ã¡ãããããã¾ããã