火曜日, 12月 13, 2011

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ブランチで作業を進めていける。 今日はここまで。

土曜日, 9月 24, 2011

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になると言われているけど、こんな感じでビルドして使うものになってるんだな。

水曜日, 9月 21, 2011

JavaScriptでSine Waveを鳴らす

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

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

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

木曜日, 4月 21, 2011

Cygwinの使い方

Windows 7
Cygwin 1.7.9-1
http://cygwin.com/

setup.exeを実行してInstall from Internetをチェックし本体とパッケージをインストール。入れそびれたパッケージがあった場合もsetup.exeを実行してDownload Without InstallをチェックしてLocal Package Directoryにダウンロードした後、再度setup.exeを実行しInstall from Local Directoryでインストールすることができる。
(4/25追記)
上みたいなことしなくても、Install from Internetでよかった。インストール済みのファイルはKeepになっている。

.bashrcが作られていない場合、ホームに自分で作っても起動時に読み込まれなかった。パッケージのインストール具合で変わるみたい。何か色々入れたら自動的に.bashrcと.bash_profileが出来てて、
↑これなんだったんだろう…再現しない。

Cygwin.bat起動時に.bashrc, .bash_profileなどが作られた旨が表示されるので、.bashrcを開いて
# User dependent .bashrc

とか書かれてたのでその下にPATHを設定した。
Cygwinを起動し直して、
echo $PATH

で追加したPATHがちゃんと読み込まれているか確認できる。

/etc/bash.bashrcは読み込まれてたので(中にecho書いて試した)、最悪ここに書いとけばいいのかもと思ったけど、
# Modifying /etc/bash.bashrc directly will prevent
# setup from updating it

というコメントが気になったのでアンインストールしてsetup.exeをやり直したりした。
アンインストールは基本的にRoot Directoryを消すだけでいいみたい。ゴミは残ってしまうけど。

早く慣れたい。

月曜日, 2月 28, 2011

□□□『CD』

□□□の新しいアルバム『CD』のグラフィックを作ったり、
MV作ったり、

Web作ったり、
CDの読み方
ライブの演出を手伝ったりしました。
どれも全体のアートディレクションは伊藤ガビンさん、グラフィックデザインはいすたえこさんです。
ボストークという会社で制作してました。

本当はそれぞれのタイミングで書くのが良かったのだけど、途切れることなく山場が続いたので全く告知できず。
色々まとめようかと思ってたけどインタビューが掲載されたのでそっち読んでもらった方がいいかも知れない。Webもいくつかの雑誌に載るらしいです。
初回版もうすぐなくなりそうとのことで、売り上げに貢献できたっぽくて嬉しいです。

テクニカルな部分に関してはProcessingをめちゃくちゃ使っていて、PDFの書き出しがとても役立った。ジャケットやTシャツ、ポスターなどサイズが変わったりしても扱いやすい。gupon君にデータを渡すために連番のPDFを書き出したり、PDFだと何故かAfterEffectsが落ちるからXpdfてのでEPSに変換したり、細かい部分で色々勉強になりました。
歌詞の文字の重複をなくしたり、濃度順に並び替える部分はpython使ったり。

MVの最後の方の文字が右上に上がって行くところは元々Evan Rothが作ったjay-zのプログラムっぽいことをやろうとしてProcessingに移植して作った。文字と文字がぶつからないようにとか色々改良してある。ソース読む限り元ネタはおそらくGoran Levinのこれ

で、僭越ながらアルバムの内容紹介です。
1. はじまり
デモの段階からすごく変わった曲。音の響きが気持ちいい。後半の盛り上がりは感動的。大好き。作業中はずっと「ひび きあい(日々気合・響き合い)」を繰り返してた。歌詞カードがもうすぐWebで見られますが、このビジュアルから始めて曲作ったそうです。右チャンネルと左チャンネルからそれぞれ音が鳴って、右は「右」の母音(いい)、左は「左」の母音(いあい)になってる。というのを感じさせないで普通に聴けてしまうのは良いのか悪いのか。

2. 1234 feat.内田慈
4人の登場人物がそれぞれ別々の拍子で歌う。映画のカット割を意識してるらしいけど本当にそんな感じで映像が浮かぶ。内田慈さんの声がいい。「フォルダから携帯のデータ ワン」のとことかね。これはWebで歌詞カード見れます
内田さんにはライブ2日目での怪演に衝撃を受けた。『スカイツリー』の写メとか、『Tokyo』でのキュートさとか。ロリコンが直るレベル。

3. ヒップホップの経年変化
せいこうさんの『ヒップホップの初期衝動』の続き。音はよりハードで、リリックにも励まされる。これのMVもガビンさん監督で、gupon君と牧鉄平さんがアニメーションと編集をしました。ucnvさんに作ってもらったグリッチ版、『「ヒップホップの経年変化」の経年変化 by ucnv』もかっこいい。熟女好きになるレベル。

4. 恋はリズムに乗って feat.大木美佐子
元メンバーの大木さんがボーカル。爽やかでキャッチー。最初に皆これ好きになるでしょ。

5. スカイツリー
吾妻橋ダンスクロッシングで発表した作品。僕、観てたのですが寝てました。。年末にしのださん一人でのパフォーマンスも観ていて、その時はまだ何かの可能性は感じたけど完成ではないなぁという印象だった。別々に進行してる人や物事がある瞬間に交差して、よく分からないけど生まれるいい時間。『Tokyo』に続く東京シリーズで、ただ東京で生活してる感じがしてすごくいい。交通手段も通信手段も発達した今、これくらいの温度感だと思う。岡崎京子さんの漫画みたいな?僕も東京に対して思い入れはあるけど、いわゆる故郷を離れてどうとか、冷たい街とかのステレオタイプなイメージとは全然違う。ライブ2日目では細金監督の超絶映像と内田さんの怪演で確実にこの日のハイライトだった。

6. あたらしいたましい feat.金田朋美
4つ打ちのエレクトロっぽい音色で、最初聴いた時はすごく戸惑ったけど今ではとても好きな曲。男女2つのフレーズが組み替えられて曲ができあがっていく。MVではしつこいくらいにそこを強調した。マスタリング終わったら時間長くなってて焦った。

7. ちょwwwおまwwww
僕は割と綺麗にまとまる方向が好きなんですけど、こういう曲を入れてくるところに余裕を感じる。慣れるとちょっとはまる。ライブ1日目で披露したファンキーなバージョンがとてもかっこいい。全然違う曲。そして1日目終わった後にあっさり2日目用に長いのを作ってきてくれた。リハーサルで初めて聴いて、終わってからプログラム書き直し。本当に「ちょwwwおまwwww」て言いながらやってた感じ。

8. ヵゝヵゞゐ。feat.RUMI
かっこいい。知らずに聴いたら□□□だと気付かないのではないだろうか。「キター」のところからのグルーヴ感が好き。ライブ1日目のせいこうさん版もよかった。

9. iuai feat.まつゆう*
村田シゲさんが作った曲。夜に聴きたくなる。サビの部分が全て同じ母音で、歌詞も英語みたいな日本語で音として面白い。正確な日本語としては意味が分からないけど、感覚として分かる。

10. lʌ'v mi
僕は□□□のインストが好きで、『Kuchiroro Posse』とか最高だと思ってる。何て言うかかわいい。この曲はさらにキラキラした歌心がある。

デモは上がってくる度に良くなるし、ライブではさらにアレンジを変えてくるし、毎回驚かされて、刺激の多い案件でした。それに加えていすさんやいしい君のグラフィックだったりgupon君の映像だったり、細金君の映像が加わって来て、水尻さんとかucnvさんとか谷口君も巻き込んで、自分も奮起させられたし、結果面白いものになったのではないかと思います。締め切り直前の追い上げ感は卒展とかの盛り上がりに近い。プロがそれじゃ駄目なのかも知れないけど。音楽だけでなく映像やグラフィックも含めてこういう過剰さを持ったアーティストって僕が10代だった頃はフリッパーズギターとかフィッシュマンズとか電気グルーヴだったりしたと思うんだけど(oasisとか聴いてたのでリアルタイムでは通過してない)、今の□□□はそういう存在だと思う。