WebpackとCreateJS（Animate CC）とVue.jsで少しリッチな？おみくじコンテンツを作った話

はじめに

年末にふとVue.js勉強したくなり、おみくじコンテンツを作ってみました。
銀河おみくじ出張所

今年、Adobe Creative Cloudを契約したこともありどうしてもWebpackで動的にAnimate CCで作ったアニメーションを載せた、おみくじを作ってみたくなり技術調査を始めました。いろいろつまづいたので苦労した点などを載せようと思います。

※今回はES2015でJavaScriptを書いてみました。

Animate CCのアニメーションを掲載するのに導入したnode_modules

• createjs
• exports-loader
• imports-loader

ES2015、Webpackでアニメーションを載せるのに苦労した点

CreateJSをimportで使うことが出来なかった

Vue.jsなどはimport Vue from 'vue';で読み込むことが出来たがCreateJSはES2015に対応しておらず？import CreateJS from 'createjs';のようにして使うことが出来なかった。

そのためimports-loaderとexports-loaderを使ってcreatejsをwindowに読み込ませる。

webpack.config.js

  module: {
    loaders: [
      {
        test: /createjs/,
        loader: 'imports-loader?this=>window!exports-loader?window_load_createjs'
      }
～省略～
  plugins: [
    new webpack.ProvidePlugin({
      'window_load_createjs': 'window_load_createjs',
～省略～
  resolve: {
    alias: {
      window_load_createjs: path.join(__dirname, 'node_modules', 'createjs', 'builds', '1.0.0', 'createjs.min.js'),

entryのjsファイルに下記を追記することでCreateJSを読み込んで使えるようにする。

index.js

import window_load_createjs from 'window_load_createjs';

これにより、createjsが参照できるようになりました。

Animate CCで出力したアニメーションjsファイルを読み込めない問題

Animate CCのパブリッシュで出力したjsファイルをES2015の環境に読み込むには出力したjsファイルに少し修正が必要です。

出力したjsファイルを下記のように修正します。
imports-loaderとexports-loaderで読み込む際にthisがwindowに変わるからです。

omikuji.js

// })(createjs = createjs||{}, AdobeAn = AdobeAn||{});
// var createjs, AdobeAn;

 })(createjs = createjs||{}, this.AdobeAn = this.AdobeAn||{});

あとは、createjsと同じ要領でjsファイルを読み込ませます。

webpack.config.js

  module: {
    loaders: [
      {
        test: /omikuji\.js$/,
        loader: 'imports-loader?this=>window!exports-loader?window_load_omikuji'
      }
～省略～
  plugins: [
    new webpack.ProvidePlugin({
      'window_load_omikuji': 'window_load_omikuji',
～省略～
  resolve: {
    alias: {
      window_load_omikuji: path.join(__dirname, 'src', 'omikuji.js'),

entryのjsファイルに下記を追記することでAnimate CCで出力したアニメーションjsを読み込んで使えるようにする。

index.js

import window_load_omikuji from 'window_load_omikuji';

これにより、AdobeAnが参照できるようになりました。

CreateJSを使ってアニメーションを出力する

Animate CCのパブリッシュで出力したhtmlに書かれたJavaScriptを参考にVue.jsのmounted()上でCanvasアニメーションを出力します。mounted()を使う理由はcreated()ではDOMが生成されていない状態なのでCanvasタグを参照できないためです。

下記のような感じでCanvasにアニメーションを出力します。詳しくはパブリッシュされたhtmlの中身を参照。

index.vue

    mounted() {
        var stage = new createjs.Stage('result_animation');
        const comp = AdobeAn.getComposition("パブリッシュで出力されたID");
        let lib = comp.getLibrary();
～省略～
        const result = new lib.result();
        stage.addChild(result);
        createjs.Ticker.addEventListener('tick', stage);

最後に

CanvasアニメーションをVue.jsに載せるのは昔、FLASHを仕事で作ったりしていた頃の記憶が蘇り楽しかったです。
Animate CCはスマートフォンでも表示できるCanvasアニメーションをタイムライン上で簡単に作れるので今後もVue.jsなどと連携してリッチなコンテンツをつくっていきたいです。

宣伝

銀河丼という創作してる人やエンジニア、フリーランス（自営）など、あらゆる個人プレーヤーのためのマストドンインスタンスを運営しています。興味がありましたらぜひ参加してほしいです。
銀河丼

また、銀河フォリオという創作をしている方がポートフォリオを作れるサービスもリリースしました。こちらもどうぞよろしくお願いします。
銀河フォリオ