もじれつとがめん

プログラムの忘備録とゲームとかその他色々。

~説明編~ html5+createjsでのアニメーション処理とか

幾つかcreate.jsについて回数を分けて記事を書こうと思う。
今回はまず概念というかそんな感じの説明編。

flashからhtml5+jsへの変化

たしか2015年1月27日くらい、YouTubeadobe社のflash playerからhtlm5で動画をデフォルトで再生出来るように変更したりと
だんだん世論的に、flashを利用する方針からhtml5で済ませるような方針になりつつあると最近感じるようになってきた。

どこかの記事で見た話だが、少し前まではwebで動画やアニメーションを使用する際には9割近くがflashを使用しているようでその影響でadobeflash playerが世界の標準みたいな事になっていて確かに、YouTube見るのにもニコニコ動画見るにも大抵のアニメーションを再生するにもflashなので当然そのシェア率がアホみたいな事になるのは当然と言える。
しかし、flashはたくさんの問題点があり多くの事をやろうとすると動作がとても重くなったり、もっと目立つ問題と言えばモバイル対応についてである。

近年スマホの普及が世界的に急速になっているので当然flashスマホ対応する必要が出てきた。
androidは機種によって違いはある物の対応できたが、appleiphoneflash対応しないと発表した事により事情が大きく変わった。
まぁ、こんな色々な動きによってだんだんflashを無理に使うよりもhtml+jsで出来るようにした方が扱えるユーザーも増えるし開発者もいじれる人が増えるのでhtnl5からcanvasflashと同じ事ができるようになりそちらに移行してきているみたい。

html5canvasタグ

html5から実装されたモノでcanvasタグ上で様々なアニメーションをjavascriptで実装する事が出来るようになった。
ただし、今は先ほど書いた通りまだまだシェアが少ないので現状は最初から最後までcanvasで実装するよりflashとしてあらかじめ作りそれをツールを使用してhtml5+js用に変換するのが今の主流っぽい。
なので、記事を探しても数が少なく色々やろうとすると苦労する事が多いのかもと感じた。
ただし、公式のドキュメントは充実しているらしくて(英語がまだまだ読めないので私自身あまり感じないけど)そちらを読むと多少は理解が進むかも。

基本

html側にcanvasタグをid付きで記述して、jsにcanvasでアニメーションさせる事に特化したライブラリであるcreate.jsを呼び出して使用するのが現在のやり方だと思う。
flashをツールで変換してもこのスタイルだし、今後もcreate.jsは普及するだろうからきっと間違ってはいないと思う。

create.js

create.jsとは、canvasでアニメーションをするために特化したライブラリでその実体とはそれぞれ
描画処理、アニメーション処理、音声処理、ローディング処理に特化したライブラリを纏めて扱うのがcreate.jsらしい。
ちょっとこんがらがるが、canvasで色々やりたい時はこいつを読み込むようにしとけば良いと思う。

終わり

今回は事前知識というか、まあ背景についての説明なつもり。
ここらへんは話題になったから記事はたくさんあるので色々みて知っておくと良いと思う。
次回は私が知りうる断片的な使い方を書いていこうと思う