2014.05.22
自社サイトリニューアルで、ぐにゃぐにゃする丸のヤツとかについて
前の記事を岡田がバズらせたので、プレッシャーを感じている山田です
僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。
ぐにゃぐにゃする丸はHTML5のcanvasを、DOM要素周りの物理演算はBox2Dライブラリを使ってます。
Box2Dの方も、3年ぐらい前に完成間近でお蔵入り
になったココノヱのサイトで、FlashのBox2DとHTMLとを連携させて似たようなことやってたので、Flash側のコードをJavaScriptにまるっと移植するような感じでできました。
(↑幻のココノヱのサイトver3.2。ドット絵のここのゑ君が落ちてきます。この時作った機能がもったいなかったので、後日年賀サイトに流用したりしました。)
…という流れで、プロトタイプ自体は割と早く出来たのですが、ぐにゃぐにゃ円の数がやたらと多いなど結構高いハードルもあって、それなりのスピードで動くように調整するのはひたすら試行錯誤の繰り替えしで、結果的に図みたいな感じで実装しました。
最低限のcanvasサイズで済むように、canvasはスクロールに合わせて動いてるだけだったり、画像や文字はHTMLで表示して、真っ黒のcanvasにシンプルな形状の穴をあけることでそれっぽく見えるように、かつ負荷が最低限になるようにしています。
あとはBox2Dの計算結果に合わせてHTML要素とcanvas内の円の位置を同期させつつ、ひたすらcanvasを再描画しまくっています。
その他、画面外に出たものは計算しないとか、canvasの再描画面積を出来るだけ小さくするとか、Flashとかでもよくやってた定番チックな工夫をちょこちょこ頑張ったのと、ブラウザのJavaScriptの速度自体が昔より早くなっているというのもあって、それなりに良い具合に動くようになったのではないかと思います
今回のリニューアルでは開発の裏テーマとして、弊社のFlashエンジニア達がJavaScriptでも開発できるようになろうぜ
というのもあって、色々なチャレンジを盛り込んでみました。
ブラウザごとの対応
とかAndroid対応とか、まだまだ殺意を抱くような要素も多いですが、なんとかかんとか色々と出来るようになったんじゃないかなー、とか思ってます…。