Born Neet

clipがおもしろそうだったので遊んでみました。
恥ずかしながらこの機能、今日まで知りませんでした。
※ 昨年末、HTML5やCanvasを結構触ってたのに・・・

というわけで、MDCのサンプルを改造してできたのが以下の2つ。

A canvas clip example(with rotate&uupaa)
星が回転します。ちょっとプラネタリウムっぽい？

A canvas clip example(with uupaa(mouse event))
マウスの動きに合わせてクリッピング領域が移動します。
また、左クリックで拡大、右クリックで縮小できます。
望遠鏡をイメージしました。

どちらもuupaa-jsを使ってるので、IEでも動くはずです。（とてつもなく重いですが。）

さて、今までcanvasものはjQuery+uuCanvasで実装してきましたが、
昨年末に待望の0.7が登場したので、今回からすべてuupaa.jsでやることにしました。

uupaaはクロスブラウザでHTML5やCSS3等々が使えちゃう素晴らしいライブラリですが、
ドキュメントはあまりないので、以下に手順を書いておきます。

興味ある方はどうぞ。

uupaa.jsを入手しよう（build）

2分でわかる uupaa.js の ビルド方法 :: handsOut.jpの通りですが、
とりあえずフルセットを試したいって人は以下の手順だけやればOK。
（僕の作ったサンプルで読み込んでるものをダウンロードするのもありですが。）

Windows

JREをインストール。
（無料 Java ソフトウェアをダウンロード - Sun Microsystems）

xamppをインストール。
（apache friends - xampp for windows）

コンパネ→システム→詳細設定→環境変数から、
PATHに「c:\xampp\php」を追加する。

minifier.zipを展開して、中身をuupaa.jsのbuildディレクトリに入れる。

コマンドプロンプトでbuildディレクトリに移動して、「b」を実行。

これでuupaa.jsのディレクトリに「uupaa.js（縮小化なし）」が、
buildディレクトリに「mini.full.y.js（縮小版）」ができます。

普段は
<script type="text/javascript" src="mini.full.y.js"></script>
としておいて、何かあったら、
<script type="text/javascript" src="uupaa.js"></script>
に切り替えてデバッグするのが良いと思います。（かなりでかいので）

Mac(snow leopard)

Macには初めからJavaもPHPも入ってるので、
uupaa.js/buildにcdして、 「php -f b.php」するだけでOKです。

uupaa.jsを使ってみよう

今回使った機能をjQueryと対比しながら列挙してみる。
※ ソース見てないので間違ってるかもしれません。
参考：uupaa.js 0.7 チートシート(Core) :: handsOut.jp

window.onload周り

// jQueryでは…
$(function() { ... });

// uupaaでは…
window.xboot = function() { ... };  // DOMContentLoaded
window.xwin = function() { ... };  // window.onload
window.xcanvas = function() { ... };  // canvas使ってる時はこれ。

event周り

// jQueryでは…
$('#id').click(function(e) { ... }); // set
$('#id').click(); // fire

// uupaaでは…
uu('#id').click(function(e) { ... }); // set
	/* チートシートでは以下の書き方になってるけどダメっぽい */
	uu('#id').bind('click', function(e) { ... });
uu.ev.fire(uu('#id').nth(), 'click'); // fire
	/* これはダメ */
	uu('#id').click();
uu.ev.stop(e); // イベントキャンセル

その他

offset(), width(), height()相当のメソッドは見つけられませんでした。
属性はattr()で取れます。
get(0)に相当するのは、nth()っぽいです。
※ uu.id()を使えばノードが返ってくるので、そっちを使うべきだと思います。
　uu[.query]()が返すのはuu.jamです。（uupaaオブジェクトでwrapされたもの）

Canvasの使い方

Canvas機能を組み込んだuupaa.jsをロードするだけです。
（上記のbuild手順でやればフル機能が入ってます。）
uuCanvasの時に書いていたXAMLは不要になりました。
canvas 周りの I/F を変更しました。 - latest log

ただ、pの下にcanvasを置くとIEでエラーになるので注意です。（excanvasもそうみたい）
preとかul,dlとかは大丈夫だった気がします。
・・・とりあえず、divに入れてお茶を濁しておきましょう。
※ ホントはdiv直下にインライン要素を置くのもダメですけどね。

あと、uupaaとは直接関係ないですが、
canvas（というか要素内）でマウス座標を取る際の気をつけるところ。

要素の左上を原点とした座標は、
IEではoffsetX,Y、それ以外はlayerX,Yで取得します。
（uupaaのソースもそうなっていたはずです。）

このlayerXが曲者で、positionが未設定の場合pageXと同じ値を返します。
layerXとoffsetXは違う - Griever

というわけで、cssで「position: relative;」するか、
uu('#id').css('position', 'relative')しときましょう。

まとめ

以上です。
皆さんも国産ライブラリuupaa.jsを使ってみて下さい。

・・・久しぶりにブログ書いたら、文章ひどいですね。