Canvas Archive

今日のセミナー中にできるかも・・・と思いついたので作ってみました。
意外と簡単に、1時間程度でできました。

canvasで画像拡大鏡

マウスカーソルのある部分を拡大して表示できます。
ただ、単純に引き伸ばしているだけなので、荒くなっちゃいます。

一応倍率も変えられますよ。

bookmarkletとかにしたらおもしろいかもですね。

あ、tnantoka's Canvas Showcaseと2重更新するのが既に面倒だ。
どうしよう？？

そろそろ本格的にhtml5やcanvasが流行り始めるかもしれない、
そんな予感というか妄想をして、今まで作ったcanvasプログラムを集めてみた。

ちょっとしたポートフォリオですね。

tnantoka's Canvas Showcase

2年前から触ってるのに、進歩してない・・・orz
むしろ小ネタに走ってる傾向にあることがわかりました。

これからも思いつきを大事にしていきたいです。

※ 実は結構アーリーアダプターだったんだぜ？

「canvas初心者」という条件に該当しないと思われることをわかっていながら、
行ってきました。
（googleの食堂以外の場所に入ってみたかっただけ、というわけではないですよ^^）

簡単にまとめると、こういうことをしようというセミナーでした。





嘘です、もっとためになる話がたくさんありました。
内容については、公開されてる資料とかをご参照下さい。
※ ハッシュタグ#html5jとかから辿れば見つかると思います。

で、今日の話を聞いてて気づいたのは、結構前からcanvasを触ってきたけど、
初心者とあんまり変わんないなーということ。
つまり、canvasを使うのに知識なんていらなくて、
アイディアと気合とリファレンスさえあれば、なんだってできるんですよね。
（と、珍しくポジティブシンキンしてみる）

ただ、非プログラマ層（デザイナーさんとかエンドユーザ）に広めるのって難しそう、
と今更ながらに思ったりもした。
確かにjsプログラマな僕達にとっては画期的なんだけれど、
デザイナーさんにとってはASでやれば良いのでわざわざ覚える必要もないし、
ユーザにとってはFlashだろうとcanvasだろうと動けばいいんですもんねー。
※ これはHTML5の他の仕様にも言えて、cometだろうとwebsocketだろうと
　　動けば（例えば、ホワイトボードを共有できれば）なんだって良い。

とかごちゃごちゃ考えずに、「こんな便利なことできるぜ！」ってサービスを作って、
「これどうやってんの？」「HTML5だよ！」「すげー！！」って広めていけば良いんでしょうね。
そして、最終的には「標準仕様だから、全部のブラウザで動くんだぜ！！！」って胸をはって言いたい。
（Google Waveもそういう方針？）

ということで、皆さん頑張りましょう。
僕も微力ながら、今後もhtml5な作品を公開していきたいと思います。


・・・あ、あと、属性値の引用符の省略ってどこまで推奨してよいものやら、
と思うのは僕だけでしょうか？
htmlってやっぱプログラムで（ユーザ入力データを使って）生成されることが多いから、
引用符で囲んでおいた方が安全なんじゃないかと思ってしまうんですよねー。

まぁそもそも仕様的にスペースやタグ、引用符が入る場合は、省略×なわけだから、
ちゃんとエスケープしなさいってことなんだろうけど。


とまぁいろいろ考えさせられて良い刺激になりました。
やっぱりセミナー・勉強会っていいですね。

最後になりましたが、セミナーを主催していただいた、白石さんや羽田野さんにお礼を申し上げます。
ありがとうございましたm(_ _)m

とわりと強く思いました。
そしてなんだかちょっとワクワクしました。

というのも、今日はちょっと前に話題になった、
Flash+JSなエロいサービス（※）をCanvasに移植しようと遊んでいたのです。
※ リンク先にダメな画像があったりするわけではありません。（画像編集ツールです）
　ただ、用途がそっち向けになるので嫌悪感を抱く方は本エントリを無視して下さい。
　ごめんなさいm(_ _)m

できたのがこれです↓

錯覚エディター by HTML5 Canvas

結局元ネタのような自動ロジックの実装は断念して、
ただのエディタと化しましたが、
思っていたよりかなり簡単にできました。

ちゃんとしたペイントソフトを作るのはもちろん大変だし、Flashの方が向いている気がしますが、
こういうちょっとした用途にはCanvasが最適かもしれません。
※ Firefox以外のブラウザが右クリックで保存に対応してくれないとダメですが。

エロを題材に何を偉そうにって感じですが、
テクノロジーの普及にとって大きな原動力になると昔聞いた気がします。
※ インターネットとかパソコン、DVD、ゲーム機だって…

というわけで、引き続きHTML5を応援していきたいと思います。
※ Canvas、FIleAPIの次は…やっぱWebSocketか？難しそうだなぁ。

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を使ってみて下さい。

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