カブトムシのつぼ

茹で蛙防止!

Android 8.0.0のEditTextをタップすると view.getBoundsOnScreen() でNPE

Android 8.0.0でEditTextをタップした時にクラッシュしていた。

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.view.View.getBoundsOnScreen(android.graphics.Rect)' on a null object reference
       at android.app.assist.AssistStructure$WindowNode.<init>(AssistStructure.java:484)
       at android.app.assist.AssistStructure.<init>(AssistStructure.java:1908)
       at android.app.ActivityThread.handleRequestAssistContextExtras(ActivityThread.java:3038)
       at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1810)
       at android.os.Handler.dispatchMessage(Handler.java:105)
       at android.os.Looper.loop(Looper.java:164)
       at android.app.ActivityThread.main(ActivityThread.java:6565)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

これはOS8.0.0で起こるバグで、OS8.0.1にアップデートすれば治るとのこと。原因はAutofillまわりで、qiitaには以下のようにAutofill自体をしないようにしてクラッシュさせない方法があがっていた。

(qiitaから引用しました)

<style name="MyTheme" parent="@style/Nanika">
  ...
  <item name="editTextStyle">@style/EditTextStyle</item>
  ...
</style>

<style name="EditTextStyle" parent="@style/Widget.AppCompat.EditText">
  <item name="android:importantForAutofill" tools:ignore="NewApi">noExcludeDescendants</item>
</style>

ただ、これだとAutofill自体が効かなくなってしまう。なので、issuetrackerにあがっていたもう一つの方法を試してみたらクラッシュしなくなった。

というのも、このクラッシュは以下のようにTextInputLayoutの子要素にEditTextがあり、その中でhintを使っている時に起こるようだった。そのhintを親のTextInputLayoutに移せばクラッシュは起きなくなった。

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.design.widget.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/hint" />
            </android.support.design.widget.TextInputLayout>

原因が結局モヤっとしているのだけど、OS8.0.0の全端末でこの事象が起きる訳ではなく一部の端末で起きていて、しかもOSのアップデートで治るのなら根深いんだろうな、と思ってそれ以上は深く掘って調べてない。

Android 8 (Oreo) の EditText をタップするとクラッシュする - Qiita Android O Preview 3 AssistStructure View.getBoundsOnScreen NPE [62834931] - Visible to Public - Issue Tracker

「理科系の作文技術」を読んだ

 

 「理科系の作文技術」を読んだ。分かりやすい文章を書くために意識すべきことがまとまっていた。例を挙げる。

 

・理系の文章には意見と事実、どちらかしか含まれない

・意見と事実を区別する

・段落の頭にトピック・センテンスを書くように意識する

・逆茂木型にならないようにする

・出来るだけ1文を短く書く

 

 この本に書いてあることを意識して、今後は書くようにしたら良さそうだと思った。

 

 あとは「理系の文章は意見ではなく、事実が中心にあるべきだ」と書いてあって、それが印象に残った。それは、作文技術の話でもあるが、同時に理系を志すもののあるべき姿勢だと感じたからだ。"Shut the fuck up and write some code."という言葉とどこか似ている。

 

 そんな感じです。読書感想はまだ慣れてなくて、オチとかつけられないけど、読んだら、何でも良いから書いた方が定着に繋がりそうなので書いていく、ことにした。良さげな本あれば紹介してください。

 

 

* ブクログも始めました。良かったらフォローしてください。

『理科系の作文技術』のレビュー 木下是雄 (うじ川さん) - ブクログ

React NativeでAndroidのログをterminalで見る

忘れそうなので、書いておく。

 

$ react-native log-android

 

facebook.github.io

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に対応するけど、個人で作っているので、なんかテンポが悪いなぁと思ったら一旦無視して、あとで知識がついて直せるようになったら直していこうと思う。