水曜日, 2月 22, 2012

Paper.js study 0 Setup

Paper.jsの勉強を始める。まずはセットアップ。
<!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で書く方法もあるが、ひとまずはこの方法で進めていく。

木曜日, 2月 09, 2012

stonewall.js開発日記2

まず、どういう風に使いたいかというのを考えたのだけど、jQuery Masonryを参考にしてみる。
$('#container').masonry({
    itemSelector: '.box'
});
という感じで、グリッド表示したい要素に対して、Optionを設定したオブジェクトをmasonryメソッドで渡している。 columnWidthを指定しない場合は最初の要素の幅が適用される。 目標としてはひとまず、
  • jQueryへの依存をなくす
  • アニメーションなどのコードをなくしてレイアウトに焦点を当てる
  • jQuery Masonryでできないことをする
といったところ。 まずContainerとなる要素の幅をColumnの幅で割るgetColumnsという関数を書いてみる。 コンテナの幅が960で、コラムの幅が300だとしたら、3が返ってくればよい。 testsディレクトリ以下にstonewall_test.jsというファイルを作成。
test("calculate number of columns", function() {
    var containerWidth = 960
        , columnWidth = 300
        , columnLength;
        columnLength = getColumns(containerWidth, columnWidth);
        equals(columnLength, 3);
});

レッド

これでtest以下のindex.htmlにstonewall.jsとstonewall_test.jsを追加しブラウザで開くとテストが実行されるはず。 結果は
    Died on test #1: getColumns is not defined - {}
というメッセージが出てテストが失敗する。 stonewall.jsにはまだ何も書いておらず、getColumns関数も無いのでこれは当然。 落ちるテストを書くことで、テスト自体が間違っていないことを確かめる。 いったんコミット。

グリーン

次にstonewall.jsの方にテストが通るように実装を書く。 3が返ってくる最も簡単な実装は、
var getColumns = function(containerWidth, columnWidth) {
    return 3;
};
となる。テストを実行すると無事通る。 コミットする。

リファクタリング

さすがにどんな値を渡しても常に3が返るようでは使い物にならないので、
     return Math.floor(containerWidth/columnWidth);
として、テストを実行し通ることを確認してコミット。 この「レッド、グリーン、リファクタリング」の繰り返しで、開発を進める。 例えばcolumnWidthが0だったら…とか文字列が渡されたら…というテストケースを追加し、 それらをパスするようにして品質を高めていく。 原則として「テストコードを書いている時はテスト対象のコードを変えない。テスト対象のコードを書いている時はテストコードを変えない」。 テスト書いておくと助かるのは後で設計を変えた時とかにどこを直せばよいかがわかりやすいところですね。とにかく赤になって落ちているところを直してグリーンにしていけばよい。

木曜日, 2月 02, 2012

GIF STREAM

kkosugeさんのサイトがすごく面白かったので、node.jsがちょっと追っていない間にバージョンが上がりまくってたのと、WebSocketに対する興味からこんなの作ってみた。

GIF STREAM

サーバから4秒おきにGIFアニメのURLがimg要素のsrcにセットされるというだけ。なんだけど同期が取られているので複数タブや複数ウィンドウでも同じ画像が表示されるはず。

やってみて思ったのは、多分GIFアニメじゃなくても同期のタイミングさえ合っていればそれなりに楽しめそうということと、特定のコネクションから操作を受け付けるようにすればVJ的に画面の制御もできそうということ。