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

# はじめに
年末にふとVue.js勉強したくなり、おみくじコンテンツを作ってみました。
[銀河おみくじ出張所](https://omikuji.ginga.earth/)

![GIF.gif](https://qiita-image-store.s3.amazonaws.com/0/131565/cdcd6e9e-b190-d4a7-5a39-0ca809bf6300.gif)

今年、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に読み込ませる。

```javascript: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を読み込んで使えるようにする。

```javascript: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に変わるからです。

```javascript:omikuji.js
// })(createjs = createjs||{}, AdobeAn = AdobeAn||{});
// var createjs, AdobeAn;

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

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

```javascript: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を読み込んで使えるようにする。

```javascript: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の中身を参照。

```javascript: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などと連携してリッチなコンテンツをつくっていきたいです。

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

また、銀河フォリオという創作をしている方がポートフォリオを作れるサービスもリリースしました。こちらもどうぞよろしくお願いします。
[銀河フォリオ](https://folio.ginga.earth/)