HTML5+Canvasタグによるアニメーションユーティリティ「gury」
guryはjQueryを使ったCanvasタグ用JavaScriptユーティリティ。HTML5向け。
guryはjQuery/HTML5/JavaScriptによるオープンソース・ソフトウェア。HTML5の登場以来、期待が高まっているのがCanvasタグを使った図形描画だ。これまでは画像やFlashでしか作れなかったような描画がJavaScriptのみで、さらにインタラクティブに動かせるものが作成できる。
ゲームのデモ
とは言え実際にどのようなことができるのかは実体験を通してからしか学べない。こんなことまでできるのか、という衝撃を覚えれば自分でも作ろうと思うだろう。そんなCanvasタグの操作を身近にしてくれるのがguryだ。
guryはjQueryを使ったCanvas用ユーティリティライブラリだ。多数のデモが登録されている。例えばボールが飛び交うもの、色が変わるモザイク、同じ色の隣り合ったブロックを消していくゲーム、回転する四角形、それがさらにカラーピッカーで動的に色が変わるものなどだ。
回転するオブジェクト
回転や飛んでいるデモはボタンによって動きを止めたり、消したりする事もできる。こうしたインタラクティブ性が特徴的だ。Canvasの描き方からオブジェクトの配置までgury上でできるようになっている。Canvasを使ったドロー、アニメーションを実装したい時には使ってみよう。
[s2If current_user_can(access_s2member_level1)]
ボールが飛び交うデモ（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
JavaScriptによるアニメーションやドローを行う際にはCanvasタグは必須だ。これまでであれば画像を使っていたような部分もCanvasタグを使えばベクターベースの奇麗な図形を描く事ができる。またシステムとの連携も容易だろう。
難点があるとすればサポートするブラウザが限られることだろうか。iOS向けをはじめとするスマートフォン向けサイトや、先進的な技術に取り込むサービスであれば使えるだろう。HTML5がデファクトとして使える時代はまだ数年を要するだろうが、それまで待っていてはチャンスも逃してしまう事だろう。