2014.05.22

自社サイトリニューアルで、ぐにゃぐにゃする丸のヤツとかについて

前の記事を岡田がバズらせたので、プレッシャーを感じている山田ですあせあせ(飛び散る汗)
公開後も細かくマイナーチェンジを重ねているココノヱのサイトリニューアルのお話、その2です。
僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。

ぐにゃぐにゃする丸いヤツ

ぐにゃぐにゃする丸はHTML5のcanvasを、DOM要素周りの物理演算はBox2Dを使ってます。

canvasは雰囲気Flashっぽいし、2年前にmoncifaka online store様の開発で同じような演出を作ったことがあるというのもあって、プロトタイプまでは割とさくっと手(チョキ)

Box2Dの方も、3年ぐらい前に完成間近でお蔵入り泣き顔になったココノヱのサイトで、FlashのBox2DとHTMLとを連携させて似たようなことやってたので、Flash側のコードをJavaScriptにまるっと移植するような感じでできました。 

(↓幻のココノヱのサイトver3.2。ドット絵のここのゑ君が落ちてきます。この時作った機能がもったいなかったので、後日年賀サイトに流用したりしました。)

幻のココノヱver3.2

…という流れで、プロトタイプ自体は割と早く出来たのですが、ぐにゃぐにゃ円の数がやたらと多いなど結構高いハードルもあって、それなりのスピードで動くように調整するのはひたすら試行錯誤の繰り替えしで、結果的に図みたいな感じで実装しました。

zu。

最低限のcanvasサイズで済むように、canvasはスクロールに合わせて動いてるだけだったり、画像や文字はHTMLで表示して、真っ黒のcanvasにシンプルな形状の穴をあけることでそれっぽく見えるように、かつ負荷が最低限になるようにしています。

あとはBox2Dの計算結果に合わせてHTML要素とcanvas内の円の位置を同期させつつ、ひたすらcanvasを再描画しまくっています。
その他、画面外に出たものは計算しないとか、canvasの再描画面積を出来るだけ小さくするとか、Flashとかでもよくやってた定番チックな工夫をちょこちょこ頑張ったのと、ブラウザのJavaScriptの速度自体が昔より早くなっているというのもあって、それなりに良い具合に動くようになったのではないかと思いますあせあせ(飛び散る汗)

今回のリニューアルでは開発の裏テーマとして、弊社のFlashエンジニア達がJavaScriptでも開発できるようになろうぜ!というのもあって、色々なチャレンジを盛り込んでみました。ブラウザごとの対応ちっ(怒った顔)とかAndroid対応ちっ(怒った顔)とか、まだまだ殺意を抱くような要素も多いですが、なんとかかんとか色々と出来るようになったんじゃないかなー、とか思ってます…。
TAG =
BOX2D
開発
JavaScript

COCONOE inc.

ADDRESS :
1613-5, SHIMPO, MINAMI-KU
OKAYAMA-SHI, OKAYAMA,
700-0945 JPN
TELEPHONE :
086-243-6614