potatotips #73での登壇資料になります。 https://potatotips.connpass.com/event/202810/ 近況のご報告も兼ねて最近Android関連で実践していることや気になっていること、そして実務を通じて実装時にハマってしまった部分のご紹介等を雑多な形ではありますがまとめたものになります。

1. 最近の業務やAndroid関連のインプットと振り返り
potatotips #73 @ オンライン
2021/03/26
Fumiya Sakai

2. 自己紹介
・Fumiya Sakai
・Freelance App Engineer
アカウント:
・Twitter: https://twitter.com/fumiyasac
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
発表者:
・Born on September 21, 1984
これまでの歩み:
Web Designer
2008 ~ 2010
Web Engineer
2012 ~ 2016
App Engineer
2017 ~ Now
iOS / Android / sometimes Flutter

3. iOSのUI実装本を執筆しています！
少しの工夫で実現できるTIPS集 ライブラリ表現の活用集
書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。

4. 過去に技術書典8で電子版だけ頒布した書籍紹介
Vol.1及びVol.2に頒布したものの中で書籍に載せきれなかったものを紹介
第1章: メディアアプリ型のUI
第2章: 構造が複雑な写真表示UI
記事一覧を無限スクロールする様な形のアプリ
UIを一覧/詳細表示を簡素化した実装を紹介。
現在はBoothにて販売中です！ https://booth.pm/ja/items/1835468
¥1,000 -
iOSアプリ開発「UI実装であると嬉しいレシピブック まかない編」
サンプルコード: https://github.com/fumiyasac/meals_ios_ui_recipe_showcase
第3章: Combine + UICollectionViewCompositionalLayout
タイル状のフォトギャラリーや一覧表示型のア
プリUIでライブラリを活用した実装を紹介。
実務でも利用＆考察したもの
特に第1章と第2章の内容に関し
ては、実際に相談されたり、実
装アイデアとして活用する機会
があったものになります。
全てUIKitを利用

5. 新たに技術書典9で電子版だけ頒布した書籍紹介
表現や動きが特徴的でユーザーにもほんの少し遊び心を与える様なUI実装を紹介
現在はBoothにて販売中です！ https://booth.pm/ja/items/2360379
¥1,000 -
iOSアプリ開発「UI実装であると嬉しいレシピブック おもしろ編」
サンプルコード: https://github.com/fumiyasac/meals_2nd_ios_ui_recipe_showcase
実務導入前の検証段階
若干一癖がありそう、ぱっと見
だと実装の方針が立ちにくい感
じに見受けられそうなUI実装や
構造に関して考察しました。
UIKit & SwiftUIを利用
第1章: 面白い表現のフォトギャラリーUI
第2章: 画面ロック機能を利用したUI
UICollectionViewを活用したユニークなレイア
ウト表現と画面遷移カスタマイズ実装を紹介。
第3章: SwiftUI + OSS Libraryの活用
SceneDelegateの機能や端末認証を利用した画
面ロック機能を盛り込んだ実装を紹介。

6. 今回の発表でお話すること
業務の中で気になった部分や調査したことや取り組んでいる内容をPickUp
実務の中でiOS/Android両方の視点を持ちながら考えるようにした事が結構活かせた事もありました。
1. iOS/Androidで実は勝手が違っていた（とはいえ少し似ているかも…）：
ここでは実務の中で起きたハマりポイントの実装事例や基本事項整理のノートまとめの過程の中で気がついた部分をとても簡単
ではありますが何点か事例をご紹介できればと思います。
2. iOS/AndroidでUI実装を比べてみた部分（Android特有の表現）：
Androidアプリ内で良く見かけるUIコンポーネントでToast / BottomSheet / Floating Action Buttonを例に挙げて、もしiOSで
同様な表現を実装しようと考えた場合に、題意を満たす表現をUIライブラリを利用した実装する事を想定して考えてみます。
3. JetpackComposeのβ版に少し触れた際の所感：
2021年2月後半にJetpack Composeがβ版にアップデートされた際に周回遅れながら「Android Dev Challenge Week1」に取り組ん
でみた際に僕自身が感じたことを現在取り組んでいることと照らし合わせてご紹介できればと思います。

7. (1) iOS/Androidで実は勝手が違っていた（とはいえ少し似ているかも…）

8. 最近実装した事例を紹介（URLテキスト関連）
テキストの中にURLがあった場合に押下して該当ページへ進む＆コピー等も可能
スマートフォン対応Webサイト等でよくありがちなテキスト表現
autoLinkの設定だけでは不十分な理由とその例
https://android.gcreate.jp/482/
URLが文字列の中にある場合は正規表現で抽出＆Spannableで押下可能な形にする
上記の方法では、区切り文字問題やChromeカスタムタブ非対応等の特徴が問題になった。
その他アイデア) MarkDownに対応しているのであればそれを活用していく感じでも良さそうです。
android:autoLink=“all" or autoLinkMaskの設定では不十分であった。
https://xxx.jp?id=y
○
△
※ 基本的には平文のテキストの中にURLがある様なケースを想定
URLと文字配置の位置関係によっては正しくならないケースが発生する
今回のケースではこちらの方針を採用
※ コピー等を可能にする設定
android:textIsSelectable="true"

9. 最近実装した事例を紹介（URLテキスト関連）
まずはURL文字列を抽出するためのExtensionを作成する
fun TextView.setUrlClickable(onClickLinkListener: OnClickLinkListener) {
val spannableString = SpannableString(this.text)
var start = 0
var end = 0
val pattern =
Pattern.compile("(https?|ftp|file)://[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]")
val matcher = pattern.matcher(this.text)
while (matcher.find()) {
start = matcher.start()
end = matcher.end()
spannableString.setSpan(
LinkClickableSpan(
url = matcher.group(0) ?: "",
onClickLinkListener = object : OnClickLinkListener {
override fun onClick(url: String) { onClickLinkListener.onClick(url) }
}
),
start, end,
Spanned.SPAN_INCLUSIVE_INCLUSIVE
)
}
this.text = spannableString
this.movementMethod = LinkMovementMethod.getInstance()
}
抽出したURL部分を押下可能にする
URLを抽出するための正規表現
押下時の処理を外部から渡す
class LinkClickableSpan(
private val url: String, private val onClickLinkListener: OnClickLinkListener
) : ClickableSpan() {
override fun onClick(widget: View) { onClickLinkListener.onClick(url) }
}

10. 最近実装した事例を紹介（URLテキスト関連）
次にActivity/Fragment/ViewHolderで反映させる処理＆クリックイベント紐付け
binding.bindingModel = bindingModel
binding.executePendingBindings()
binding.descriptionTextView.setUrlClickable(
onClickLinkListener = object : OnClickLinkListener {
override fun onClick(url: String) { // リンク先のページを開く等の処理 }
}
)
① ライブラリGroupieを利用したViewHolder
fun bind(
bindingModel: XXXBindingModel,
onClickLinkListener: OnClickLinkListener?
) {
binding.bindingModel = bindingModel
binding.executePendingBindings()
binding.descriptionTextView.setUrlClickable(
onClickLinkListener = object : OnClickLinkListener {
override fun onClick(url: String) {
onClickLinkListener?.onClick(url)
}
}
)
}
override fun bind(
viewBinding: ViewXXXBinding,
position: Int
) {
viewBinding.apply {
bindingModel = xxxBindingModel
viewBinding.executePendingBindings()
descriptionTextView.setUrlClickable(
onClickLinkListener = object : OnClickLinkListener {
override fun onClick(url: String) {
onClickLinkListener.onClick(url)
}
}
)
}
}
URLリンク用のSpannableを適用直前に
executePendingBindings()を実行する
この記載を忘れていたり順番を間違え
ていると動作しなかった
② Android純正のViewHolder
※ Activity / Fragmentで利用する場合

11. 最近自分で調べているAndroid課金関連の事をまとめる
例. まずはIn-App Billingに関する下調べをしてみる
まずは基本的な事項を中心にして書き出す
① 書籍やWeb上の情報をもとに基本を整理する
② 流れを理解するために図解などに起こしてみる
③ 矢印で用語やコードの断片に関する説明を加える
自分自身が結構忘れがちだったことやノートを書
く習慣があったのでこのスタイル

12. 最近自分で調べているAndroid課金関連の事をまとめる
例. iOS側のIn-App Purchaseを比べてみてどうかを調べる
アプリ内課金の機能比較・定期購入編:
https://hack.nikkei.com/blog/advent20201202/
iOS課金は少し経験はあるけれども…
iOSとAndroidの課金における名称や用語の比較をす
る際にとても役に立ち本当に勉強になりました。
シーケンス図やプラットフォームとの関係性は異な
るがどこか似ている点はないだろうか…という観点
課金処理周辺の実装に関する基本を理解する
Google PlayのSubscriptionドキュメント:
https://developer.android.com/google/play/
billing/subscriptions?hl=ja

13. (2) iOS/AndroidでUI実装を比べてみた部分（Android特有の表現）

14. iOSとAndroidでのUI表現方針における細かい違い(1)
例1. FAB（Floating Action Button）の実装
公式ガイド＆リファレンス
iOS(UIKit想定時)で類似した表現をするためのライブラリ例
＋ ＋
Floating Action Button
Settings
Taking Picture
Add Articles
Guide:
https://developer.android.com/guide/topics/ui/floating-
action-button?hl=ja
Reference:
https://developer.android.com/reference/com/google/android/
material/floatingactionbutton/FloatingActionButton?hl=ja
Library) Floaty:
https://github.com/kciter/Floaty
大まかな部分は再現できそうではあるが、付随するアニメー
ション表現等にもこだわると意外に大変な予感も。
補足:

15. iOSとAndroidでのUI表現方針における細かい違い(2)
例2. Bottom Sheetの実装
Bottom Sheet
実装時の参考資料
BottomSheetBehaviorを使う:
https://qiita.com/napplecomputer/items/5b3d1225533a59488ac3
[Android] BottomSheetの実装:
https://qiita.com/kurramkurram/items/32b5b208c2ddb6ff4f51
Library) PanModal:
https://github.com/slackhq/PanModal
Library) FloatingPanel:
https://github.com/scenee/FloatingPanel
iOS(UIKit想定時)で類似した表現をするためのライブラリ例
こちらも大まかな部分は再現できるが、指の動きに伴った状
態変化等を考慮するとかなり難易度が上がるケースも。
補足:
iOSではSemiModal
やHalfModalの名
称で呼ばれる。

16. iOSとAndroidでのUI表現方針における細かい違い(3)
例3. Toastの実装
Toast
公式ガイド＆リファレンス
iOS(UIKit想定時)で類似した表現をするためのライブラリ例
Guide:
https://developer.android.com/guide/topics/ui/notifiers/
toasts?hl=ja
Reference:
https://developer.android.com/reference/android/widget/
Toast?hl=ja
Library) Toast-Swift:
https://github.com/scalessec/Toast-Swift
iOSアプリで類似の表現をとるものはあまり多くはないが稀
に見かける程度。
補足:

17. 参考: Material Designを理解する取っ掛かりとして
Componentの名称や構造を押さえてUI実装事例を知る様にする
Material Designに関する基本事項を知っておくと実現したいUI実装に近づき易くなると思う
Material Designを扱うために情報を追うTips
https://qiita.com/ehuthon-kd/items/7fb9b8c88ef6f040a7bf
Material Designを最速で使いこなす
https://note.com/kenichiikeuchi/n/nc697dd8ad639
スマホアプリのUIデザインについて知っておきたいこと
https://qiita.com/takayuki/items/f37ff011aab4d0fc3235
エンジニア主導でAndroidらしさを表現する 〜Green Android版リリースの裏側〜
https://cocoda.design/muttsu623/p/p14ee95eb082d
Material Design Official
https://material.io/components?platform=android
UIデザインや構成するComponentに迷った場合にはここへ立ち返る
iOSとの比較からComponentを適用する

18. (3) JetpackComposeのβ版に少し触れた際の所感

19. JetpackComposeでの実装に実際触れてみる
Android Dev Challengeに取り組んだ方々のサンプル実装を参考にして再現
Android Dev Challenge Week1 :
https://android-developers-jp.googleblog.com/2021/02/android-dev-
challenge-lift-off-with-jetpack-compose.html
僕自身もまだ完璧にキャッチアップを仕切れていないが、実際にコードに触
れてみると、SwiftUIやFlutterでの実装に近い感覚があった。
※まだβ版なので今後も様々な変更等がありそう…
自分が実装を試した時のGithubリポジトリ :
https://github.com/fumiyasac/JetpackComposePractice1
実際に自分が試した実装とお題:
まだWeek1だけなので今後は続きも挑戦します
新しく登場した宣言的にUIを構築する仕組みに触れてみる:

20. JetpackComposeでの実装に実際触れてみる
画面一覧表示に必要なComponentを構築する部分における簡単な概要
List内容表示部分に関する実装:
CardListItem() 要素
CatHeaderItem() 要素
Header表示部分に関する実装:
Columnを利用して2列にテキストを並べる。
paddingやfont等はModifierで調整。
FlutterのWidgetでも「Row / Column」の様に類似した利用のされ方をするWidgetが存在する。
ベース部分はRowを利用して作成し左側には
画像、右にはColumnをベースにしてテキスト
を並べていく（1列目はRowを更に利用）。
paddingやfont等はModifierで調整。

21. JetpackComposeでの実装に実際触れてみる
RecyclerView相当の処理でリスト一覧表示を構築する部分における簡単な概要
@Composable
private fun CatList(
catLists: List<CatEntity>,
navController: NavController
) {
LazyColumn(
modifier = Modifier.fillMaxHeight()
) {
items(
count = catLists.size + 1,
itemContent = { itemIndex ->
// MEMO: index値に応じて異なるComponentを表示する
}
)
}
}
表示に必要なデータリスト
タップ時の画面遷移用
既存のRecyclerView相当の処理をする。
cf. LazyRowは横方向に配置する
SwiftUIやFlutterとも少し似てるな…
例. SwiftUI (LazyVGrid / LazyHGrid)
Headerが必要なことを考慮して+1する
実装に関するポイント:
itemIndex = 0: CatHeaderItem()
itemIndex > 0: CatListItem()
val catEntity = catLists[itemIndex - 1]
CatListItem(
catEntity = catEntity,
onClickItem = {
val detailRoute = …
navController.navigate(
route = detailRoute
)
}
)

22. JetpackComposeでの実装に実際触れてみる
セル要素タップ時の遷移先のサムネイル背景部分の表現に関する実装
Box()を利用した用途の重ね合わせに関する表現:
@Composable
fun CatImageAndName(
catEntity: CatEntity,
onClickContact: () -> Unit
) {
Box(
contentAlignment = Alignment.BottomStart,
) {
CatImageBox(
imageAsset = catEntity.imageAsset,
contentDescription = catEntity.name,
)
CatNameBox(
name = catEntity.name,
onClickContact = onClickContact,
)
}
}
① Box要素を利用して画像と背景を重ねる
② ベースをRow要素で作成しテキストとボタンを配置
おおもとになる部分はBox要素で作成

23. iOS/Androidを業務で両方取り組んでよかったこと
機能開発や設計面の歩調を合わせる観点に加えて円滑に進める点でも良かった
両OSの開発を並行するスタイルを通じて、業務の幅と同時に技術的な関心について徐々に広がりつつある実感。
1. Designer/Engineer/PdMとのCollaboration＆Communication：
チームメンバーと一緒に開発を進めていく中でペア作業を実施したりする場面や、実装の段階でOS間でのUI構造の違いや共通点
にも気がつく事ができエンジニア側からも歩み寄りをする機会も増えたのではないかと感じています。
2. Material DesignやHuman Interface Guidelineへの理解と意識：
類似した表現自体は頑張ればできる（技術的には可能）ではあるが、片方のOSではあまりお目にかからないものであるケースも
あり得るので、その様な場合には再度ガイドラインや参考アプリ事例を調べていくようになった様に感じています。
3. 両OS間の実装における相違点や類似点を踏まえながら設計や実装を組み立てていく：
ビジネスロジック部分等は設計思想や処理のコンテキストをある程度歩調を合わせられる可能性があり得る部分。
例. Domain Driven Development / GraphQL / RxJava (Reactive Programming) / Combine & Coroutine

24. まとめ（感想）
変化の激しさを感じながらも新しい＆知らない事を知る楽しさ
1. 両OS間で同様な表現をしているけど全く異なる＆似ている部分を手がかりにしてみる：
例のテキスト表示の中にリンクURLを付与する例については意外と利用しそうな表現ではあったが大きく勝手が違いました。
他にもプラットフォーム特有処理や感覚が似ていそうな部分が理解の手がかりにできる部分もあった様に思いました。
2. iOS/Android間でUI実装に合わせる場合は特有の表現には気をつけてみる：
Androidでは良く見かける表現やAndroid特有の特徴的なComponentを利用している部分は、必ずしも合わせる事が良いとは限らな
い場合もよくあるので、両OSのガイドラインを見比べたり参考アプリの調査をしっかりとすると良いかと思いました。
他にも何か今回の様なトピックがある程度まとまったタイミングで共有できればと思います。
3. JetpackComposeに関しては引き続き色々と調査していきたい：
最近始めたFlutterやSwiftUIにも通じる部分があったので、その部分が理解の手助けになった場合もありました。
またDroidKaigi2021やAndroidDevChallengeを実践している方のコードに触れてみると実装イメージができる事もありました。

25. Thank you for listening !