同じ様なUIをiOS/Android間で合わせるヒント

同じ様なUIをiOS/Android間で合わせるヒント Fumiya Sakai 意外にも業務や個人開発の中でも役に立ったTIPSを簡単にご紹介 (第1版) 2023/12/14: 2023モバイルアプリ開発LT大会 @ AppBrew様 (第2版)
2023/12/20: Swift愛好会#78 @ ジーズアカデミー様

自己紹介・Fumiya Sakai ・Mobile Application 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

今年のiOSDCはスポンサーセッション登壇＆原稿2本

iOSのUI実装本を執筆しています！書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。少しの工夫で実現できるTIPS集やライブラリ表現の活用集をはじめとした、iOSアプリ開発の中でも特にUI実装やUIKitを利用した画面の中で特徴を与える様な表現という題材に焦点を当てた書籍となっております。現在は電子書籍版のみとなります。こちらは全て¥1,000となっております。 https://just1factory.booth.pm/ 概要: https://book-tech.com/
価格: 📖 Booth 📖 Book Tech

UI実装であると嬉しいレシピブックの最新情報 UI実装であると嬉しいレシピブックVol.3として昨年10月に商業化しました！ Still WIP これまでの同人誌として頒布したものに加えて、Vol.1及びVol.2に頒布したものの中で書籍に載せきれなかったものや表現や動きが特徴的でユーザーにもほんの少し遊び心を与える様なUI実装を紹介したものをVol.3としています。概要: これからの構想: こちらで購入可能です:
Amazon / Google Play / Apple Books / KINOKUNIYA / Rakuten BOOKS etc.. 🏊 iOS: SwiftUIを利用したUI実装や動画関連の実装 🏊 Android: Jetpack Composeの基本やその他気になるUI表現の考察

今回は両方のOSで類似した実装をする際のお話しです画面実装の実例を元にしてiOS/Android両方を効率良く進めるための観点紹介総括的な感じの事例紹介となってしまいますが、今後のヒントになれば嬉しく思います。 1. 言語やプラットフォームの違いを理解しながら実装を進める：今回の事例では、iOS/Androidアプリでの画面実装を考えてみます。もちろんSwiftとKotlinを利用したネイティブ開発なので大きな違いはあれども、その中から共通点や相違点を探る姿勢がまずは大切だと感じています。 2. 共通点や相違点を見極めながら進めていくと理解が深まる：まずは共通点や相違点を見比べてながらコードを読み進めていくと「考え方のヒント」を見出せる様になると思います。
（iOSで言う所の•••はAndroidでは▲▲▲になるので、こんな感じになるかなという気付きを大切にする） 3. 業務経験に加えてDroidKaigi等へのContributionも絶好の機会：今年はDroidKaigi2023公式アプリ（iOS側）に対して主にUI実装関連部分へContributionをする事ができました。共通ロジック部分はKMP製でありましたが、先行していたAndroidの実装をヒントにiOSの実装に取り組む経験をしました。

この様な画面実装を題材として処理を考えてみます検索結果画面表示の中に広告作品を一定の規則性を持たせて表示する場合検索結果 … 広告結果 … この画面での表示規則: 検索結果表示内に広告がミックスされた形になる。 1.検索結果は4行2列で並ぶ
2.広告結果は1行2列で並ぶ必ず規則が担保できるか？ 1ページあたりの最大数: 1.検索結果は32件表示 2.広告結果は8件表示 ① 検索結果32件/広告結果5件: (1)広告結果<検索結果÷4 or (2)広告結果+検索結果=(奇数) の場合 ② 検索結果9件/広告結果3件: UICollectionViewやRecyclerViewのでの並び順を実現する際に綺麗に見せるための調整が必要になる場合もある。検索結果画面は表示処理時にページネーションを伴う場合が多い。 1.ページの終端に到達した場合 2.検索結果は少ないが広告結果が多く取得できた場合実装時に考慮したいポイントと考え方: Array<T>やList<T>で表示対象データを調整しやすい形にしたい iOSのDiffableDataSourceを組み立てる様にAndroid側も整えたい

表示対象のDataSourceに対する処理方針を決定する検索結果と広告結果を上手に分割＆マージをして調節する処理がポイント Cell要素 or ViewHolder要素1つ分に表示したいデータを準備する際の考え方： (1) 現在検索結果に表示される作品が広告結果を含めて奇数個の場合には、検索結果作品を1つ埋める処理をして、できるだけ広告結果が1行2列に並ぶ配慮をする条件に合致した場合は、Nページ当たりの検索結果を格納する配列から先頭要素を取得＆削除を実行し、その要素を並べ替え結果を格納する配列の先頭に追加する。
(2) 1行2列広告作品、その次に4行2列検索結果作品、以降繰り返しとなる様に対象データを分割する 1.検索結果配列:[[検索結果8個分], [検索結果8個分], ... ] 2.広告結果配列:[[広告結果2個分], [広告結果2個分], ... ] 3.1.＆2.で求めた結果でchunkedした組の個数が多い方を全体のLoop処理回数に設定する (3) 最大Loop回数の1行2列広告作品、その次に4行2列検索結果作品を追加するための処理を実行する

題意を満たす並び順を実現する処理部分の抜粋取得できたデータに対してchunk処理を利用した後に表示データへ変換する chunkedSearchProductsGroup .getOrNull(loopIndex)?.let { … 追加処理 … } (Kotlin)
chunked(size: Int): https://kotlinlang.org/api/latest/jvm/ stdlib/kotlin.collections/chunked.html Kotlinの場合は下記の様になる: Swift ⇔ Kotlin内で内部処理ロジックを読み替えられそうな余地を探す chunk処理がこの表示をするポイント: (Swift) chunks(ofCount: Int): Array要素を指定個数のかたまり分割する

iOSのDiffableDataSourceに似た感じ？に扱えるOSS Section表示をするためのデータを作成して適用する形は似ている Groupie: https://github.com/lisawray/groupie https://github.com/airbnb/epoxy Epoxy：当時はUICollectionViewCompositionalLayout & DiffableDataSource利用時の実装と見比べながらインプットしました

Paging3やOnScrollListenerを利用したPaginationの例 AndroidではPaging3利用 or OnScrollListenerを応用する方針を取る OnScrollListener スクロールの最下部へ到達した際に次のデータを読み込む処理を実行。 Paging3を理解するための資料集: iOS(UIKit想定時):
実践Paging 3: https://speakerdeck.com/ticktaku77/shi-jian-paging-3 Flow APIとPaging3を考える際のポイント例: https://github.com/zivkesten/Paging-with-Flow-sample-app スクロール変化や該当Cell出現をキャッチする - UIScrollViewDelegate - UITableViewDelegate / UICollectionViewDelegate func scrollViewDidScroll(_ scrollView: UIScrollView) func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)

Shared Element Transitionを利用した画面遷移の例画面遷移元と遷移先のxmlに同じtransitionNameを指定しIntentを発行する方針一覧用View画面詳細用View画面 transitionName = robot transitionName
= robot 画面遷移時のIntent発行タイミングで文字列を引き渡す ① .makeSceneTransitionAnimationを利用する点がポイント ② Animation対象の要素についてはPair.createで複数指定可 ※下記はActivityのxmlを指定している場合のコードです

動画プレイヤーアプリでBackground再生を実現する例端末に依存しやすい機能については「違いを見極める」アプローチをする Qiita: https://qiita.com/fumiyasac@github/items/2f698d6c330530338826

DroidKaigi2023で実施したTOP画面表示のカスタマイズ SwiftUIではNestedScrollViewの様な挙動を実現する際に少し苦労しました GitHub: https://github.com/fumiyasac/LikeCoodinatorLayoutExample

これまでのiOS/Android関連の登壇資料＆記事紹介 Androidアプリ開発を始めた頃にまとめたものですが今も役立っています僕が業務で初めてAndroidアプリ開発に着手して2ヶ月程経過した中での振り返り: https://note.com/fumiyasac/n/nec1c3c80f12d Androidアプリ開発やFlutterの基礎学習をノートと一緒に振り返る: https://note.com/fumiyasac/n/n0acb2bd76b64 Qiita記事パンフ原稿登壇資料 note記事
note記事 Androidアプリでバックグラウンド再生機能を実現するためのヒントとiOSアプリとの見比べた際の特徴を簡単にまとめてみた: https://qiita.com/fumiyasac@github/items/2f698d6c330530338826 円滑なUI＆機能実装やデザイナーとの共同作業を進めるために心がけてきた事: https://github.com/fumiyasac/iosdc2021_pamphlet_manuscript/blob/main/manuscript.md iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント: https://www.slideshare.net/fumiyasakai37/iosui-androidui

まとめ iOS/Androidの両方を実装を見比べて見ると、実はそう遠くない部分もある今後ともメインはiOSに置きながらもAndroidについてもアウトプットができる様に頑張ります。 1. 言語・コンポーネント・アーキテクチャの違い等はあるけど類似点・共通点を探してみる：実装のイメージが類似している場合には実装方針を見抜くチャンスと捉える様にしています。個人的にはこれまでの経験の中から「実装のテイストが似ている部分」を見つけ出す様にするために、現在は両方進んでコードを読む様にしています。 2. iOS/Android間で明らかに考え方が異なる部分は念入りに仕様調査をする：以前の業務でも苦戦した部分はDIコンテナ関連処理と動画再生関連部分でした。両方進んでコードを読み進めていく際に、考え
方が大きく異なる部分については、サンプル実装をしているOSS等をヒントに基本理解を進める様にしています。 3. 業務で活用しているGraphQLの利用も個人的には大きな後押しになっている： GraphQLやApolloを業務内で活用している事に加えて、最近では積極的にRailsコードも読む機会が増えました。サーバーとの通信部分等を一緒に考える余地を増やしていく様にする事で、より生産性を高めてスピードアップにも繋がると考えています。

Thank you for listening !

同じ様なUIをiOS/Android間で合わせるヒント

同じ様なUIをiOS/Android間で合わせるヒント

Fumiya Sakai

More Decks by Fumiya Sakai

Other Decks in Technology

Featured

Transcript