以下の例の DOM 要素に対して、jQuery の DOM 操作メソッドを使って処理を行い、その挙動の違いについて調べてみた。

<div id="box" class="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

append, appendTo, prepend, prependTo について

append

append

指定した要素の最後に、引数で指定した内容を追加する。

$('#box').append('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
    <div><em>サンプルテキスト5（追加）</em></div>
</div>

appendTo

appendTo

指定した内容を、引数で指定した要素の最後に追加する。

$('<div><em>サンプルテキスト5（追加）</em></div>').appendTo('#box');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
    <div><em>サンプルテキスト5（追加）</em></div>
</div>

prepend

prepend

指定した要素の最初に、引数で指定した内容を追加する。

$('#box').prepend('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div><em>サンプルテキスト5（追加）</em></div>
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

prependTo

prependTo

指定した内容を、引数で指定した要素の最初に追加する。

$('<div><em>サンプルテキスト5（追加）</em></div>').prependTo('#box');

実行結果

<div id="box">
    <div><em>サンプルテキスト5（追加）</em></div>
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

after, insertAfter, before, insertBefore について

after

after

指定した要素の後ろに、引数で指定した内容を追加する。

$('#box').after('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>
<div><em>サンプルテキスト5（追加）</em></div>

insertAfter

insertAfter

指定した内容を、引数で指定した要素の後ろに追加する。

$('<div><em>サンプルテキスト5（追加）</em></div>').insertAfter('#box');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>
<div><em>サンプルテキスト5（追加）</em></div>

before

before

指定した要素の前に、引数で指定した内容を追加する。

$('#box').before('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div><em>サンプルテキスト5（追加）</em></div>
<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

insertBefore

insertBefore

指定した内容を、引数で指定した要素の前に追加する。

$('<div><em>サンプルテキスト5（追加）</em></div>').insertBefore('#box');

実行結果

<div><em>サンプルテキスト5（追加）</em></div>
<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

wrap, wrapAll, wrapInner について

wrap

wrap

指定した要素を、引数に指定した内容で囲む。
指定した要素が複数の場合は各要素が個別に囲まれる。

$('#box div').wrap('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト1</div></em></div>
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト2</div></em></div>
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト3</div></em></div>
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト4</div></em></div>
</div>

wrapAll

wrapAll

指定した要素を、引数に指定した内容で囲む。
指定した要素が複数の場合は各要素をひとまとめにして囲まれる。

$('#box div').wrapAll('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div>
        <em>サンプルテキスト5（追加）
            <div>サンプルテキスト1</div>
            <div>サンプルテキスト2</div>
            <div>サンプルテキスト3</div>
            <div>サンプルテキスト4</div>
        </em>
    </div>
</div>

wrapInner

wrapInner

指定した要素の子要素を、引数で指定した内容で囲む。
指定した要素が複数の場合は各要素が個別に囲まれる。

$('#box div').wrapInner('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト1</em></div></div>
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト2</em></div></div>
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト3</em></div></div>
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト4</em></div></div>
</div>

デモページ

jQuery, DOM の操作メソッドの挙動の違いについて デモ

jQueryクックブック

posted with amazlet at 10.08.29

jQuery Community Experts
オライリージャパン
売り上げランキング: 1476

Amazon.co.jp で詳細を見る

<p>mouse over <span class="note">me!</span><span class="tooltip0">hello, world!</span></p>

上記の HTML でクラス属性が note の要素に、プラグインで slideupTooltip() を実行させると、隣接する要素（上記の HTML ではクラス属性が tooltip0 の span 要素）がスライドアップ効果とともに現われる。

JavaScript 部分のコードは以下のような感じ。

$(function() {
    $('.note').slideupTooltip({
        opacity : 0.8,
        speed : 'fast',
        top : 35,
        left: -30,
        className : 'tooltip'
    });
});

JavaScript が無効の環境の場合は、HTML で指定したクラス名にスタイルを指定して表示させ、JavaScript が有効な環境には className パラメータで渡すクラス名にスタイルを設定してスタイルの上書きをすると、JavaScript 無効時でもツールチップの内容を確認できる。

設定項目

以下の各項目を設定することがきる。

設定をおこなわなかった場合は default 値が設定される。

デモ

デモページ：jQuery plugin slideupTooltip

デモ動画

ダウンロード

プラグインのダウンロードは次のリンクから。
jquery.slideuptooltip.js

Ajaxライブラリリファレンス

posted with amazlet at 10.05.25

古籏 一浩
ビー・エヌ・エヌ新社
売り上げランキング: 211995

Amazon.co.jp で詳細を見る

Encode Mail Address

javascript:(function(){var a=prompt('input your mail address','');if(a.length!==0){for(var b='',c=0,d=a.length;c<d;c++)b+=a[c]==='@'?'&#'+'64;':parseInt(Math.random()*2,10)/2===0?'&#'+a.charCodeAt(c)+';':a[c];prompt('encoded mail address',b)}})();

参考：ActionScript入門Wiki@rsakane – 塗りつぶしアルゴリズム(スキャンライン – シードフィル編)
　　　ペイント・ルーチン (1)シード・フィル アルゴリズム

単純に言えば、水平方向に塗り潰し可能な範囲を探して塗り潰してゆき、それを塗り潰し可能な範囲が無くなるまで上下方向に繰り返していくといったもの。

JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰しデモ

塗り潰し処理のコード

var fillColor = function(startX, startY, imgData, penColor, canvas) {
    var cWidth = canvas.width;
    var cHeight = canvas.height;
    var toImageDataPixelPos = function(x, y) { return ((cWidth * y) + x) * 4; };
    var startPixelPos = toImageDataPixelPos(startX, startY);
    var baseColor = { red : imgData.data[startPixelPos], green : imgData.data[startPixelPos+1], blue : imgData.data[startPixelPos+2], alpha : 1 };

    var setImageDataPixelPos = function(pp, imgD) {
        imgD.data[pp] = penColor.red;
        imgD.data[pp+1] = penColor.green;
        imgD.data[pp+2] = penColor.blue;
        imgD.data[pp+3] = 255 * penColor.alpha;
        return imgD;
    };

    var isMatchColor = function(x, y, imgD, cl) {
        var pp = toImageDataPixelPos(x, y);
        if ((imgD.data[pp] === cl.red) &&
            (imgD.data[pp+1] === cl.green) &&
            (imgD.data[pp+2] === cl.blue)) {
            return true;
        } else {
            return false;
        }
    };

    var paintHorizontal = function(leftX, rightX, y, imgD) {
        for (var x = leftX; x <= rightX; x++) {
            var pp = toImageDataPixelPos(x, y);
            imgD = setImageDataPixelPos(pp, imgD);
        }
        return imgD;
    };

    var scanLine = function(leftX, rightX, y, imgD, buffer) {
        while (leftX <= rightX) {
            for (; leftX <= rightX; leftX++) {
                if (isMatchColor(leftX, y, imgD, baseColor)) {
                    break;
                }
            }
            if (rightX < leftX) {
                break;
            }
            for (; leftX <= rightX; leftX++) {
                if (!isMatchColor(leftX, y, imgD, baseColor)) {
                    break;
                }
            }
            buffer.push({ x : leftX - 1, y : y});
        }
    };

    var paint = function(x, y, imgD) {
        if (isMatchColor(x, y, imgD, penColor)) {
            return imgD;
        }
        var buffer = [];
        buffer.push({ x : x, y : y });
        while (buffer.length > 0) {
            var point = buffer.pop();
            var leftX = point.x;
            var rightX = point.x;
            /* skip already painted */
            if (isMatchColor(point.x, point.y, imgD, penColor)) {
                continue;
            }
            /* search left point */
            for (; 0 < leftX; leftX--) {
                if (!isMatchColor(leftX - 1, point.y, imgD, baseColor)) {
                    break;
                }
            }
            /* search right point */
            for (; rightX < cWidth - 1; rightX++) {
                if (!isMatchColor(rightX + 1, point.y, imgD, baseColor)) {
                    break;
                }
            }
            /* paint from leftX to rightX */
            imgD = paintHorizontal(leftX, rightX, point.y, imgD);
            /* search next lines */
            if (point.y + 1 < cHeight) {
                scanLine(leftX, rightX, point.y + 1, imgD, buffer);
            }
            if (point.y - 1 >= 0) {
                scanLine(leftX, rightX, point.y - 1, imgD, buffer);
            }
        }
        return imgD;
    };

    return paint(startX, startY, imgData);
};

スクリプトファイル

scanlineseedfill.js

apply と call の使い方を今一度復習しておく。

Function.apply

function.apply(obj, args)

• function を obj のメソッドとして呼び出す。
• 引数として配列 args を渡すことができる。
• function のボディ内では obj に this でアクセスできる。

/* オブジェクトにメソッドを適用させる */
console.log(Array.prototype.reverse.apply([1, 2, 3])); /* [ 3, 2, 1 ] */
console.log(String.prototype.split.apply('1,2,3', [','])); /* [ "1", "2", "3" ] */

var toQuestion = function(str) {
    return str + '?';
};
console.log(toQuestion.apply(null, ['who'])); /* who? */

Function.call

function.call(obj, args...)

• function を obj のメソッドとして呼び出す。
• 引数として可変長個の args を渡すことができる。
• function のボディ内では obj に this でアクセスできる。

/* オブジェクトにメソッドを適用させる */
console.log(Array.prototype.reverse.call([1, 2, 3])); /* [ 3, 2, 1 ] */
console.log(String.prototype.split.call('1,2,3', ',')); /* [ "1", "2", "3" ] */

var toQuestion = function(str) {
    return str + '?';
};
console.log(toQuestion.call(null, 'who')); /* who? */

apply/call で継承

var Dog = function() {
    this.name = 'taro';
};

Dog.prototype = {
    yelp : function() {
        console.log('yap-yap');
    }
};

var Shepherd = function() {
    this.name = 'jiro';
};

Shepherd.prototype = new Dog();

(function() {
    /* this は Shepherd.prototype なのでここは、
     * Shepherd.prototype.bark = function() {
     * と同じ。 */
    this.bark = function() {
        console.log('bow-bow');
    };
}).apply(Shepherd.prototype);

var shepherd = new Shepherd();
console.log(shepherd.name); /* jiro */
shepherd.yelp(); /* yap-yap */
shepherd.bark(); /* bow-bow */

参考：JavaScriptで継承やるときにprototype書きまくるのめんどい人は – あ、いしかわですね
　　　apply/call での継承の話 – nothing but trouble
　　　404 Blog Not Found:javascript – 万能継承関数

こちらのサイト『りす穴さくら: lislis Paintの技術的説明まとめ』によると Google Chrome では putImageData によって色が微妙に変化するので、透明な Canvas を新しく作って描画し、 drawImage で元の Canvas に書き出すという方法で対処できるらしい。

そこで、各ブラウザによってどの程度劣化するのかを putImageData と drawImage を使ってテストしてみた。
テストしたブラウザとそのバージョンは以下のとおり。

• Windows Google Chrome 5.0.342.9 beta
• Windows Firefox 3.0.19
• Windows Opera 10.51
• Mac Firefox 3.6.3
• Mac Google Chrome 5.0.375.17 dev
• Mac Safari 4.0.5
• Mac Opera 10.10

JavaScript, Canvas で putImageData による劣化のテスト

以下は putImageData と drawImage での書き戻しの処理部分のコード
drawImage では点（ドット）の描画の方法がわからなかったので短い線を描いている。

/* putImageData */
/* 現時点でのイメージを保存する。 */
var bufImageData = ctxPutImage.getImageData(0, 0, WIDTH, HEIGHT);
/* 保存したイメージにランダムに黒のドットを描く。 */
bufImageData = randomPaint(bufImageData);
/* ドットを書き足したイメージをキャンバスに書き戻す。
 * この際に Google Chrome などで画質の劣化が発生する。*/
ctxPutImage.putImageData(bufImageData, 0, 0);

/* drawImage */
/* 一時描画用のキャンバスを作る。 */
var bufCanvas = document.createElement('CANVAS');
var bufCtx = bufCanvas.getContext('2d');
/* キャンバスの縦横サイズを指定する。
 * 未指定の場合はデフォルトのキャンバスサイズが適用されてしまう。*/
bufCanvas.width = WIDTH;
bufCanvas.height = HEIGHT;

/* 一時描画用のキャンバスにランダムに黒のドットを描く。 */
bufCtx = randomPaint2(bufCtx);
/* 表示用のキャンバスに一時描画用のキャンバスを重ねる形で書き足す。 */
ctxDrawImage.drawImage(bufCanvas, 0, 0);

結果は Windows 版の Google Chrome 5.0.342.9 beta のみ大幅に色の劣化が発生した。
Windows Firefox 3.0.19 と Mac Opera 10.10 では shadowBlur が効いていないため若干表示色が違う。

参考：Canvasリファレンス – HTML5.JP

length

格納されているデータの数(unsinged long)を返す、読込専用属性。

key(index)

インデックス(unsinged long)を引数として、対応する格納データ文字列を取得する。
格納されているキーとデータのペアの数以上のインデックス値を渡すと null を返す。

getItem(key)

キー文字列を引数として、対応する格納データ文字列を取得する。
キーが存在しない場合 null を返す。
プロパティアクセスでも処理可能。

var val = localStorage.key;

setItem(key, data)

キー文字列と格納するデータ文字列を引数として、データを保存する。
プロパティアクセスでも処理可能。

localStorage.key = data;

removeItem(key)

キー文字列を引数として、対応する格納データ文字列を削除する。
対応するキーがない場合は何もしない。

clear()

全てのキーとその対応データを削除する。
データがない場合は何もしない。

ブラウザで Storage データを削除

Firefox では "Tools" → "Clear Recent History…" の Cookie の削除で "Time range to clear" の "Everything" を選択して実行すると削除できる。

Google Chrome では、"オプション" → "高度な設定" → "プライバシー" → "閲覧履歴データの消去…" から "Cookie と他のサイトのデータを削除する" にチェックを入れて実行すると削除できる。

参考：DOM Storage – MDC
　　　Web Storage

filter

配列を、引数として渡された関数でフィルタリングして、結果が真(true)となる要素からなる配列を作る。

filter に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列内の偶数要素からなる配列を作る例。

var ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var retAry = ary.filter(function(x) { return x % 2 === 0 });

参考：filter – MDC

map

配列の各要素に、引数として渡された関数を適用した配列を作る。

map に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列の各要素を2倍にした配列を作る例。

var ary = [0, 1, 2, 3, 4, 5];
var retAry = ary.map(function(x) { return x * 2 });

参考：map – MDC

reduce

配列の要素を2つずつ左から順に、引数として渡された関数を適用してゆき結果を得る。

reduce の第2引数には初期値を指定できる。
初期値が与えられなかった場合は、配列の最初の要素が初期値になり、2番目の要素が現在の要素の値となる。

reduce に渡される関数は4つの引数をとる。
function(tmp, val, index, array)

tmp

初期値または直前の関数実行結果の値

val

現在の要素の値

index

現在のインデックス

array

繰り返しが行われる配列

配列の各要素を1.5倍したものを全て足し合せた合計値を算出する例。

var ary = [1, 2, 3];
/* retVal1
 * 初期値を与えていないため、
 * 初期値は配列の最初の要素の値 1 となリ
 * 現在の要素の値は配列の 2 番目の要素の値 2 となる。
 *  val          tmp     next-tmp
 * (2   * 1.5) +  1       => 4
 * (3   * 1.5) +  4       => 8.5 (result)
 */
var retVal1 = ary.reduce(function(tmp, val) {
    return (val * 1.5) + tmp;
});
/* retVal2
 * 初期値を 0 としたため、
 * 現在の要素の値は配列の最初の要素の値 1 となる
 *  val          tmp     next-tmp
 * (1   * 1.5) +  0       => 1.5
 * (2   * 1.5) +  1.5     => 4.5
 * (3   * 1.5) +  4.5     => 9 (result)
 */
var retVal2 = ary.reduce(function(tmp, val) {
    return (val * 1.5) + tmp;
}, 0);

参考：reduce – MDC

reduceRight

配列の要素を2つずつ右から順に、引数として渡された関数を適用してゆき結果を得る。
reduce の右から処理をする版。

reduceRight の第2引数には初期値を指定できる。
初期値が与えられなかった場合は、配列の最後の要素が初期値になり、最後から2番目の要素が現在の要素の値となる。

reduceRight に渡される関数は4つの引数をとる。
function(tmp, val, index, array)

tmp

初期値または直前の関数実行結果の値

val

現在の要素の値

index

現在のインデックス

array

繰り返しが行われる配列

配列の各要素を全て1.5倍したものを足し合せた合計値を算出する例。

var ary = [1, 2, 3];
/* retVal1
 * 初期値を与えていないため、
 * 初期値は配列の最後の要素の値 3 となリ
 * 現在の要素の値は配列の最後から2番目の要素の値 2 となる。
 *  val          tmp     next-tmp
 * (2   * 1.5) +  3       => 6
 * (1   * 1.5) +  6       => 7.5 (result)
 */
var retVal1 = ary.reduceRight(function(tmp, val) {
    return (val * 1.5) + tmp;
});
/* retVal2
 * 初期値を 0 としたため、
 * 現在の要素の値は配列の最後の要素の値 3 となる
 *  val          tmp     next-tmp
 * (3   * 1.5) +  0       => 4.5
 * (2   * 1.5) +  4.5     => 7.5
 * (1   * 1.5) +  7.5     => 9 (result)
 */
var retVal2 = ary.reduceRight(function(tmp, val) {
    return (val * 1.5) + tmp;
}, 0);

参考：reduceRight – MDC

every

配列内の全ての要素が、引数として渡された関数によって真の結果を得ることができるかを調べる。
配列が空の場合は真を返す。

every に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列内の全ての要素が偶数であるかを調べる例。

var isEven = function(val) {
    return val % 2 === 0;
};
var ary1 = [1, 2, 3];
var ret1 = ary1.every(isEven);
var ary2 = [2, 4, 6];
var ret2 = ary2.every(isEven);
var ary3 = [];
var ret3 = ary3.every(isEven);

参考：every – MDC

some

配列内に、引数として渡された関数によって真の結果を得ることができる要素が1つでも存在するかを調べる。

some に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列内に奇数の要素が存在するかを調べる例。

var isOdd = function(val) {
    return val % 2 === 1;
};
var ary1 = [2, 5, 6];
var ret1 = ary1.some(isOdd);
var ary2 = [2, 4, 6];
var ret2 = ary2.some(isOdd);
var ary3 = [];
var ret3 = ary3.some(isOdd);

参考：some – MDC

forEach

引数として渡された関数を配列の各要素に適用していく。

forEach に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列の各要素を () で囲んだ文字列として連結していく例。

var ary = [1, 2, 3];
var retStr = '';
ary.forEach(function(x) { retStr += '(' + x + ')'; });

参考：forEach – MDC

参考：Array – MDC
　　　New in JavaScript 1.6 – MDC

ループ処理の中でイベントを割り当てる場合に、ループカウンタが回り切ったものが適用されてしまう問題の解決方法。

デモ

JavaScript コード

/* クロージャを使わない場合（カウンタが回り切った値 3 が表示される） */
for (var i = 0; i < 3; i++) {
    $('#action1-'+i).click(function() {
        $('#msg1').text('Action' + i);
    });
}
/* クロージャを使った場合 */
for (var i = 0; i < 3; i++) {
    var func = (function (index) {
        return function() {
            $('#msg2').text('Action' + index);
        };
    })(i);
    $('#action2-'+i).click(func);
}

HTML コード

<ul id="action-list1">
    <li><a href="#" id="action1-0">Action0</a></li>
    <li><a href="#" id="action1-1">Action1</a></li>
    <li><a href="#" id="action1-2">Action2</a></li>
</ul>

<pre id="msg1">message</pre>

<ul id="action-list2">
    <li><a href="#" id="action2-0">Action0</a></li>
    <li><a href="#" id="action2-1">Action1</a></li>
    <li><a href="#" id="action2-2">Action2</a></li>
</ul>

<pre id="msg2">message</pre>

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

posted with amazlet at 10.04.15

Douglas Crockford
オライリージャパン
売り上げランキング: 1783

Amazon.co.jp で詳細を見る

processing.init.js をロードすることで type が application/processing の <script> タグの中に記述されたコードが Processing で実行できるようになる。

以下のコードのデモ

<script src="./processing.init.js" type="text/javascript"></script>
<script src="./processing.min.js" type="text/javascript"></script>

<script type="application/processing">
Circle circles = new Circle[50];

void setup() {
    size(500, 500);
    frameRate(15);
    for (int i = 0; i< circles.length; i++) {
        circles[i] = new Circle();
    }
}

void draw() {
    background(255);
    for (int i = 0; i<circles.length; i++) {
        circles[i].update();
    }
}

class Circle {
    float radius, x, y, r, g, b, a, ra;
    int count;

    Circle() {
        init();
    }

    void init() {
        radius = 0.0;
        x = random(width);
        y = random(height);
        r = random(50, 255);
        g = random(255);
        b = random(255);
        a = random(50, 200);
        ra = random(10);
        count = parseInt(random(9));
    }

    void update() {
        if (count > 5) {
            init();
        }
        radius = radius + sin(frameCount/10) * ra;
        noStroke();
        fill(r, g, b, a);
        ellipse(x, y, radius, radius);
        if (radius <= 0.001) {
            count++;
        }
    }
}
</script>

<canvas width="500" height="500" style="border:1px solid #000;"></canvas>

参考：ブラウザでお絵描きプログラミング！ Processing.js 登場！ – IT戦記
　　　Reference – Processing.js