新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。
まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。
ページ全体のマークアップの骨格を画像にしてみました。
mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。
前回に引き続き、canvasタグでブラウザ上で図形作成中。
今回はアニメーションに挑戦してみます。と入っても、Javascriptで描いている図形のこと、Javascriptでループすれば簡単にアニメーションが作れるのは道理。
ただ、単にループせず、setInterval()を使ってループ時間は調整する。
サンプルをアップしてみましたので、ソースのご参考までに。
HTMLだけで、図形が描ける<canvas>タグ。正直、コーポレートサイトやポータルサイト・ショッピングサイトばかりの職場では使うことが当分なさそうなので興味なかったのですが、よく考えてみたらかなり面白いんじゃね？と思い直して勉強してみることにしました。
これまでもFlashやProcessingなどを勉強しようと思いながら始められなかったのですが、canvasの魅力はやっぱりプラグイン無しでブラウザで動くということに尽きる。IE？知らん。
ということでまず、図形を描いてみました。Firefox、Safariで見てください。
IEでは動きません。あしからず。
左上が基準点。そこからポインタを動かして線を引いたり図形を置いたり。こういっちゃ何だが、実にありきたりです。おおまか、CSSと発想が一緒と思えば取っ付きやすいかな。
その他、描線と塗りに色を指定できる、透明度が設定できる、グラデーションが設定できる、と。
アニメーションが出来ると聞いて俄然やる気になったので、次回はそのあたりを調べてみます。
umbrella_processという名義で音楽活動してますが、就職してから停滞気味。Web制作の仕事をしているのでそっちの内容の方が多いかも。
