概要 Ripple Effectは直訳すると波紋効果です。 マテリアルデザインなどで、UI要素をタップしたときに波紋を表示して視覚的にわかりやすく伝えるためのエフェクトです。 ・UI要素の周りに表示 ・UI要素の内部に表示 独自のアニメーションをxmlで自作することもできますが、今回は標準で用意されているエフェクトのまとめです。 [参考URL] ・カスタム アニメーションの定義 https://developer.android.com/training/material/animations?hl=ja ・RippleDrawable（自作する場合はこちら） https://developer.android.com/reference/android/graphics/drawable/RippleDrawable?hl=ja 標準のRipple Effect ?android:attr/selectableItemBackground 範囲が限定された波紋 ?android:attr/selectableItemBackgroundBorderless ビューの範囲外まで広がる波紋 （注意）どちらもAPI Level 21 (Android 5.0)から使用可能 設置方法 background selectableItemBackgroundBorderlessでUI要素の外まで波紋を表示可能 foreground backgroundでcolorなどを指定していても使用可能 （注意）API Level 23 (Android 6.0)から使用可能 サンプルGIF画像 サンプルはImageViewに表示していますが、タップを許可しているUI要素ならButtonでもLinearLayoutでも可能です。 [1] android:background="?attr/selectableItemBackground" UI要素内にエフェクトを表示 [2] android:foreground="?attr/selectableItemBackground" UI要素内にエフェクトを表示 backgroundも設定可能（android:background="@color/purple_200"） [3] android:background="?attr/selectableItemBackgroundBorderless" UI要素を覆うように円形のエフェクトを表示 こちらのサンプルは上サンプルと同じくlayout_widthが長めなので円も大きめ トップのサンプルのように小さくする場合は画像とUI要素のサイズを近くする [4] android:foreground="?attr/selectableItemBackgroundBorderless" UI要素内にエフェクトを表示 backgroundも設定可能（android:background="@color/purple_200"） foregroundはUI要素内に波紋が収まるので、結果[2]と同一の見た目になる [5] 応用編 タップ領域を広げたいけどエフェクトは内部のUI要素のみに適応 エフェクトを表示したいUI要素に設定すれば、囲んでいる親領域をタップした時も反応してくれる 一応エフェクトを設定したUI要素が複数あっても反応してくれる サンプルXML 上記サンプルのXMLです そのままAndroidStudioにぺたりと貼り付ければテスト可能です <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- [1] --> <ImageView android:id="@+id/test1_image_view" android:layout_width="100dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:background="?attr/selectableItemBackground" android:clickable="true" android:focusable="true" android:orientation="horizontal" android:src="@mipmap/ic_launcher" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!-- [2] --> <ImageView android:id="@+id/test2_image_view" android:layout_width="100dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:background="@color/purple_200" android:clickable="true" android:focusable="true" android:foreground="?attr/selectableItemBackground" android:orientation="horizontal" android:src="@mipmap/ic_launcher" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/test1_image_view" /> <!-- [3] --> <ImageView android:id="@+id/test3_image_view" android:layout_width="100dp" android:layout_height="50dp" android:layout_marginTop="100dp" android:background="?attr/selectableItemBackgroundBorderless" android:clickable="true" android:focusable="true" android:orientation="horizontal" android:src="@mipmap/ic_launcher" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/test2_image_view" /> <!-- [4] --> <ImageView android:id="@+id/test4_image_view" android:layout_width="100dp" android:layout_height="50dp" android:layout_marginTop="100dp" android:background="@color/purple_200" android:clickable="true" android:focusable="true" android:foreground="?attr/selectableItemBackgroundBorderless" android:orientation="horizontal" android:src="@mipmap/ic_launcher" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/test3_image_view" /> <!-- [5] --> <LinearLayout android:layout_width="100dp" android:layout_height="100dp" android:layout_marginTop="50dp" android:background="@color/purple_200" android:clickable="true" android:focusable="true" android:gravity="center" android:orientation="horizontal" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/test4_image_view"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:background="?attr/selectableItemBackgroundBorderless" android:src="@mipmap/ic_launcher" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>

はじめに Flutterで作ったアプリをApp Distributionを使って簡単に実機にテスト配布できたので備忘録をして書きます。 今回はAndroidアプリでの手順です。 APKファイルの準備 コマンド一つで簡単にできました。 flutter build apk --release 少し待っているとDoneとなりました。 ? Building with sound null safety ? Running Gradle task 'assembleRelease'... Running Gradle task 'assembleRelease'... Done 80.7s ✓ Built build/app/outputs/flutter-apk/app-release.apk (20.3MB). 　 出来上がったAPKファイルはbuild/app/outputs/flutter-apk/の中にapp-release.apkという名前で作成されます。 FirebaseのApp Distributionでの手順 メニューからApp Distributionを開いて開始を押します。 　 この画面で先程のAPKファイルをドラッグ＆ドロップします。 　 　 するとテスターの追加画面が出るのでメールアドレスを入力し次へを押します。 　 リリースノートを書いて配布を押すといい感じのアニメーションが出て配布完了になります。 　 スマホでの操作 先程テスターのメールアドレスに届いているメールを開き、Get startedを押します。 その後アカウントにログインして、手順に沿って進めてApp Testerをインストールし、 スマホ側でダウンロードの許可設定をして、ダウンロードすればアプリが使えるようになります。 　 バージョンを更新する際の手順 App DistributionのAPKファイルをアップロードする画面で新しいAPKファイルをドラッグ＆ドロップするだけなのですが、 バージョンの番号などの編集はできませんでした。 APKファイルを作成するときに番号を指定できます。 flutter build apk --release --build-name=1.0.0 --build-number=2 build-nameとbuild-numberを指定して実行してあげれば、反映されます。

はじめに Flutterで作ったアプリをApp Distributionを使って簡単に実機にテスト配布できたので備忘録をして書きます。 今回はAndroidアプリでの手順です。 APKファイルの準備 コマンド一つで簡単にできました。 flutter build apk --release 少し待っているとDoneとなりました。 ? Building with sound null safety ? Running Gradle task 'assembleRelease'... Running Gradle task 'assembleRelease'... Done 80.7s ✓ Built build/app/outputs/flutter-apk/app-release.apk (20.3MB). 　 出来上がったAPKファイルはbuild/app/outputs/flutter-apk/の中にapp-release.apkという名前で作成されます。 FirebaseのApp Distributionでの手順 メニューからApp Distributionを開いて開始を押します。 　 この画面で先程のAPKファイルをドラッグ＆ドロップします。 　 　 するとテスターの追加画面が出るのでメールアドレスを入力し次へを押します。 　 リリースノートを書いて配布を押すといい感じのアニメーションが出て配布完了になります。 　 スマホでの操作 先程テスターのメールアドレスに届いているメールを開き、Get startedを押します。 その後アカウントにログインして、手順に沿って進めてApp Testerをインストールし、 スマホ側でダウンロードの許可設定をして、ダウンロードすればアプリが使えるようになります。 　 バージョンを更新する際の手順 App DistributionのAPKファイルをアップロードする画面で新しいAPKファイルをドラッグ＆ドロップするだけなのですが、 バージョンの番号などの編集はできませんでした。 APKファイルを作成するときに番号を指定できます。 flutter build apk --release --build-name=1.0.0 --build-number=2 build-nameとbuild-numberを指定して実行してあげれば、反映されます。

Android Architecture Componentって？ どうもReoです。 Android Architecture Componentとは、丈夫でテストがしやすく、保守性の高いアプリを作るためのライブラリ群です。 公式の呼び方ではないのですが、それらを用いた設計手法として、MVVMがAndroidだと有名です。 あ！ここ違くね！ってところがあったらコメントとか筆者の（Twitter）で教えてもらいたいです～！ 取り敢えず、公式リファレンスを見てみましょう。 上記の図が、Android Architecture Componentによって作られてアプリの設計図です。 一応、こちらがAndroidの推奨設計とされていますが、当然完全なわけではありません。 状況に応じて適切な設計手法があるものです。 我々が、普段よく使うのはActivityやFragmentですよね。 自分自身もよくやりがちなのが、兎に角一つのActivityやFragmentに全コードを書いちゃうことです。 こうすると、簡単なアプリの場合はいいのですが、凝ったアプリを作った際に、大変なことになります。 例えば、筆者はランニングアプリを数か月前にリリースしたのですが、その際一つのファイルで1000行越えることがありました。 関数で共通化できていなかった部分もありますが、その時の自分は、わーい！1000行越えた～！イケてるアプリ作っちゃってる～！、と優越感に浸ってました。 また、それに関してどやるツイートもしちゃってました。（反省） しかし、修正しようとした時に、該当コードがどこにあるのか？どうやって実装したんだっけ？、そもそもなんでこの書き方したの？？等々自分ですら追えないことがありました。 自分でも追えないコードなんて、他人から見たら解読不可能です。 ここから、筆者はアプリの保守性を意識するようになり、設計について学ばねば！と思うに至りました。 話しを戻します。 上記の図を見ると、色々な役割やリファレンス内には小難しい説明があって良く分からんぁと思っているかなと。 でも、それほど複雑な作りではありません。 要は、分業をしているのです。 リファレンス内では、関心の分離と表現していますね！！ アーキテクチャを現実世界で例えてみる 例えば、みんな大好きお寿司屋さん！ お寿司屋には、板前さんがいてお寿司を握ってくれます。 そして、そのお魚さんはどこから来るのか、、 そう、漁師さんがとってきてくれますよね。 じゃぁ、そのお魚さんは港に水揚げされて、仲卸業者がライバル業者より高い値段で勝ち取る！ そして、それを自分たちのお魚屋さんにもっていき、お寿司屋さんに売るわけです。 他にも、冷凍車で配送する人など、色々な人が関わっています。 では、この漁に出る所からお寿司を握ってお客さんに提供するまでを板前さん一人でやるとしたらどうですかね？ とてつもない労力になりますよね！ 筆者は、一つのFragmentに機能モリモリにして、1000行のコードでどやってましたが、その板前さんの例えをソフトウェアの世界でやっちゃってるようなものです。 一つのActivity/Fragmentが、板前や配送業や卸売業や漁師などの様々な役割を担ってしまうと、キャパオーバーになります。 ソフトウェア的には、メモリ不足・・・ 要は、ソフトウェアの世界でも分業は必要なのです。 その為に、MVVM等のアーキテクチャをアプリに導入するわけです。 さてさて、お寿司屋の例えを無理やりこちらのMVVMの図に当てはめると、 View(Activity/Fragment)はお客さん ViewModelが板前さん Repositoryが、漁師 Modelが、海 こんな感じですかね。（仲卸業者どこいった！笑） 自分自身、自力でMVVM実装したことないので、人によっては、いやこうじゃね？？？って部分があるかと思いますが、無理やり比喩表現したので悪しからず。 そして、大事なのが矢印の方向性にしか依存関係がないということです。 お客さんは、板前さんにお寿司を注文する（つまり依存している） 板前さんは漁師さんに魚を取ってきてもらう。（〃） 漁師さんは、海がないと魚が取れない。（〃） また、データの流れは矢印の逆です。 データを魚だとすると、海から魚が流通してくるということですね。 第二貫までに筆者自身、理解を深めておきます。 このイメージをもってMVVM設計を作っていきましょう。 第二貫に続く・・・