このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。

導入編

CreateJSの導入編

webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。

CDNのURL

次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

CreateJS の基本的な使い方

CreateJSの基本編

描画の基本

グラフィックの描き方からテキストや画像の表示といったCreateJSの基本的な使い方を一つ一つ覚えていきましょう。表示オブジェクトというインタラクションデザインを作る上で必要不可欠な概念を解説します。

モーションの実装

時間経過の処理を学びましょう。時間経過処理はモーション/アニメーションの制作の基本となります。CreateJSでは、createjs.Tickerクラスがその中心的な役割を担っています。

初級編

CreateJSのサンプル

ユーザーインタラクションの実装

マウスやキーボードなど、パソコンでのユーザー入力の制御方法を学びましょう。UI(ユーザーインターフェース)の具体的な一例としてボタンの作成方法も解説します。

サンプル (初級編)

ここまで学習した内容の理解を深めるべく、サンプル制作に挑戦ください。まずは自分でコードを書いていくといいでしょう。困ったら完成形のサンプルのコードを参照してください。

中級編

CreateJS入門の中級編

トゥイーンモーションの実装

トゥイーンを使えば、少ないコードで多彩なモーションを手軽に実装することができます。トゥイーンは特にUI(ユーザーインターフェース)の実装で役立ちます。

数学の活用

高校数学で学ぶ三角関数。三角関数は将来、何の役に立つのかと思っていた方も多いのではないでしょうか。インタラクションデザインの世界では三角関数は頻繁に利用します。簡単なサンプルを通して、三角関数の活用方法を学んでいきましょう。

マルチメディア

サンプル (中級編)

中級編までで学習した内容の理解を深めるべく、サンプル制作に挑戦してみましょう。

CreateJSとECMAScript 2015+

JavaScriptの新しい仕様のECMAScript 2015（略称ES2015、別名ES6）以上では、クラスを利用できます。オブジェクト指向なプログラムで設計することで、規模の大きい開発に役立ちます。CreateJSでクラスを利用する方法を習得しましょう。

応用編

CreateJS入門の応用編

サンプル(応用編)

様々な応用サンプルに挑戦してみましょう。表現のリッチさに比例してコード量も増えますが、これまでに解説した内容を組み合わせた内容になっています。

Adobe Animate CCを使おう

CreateJS入門 - Adobe Animate CCとの連携

Adobe Animate CC(旧Flash Professional CC)というアプリケーションを使えば、CreateJS用のグラフィックやモーションをコードを書かなくても作ることができます。コードが書くのは苦手という方はAnimate CCでCreateJSコンテンツを作ってみるといいでしょう。

CreateJS入門サイトでAnimate CCを扱うのには理由があります。Animate CCでは「HTML5 Canvasドキュメント」が作れます。このHTML5 Canvasドキュメントというのはその名の通り、Animate CCで作ったコンテンツをHTMLのcanvas要素で再生するというものですが、その再生エンジンにCreateJSが採用されているのです。

再生エンジンにCreateJSが使われているというとイメージしづらいかもしれませんが、アニメーションとCreateJSが連携しやすいということを意味します。次のページでは、Animate CCで作ったCreateJSコンテンツを、プログラムで連携する方法を解説します。

その他

ソースが公開されている、実務レベルの記事

CreateJSを使って実装した事例の記事を紹介します。本サイトでは基本的な使い方に焦点をあてているため、残念ながら現場のプロが使うテクニックまでは十分学べません。そこで、実際に作られた本格的なCreateJSの事例を紹介します。次の記事では、ソースコードも含めて公開されています。ソースコードには現場のテクニックが満載。余力があればぜひ勉強してみましょう。

CreateJSの文献

CreateJSを解説した有名な文献・チュートリアルとしては次があります。本サイトからのステップアップとして参照ください。