to pagetop
:)
spec5zigen Creator's Lab.

    KAYACさんが運営するjsdo.itのイベントでスポンサー賞を受賞させて頂きました!

  • 2012.8.21
  • , , , , ,
  • Tetsuyoshi Gotou

暑い日が続きますねー、
プログラマーの後藤@Nyarinekoの中の人です。

先日、KAYACさんの運営されているjsdo.itというサイトで開催されていた「SPEC.Vol4」というイベントでスポンサー賞を頂きました!

スポンサーとなっていたコロプラさんから、賞品のぬいぐるみとMBPのRetinaモデルも無事届けられ感謝感激です!

ということで今回はこのイベントで投稿した作品についてちょこっと紹介したいと思います。



早速ですがこちらが投稿した作品。
トーナメント決勝! forked: SPEC vol.4 投稿用コード
(Flashならもっとカッコイイのが簡単に作れるのに…というのはおいといて)

今回のイベントのお題は、野球ゲームの代表試合の演出をHTML5+CSS3+JavaScriptを駆使して作成、ただしCanvasとSVGは使用不可ということでした。

最近は仕事でもスマートフォン対応のサイトやWebアプリ等の案件が増え、独学でHTML5+CSS3+JavaScriptを試行錯誤していたところだったので、勉強がてらに参加するのにモチベーションアップにもなってとてもいい機会でした。

今回自分なりに抑えたポイントは4つ

限られた素材でのオリジナリティ

まず、与えられた素材を活かした作品にすること。
全く別の素材を新しく制作することも今回のルール上可能だったと思うのですが、お題の内容的に素材自体を別のものに変えてしまうより、与えられた素材からよりオリジナリティを出すために背景素材を少し加工して、雲とスタンドを別々の素材にしてにパララックス効果を加えました。

3D効果と演出

次に3Dの効果を使ったアニメーション、これは以前からいろいろなライブラリを試したり、独自でいろいろな実装を試したりしていたので、それを活かせればと思い画面遷移の部分や、トーナメント図が出てくる部分に取り入れました。

アニメーションのテンポ

あとは全体的なアニメーションのテンポの良さ、これは同じアニメーション一つをとってもCSSでそのままアニメーションする方法や、jsライブラリを使う方法、またそのライブラリやCSSアニメーションの仕組みにもいろいろな違いがあり、全てのアニメーションが同じやり方でスムーズにできるかというとそうではないようなので、臨機応変に対応できるように作品内でもいくつかのパターンで実装しています。

可読性と保守性

最後に見えない部分ではあるけど、ソースを少し丁寧に書いてみたり、画像のローディングタイミングを意識した作りにしてみたり、見えない部分でも少し手を入れてみました。これはイベント期間中自分の自由な時間を使って作品を仕上げていたので何度も見返す必要があり、この部分をあえて力を入れてみました。

この作品では自分的にあまり自慢できる部分というのは無いのですが、動きのある作りをcssやjsで表現しようとするとソースがすっごく長くなったりしがちです。

そこを最初は少しめんどくさくても丁寧に書いてあげたり、ちょっとした工夫を加えるだけでソース全体の量も減らせるし、メンテナンスもしやすくなるので、その分アニメーションの幅を増やせておもしろいものを生み出せそうですよね?

たとえば今回のソースのようにjQueryを使ってるパターンですがこんな感じで

function setTransition( duration, delay, transform, timing, selector ){
	return selector.css({
		'-webkit-transition-duration' : duration + 'ms',
		'-webkit-transition-delay' : delay + 'ms',
		'-webkit-transform' : transform,
		'-webkit-transition-timing-function':timing
	});
}

function setAnimation( animation, delay, duration, count, selector ){
	return selector.css({
		"-webkit-animation-name":animation,
		"-webkit-animation-delay":delay+"ms",
		"-webkit-animation-duration":duration + "ms",
		"-webkit-animation-iteration-count":count
	});
}

という関数を用意しておけば複数のオブジェクトにタイミングや、動きの違ったアニメーションを設定するのがすごく楽になりました。最初はcssやjsで1個1個にアニメーションなどを設定して毎回どこだっけ?とか思いつつ微調整したりしてましたが、こうするだけでぐっとソースも見やすくなります。

今ならjQueryのanimation使えば上のような書き方をしなくても、ある程度いい感じ且つ”クロスブラウザ”にも対応しつつ動いてくれるだろうし(まだ試してませんが)既にそういったノウハウ持ってたり最近流行(?)のjsコンパイラとか使ってる人は、もう今更何言ってんのって感じかもしれません。でも、そういった気付きが与えてくれる”してやった感”は今でも楽しいもんですね。
審査員のコメントにもあるように、ソースの中身からそういった気持ちまで伝わって今回の結果に繋がったのかなと思いました。

てことでこれからも日々勉強してうちの”優秀な”デザイナー達のデザインの幅を広げられるように、自分も技術の幅を広げて基礎固めしつつ、いろいろ”楽しく”勉強しておきたいと思う今日この頃でした。

ちなみにイベントはまだまだ続いてるようなので是非皆さんも参加してみて下さい!→http://jsdo.it/event/spec/vol5

最後にイベントを主催して頂いたKAYACさんとコロプラさんに感謝!