Your SlideShare is downloading. ×
0
Web Workersを
          使おう
   2010/01/23
   mollifier
   http://d.hatena.ne.jp/mollifier/
   Web Workers とは
   Web Workers の使い方
   活用できる場面
   Web Workers とは
   Web Workers の使い方
   活用できる場面
Web Workersは、
新しいJavaScript
の機能
例えば、
JavaScriptで
足し算したい場合
素朴な書き方
function setText(elem, text) {
  if (! elem.firstChild) {
    elem.appendChild(document.createTextNode(""));
  }
  elem.fi...
計算してる間
ブラウザが反応し
ない
Web Workersを
使うと解決する
というわけでデモ
Web Workersを
使うとバックグラ
ウンドで処理を実
行できる
   Web Workers とは
   Web Workers の使
    い方
   活用できる場面
Web Workers の
コードってどうい
う風に書くの?
簡単な例として、
入力した数字まで
の合計を計算して
みる
まずは HTML ファ
イル
<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <script type="application/javascript"
src="main.js"></script>
</...
普通です。
特に変わったとこ
ろは無し。
つぎに、
JavaScript
ファイル
main.js
worker.js

二つファイルを
作った
main.js              worker.js

  ブラウザ本体側               バックグラウンド処理


             計算してくれ !


                             ...
main.js の中身
(function() {
  function init() {

      function run() {
        var num = parseInt(document.getElementById("num").value,...
// バックグラウンドで計算を行う
// ワーカを作成する。
// 引数として JavaScript ファイルの
// URL を指定する。
var worker =
  new Worker("worker.js");

// この時点ではま...
// バックグラウンドで計算を開始する
// (num には数字が入っている)
worker.postMessage(num);
// 計算結果をワーカーから受けとる
worker.onmessage =
   function(event) {
     // event.data に
     // 計算結果が入っている
     // ここで結果を表示する
};
worker.js の中身
これがバックグラウ
ンドで行われる処理
// バックグラウンド処理を登録する
onmessage = function(event) {
  // main.js の
  // worker.postMessage(num);
  // が呼び出されたとき、
  // ワーカー側では...
onmessage = function(event) {
   // event.data に main.js 側で
  // 指定した数字が入っている
  var num = event.data;
   var result = 0;
 ...
main.js                      worker.js

new Worker()       (1) worker が作られる


                (2) postMessage


          ...
   Web Workers とは
   Web Workers の使い方
   活用できる場面
じゃあ、これって
いつ使うの?
現状では
別にいらない。
無くても大丈夫。
それでも、どん
な場面で役に立
つか考えてみた
1. 画像の処理を
する場合
JavaScript で
動的に画像を作
成する
たぶん重たい処
理になる
その間もブラウ
ザ本体の操作が
できる
2. ローカルの
データを扱う場合
例えば
Web Storage
Web Database
クライアント側で
データベースを扱
う場合
データベースのア
クセスを
Web Workers で
読み書きしている
間もブラウザ本体
の操作ができる
3. 巨大な数値、
文字列を扱う場合
例えば
データ圧縮
暗号化
もしやるとなった
ら、かなり重たい
処理になる
その間も普通のブ
ラウザ操作ができ
るように
というわけで、現
状では活用例が無
いけど
Web Workers の
登場で、
JavaScript 側に
重たい処理をまか
せられる可能性が
出てきた
ひょっとしたら
流行るかもしれ
ません
というわけで、
新しい可能性の紹
介でした
ありがとう
ございました
Try Webworkers
Upcoming SlideShare
Loading in...5
×

Try Webworkers

2,388

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,388
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Try Webworkers"

  1. 1. Web Workersを 使おう  2010/01/23  mollifier  http://d.hatena.ne.jp/mollifier/
  2. 2.  Web Workers とは  Web Workers の使い方  活用できる場面
  3. 3.  Web Workers とは  Web Workers の使い方  活用できる場面
  4. 4. Web Workersは、 新しいJavaScript の機能
  5. 5. 例えば、 JavaScriptで 足し算したい場合
  6. 6. 素朴な書き方
  7. 7. function setText(elem, text) { if (! elem.firstChild) { elem.appendChild(document.createTextNode("")); } elem.firstChild.data = text; } function run() { var num = parseInt(document.getElementById("num").value, 10); var result = 0; for (var i = 0; i <= num; i++) { result += i; } // 計算完了 var retElem = document.getElementById("result"); setText(retElem, result.toString()); }
  8. 8. 計算してる間 ブラウザが反応し ない
  9. 9. Web Workersを 使うと解決する
  10. 10. というわけでデモ
  11. 11. Web Workersを 使うとバックグラ ウンドで処理を実 行できる
  12. 12.  Web Workers とは  Web Workers の使 い方  活用できる場面
  13. 13. Web Workers の コードってどうい う風に書くの?
  14. 14. 簡単な例として、 入力した数字まで の合計を計算して みる
  15. 15. まずは HTML ファ イル
  16. 16. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="application/javascript" src="main.js"></script> </head> <body> <h1>計算したい</h1> <p> 1 から <input type="text" id="num" value="10"> までの合計 </p> <button id="run">計算!</button> <p id="result"></p> <p><a href="../index.html">index</a></p> </body> </html>
  17. 17. 普通です。 特に変わったとこ ろは無し。
  18. 18. つぎに、 JavaScript ファイル
  19. 19. main.js worker.js 二つファイルを 作った
  20. 20. main.js worker.js ブラウザ本体側 バックグラウンド処理 計算してくれ ! 計算する 計算したよ ! 表示する
  21. 21. main.js の中身
  22. 22. (function() { function init() { function run() { var num = parseInt(document.getElementById("num").value, 10); // 計算を行うワーカを生成 var worker = new Worker("worker.js"); // ワーカから結果を受け取る worker.onmessage = function(event) { var retElem = document.getElementById("result"); if (! retElem.firstChild) { retElem.appendChild(document.createTextNode("")); } retElem.firstChild.data = event.data; }; // ワーカーに計算させる worker.postMessage(num); } document.getElementById("run"). addEventListener('click', run, false); } window.addEventListener('load', init, false); })();
  23. 23. // バックグラウンドで計算を行う // ワーカを作成する。 // 引数として JavaScript ファイルの // URL を指定する。 var worker = new Worker("worker.js"); // この時点ではまだ計算を開始しない。
  24. 24. // バックグラウンドで計算を開始する // (num には数字が入っている) worker.postMessage(num);
  25. 25. // 計算結果をワーカーから受けとる worker.onmessage = function(event) { // event.data に // 計算結果が入っている // ここで結果を表示する };
  26. 26. worker.js の中身
  27. 27. これがバックグラウ ンドで行われる処理
  28. 28. // バックグラウンド処理を登録する onmessage = function(event) { // main.js の // worker.postMessage(num); // が呼び出されたとき、 // ワーカー側では // この関数が実行される // ... 次のページに続く };
  29. 29. onmessage = function(event) { // event.data に main.js 側で // 指定した数字が入っている var num = event.data; var result = 0; for (var i = 0;i <= num; i++) { result += i; } // 結果を main.js 側に通知する postMessage(result); };
  30. 30. main.js worker.js new Worker() (1) worker が作られる (2) postMessage (3) onmessage (4) postMessage (5) onmessage
  31. 31.  Web Workers とは  Web Workers の使い方  活用できる場面
  32. 32. じゃあ、これって いつ使うの?
  33. 33. 現状では 別にいらない。 無くても大丈夫。
  34. 34. それでも、どん な場面で役に立 つか考えてみた
  35. 35. 1. 画像の処理を する場合
  36. 36. JavaScript で 動的に画像を作 成する
  37. 37. たぶん重たい処 理になる
  38. 38. その間もブラウ ザ本体の操作が できる
  39. 39. 2. ローカルの データを扱う場合
  40. 40. 例えば Web Storage Web Database
  41. 41. クライアント側で データベースを扱 う場合
  42. 42. データベースのア クセスを Web Workers で
  43. 43. 読み書きしている 間もブラウザ本体 の操作ができる
  44. 44. 3. 巨大な数値、 文字列を扱う場合
  45. 45. 例えば データ圧縮 暗号化
  46. 46. もしやるとなった ら、かなり重たい 処理になる
  47. 47. その間も普通のブ ラウザ操作ができ るように
  48. 48. というわけで、現 状では活用例が無 いけど
  49. 49. Web Workers の 登場で、 JavaScript 側に 重たい処理をまか せられる可能性が 出てきた
  50. 50. ひょっとしたら 流行るかもしれ ません
  51. 51. というわけで、 新しい可能性の紹 介でした
  52. 52. ありがとう ございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×