CreateJS勉強会 (第9回)に参加してきた話 #CreateJS #CCDojo

先日アドビ本社で行われた「CreateJS勉強会 (第9回)」に参加してきました。
CreateJS勉強会 (第9回) : ATND

CreateJSはHTML5 Canvasを使ってインタラクティブなコンテンツを作成できるフレームワークで、歴史的には2012年から開発がスタートしていますが、正式版となったのは2017年9月でつい最近のことです。このリリースに関連して開催された今回の勉強会は、

  • CreateJSの概要 + Animate CC 2018の新機能(ICS 池田さん @clockmaker
  • CreateJS 1.0.0で何が変わったか(野中さん @FumioNonaka
  • 我々はCreateJSをどう使うべきか?(世路庵 沖さん @448jp

という豪華セッション3本立て。CreateJSを仕事で使う機会は全く皆無な私ですが、ついつい興味をそそられてしまったわけです。

この勉強会はAdobe Creative Cloud道場との共同開催にもなっていて、当日リアルタイム中継されたほか、現在も録画ビデオが見られます。なので、見逃した方はビデオを見ましょう。
https://blogs.adobe.com/creativestation/ccdojo-192-createjs

CreateJSの概要 + Animate CC 2018の新機能

まず池田さんのセッション。CreateJSとはどんなもので、どういう現場で使えるのかといった概要の紹介。

  • CreateJSの得意分野は、自由度の高いインタラクティブな表現。反面、ユーザインタフェースの作成などにはあまり向かない。
  • 類似技術としては、以下のようなものがある。
    • three.js - 3D表現
    • PixiJS - WebGLベースの2D表現
    • Snap.svg - SVGでのインタラクション
  • 一方で、CreateJSは2D表現のための技術で、Context2Dをベースとしている。
  • グランブルーファンタジーニコニコ動画など、大手サービスでも広く採用されている。
  • なぜCreateJSか?→Flashプラットフォームとの親和性が高い。Animate CC(元Flash Professional)は公式にサポートしている。

続いて2017年10月にリリースされたAnimate CC 2018の新機能。

  • カメラの深度機能が追加された。レイヤーごとにZ深度を設定して、3Dのような奥行きが簡単に表現できるようになった。
  • Robert Penner式のイージング設定ができるようになった。
  • タイムラインに秒数が出せるようになった。
  • 既存アニメーションの絶対時間を保ったままフレームレートを変えられるようになった。
  • など。

CreateJSと他のフレームワークをどう使い分けたらいいのかがはっきり説明されていてわかりやすかったです。特にCreateJSの場合、Animate CCを使えばコードを書けなくてもタイムラインベースでアニメーションの作成ができるので、これは他のフレームワークにはない強みと言えそうです。
Animate CC自体も、Flashコンテンツの作成ツールという枠組みはとうの昔に捨て去っていて、HTML5を含むマルチプラットフォームなアニメーション作成ツールとして地道に進化を続けています。この辺りはもっと高く評価されてもいいと思っています。

CreateJS 1.0.0で何が変わったか

次に、野中さんによるCreateJS 1.0.0での変更点の解説。発表資料は下記に公開されているので、そちらを参照してください。コード例がたくさん出ています。
CreateJS 1.0.0で何が変わったか | CreateJS Workshop vol.09
ざっくり概要を挙げると、

  • StageGLクラスでWebGLが使えるようになった。
  • 基本的には、StageクラスをStageGLクラスに置き換えるだけでWebGLにできる
  • ただし、若干の注意が必要。たとえば、WebGLはラスターグラフィックス前提なので、ベクター形式であるShapeはそのままでは描画できず、キャッシュする必要がある、など。
  • CodePenにCreateJSアカウントが設けられて、CreateJSの作例が掲載されている。
  • TweenJS 1.0.0で、プラグインモデルが大幅に改められた。
  • PreloadJSライブラリでフォントローダー機能が追加された。フォントファイルやCSS定義およびCSSパスを読み込んでフォントを設定できる。Webフォントを使いたい場合などに便利。

CreateJS 1.0.0では、やはりWebGLが使えるようになったことが最もインパクトが大きいでしょうか。これによって、パーティクルのような複雑な表現を高速に処理できるようになりました。3万個のパーティクルをスムーズに描画するデモは、(残像効果を使って多少視覚的な水増しをしているとはいえ)、なかなか衝撃的でした。

我々はCreateJSをどう使うべきか?

休憩を挟んで、最後は沖さんによるセッション。発表資料は下記に公開されています。
我々はCreateJSをどう使うべきか? // Speaker Deck

  • アニメーションの持つ力とは何か?
  • アニメーションとそうでないものを分けるものは、"時間軸"。
    • 関連して、アニメーションの原点とされるフェナキストスコープを紹介。
    • フェナキストスコープとは、ゾートロープに先駆けて登場したもので、ゾートロープと同じように回転盤と覗き穴を使って絵をアニメーションさせるというもの。
    • フェナキストスコープ - Wikipedia
  • アニメーションを使えば、そこには本来ないはずのものを作り出すことができる((静止画なのに動いている、とか)
  • Webにおけるアニメーションの目的とは何か?→フィードバック、世界観の演出、ストーリーの伝達など。
  • アニメーションでしか使えられない情報がある
    • 雨量計の内部構造の解説の例。文章や静止画での説明だと要領を得ないが、アニメーションなら一発でイメージが掴める。
  • Webではさまざまなアニメーション技術が使える。DOM、CSS3、Canvas、GIF、videoなど。
  • 現在の主流は、コード思考のアニメーション。JavaScriptでアニメーションのコードを書く。
  • CreateJSは、コード思考で使うこともできるが、Animate CCを使ってタイムライン思考でアニメーションを作ることもできる。これが最大の強み。
  • コード思考も大事だが、タイムライン思考のアニメーションにつか伝えられないこともある

このセッション、タイトルはCreateJSとなっていますが、実際の内容はWebアニメーション全般に関わる興味深いセッションでした。
コード思考とタイムライン思考、どちらにも得手不得手があります。どんなどちらか一方ではなく、シーンによって適したものを選択できて、両側からアプローチできるということが大切ですね。

f:id:zinbe:20171208141247p:plain