Adobe Edge Animateからスタンドアローンで静的なアセットを生成するライブラリを作った

作った mizchi/genanimate https://github.com/mizchi/genanimate

これなに

前職でFlashやってたとき、Adobe FlashでデザイナさんがUI作って、それにコードを注入するというワークフローがとても良いと感じていて、HTML5は高機能化したといっても、そういうことができなくて歯がゆく感じていた。

で、Adobe Edge Animateっていう、(まだ)無料のHTML5オーサリングツールがある。これが結構便利で、これでUIをさっくり作って、Backbone.Viewか何かでラップしてしまえると非常に楽なんじゃないかと思った。

で、作った

使い方

適当にUIを作る

genanimateで静的なHTMLを生成する

genanimate = require 'genanimate'
genanimate.genanimate
  animate_dir: 'assets/animate'
  src: ['test']
  html_gen_path: 'gen'
  images_gen_path: 'gen/images'

test.html等が生成されるので、ブラウザ展開するとこうなる

仕組み

本来ならAdobe Edge Animateは専用のローダーを使ってiframeに展開するんだけど、外部からロジックを注入しようとするとiframeが非常に邪魔だった。しかしAdobe Edge AnimateプロジェクトはJavaScriptで展開することを前提としていて、外部からHTMLのみ展開することができない。

しかし展開後のJSはスタンドアローンで動くようだ。こいつをぶっこぬけばいいのでは。

なのでAdobe Edge Animateの生成するHTMLをphantom.jsで読み込んでしまい、JSによって展開されたHTMLをぶっこ抜く。

非常に邪道な方法なので、もっとちゃんとした方法あるなら教えてください。