stonewall.js開発日記1

唐突ですが何かしら継続して勉強していけるものを作ろうと思ったので、高さの違う要素を敷き詰めて並べてくれるJavaScriptのライブラリを作ろうと思います。そういうことができるものは既に世の中にあるのだけど、開発手法や設計の勉強が主目的。名前はstonewall.jsとしました。 テスト駆動で作ろうと思うので、まずQUnitをダウンロード。使い方は使いながら覚える。 ディレクトリ構成はこんな感じ。example以下に実際に表示されるサンプル用のhtmlを置く。test以下のindex.htmlは、ブラウザで開くとQUnitのテスト結果を表示する。テストコードはtests以下に追加していく。

stonewall/
├── example
│   └── index.html
├── src
│   └── stonewall.js
└── test
    ├── index.html
    ├── lib
    │   └── qunit
    │       ├── qunit.css
    │       └── qunit.js
    └── tests

プロジェクトをgitのバージョン管理下に置く。QUnitは管理から外したいので.gitignoreを書いておく。 .gitignore

test/lib/

初期化。

git init

カレントディレクトリ以下をadd。

git add .

コミット。

git commit -m "Initial commit"

基本的にmasterはmergeするだけにしてbranchを切りまくるのがおすすめと聞いたので、そうします。

git branch temp
git checkout temp

これでtempブランチで作業を進めていける。 今日はここまで。

Paper.jsをソースからビルド

ScriptographerをCanvasで動かすフレームワークであるPaper.js。
通常であればDownloadからzipファイルをダウンロードして読み込めばそのまま使えるんだけど、githubにソースからビルドする方法が載っていたのでやってみた。

githubからPaper.jsをclone

git clone --recursive git://github.com/paperjs/paper.js.git

buildフォルダに移動して、

./build.sh

でdistフォルダにpaper.jsができるんだけど、これだとzipファイルのものと同じなので、compressedしたい。

NodeJSのUgrifyJSを使う

npmでUglifyJSをインストール。カレントディレクトリはbuildのまま、作業を続ける。

npm install -g uglify-js

nvmを使っているので、-gを付けてグローバルインストールすると、currentで使用しているバージョンのlibフォルダの中のnode_modulesというフォルダにインストールされる。
paper.jsプロジェクトのフォルダと同じ階層にuflifyjsという名前でシンボリックリンクを作成。
(githubに載っているサンプルはシンボリックリンクの引数が逆で、一つ目にソースを指定)

ln -s ~/.node/v0.4.9/lib/node_modules/uglify-js ../../uglifyjs

作成されているか確認

ls -l ../../
lrwxrwxr-x   1 hayashiyosuke  staff   60 Sep 24 03:15 uglifyjs -> /Users/hayashiyosuke/.node/v0.4.9/lib/node_modules/uglify-js

できてる。

comressedオプションでビルド

./build_sh compressed

確認

ls -l ../dist 
-rw-rw-r--  1 hayashiyosuke  staff  144000 Sep 24 03:22 paper.js

70KBほど軽くなってる。
開いてみると、余分なスペースが取り除かれ、変数名や関数名が短くなってる。

今後JavaScriptはかつてのCになると言われているけど、こんな感じでビルドして使うものになってるんだな。

JavaScriptでSine Waveを鳴らす

連休中に色々と調べものしてて、dsp.jsというライブラリを見つけたので使ってみた。Chrome14でしか動作確認してない。Git覚えたくてgithubに上げたけど、これくらいならgistでよかったと思った。
SoundCheck

Audioletも面白そう。
最近node.jsも触ってみてるので、audiolib.jsも入れてみた。

node.jsはHomebrewからとかソースをビルドとか試してみたけど、nvm使って複数のバージョンを入れて動かすのが良さそう。