SwiftUIのハマりどころとその回避策/ iOSDC_otsuka

SwiftUIのハマりどころと
その回避策
株式会社リクルート
⼤塚悠貴
2022/9

View Slide

はじめに
© Recruit Co., Ltd. All Rights Reserved
2

View Slide

3
⾃⼰紹介
⼤塚悠貴 (@moguaiyuki)
所属
経歴
株式会社リクルート
2020年 4⽉株式会社リクルート新卒⼊社
2020年 7⽉ゼクシィiOS開発
2020年 10⽉新規事業プロダクトオーナー
2021年 10⽉ iOS開発

View Slide

4
本トークのゴール
iOS14以上を対象とした『Airインボイス』iOSアプリにおいて
SwiftUIを⽤いてさまざまな要件を実現するにあたり、
はまったポイントやそれらをどのように回避したか
を共有することで
SwiftUIの採⽤の⼀助となる

View Slide

『Airインボイス』とは
5

View Slide

Airインボイスとは
6
リクルートの事業内容について（主なサービス）
4
選択・意思決定を⽀援する情報サービスを提供し、
「まだ、ここにない、出会い。より速く、シンプルに、もっと近くに」を実現する
マッチング＆ソリューションSBU HRテクノロジーSBU ⼈材派遣SBU
国内派遣海外派遣

View Slide

https://recruit-holdings.com/files/ir/ir_news/upload/20220712_ps_jp.pdf
リリース⽇変える
Air Business Toolsのいい感じの図持ってきて、
その中のInvoiceって⽴ち位置を説明する
https://recruit-holdings.com/files/ir/ir_news/upload/20220712_ps_jp.pdf

View Slide

8
※①調査主体︓株式会社リクルート②調査実施機関︓株式会社インテージ（2021年11⽉22⽇時点） ③⽐較条件︓銀⾏133⾏(*)の通常時の他⾏宛の
振込⼿数料で⽐較（条件付きの振込⼿数料は考慮せず）
(*)⾦融庁、免許・許可・登録等を受けている業者⼀覧のうち、預⾦取扱等⾦融機関で銀⾏として登録されているもの。外国銀⾏⽀店を除く133⾏

View Slide

9
『Airインボイス』とは

View Slide

『Airインボイス』における
SwiftUI採⽤の背景とその効果
10

View Slide

11
SwiftUI採⽤の背景とその効果
• 新規開発 (既存コードなし)
• SwiftUIが安定してきたiOS14以上をサポート
• 社内でもスタディサプリが既にSwiftUI採⽤済み
SwiftUIの採⽤背景
• UIの実装速度が向上
• レイアウトの記述がシンプル
• コンポーネントの再利⽤が容易
• Previewで⾼速にUI変更確認
• Storyboardやxibと⽐較してレビューが容易
…など、メリットを沢⼭感じることができた
SwiftUI採⽤による効果

View Slide

ハマりどころとその回避策
12
※本スライドはiOS14, 15をサポート対象とする前提のコードとなっています。

View Slide

13
様々な要件
1. DeepLink
2. 1画⾯で複数種類のアラートダイアログ
3. 1画⾯から複数の画⾯へのモーダル遷移
4. カスタムダイアログ / トースト / チュートリアル

View Slide

14
様々な要件
1. DeepLink

View Slide

15
SwiftUIでの基本的なpush遷移
ユーザーがNavigationLinkを
タップすることで遷移
Deep linkのようなプログラム的に遷移する要件には使えない

View Slide

16
プログラムで遷移を制御する
※iOS16以上ではinit(value: label:)を使⽤
空(EmptyView)のNavigationLinkを
Backgroundに仕込む
destinationの値が”pageA”になった時
遷移を発⽕する

View Slide

17
アプリのどこからでも遷移を制御できるようにする
@EnvironmentObjectにViewRouterを格納し、
アプリのどこからでも遷移を制御できるようにする
各画⾯の画⾯遷移を制御するViewRouterをまとめた
ObservableObject
遷移先を定義
viewRouter.firstPageViewRouter.destinationの
値を変更することで遷移を発⽕する

View Slide

18
DeepLinkを実装する
.onOpenURLでURLスキームを
受け取り、ViewRouterを⽤いて
画⾯遷移を発⽕する

View Slide

ハマりポイント①
19

View Slide

20
このコードどこに問題があるでしょうか︖

View Slide

21
NavigationLinkが2つあることが問題
※ iOS15は問題なし

View Slide

22
iOS14&NavigationLink 2つのみの場合挙動が不安定
ページ3まで遷移すると
勝⼿にページ1に戻る
ページ１ページ２ページ３
遷移遷移
※デモ動画

View Slide

23
iOS14系&NavigationLink 2つのみの場合挙動が不安定
遷移直後に勝⼿に戻る問題の報告
NavigationLinkが
２つの場合のみ発⽣
https://developer.apple.com/forums/thread/677333
https://forums.swift.org/t/14-5-beta3-navigationlink-unexpected-pop/45279

View Slide

24
回避策
ダミーのNavigationLinkをいれて
NavigationLinkの数を3つにする

View Slide

ハマりポイント②
25

View Slide

26
特定のボタンがタップされた際に、そのボタンに応じた値を遷移先に渡したい
ボタンがタップされたら
pageAIdを代⼊する
pageAIdがあるときのみ、
NavigationLinkを⽣成する

View Slide

27
NavigationLinkを⽣成した直後に
遷移を発⽕していることが問題

View Slide

28
if letでNavigationLinkが⽣成された直後に遷移すると
遷移アニメーションがなくなる(iOS14&15)
期待動作実際
※デモ動画 ※デモ動画

View Slide

29
回避策?
この遷移を使う時は必ずpageAIdがnon-null
強制アンラップしてみる︖

View Slide

30
回避策?
この遷移を使う時は必ずpageAIdがnon-null
強制アンラップしてみる︖
Viewを⽣成した時点ではnullなのでもちろんダメ

View Slide

31
回避策
destinationの中でif letを使⽤する

View Slide

32
様々な要件
1. DeepLink

View Slide

33
1画⾯で複数種類のアラートダイアログを表出する

View Slide

ハマりポイント③
34

View Slide

35
このコードのどこに問題があるでしょうか︖

View Slide

36
1つのViewに対して複数の.alertを
利⽤していることが問題
※ iOS14 15共に問題あり

View Slide

37
1つのViewに対して1つしか.alertは定義できない
2つ⽬の.alertのみ有効

View Slide

38
2つ⽬のアラートしか表⽰されない
アラート1は表⽰されないアラート2は表⽰される

View Slide

39
回避策
1つの.alertの中で
複数パターン出し分ける
アラートのパターンを定義しておく

View Slide

40
様々な要件
1. DeepLink

View Slide

41
ある画⾯から⼆つの画⾯にモーダル遷移したい

View Slide

ハマりポイント④
42

View Slide

43

View Slide

44
1つのViewに対して
2つの.fullScreenCoverを
利⽤していることが問題
※iOS14.5以上は問題ない

View Slide

45
iOS14.5未満では.fullScreenCoverは
1つのViewに対して2つ使えない
ページ1に遷移しないページ2には遷移する

View Slide

46
回避策(?)
1つのEmptyViewに対して1つの
.fullScreenCoverを定義する

View Slide

47
iOS14(iOS14.5含む)で正常に動作する
ページ1に遷移ページ2に遷移

View Slide

48
iOS15でどちらも動かない
ページ1に遷移しないページ2に遷移しない

View Slide

49
苦⾁の回避策
iOS14.5未満かどうかで
実装を変更
条件によってmodifierを適⽤する
modifier

View Slide

50
様々な要件
1. DeepLink

View Slide

51
TabViewやNavigationViewを含む
全画⾯に対してカスタムUIを被せる

View Slide

ハマりポイント⑤
52

View Slide

53
NavigationViewやTabViewの⼦Viewに対して
カスタムダイアログを表⽰すると全画⾯に被さらない
⼦Viewでダイアログを
管理する

View Slide

54
NavigationViewに対してカスタムダイアログを表⽰すれば
実現可能だが、ダイアログ等は各タブや遷移先で管理したい
NavigationViewに対して
カスタムダイアログを宣⾔する
TabViewA内でshowDialog変数を
Trueにしてダイアログを表⽰する

View Slide

55
UIWindowを活⽤する
全画⾯に表⽰したいカスタムUIは全て
UIWindowを⽤いて実装

View Slide

56
UIWindowを活⽤する
どのViewからでも全画⾯の
ダイアログが表⽰可能

View Slide

57
UIWindowを利⽤することで、カスタムダイアログ
の上にさらにチュートリアルを出すことも
チュートリアルとカスタムダイアログを別々の
Windowで管理しているため、簡単に実現可能

View Slide

まとめ
58

View Slide

59
まとめ
①iOS14系のNavigationLinkの挙動には気をつける
②If let でNavigationLinkは⽣成しない
③.alertは1つのViewに対して1つのみ
④.fullScreenCoverはiOS14.5未満に対しては1つのViewに1つのみ
⑤全画⾯にまたがるカスタムダイアログ等はUIWindowの活⽤も⼀つの選択肢
ハマりポイント

View Slide

60
まとめ
UIの実装速度が向上
l レイアウトの記述がシンプル
l コンポーネントの再利⽤が容易
l Previewで⾼速にUI変更確認
l Storyboardやxibと⽐較してレビューが容易
….など、メリットを沢⼭感じることができた
SwiftUIはハマりポイントもあったが、総じて採⽤してよかった
採⽤してよかった理由

View Slide

SwiftUIのハマりどころとその回避策/ iOSDC_otsuka

SwiftUIのハマりどころとその回避策/ iOSDC_otsuka

Recruit
PRO

More Decks by Recruit

Other Decks in Technology

Featured

Transcript

SwiftUIのハマりどころとその回避策/ iOSDC_otsuka

SwiftUIのハマりどころとその回避策/ iOSDC_otsuka

Recruit PRO

More Decks by Recruit

Other Decks in Technology

Featured

Transcript

Recruit
PRO