Webpack で Ace(Brace)を使うとエラーが出る

こんにちはー。

Ace、便利ですよねー!
js で作られたテキストエディタで、
Webアプリで「ちょっとコード打つとこ作りたい」とかいうときに使えます。

さて、今回はこれを、Webpack から使って、まとめられるようにしたいと思います。

brace を使う

thlorenz/brace
brace - browserify compatible version of the ace editor.

普通の ace を、Browserify で使えるようにしたそうです。

インストール

$ npm install --save brace

bower からインストールしたくて、探しましたがなかったです。

webpack.config.js

node_modulesをbundleできるようにします。

module.exports = {
// ...
  resolve: {
    modulesDirectories: ["node_modules"]
  },
  plugins: [new webpack.ResolverPlugin(
    new webpack.ResolverPlugin
      .DirectoryDescriptionFilePlugin("package.json", ["main"])
  )]
};

しかしエラー

これで、Browserify ならうまくいくらしいのですが、
Webpack だと、エラーが出てしまい、
テキストエディタ上でのエラー表示機能などが使えませんでした。

webpack-brace-error

Could not load worker TypeError: Argument 1 is not valid for any of the 2-argument overloads of URL.createObjectURL.
スタックトレース:
WorkerClient@file:///.../bundle.js:16481:21
this.createWorker@file:///.../bundle.js:21703:23
this.$startWorker@file:///.../bundle.js:8833:29
this.$onChangeMode@file:///.../bundle.js:8789:14
this.setMode/<@file:///.../bundle.js:8770:18
exports.loadModule@file:///.../bundle.js:3766:27
this.setMode@file:///.../bundle.js:8759:10
@file:///.../bundle.js:53:2
__webpack_require__@file:///.../bundle.js:20:12
@file:///.../bundle.js:40:18
@file:///.../bundle.js:1:11

どうやら、w3c-blob という module でエラーが起きています。
これは、Blob が使えないブラウザ用に、Blob を実装している module です。

Blob
Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。 F...

しかし、サポート状況を見てみると、IEでも10以上、結構多くのブラウザがサポートしています。

ということで、この w3c-blob という module を、
webpack の alias 機能を利用して、
ブラウザの Blob を使うようにしていきます。

1. webpack.config.js があるフォルダに、「alias」フォルダを作成

webpack.config.js があるフォルダに、「alias」フォルダを作成し、
このフォルダの中に、blob.js というファイルを作成します。

blob.js

module.exports = Blob;

1行です。ブラウザで実装されている Blob を使うようにします。

2. webpack.config.js にaliasを登録

4行目-7行目を変更してください。
webpack.config.js

module.exports = {
// ...
  resolve: {
    modulesDirectories: ["node_modules", "alias"],
    alias: {
      "w3c-blob": "blob.js"
    }
  },
  plugins: [new webpack.ResolverPlugin(
    new webpack.ResolverPlugin
      .DirectoryDescriptionFilePlugin("package.json", ["main"])
  )]
};

4行目では、alias フォルダをaliasで使えるようにします。

6行目では、w3c-blob の aliasとして、blob.js(aliasフォルダ内)を登録し、上書きします。

3. 実行してみる

success-webpack-brace

エラーが出ませんでした。
また、テキストエディタ上で、エラーの表示もできるようになりました。

Javascriptでアニメーションを簡単に使える「move.js」を使ってみる

簡単な記法で、アニメーションをすることができます。

中では、transition-delayとかを使っているようです。

インストール

bower i move.js
  • i と書くと、installを略すことができます。

普通にやると怒られる!

中でonload時にdocument.bodyを呼び出しているので、

普通にscriptタグで読み込んでもエラーが出てしまいます。

次のように読み込みましょう!

アニメーションしよう!

まず構文。

move("クエリ")/*..... アニメーション処理 */.end();

move()からend()の間に処理を書くわけです。
処理は、公式サイトにたくさん書いてあります。
ここでは一部を紹介します。

cssプロパティを指定する

.set("CSSプロパティ名", 値)

例:

move("div.box")
  .set("opacity", 0)
  .end();

アニメーションの時間を指定する

.duration("秒数")

例:

move("div.box")
  .set("opacity", 0)
  .duration("1s");
  .end();

移動する

.translate(x, y)

例:

move("div.box")
  .translate(100, 80)
  .duration("0.5s")
  .end();

アニメーションが終わった後に実行する

.then()/* 処理 */.pop()

例:

move("div.box")
  .translate(100, 80)
  .then()
  .set("opacity", 0)
  .pop()
  .end();

例では、移動をしてから、opacityを0に指定します。

便利なので、使ってみてください!