カブトムシの壺

消しゴム付き鉛筆

Lottieをお仕事のアプリに入れた時に考えたこと

最近、実際の仕事のAndroidのアプリにLottieを導入してアニメーションを入れてます。 Lottieを導入する時にチームに「Lottieをやりたい!」ということを伝えるために、issueに書いたのですが、公開します。


Lottieやりたい

目次

  • 概要
  • メリット・デメリットは?
  • サイズは?
  • どういう課題を解決する?
  • 類似ライブラリと比較すると?
  • コード、仕様がシンプル?
  • メンテナンスされている?

Lottie

Lottie

概要

  • Lottieは、Adobe After Effectsで作ったアニメーションを様々なプラットフォーム(web/ iOS / Android...)上で動かすためのライブラリ

  • Lottieを使って、ネイティブのプラットフォームにアニメーションを組み込む開発の流れとしては、以下のようになる。


メリット・デメリット

メリット

  • 静的な画像を利用するのと同じくらいの手間でアニメーションを実装できる。
  • jsonファイルさえあれば、アニメーションを実装できる。そのため、アニメーションの速度のチューニングなどをデザイナーさんに任せることができる。

デメリット

  • アニメーションさせたいものはjsonファイルをアプリが持つ必要がある。そのため、今後アニメーション対象が増え、jsonファイルが増えると、その分、アプリサイズが大きくなる(*1)。
  • AfterEffectsで追加した表現でサポートしていないものを動かそうとすると、クラッシュする。対応してない表現は使えない(*2)。

サイズ

どういう課題を解決するのか

  • 今まで、エンジニアが速度のチューニングや大きさの調整などを行なってアニメーションさせるところを、デザイナーさんに任せることができる。エンジニアはもらったファイルを挿入するだけになる。エンジニアとデザイナー間でフィードバックを受けて修正という工程をなんども繰り返す手間が減る。

類似ライブラリとの比較

Keyframes

  • Facebook
  • 機能は同じ
  • ドキュメントが少ない。。。
  • Lottieと比べると更新頻度が少ない。(最終リリースは2017/6)

Squall

  • 作ったのはmarcus_eckertさん
  • 機能は同じだけど、iOSのみの対応

コード、仕様がシンプルか

  • ImageViewを置き換えるように使えます。

Before

<ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawble/your_drawable" />

After

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        app:lottie_fileName="your_animation.json" />
  • バインドしてanimationView.playAnimation()でアニメーションを動かすことができます。

メンテナンスされているか

  • 更新頻度、アップデートサイクルは高めです。月1くらいでマイナーアップデートされている。

*1 : ボタンのような1部品のアニメーションであれば、1ファイル10~30kb程度だが、サンプルサイトにあるような画面全体を使うようなアニメーションだと、200kb程度あるものも存在した。)

*2 : 対応表はこれです。 http://airbnb.io/lottie/supported-features.html#

(参考) http://airbnb.io/lottie/ https://github.com/airbnb/lottie-android https://ferret-plus.com/6214 https://airbnb.design/introducing-lottie/ http://tech.starttoday-tech.com/entry/swift-lottie https://inside.pixiv.blog/matsurai/3138

Gemfileって何だっけ?ってなった時に読む個人的メモ

Gemfile

  • 依存するgemの取得先が書いてある

Gemfile.lock

  • bundleで自動で生成される

  • 依存gemのバージョンと取得先が記録される

    • なぜGemfileと.lockファイルという二つのものが存在するのか?
    • 開発環境と本番環境で同じgemをインストールするため

リンク

http://normalse.hatenablog.jp/entry/2015/11/14/135835 https://qiita.com/tnoda_/items/a04e761d595a742fcdca

メモ

  • gem はJavaでいうところのライブラリ
  • Bundler はGemの種類やバージョンの管理をしてみんなの環境で同じにするためのやつ
  • いつもやってる bundle install というのは Bundlerを使ってGemをインストールするコマンド
  • ベースとなるところで、Gemfileを基にbundle installしてGemfile.lockファイルを作って、それをみんなに配布して、配布された側はそのGemfile.lockを基にbundle installすればハッピーハッピーになれる。って感じらしい。

Ruby全然分からないので、ツッコミ大歓迎です。

React Native でシンプルにリストを表示する

 

React Nativeでリストってどう作るんだっけ、とちょっと忘れかけていたので、作った。

 

sandbox/react-list-lesson at master · ujikawa/sandbox · GitHub

 

この辺のコードを参考にしている。

github.com

 

あと、JavaScriptとReact周りの知識が全くと言っていいほどないので分からない時は下の本を読みながら進めている。

 

 

 

 

最近、2日に1回は小さいアプリだけどとりあえず動くものを1つgithubに載せるようにしてみている。少しずつテンポが出てきて良い感じ。

React Navigationで画面遷移させた

React Nativeで画面遷移させたかったので、React Navigationを使いました。

 

reactnavigation.org

 

書いたコードはこれです。

sandbox/react-navigation-lesson at master · ujikawa/sandbox · GitHub


React Native、基本的に動くコードを書くのは辛くない。どちらかと言えばちゃんとeslintに従って綺麗に書く方が辛いんだな、ということが分かってきた。なので、実はサンプルでは「propのvalidationしているか」のルールをちゃっかり無視している。

 

出来るだけeslintに対応するけど、個人で作っているので、なんかテンポが悪いなぁと思ったら一旦無視して、あとで知識がついて直せるようになったら直していこうと思う。

ちゃんとしたtodo管理なんてどうせ毎日続かないから、付箋に書いておくとかくらい簡単にした方が良い

 

「あれ、昨日何してたんだっけ、、、あー思い出したりするの時間勿体ないな。よし。明日から帰る前にtodoリストを作って、スケジュールに自分のやることも書いてしっかりタスク管理していくぞ!!」

 

その2日後の帰る前

 

「あぁ、今日はなんか疲れたな。明日のtodoは明日の朝書くか。」

 

その1日後の帰る前

 

「あ、書くの忘れてたわ」

 

みたいなループを僕は社会人になったときから繰り返していて、いい加減、継続的にやった方が良いよなと思って、その辺のタスク管理についてどうしてます?っていうことを先輩に話したところ、「帰る前に付箋にやること貼っておく、とかで良いんじゃない?」と助言を貰った。

 

先輩の意見を真に受けて良かったことしかないので、素直に守って続けた。やってることは本当に簡単で、付箋とぺんを机の見える場所に置いておいて、帰るときにシュッと5秒くらいで明日やることを書いておくだけだ。これだと、「あ、忘れてた」とか「しんどいから」とかそういうものが発生しないのが良いポイント。

 

本当にとっても簡単なので、なんと2ヶ月以上継続できている。今まで色々な方法を試してきたけど、どれも「忙しくてつい」みたいな理由で継続出来なかったのが初めてちゃんと出来ている。

 

それでいて、今日はいっつも1行書いているところを負担なくもうちょい詳細に3行くらい書けた。本当堂々と言えないほどちっちゃいちっちゃい進化だけど。続けた結果、許容できる量が増えたんだと思う。

 

勝間和代さんもどこかで書いていたけど、習慣付けたいと思うことは歯磨きより簡単でないといけない、というのは割と真理で、まず何かを習慣づけたいと思った時は本当に簡単なことから習慣づける、というステップを踏み、そこからちょいちょい進化させていく、というのが正しいのかもしれない、と思った。

 

あと、突然誰かからメッセージをもらえたりするのも良いです。

 

 

とりあえずLottie使ってサンプルアプリを作った

Lottieをアプリに入れていきたくて、とりあえず簡単にアプリを作ってみた。

というか、この方の記事とコードがとても分かりやすかったので、ほぼほぼこれを見ながら写経したらいけました。

qiita.com

github.com

コードはここにある。 Lottie by ujikawa · Pull Request #14 · ujikawa/sandbox · GitHub

binding.animationView.setOnClickListener(new View.OnClickListener() {
    @Override
        public void onClick(View view) {
            if (clickedFavFlag) {
                binding.animationView.setProgress(0f);
                clickedFavFlag = false;
            } else {
                binding.animationView.playAnimation();
                clickedFavFlag = true;
            }
        }
});

サンプルではbindingしたアニメーションのビューが押されたらplayAnimation()して、アニメーションを再生。

ビューが押された状態のときに押されたら、setProgress()で初期状態に戻す、みたいなことをやっているっぽい。

アニメーションのファイルも、jsonに変換されていて、それを引っ張ってくるだけなので、楽チンだった。

とりあえず実装としては簡単にいけそうなことが分かった。