こんにちは。松村です。
クスールの制作のサイトがやっとできました。
http://www.cshool.co.jp/
デザイン:大賀さん(grapinco)
HTML5 canvas:冨田くん
HTML/CSS/Javascript:松村
「クスールのサイトは学校を前面に出したものなので、制作もしていることを知ってもらう場所がないよね」という意見がかなり前からあり、ずっと制作しようと思っていたのですが、忙しさにかまけてほったらかしにしていました。
Flashで作ることを前提に、デザインはすでに出来上がっており、あとは実装だけだったのですが、深津さんのこの記事に感化され、思い切ってHTMLベースで作ってみました。
アニメーション部分はHTML5のcanvasで実装し、テキスト、ビデオ部分はHTML、CSS、Javascriptで実装しました。
僕はHTMLはテーブルとかできるけど、CSSとかまったく知らなかったので、
今回久々に取り組んだのですが、久々にやってみると「面白い」かつ「めんどくさい」で、今後の技術として大いに期待できる半面、やっぱりこんなサイトはFlashのほうが楽だなという印象でした。
でも今後はFlashの人はこのあたりでも実力が発揮できそうな予感です。
以下、自分参考用に今回の技術的メモです。
■■■ HTML5のcanvasについて
・FlashでいうBitmapDataのようなもの。
・アニメーションさせるときはBitmapData.drawのようなことを毎回実行する必要がある。
・描画(得意外部画像を読み込んだ描画)に結構負担がかかるため、どう軽減させるかが今後の課題。
・IEは9からサポートされている。IE8以下については、静的ページに飛ばすようにした。
・アニメーションについてはProcessing.jsとかEaselJSなどを使うほうが多分動作が速くて効率的なものができるかも。今回は練習も兼ねて、全部一からプログラミングしてみた。
— 参考サイト
・外部画像ファイルを読み込むときの参考
http://www.akibahideki.com/blog/html5-canvas/canvas1.html
・Processing.js
http://processingjs.org/
・EaselJS
http://easeljs.com/
■■■ videoタグについて
・ブラウザによってかなり使い分けが必要。
・今回は以下のような使い分けをした
-firefox:ogv
-chrome:webm、m4v
-safari:m4v
-IE8以下:swf
・firefox3でvideoタグが動作せず調べたところ、ホスティングサーバがvideoタグを認識していない?とのことで.htaccessで以下のものを追加
-AddType video/ogg .ogv
-AddType video/mp4 .mp4
-AddType video/x-m4v .m4v
— 参考サイト
・videoタグのブラウザのサポート比較
http://freestyle.nvo.jp/archives/549
■■■ Javascript(jQueryについて)
・DOMへのアクセスはjQueryと使い、プログラミングのロジックはJavascriptを使った。
・ActionScriptを知っていれば、Javascript、jQueryの使い方はそれほど難しくない感じ。
・AS1と同じような書き方になるので、普通にかくとかなりコードが分かりにくい。案件で使うにはクラス化して整理するなどの工夫が必要
・IEで動的にCSS読み込みできなかったときの参考
http://d.hatena.ne.jp/DECKS/20100910/1284125483