iOS/Androidで同じUI体験をネイティブで作成する際に気をつけたい落とし穴

11/14に開催された、「Spectrum Tokyo Meetup #15」での登壇資料になります。
https://spctrm.design/jp/events/meetup-15/

iOS/Androidで同じUI体験をネイティブで作成したい場面は、平素の業務内はもちろん、個人開発の機会においても出くわす事は多いと思います。ところが、この様な場合では頻繁に実装難易度を見誤ってしまったり、却って複雑な実装をしてしまったり、標準の動きに比べて違和感が生じたり、... という様な課題に当たってしまう事、あると思います。
本発表では、この様なつらみに対してどの様に向き合い、上手に付き合いながら進めていくかという考え方やアプローチに関するご提案をします。

Transcript

1. iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴 酒井文也（fumy） / GMO PEPABO inc. 2024.11.14 Spectrum Tokyo Meetup #15 1
2. 2 自己紹介 minne事業部　プロダクト開発チーム　シニアエンジニア 2023年 中途入社 酒井 文也 Sakai Fumiya 現在はminneのiOSアプリ開発を中心として携わってお ります。（時々Androidを書いたりBackend側のコードを 読んだり。）毎日が刺激的＆勉強です。 • 実はエンジニアになる前はデザイナーでした。 • 過去にUIKitによる実装解説本を書きました。 • X & GitHub : @fumiyasac
3. 読み方 ジーエムオーペパボ 設立 2003年1月10日 証券コード 3633（東京証券取引所スタンダード市場 ） 売上高(連結) 109億360万円（第22期 2023年1月～2023年12月） 従業員数 442名（2023年12月末時点） もっとおもしろくできる 企業理念 ミッション 人類のアウトプットを増やす
6. 6 本日お話すること 1. 意外とこの様なケースってありませんか？ 2. 実際に出会したややこしいケースをご紹介 3. 落とし穴をうまく回避するために 1. モバイルアプリ開発において難易度を見積もる際に重要な観点を整理 2. iOS/AndroidそれぞれのUI実装観点からの重要性 3. 余談: よく見ると簡単な構成にできそうな例 4. 実装イメージを整理して言葉に直してみる 5. まとめ
7. 1. 意外とこの様なケースって ありませんか？ 7
8. 1. 意外とこの様なケースってありませんか？ 8 他アプリでも見る表 現だが難解かつ複 雑な構造 純正で部品要素が 実は提供されていな かった iOSですぐ進められ たがAndroidで想定 より苦戦した 8 iOS/Androidのネイティブアプリ開発においては、この様な問題が発生する事は珍しくありません。 特に限りなく近い体験を iOS/Android間で考える場合は注意が必要かもしれないです。 💦 一見すると振る舞いは似ているのに方針が大きく違うので慌ててしまう （勿論逆も然り） （自作? or OSS?） （難易度が高い）
9. 1. 意外とこの様なケースってありませんか？ 9 デザインデータの情 報を実際に構築す る際のイメージ 新旧は問わず実現 手段やOSS活用方 法に関する理解 iOS/Android純正 で提供されている部 品に対する理解 9 🤔 ではこの様な状態を少なくするための着眼点は何か？ 相違点・共通点を見抜くための着眼点を発見する場合は、目を向けるべき点が意外に多そうだと感じるかも しれません。（今回例示した物意外のポイントはあると思います）
10. 1. 意外とこの様なケースってありませんか？ 10 まずはiOS/Androidのネイティブアプリ開発において、機能を考える際には対応する UIも共に考 える事が多い。どの様なUI実装を考える場合ガイドラインを確認する。 どの様な場合でも立ち返るべきはガイドライン ガイドラインやiOS/Androidで提供されている部品をカスタマイズする場合はなるべく逸脱しない 様に注意する。魔改造？の様な形は保守面でも結構大変になり易い。 やむを得ずカスタマイズが必要な場合もガイドラインと乖離をなるべく少なく Human Interface Guideline Material Design
11. 2. 実際に出会した ややこしいケースをご紹介 11
12. 2. 実際に出会したややこしいケースをご紹介 12 例1-1. DroidKaigi公式App 純正Componentを活用する ポイント 1: 基本はComponentの組み合わせ UIを構成するための要素は Jetpack Composeを利用 AndroidのUI構築方針: ポイント 2: スクロール変化量を状態に持つ NestedScrollの性質を活用す る事で実現している
13. 2. 実際に出会したややこしいケースをご紹介 13 例1-2. DroidKaigi公式App 要所でカスタマイズが必要 ポイント 1: Componentで提供されない物 Tab要素の動きを近いものに するために工夫が必要 iOSのUI構築方針: ポイント 2: スクロール変化量を取得したい ScrollViewに対してOffset値 を取得できる様にする
14. 2. 実際に出会したややこしいケースをご紹介 14 例2. 複雑なGrid表現例 Platform間の方針相違 ポイント 1: iOSは計算時に工夫が必要 高さやアスペクト比を元にサイ ズ計算をすると楽。 Pinterestの様な感じ: ポイント 2: Androidは結構シンプル StaggeredGridLayoutMana gerにお任せする方針。
15. 2. 実際に出会したややこしいケースをご紹介 15 例3. Swipe切替表現 カスタマイズ余地に注目 ポイント 1: iOSは工夫次第で色々可能 表示要素や位置変化を活用し て表現を組み立てる よく見る表現故の難しさ: ポイント 2: AndroidはComponentの範囲で 細かなデザイン等のカスタマイ ズは結構大変そう
16. 2. 実際に出会したややこしいケースをご紹介 16 例4. 片方ではなかった ... iOSでの方針はどうするか ? 悩ましい点その 1: 汎用的な形で実装する必要がある 多用される事や画面要素の大 元にある場合が多いもの Androidでの事例: 悩ましい点その 2: 自前で作成する工数があるか？ 用意されていない表現を自前 で作成するのは大変 保守性及び拡張性には注意を払う必要があります OSSを利用する？
17. 2. 実際に出会したややこしいケースをご紹介 17 例5. 端末固有機能 Platform間の差異が大きい 特に気をつけたい点その 1: 振る舞いを実現する方針に注意 同様な機能であったとしても考 え方がまるで異なる 動画再生・Push通知等: 特に気をつけたい点その 2: OS準拠機能についての理解 OS準拠機能の違いを理解して 必要事項を把握する
18. 3. 落とし穴を うまく回避するために 18
19. 3. 落とし穴をうまく回避するために デザインから逆算して（できる限り）実装の難易度を正確に見積ると良さそう • 目に見えない情報からイメージを膨らませて実装に繋げる（抽象 👉 具体） Mobile Application Design ❌ ⭕ 🕳 😣 💦 難易度の落とし穴 見積もりが曖昧だと落とし穴に 引っかかりやすくなる ... デザインから読み解く ・実装イメージ ・ハマりそうな点 ・想定する工数 etc… 󰝋
20. 3. 落とし穴をうまく回避するために 1. モバイルアプリ開発において難易度を見積もる際に重要な観点を整理 • UIコンポーネントの複雑さ • プラットフォーム間の差異 • データフローとステート管理 • パフォーマンスへの影響 • API連携とデータ同期 • セキュリティ要件 • アクセシビリティ対応 • ローカライゼーション • テスト容易性 • メンテナンス性と拡張性 デザインから逆算して実装の難易度を正確に見積もる 👉 長期的なプロジェクトの成功や円滑な進行 プロジェクトの内容や事情によっては、本稿で列挙する観点以外でも重要なポイントとなり得る点はある 今回の発表では「UIコンポーネントの複雑さ」や「プラットフォーム間の差異」に焦点を当てた内容ですが、こ の部分は経験による部分も大きい点だと感じています。
21. 3. 落とし穴をうまく回避するために 2. iOS/Androidそれぞれの UI実装観点からの重要性 • コンポーネント単位で見た時の方針選択 • iOS/Android間における考え方の相違点 • カスタムUIコンポーネントの実装 • アニメーションとトランジション • システムUIとの統合 • アプリのライフサイクルの違い アジャイル開発の観点から iOS/Androidでの類似点・相違点を押さえる iOS/Android両方のUIガイドライン、レイアウトエンジン、ナビゲーションパターンなどの違いを事前に把握し ておくことで、各プラットフォームに応じた開発タスクの見積もりが正確に行う事ができるので、スプリント計 画の精度が向上するのでリソースの最適配分が可能になります。 1. 各プラットフォームのガイドラインやベストプラクティスにできるだけ従う 2. 同じ機能でもプラットフォームによって実装アプローチが異なる場合がある点に注意する 3. ユーザー体験を損なわないよう、各プラットフォームの特性を理解した上で設計・実装する
22. 3. 落とし穴をうまく回避するために 22 3. 余談 宣言的UIを利用した考え方 ポイント 1: シンプルな形で見方を変えてみる Section構造の工夫によって 実現しやすい形に整える 実現しやすい方法の模索: ポイント 2: 選択する方針選びが鍵になる 旧来のView構造を選択すると 却って難しいかも...???
23. 4. 実装イメージを整理して 言葉に直してみる 23
24. 4. 実装イメージを整理して言葉に直してみる 24 UI構造を紐解くノート No.1
25. 4. 実装イメージを整理して言葉に直してみる 25 UI構造を紐解くノート No.2
26. 5. まとめ 26
27. まとめ＆告知事項 27 • 一見すると簡単そうに見えても実はそうでもない事は沢山ある。 • iOS/Android間の共通点や相違点を押さえておく事が大切。 • 苦戦しやすい事例を知り自分なりの回答を持つ様にすると良い。 • まずはデザインから逆算して難易度を見積もるアプローチを。 • 実装イメージに対する自分の考えをまとめるのも良いかも？ 本発表のまとめ 実装経験から得られる気付きや目に見えないインフォメーションを大切に
28. まとめ＆告知事項 28 • 円滑なUI＆機能実装やデザイナーとの共同作業を進めるために心がけてきた事 • 🗒 PDF版はこちら / GitHub公開版はこちら • iOSエンジニアがAndroid・Kotlinでの開発を加速させた3年間の実践テクニック • 🗒 スライドはこちら • Androidアプリでバックグラウンド再生機能を実現するためのヒントと iOSアプリとの見比べ た際の特徴を簡単にまとめてみた • 🗒 過去に執筆したQiitaはこちら • Footprints about Contribution of DroidKaigi 2023 • 🗒 スライドはこちら 参考資料など
29. 29 GMOペパボでの取り組み＆アウトプット紹介 Pepabo Tech Portal ペパボHRブログ ペパボ研究所
30. 30 Thank You! Thank You!