マップ」ですが、CreateJSとTypeScriptを使って制作しました。今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。Canvasならではの表現TypeScriptを用いて低学習コストで効率的な制作の実現スマートフォンやタブレットでも閲覧可能このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティクルの量や色、大きさが変化します。2013年の関東地方は2012年の6倍もの花粉が飛散するとの予測でしたが、年代別の飛散量を視覚的に比較できるようにしました。制作にはHTML5の技術を使っているので、デスクトップだけでなくスマートフォンやタブレットなどのモバイル端末でも再生できます。フルFlashサイトのような表現ですが、モバイル端末でも動作しています。モバイル端末では平均して18fps、場所によっては60fpsと滑らかに再生できていて、パフォーマンスは良好だと感じました(※パーティクルなど負荷の高い表現のためモバイルでは難しいと思いましたが)。Canvasの性能は悲惨なものだったので、ようやく実用できるレベルになってきたという印象です。Canvasで描画してます。Canvasならではの表現を組み込んでいます。CreateJSを使って出力してます(※)。地図などはベクターデータをそのまま書き出しているので、拡大した際にもキレイに表示できています。3.0で使用するのと同じ感覚でアセットを書き出せるので、こういったコンテンツの制作には必須だと思います。今回コーディングにはTypeScriptを使用しました。TypeScriptはMicrosoft社がオープンソースで提供している言語です。JavaScript開発で悩みがちなクラスの作成や名前空間の扱いを容易にし、また静的型付けがあることが特徴です。TypeScriptはコンパイルするとJavaScriptに変換されますが、美しいJavaScriptが出力されます。静的型付けの恩恵でコード補完を利用でき、アロー関数式でthisのスコープにも悩まされず、快適に開発をすすめることができました。今回はじめてTypeScriptを使ってみましたが、1日も触わっていれば十分把握できたので、クラスベースの構築に慣れている方であればすぐに導入できると思います。このサイトは弊社池田と2人で制作したのですが、バージョン管理システム(GitやSVN)と合わせることでスムーズに開発を進めることができたので、TypeScriptの開発はとくに複数人で効率的になると思います。最後にTypeScriptとCreateJSの開発については、CreateJS勉強会(第2回)で発表したスライド資料があります。こちらもあわせてご参考ください。平成28年6月29日に内容をメンテナンスしています。フォロークリエイティブディレクター。最近はゲームアプリの企画/ディレクション/UIデザインなどを主な業務としています。3.0ライブラリ「Tween24」等を開発。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。