WebKitCSSMatrix でくるくる bookmarklet

webkit なブラウザ (Safari4, Google Chrome2など)で以下のブックマークレットをはてブトップや twitter で実行してマウスをおもむろに動かすと…。

javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://gist.github.com/raw/156276/f7ef79b8da5514f44b84cf00367a92185747244d/gistfile1.js";s.onload=function(){_anim("div > * > * > * > *")};document.body.appendChild(s)})();

最近 Page Not Found - Apple Developer を読んで webkit (CSS3) のアニメーションを見直し中。アニメーションが始まったり終わったりループしたりでイベントも投げられるようになったので、やりたいことは割とできるようになった感じ。

なんでいまさら webkit + css3 なんだよ、という話もあるかもしれないけど、これを覚えておくと iPhone / android のブラウザでエフェクトやアニメーションをお手軽にかけれる。どちらもアプリケーションを作るとき view に webkit を利用でき、プリミティブな操作は Objective-C や Java で webkit とのブリッジ書けば、JS のメソッドから呼び出しができデータを送信、取得できる。んで、レンダリングには使い慣れた HTML/CSS/DOM で行えるので、パフォーマンスを要求するアプリ以外は、結構これで十分なんじゃないかなー、と思えてきてる。iPhone の実装事情は良く知らないので、android 寄りの話だけどね。