15
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DiverseAdvent Calendar 2018

Day 19

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

Last updated at Posted at 2018-12-18

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

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

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

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

序章 ~Flareとの出会い~

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

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

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

スクリーンショット 2018-12-12 18.59.31.png

:thinking:

「もしやWebフロントエンドでも使えるのでは?:open_mouth:

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

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

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

スクリーンショット 2018-12-12 19.11.58.png

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

早速READMEを読んでみると、

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

要約すると、

example/example.htmlexample/example.js をみて参考にしてね!

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

スクリーンショット 2018-12-12 19.27.49.png

:innocent:

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

これで再度トライ!

スクリーンショット 2018-12-13 13.15.56.png

:innocent: :innocent:

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が活発になるよ!

なるほど :thinking:

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

スクリーンショット 2018-12-13 14.36.04.png

:innocent: :innocent: :innocent:

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

第2章 ~CanvasKitのビルド~

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

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

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

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

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

python tools/git-sync-deps

2. Emscriptenのインストール3

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

※ビルドに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

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

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

最終章 ~リベンジ~

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

スクリーンショット 2018-12-13 15.15.05.png

:innocent: :innocent: :innocent: :innocent:

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

なので、setMatrixconcatに書き換えて再度チャレンジ!(本家にPR出しました :muscle:

spaceman.gif

:raised_hands: :raised_hands: :raised_hands: :raised_hands: :raised_hands:

完 ~まとめ~

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

明日は、 @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

15
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?