どうも、ICSの加賀です。
先週開催されたCreateJS勉強会（第2回）で弊社池田(ClockMaker)の発表で紹介した「日本全国花粉飛散マップ」を、CreateJSとTypeScriptを使って制作しました。
今回の作品のポイントとしては、
- HTML5で制作、PCだけでなくスマートフォンやタブレットでも閲覧可能。
- CreateJSで、DOMではできないCanvasならではの表現。
- TypeScriptを用いて低学習コストで効率的な制作の実現。
の3点があげられると思います。以下でそれらを具体的に説明したいと思います。
スマートフォンやタブレットでも閲覧可能
この作品は環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティクルの量や色、大きさが変化します。今年関東地方は昨年の6倍の花粉が飛散するとの予測でしたが、それがどれくらいの量なのか視覚的に比較しやすくなっていると思います。
制作にはHTML5の技術を使っているので、PCだけでなくスマートフォンやタブレットなどのモバイル端末でも閲覧できます。モバイル端末では最初の初期化で少し時間はかかりますが、平均して18fps、場所によっては60fpsと滑らかに再生できていて、パフォーマンスはよかったと感じました。(※今回はパーティックルなど負荷の高い表現をしているのでモバイルでは難しいと思いましたが)
一昔前のiOS/AndroidのブラウザだとCanvasの性能は悲惨なものだったので、ようやく実用できるレベルになってきたという印象です。
CreateJSでCanvasならではの多彩な表現
今回ソーシャルボタン以外の全てをCreateJSを用いてCanvasで描画しています。
花粉のパーティクルの表現や、加算のブレンドモード、地図を移動する際のライン描画の表現など、DOMではできないCanvasならではの表現を組み込んでいます。
また地図などのアセットはFlash Pro CS6からToolkit for CreateJSを使って書き出し使用しています。特に地図などはベクターデータをそのまま書き出しているので、拡大した際にもキレイに表示できています。
▼地図を移動する際のライン描画
▼花粉のパーティクルの表現や、加算のブレンドモード
ちなみにToolkit for CreateJSは、Flash Proからswcファイルを書き出してActionScriptで使用するのと全く感覚でアセットを書き出せるので、こういったコンテンツの制作には必須だと思います。
TypeScriptでスマートでストレスのない開発
今回コーディングにはTypeScriptを使用しました。TypeScriptはMicrosoft社がオープンソースで提供している言語です。JavaScript開発で悩みがちなクラスの作成や名前空間の扱いを容易にし、また静的型付けがあることが特徴です。
TypeScriptはコンパイルするとJavaScriptに変換されますが、キレイなJavaScriptが出力されます。
静的型付けのお陰で私の大好きなコード補完が利用でき、アロー関数式でthisのスコープにも悩まされず、とても快適な開発ができました。
今回初めてTypeScriptを使ってみましたが、1日も触わっていれば十分把握できたので、クラスベースの構築に慣れている方であればすぐに導入できると思います。
また今回池田と2人で制作したのですがパーツをモジュール化しやすく、バージョン管理システム（GitやSVN）と合わせることでスムーズに開発を進めることができたので、特に複数人での開発がより効率的になるのではないかと思います。
最後に
TypeScriptとCreateJSの開発については、CreateJS勉強会(第2回)で発表したスライド資料がありますので、こちらもあわせてご参考ください。