<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
// ここにコードを書く
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
paper.jsを読み込み、canvasアトリビュートで描画先となるCanvas要素のidを指定し、typeをpaperscriptとしたscriptタグ内にコードを書く。
このコードはPaperScriptと呼ばれている。PaperScriptではなく通常のJavaScriptで書く方法もあるが、ひとまずはこの方法で進めていく。
$('#container').masonry({
itemSelector: '.box'
});
という感じで、グリッド表示したい要素に対して、Optionを設定したオブジェクトをmasonryメソッドで渡している。
columnWidthを指定しない場合は最初の要素の幅が適用される。
目標としてはひとまず、
test("calculate number of columns", function() {
var containerWidth = 960
, columnWidth = 300
, columnLength;
columnLength = getColumns(containerWidth, columnWidth);
equals(columnLength, 3);
});
Died on test #1: getColumns is not defined - {}
というメッセージが出てテストが失敗する。
stonewall.jsにはまだ何も書いておらず、getColumns関数も無いのでこれは当然。
落ちるテストを書くことで、テスト自体が間違っていないことを確かめる。
いったんコミット。
var getColumns = function(containerWidth, columnWidth) {
return 3;
};
となる。テストを実行すると無事通る。
コミットする。
return Math.floor(containerWidth/columnWidth);
として、テストを実行し通ることを確認してコミット。
この「レッド、グリーン、リファクタリング」の繰り返しで、開発を進める。
例えばcolumnWidthが0だったら…とか文字列が渡されたら…というテストケースを追加し、
それらをパスするようにして品質を高めていく。
原則として「テストコードを書いている時はテスト対象のコードを変えない。テスト対象のコードを書いている時はテストコードを変えない」。
テスト書いておくと助かるのは後で設計を変えた時とかにどこを直せばよいかがわかりやすいところですね。とにかく赤になって落ちているところを直してグリーンにしていけばよい。
kkosugeさんのサイトがすごく面白かったので、node.jsがちょっと追っていない間にバージョンが上がりまくってたのと、WebSocketに対する興味からこんなの作ってみた。
サーバから4秒おきにGIFアニメのURLがimg要素のsrcにセットされるというだけ。なんだけど同期が取られているので複数タブや複数ウィンドウでも同じ画像が表示されるはず。
やってみて思ったのは、多分GIFアニメじゃなくても同期のタイミングさえ合っていればそれなりに楽しめそうということと、特定のコネクションから操作を受け付けるようにすればVJ的に画面の制御もできそうということ。