クスール制作部門サイト作りました

こんにちは。松村です。

クスールの制作のサイトがやっとできました。
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