FlareをFlutterだけじゃなくてJSでもFlareった話

Diverse Advent Calendar 2018 19日目の記事です。

昨日は、 @clownfish さんの Reproを使いやらかしてしまった話 でした。

Diverseでは、失敗を糧に多くトライでさらに成長できる Fail Fast というバリューを掲げており、今年の反省をぜひ来年に活かしていきたいですね！

（※今回の記事は執筆時の12/12時点での内容になります。）

序章 ~Flareとの出会い~

さて今回のお話ですが、先日 12/4 に行われた Flutter Live で、Flutterの大きなアップデートの発表がありましたが、その中のツール紹介で、 2dimentions社の Flare がありました。

Flareは、ブラウザ上でポチポチするだけで簡単にアニメーションが作成できる素晴らしいGUIツールです。
作成したアニメーションはflr形式のバイナリファイルをexportでき、そのファイルをflutter appに取り込み、packageを介して表示することができます。

そこでexportする際に、アニメーションを動かすプラットフォームを選択できる Engine の項目で Web という選択肢を確認しました。

「もしやWebフロントエンドでも使えるのでは？」

そんな小さな好奇心から始まった、ブラウザでflrファイルを表示できるまでの奮闘記についてお話します。

第1章 ~SDKへの期待と挫折~

まず、私は公式ページを確認したところ、

なんだーあるんじゃーん♪
期待に胸を踊らせリンク先のリポジトリへ。

早速READMEを読んでみると、

Usage
Take a look at example/example.html and example/example.js for how to initialize and use a Flare animation.

要約すると、

example/example.html と example/example.js をみて参考にしてね！

とのことで、早速 example.html をブラウザで確認！

gl-matrix.js は、package.json にあったのでコピーすればよさそう。
Flare.min.js は、webpack.config.js があるので、ビルドすれば生成できそう。

npm install
npx webpack
cp ./node_modules/gl-matrix/dist/gl-matrix.js ./build

これで再度トライ！

ball.flj なるアニメーションファイルらしきものが、こちらで削除されてて、masterでは確認できませんでした。

もう一度READMEをみてみると、

CanvasKit vs Canvas
There are currently two branches: master with Canvas 2d context as the renderer and CanvasKit with SKIA via WebAssembly. Going forward the CanvasKit branch will become the active one as it supports more advanced rendering operations which Flare will soon require.

要約すると、

master ブランチは Canvas 2d context、CanvasKit ブランチはCanvasKitでレンダリングしてるけど、今後はCanvasKitが活発になるよ！

なるほど

ということで、 canvaskit ブランチにチェックアウトして、ブラウザで再チャレンジ！

この canvaskit.js は、webpackにも記述がなく、参照されているbuild ディレクトリは .gitignore されてるため、別途生成する必要がでてきました。

第2章 ~CanvasKitのビルド~

CanvasKitとは、先のREADMEにもあったとおり、Googleが開発してる2Dグラフィックライブラリ SKIA の一つです。¹

目的のCanvasKitは、リポジトリのexperimental ディレクトリにあります。

以下、OSX(10.14.1)でのビルド手順です。

1. GNコマンドのインストール²

GNコマンドについては、こちらご覧ください。

python tools/git-sync-deps

2. Emscriptenのインストール³

Emscriptenは、C/C++言語から生成されるLLVMビットコードを入力に、JavaScriptに変換するコンパイラです。⁴

※ビルドに30分ほどかかります。

# CMakeのインストール
brew install cmake

# Emscriptenのビルド
git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
# 30分...
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

# emsdkにパスを通す
export EMSDK=/path/to/emsdk

3. CanvasKitのビルド

cd experimental/canvaskit
make

以上が成功すると、以下のディレクトリに２ファイルが生成されているのが確認できました。

skia
└── out
    └── canvaskit_wasm
        ├── canvaskit.js
        └── canvaskit.wasm

最終章 ~リベンジ~

第2章で作成したcanvaskitをFlare-JSのbuildディレクトリ配下に配置して、再度ブラウザ起動！

このsetMatrix関数ですが、タイミングが悪く執筆時の数日前にちょうどCanvasKit側で変更があり、setMatrix関数が使えなくなっていました...

なので、setMatrixをconcatに書き換えて再度チャレンジ！（本家にPR出しました ）

完 ~まとめ~

Flare-JSでブラウザでも表示できることが確認できました。Flareの公式で1.0.0のリンクがだされていましたが、CanvasKitも絶賛開発中でFlare-JSもそれに追従している？感じが見受けられ、現状まだ安定版ではないのかなと思いました。しかし、近い将来安定版出た際には、アニメーション実装の選択肢として検討してみてもいいかなと思いました！

明日は、 @giiiita さんのPoiboyで使用しているFirebaseの機能紹介と事例ついでにおまけです！お楽しみに！ノシ

1. https://skia.org/user/modules/canvaskit ↩

2. https://skia.org/user/build ↩

3. https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm ↩

4. http://kripken.github.io/emscripten-site/index.html ↩