カブトムシの壺

消しゴム付き鉛筆

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に変換されていて、それを引っ張ってくるだけなので、楽チンだった。

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

SharedElementTransition -ActivityからActivityへ-

Activityから別のActivityに遷移する時に、遷移元と遷移先で同じ画像を使っているようであればSharedElementTransitionをさせて画面間の繋がりを持たせることを一回考えても、良いと思います。

f:id:namaninotiteti1026:20180416222604g:plain

SharedElementTransitionさせる

  • 方法は、とても簡単です。例えば、ある画面(MainActivity)の画像をタップし、違う画面(NextActivity)に遷移する場面を考えます。元のコードはこちらです。

遷移元(MainActivity)

  • 遷移元の画面から。まずSharedElementTransitionをしないで遷移するコードはこうなっています。

MainActivity.java

binding.baby.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        final Intent intent = new Intent(MainActivity.this, NextActivity.class);
        startActivity(intent);
    }
});
  • SharedElementTransitionをさせたい場合、こうなります。

MainActivity.java

final Activity activity = this;

binding.baby.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Intent intent = new Intent(MainActivity.this, NextActivity.class);
                final ActivityOptionsCompat options = ActivityOptionsCompat
                        .makeSceneTransitionAnimation(activity, binding.baby, "shared_element_image");

                startActivity(intent, options.toBundle());
            }
        });
  • ポイントは2つです。
    • (1) ActivityOptionsCompat.makeSceneTransitionAnimation(activity, binding.baby, "shared_element_image");

      • makeSceneTransitionAnimationの第二引数に遷移元の画像のViewを。第三引数には共有要素の名前を付与します。
    • (2) startActivity(intent, options.toBundle());

      • startActivity()の第二引数に先ほど作ったoptionをBundle型に変換したものを入れます。

遷移先(NextActivity)

  • 次は遷移先の画面です。まず、遷移元の画像と紐づけるために以下のコードを書きます。どこでも良いのですが、実際だと画像をGlideで差し込む場所の近くとかが良いと思います。

NextActivity

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     binding.baby.setTransitionName("shared_element_image");
}
  • これで作品詳細からギャラリー画面に遷移する時のSharedElementTrantisionが出来ました。

One more thing...

  • ただ、これだと、ギャラリー画面でバックボタンを押して作品詳細画面に戻るときはSharedElementTrantisionになっていません。なので、実装します。

  • 方法はとても簡単で、遷移先のActivityでバックボタンを押されたときの挙動として以下を追加するだけです。

@Override
public void onBackPressed() {
    ActivityCompat.finishAfterTransition(this);
}

ハマりポイント : 遷移元と遷移先の画像について

  • 実は、今仕事で開発しているアプリに上記のSharedElementTransitionを追加しようとしているのですが、個人的にハマったポイントを2つ紹介します。

画像の要素を遷移元と遷移先で合わせる

  • 例えば、遷移元が"画像に枠線を装飾したもの"であれば、遷移先も"画像に枠線を装飾したもの"にします。枠線の太さも合わせます。

  • しかし、画像の大きさは異なっていて、大丈夫です。アニメーションが良い感じにしてくれます。

画像に対してライブラリは使わない方が良い

  • 使うと、不自然な挙動になりました。
    • 例として、仕事で画像を良い感じに角丸にしてくれるライブラリなどを使っているのですが、それを使うと画像が欠けたような遷移になりました。

まとめ

  • ActivityからActivityへのSharedElementTransition自体は簡単なので、とりあえず入れてみて、あとは試しながら調整してみれば良いと思います。

参考にさせて頂いたサイト

雑すぎて伝わらないFirebaseAnalyticsのメモ

Firebase

Firebaseって何?

調べて分かったこと

  • Googleが運営しているサービス。その名前。
  • カテゴリに当てはめるならBaaS(Backend as a service)
  • 分析、データベース、クラッシュレポートなどの機能が利用できる。

メモ

  • 色々出来すぎて良く分からんけど、BaaSという言葉が自分的にはしっくりきた。

で、その中に Google Analytics for Firebase っていうのがある

調べて分かったこと

メモ

  • なるほど。

モバイルアプリに特化した Google アナリティクス のような位置付けのようです。モバイルアプリのみを分析したい場合は Firebase Analytics、Web ページとモバイルアプリを分析したい場合は Google アナリティクス、と言うように使い分けることが推奨されています。

https://dev.classmethod.jp/smartphone/firebase-analytics-getting-started/

ざっと、何ができるの?

  • ユーザーのアプリの使用状況とか行動データを収集できる。
  • 収集できるデータは大きく2つ。
    • イベント:ユーザーの操作、システムイベント、エラーなど、アプリでの動作
    • ユーザープロパティ : 言語設定や地理的位置など、ユーザベースのセグメントを記述するために定義する属性
  • どういうクラス名かとかはここに書いてある。 https://firebase.google.com/docs/reference/android/com/google/firebase/analytics/package-summary

メモ

paramって何...?

eventについて

  • 1イベントには最大25個のパラメータまで
  • event数は最大500まで(異なる名前のeventの数)
  • event名は40文字以内、alphabetで始めること
  • 接頭辞に "firebase" , "google", "ga_" は使えない

default設定について

参考リンク

すなあそび


そろそろ、上半期の目標を達成するために、React Nativeのアプリをちゃんと作らんと、と思って細々とやり始めた。

 

一応ログを残しておこうと思って、sandboxというリポジトリ作ってそこに書いてってる。完全に自分しか使わないけど、issueとかPRとか。メモ代わりに使ってる。

 

やっとこeslintの対応が終わったので、明日から少しずつ開発していこうと思う。