こんなにあった！ゆめみでの iOS 14 対応 / Towards iOS 14 in YUMEMI.inc

Transcript

1. こんなにあった！
   ゆめみでの iOS 14 対応
   【iOSエンジニア向け勉強会】
   アプリ開発に強みを持つ3社がiOS14の開発事情を語る
   株式会社ゆめみ
   林 大地 (Daichi Hayashi)
   Nov. 6, 2020
   

   View Slide

2. iOS 14 までのバッファ無さ過ぎ問題
   2020/09/16: #AppleEvent ! にて…
   Apple 「明日 iOS 14 リリースしますんで。よろしく」
   → ゆめみでも急遽対応が必要に
   

   View Slide

3. そんなゆめみで行った
   iOS 14 対応を本日はご紹介
   

   View Slide

4. そうは言っても…
   案件のコードは見せられないなぁ "
   

   View Slide

5. てことで「iOS 14 対応まとめアプリ」作りました
   • daichikuwa0618/Towards14 という repo です
   • iOS13 と iOS14 というブランチがあります。
   • iOS13: iOS 13 以下で正常動作するブランチ
   • iOS14: iOS 14 に対応させたブランチ
   • PR やコードを見れば一通りの iOS 14 対応が分かるはず
   daichikuwa0618/Towards14
   https://github.com/daichikuwa0618/Towards14
   

   View Slide

6. もくじ
   1
   2
   3
   UIPageControl の仕様が変わった
   4
   デフォルトブラウザを変えるとエラー
   UIStackView の背景色が突然現れた
   backButton 長押しメニューの対応
   5 まとめ
   

   View Slide

7. もくじ
   1
   2
   3
   UIPageControl の仕様が変わった
   4
   デフォルトブラウザを変えるとエラー
   UIStackView の背景色が突然現れた
   backButton 長押しメニューの対応
   6 まとめ
   

   View Slide

8. UIScrollView + UIPageControl の View (iOS 13)
   • スクロールでページネーションする View
   • UIScrollView + UIPageControl によって実現
   • TextField に総ページ数を入力して button を押すと
   入力した総ページ数に変わる
   

   View Slide

9. UIScrollView + UIPageControl の View (iOS 13)
   • スクロールでページネーションする View
   • UIScrollView + UIPageControl によって実現
   • TextField に総ページ数を入力して button を押すと
   入力した総ページ数に変わる
   

   View Slide

10. UIScrollView + UIPageControl の View (iOS 13)
    UIScrollView
    UIPageControl
    • スクロールでページネーションする View
    • UIScrollView + UIPageControl によって実現
    • TextField に総ページ数を入力して button を押すと
    入力した総ページ数に変わる
    

    View Slide

11. UIScrollView + UIPageControl の View (iOS 13)
    • スクロールでページネーションする View
    • UIScrollView + UIPageControl によって実現
    • TextField に総ページ数を入力して button を押すと
    入力した総ページ数に変わる
    UITextField
    UIButton
    

    View Slide

12. 20 ドット表示した時の UIPageControl (iOS 13)
    • TextField に総ページ数を入力して button を押すと
    入力した総ページ数に変わる
    • UIPageControl の左右をタップすることで
    ページ移動することも可能
    • UIPageControl のドット数は画面幅に応じて
    20 ドットくらいは表示可能
    

    View Slide

13. 20 ドット表示した時の UIPageControl (iOS 13)
    • TextField に総ページ数を入力して button を押すと
    入力した総ページ数に変わる
    • UIPageControl の左右をタップすることで
    ページ移動することも可能
    • UIPageControl のドット数は画面幅に応じて
    20 ドットくらいは表示可能
    

    View Slide

14. この View を
    Xcode 12 でビルド
    +
    iOS 14 端末で実行
    すると…
    

    View Slide

15. iOS 14 での 20 ドット表示
    • 多分見にくいので次から静止画で説明します
    • 動作だけ
    • なんか微妙に色々違う…
    iOS 13 iOS 14
    

    View Slide

16. iOS 14 での 20 ドット表示
    • 多分見にくいので次から静止画で説明します
    • 動作だけ
    • なんか微妙に色々違う…
    iOS 13 iOS 14
    

    View Slide

17. 原因: UIPageControl の仕様変更
    WWDC2020: Build with iOS pickers, menus and actions より
    ドットにイメージを割り当てられたりと、色々仕様が変わった
    

    View Slide

18. 相違点 1: 幅とドットの数
    iOS 13
    iOS 14
    • 幅が iOS 14 の方が小さい
    • 半分くらいになっている
    • ドットの数も iOS 14 の方が少ない
    • iOS 13: 20 個
    • iOS 14: 10 個
    

    View Slide

19. 相違点 2: 端の方のドットの大きさ
    iOS 13
    iOS 14
    • iOS 13 では全て同じ大きさ
    • iOS 14 では端につれて小さくなっている
    • 全ドット表示せず、一部だけ表示することで
    “Unlimited pages” を実現している
    

    View Slide

20. 解決法: 今の所無し
    iOS 14 の仕様変更に付き合っていく
    1
    2 UIPageControl を別の表現に変える
    • 工数 0 で修正は不要
    • Human Interface Guidelines (HIG) によれば、
    「10 ドットを超えるとページを一目で数えるのが難しくなり、
    20 ドットを超えると任意のページに辿り着くのが困難になる。
    総ページが 20 を超える可能性がある場合は、
    別の非順次 View (グリッドなど) の使用を検討するべき。」
    UIPageControlContentView の width は変わらなかった #
    

    View Slide

21. もくじ
    1
    2
    3
    UIPageControl の仕様が変わった
    4
    デフォルトブラウザを変えるとエラー
    UIStackView の背景色が突然現れた
    backButton 長押しメニューの対応
    5 まとめ
    

    View Slide

22. iOS 14 からデフォルトブラウザが変えられる
    外部ブラウザは Safari 一択だったのが、 Chrome 等に変更できるようになった
    

    View Slide

23. ボタンを押すと外部ブラウザを開く (iOS 13)
    • ボタンタップで外部ブラウザを開く View
    • 開けない URL の場合はエラーアラートを表示する
    canOpenURL(url) == true canOpenURL(url) == false
    iOS Simulator での動作
    • ブラウザを開く前に開ける URL かチェックしている
    

    View Slide

24. ボタンを押すと外部ブラウザを開く (iOS 13)
    • ボタンタップで外部ブラウザを開く View
    • 開けない URL の場合はエラーアラートを表示する
    canOpenURL(url) == true canOpenURL(url) == false
    iOS Simulator での動作
    • ブラウザを開く前に開ける URL かチェックしている
    

    View Slide

25. ボタンを押すと外部ブラウザを開く (iOS 13)
    • ボタンタップで外部ブラウザを開く View
    • 開けない URL の場合はエラーアラートを表示する
    canOpenURL(url) == true canOpenURL(url) == false
    iOS Simulator での動作
    • ブラウザを開く前に開ける URL かチェックしている
    

    View Slide

26. 実装コード (一部)
    @IBAction func tapOpenURLButton(_ sender: Any) {
    let url = URL(string: "https://apple.com")!
    if UIApplication.shared.canOpenURL(url) {
    // canOpenURL(_:) == true Ͱ͋Ε͹։͘
    UIApplication.shared.open(url)
    } else {
    // Τϥʔ࣌͸ΞϥʔτΛදࣔ
    showAlert("Error", message: "Cannot open this URL.")
    }
    }
    1
    2
    3
    canOpenURL(_:) で URL が開けるかチェック
    1
    canOpenURL == true であれば open(url)
    2
    canOpenURL == false であればアラート表示
    3
    

    View Slide

27. この View を
    Xcode 12 でビルド
    +
    iOS 14 端末で実行
    すると…
    

    View Slide

28. iOS 14 での動作 (Safari)
    canOpenURL(url) == true になっていて、
    Safari で URL が開かれる
    $
    

    View Slide

29. iOS 14 での動作 (Safari)
    canOpenURL(url) == true になっていて、
    Safari で URL が開かれる
    $
    

    View Slide

30. 問題: iOS 14 での動作 (Chrome)
    canOpenURL(url) == false になってしまい、
    Chrome だと URL が 開かれない！
    %
    

    View Slide

31. 問題: iOS 14 での動作 (Chrome)
    canOpenURL(url) == false になってしまい、
    Chrome だと URL が 開かれない！
    %
    

    View Slide

32. 原因: canOpenURL(_:) の公式 doc. にあった
    要約
    Info.plist の LSApplicationQueriesSchemes に
    開きたいカスタム URL スキームを宣言してね。
    そうでないと常に false になります。
    https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl
    • URL にはカスタムスキーム (twitter 等) や facetime や
    通常のスキーム (http, https, tel) を持ちうる
    • → http, https も canOpenURL でチェックすることを想定している
    

    View Slide

33. 解決法: Info.plist に追加する (diff)
    
    
    + LSApplicationQueriesSchemes
    +
    + http
    + https
    +
    CFBundleDevelopmentRegion
    …
    diff: Info.plist
    

    View Slide

34. 解決法: Info.plist に追加する (Xcode)
    1
    2 3
    4
    1
    2
    3
    4
    + ボタンを押す
    「LSApplicationQueriesSchemes」を入力
    Array にする
    http, https を追加する
    

    View Slide

35. 結果: iOS 14 での動作 (Chrome)
    canOpenURL(url) == true になって、
    Chrome でも URL が 開かれた！
    &
    

    View Slide

36. 結果: iOS 14 での動作 (Chrome)
    canOpenURL(url) == true になって、
    Chrome でも URL が 開かれた！
    &
    

    View Slide

37. もくじ
    1
    2
    3
    UIPageControl の仕様が変わった
    4
    デフォルトブラウザを変えるとエラー
    UIStackView の背景色が突然現れた
    backButton 長押しメニューの対応
    5 まとめ
    

    View Slide

38. UIStackView を使った View
    • UIStackView を使った View
    • VStack (縦 StackView) → HStack (横 StackView) の
    入れ子になっている
    • HStack の中に UILabel が 2 つある
    • StackView に背景色は付けないデザイン
    

    View Slide

39. UIStackView を使った View
    VStack
    HStack
    UILabel
    • UIStackView を使った View
    • VStack (縦 StackView) → HStack (横 StackView) の
    入れ子になっている
    • HStack の中に UILabel が 2 つある
    • StackView に背景色は付けないデザイン
    

    View Slide

40. この View を
    Xcode 12 でビルド
    +
    iOS 14 端末で実行
    すると…
    

    View Slide

41. iOS 14 での表示
    iOS 13 iOS 14
    • 背景色が付いとる… '''
    

    View Slide

42. 原因: Background Color が付いていた
    Xcode 11.7 での当該 Storyboard IB のキャプチャ
    

    View Slide

43. なんで
    iOS 13 では背景色付かなくて、
    iOS 14 になったら付いたの? "
    

    View Slide

44. 何が変わったのか
    iOS 13
    iOS 14
    • UIStackView はレンダリングされない UIView だった
    • あくまで役割としては「subview の配置を整理する」こと
    • IB, コードで backgroundColor を付けれるものの、
    レンダリングされないので反映もされない
    • UIStackView がレンダリングされるようになった
    • 従って backgroundColor も見える
    • 本質的には CATransformLayer → CALayer に変わった
    

    View Slide

45. 解決法: backgroundColor を付けてないか確認
    

    View Slide

46. もくじ
    1
    2
    3
    UIPageControl の仕様が変わった
    4
    デフォルトブラウザを変えるとエラー
    UIStackView の背景色が突然現れた
    backButton 長押しメニューの対応
    5 まとめ
    

    View Slide

47. Push 遷移する View (iOS 13)
    • 画面中央ボタンタップで Push 遷移する View
    • navigationItem.backBarButton の
    タイトルを空にするデザイン要求がある設定
    

    View Slide

48. Push 遷移する View (iOS 13)
    • 画面中央ボタンタップで Push 遷移する View
    • navigationItem.backBarButton の
    タイトルを空にするデザイン要求がある設定
    

    View Slide

49. どうやってタイトルを消しているか
    override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.backBarButtonItem =
    UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
    • title が空の UIBarButtonItem を backBarButton に設定
    • self.title = “” でも OK
    • ちなみに、デフォルトだと “Back” になる (下図参照 ()
    

    View Slide

50. この View を
    Xcode 12 でビルド
    +
    iOS 14 端末で実行
    すると…
    

    View Slide

51. iOS 14 での動作: 特に問題ない？
    • iOS 13 の動作と変化が無いように見える
    • …ほんと？
    

    View Slide

52. iOS 14 での動作: 特に問題ない？
    • iOS 13 の動作と変化が無いように見える
    • …ほんと？
    

    View Slide

53. iOS 14: backButton 長押しでメニューが表示
    • iOS 14 ではメニュー系の変更が多くある
    • バックボタンの長押しによる履歴メニュー表示も追加要素
    • 遷移した履歴が一覧できるように
    • 今まで一つずつ戻っていたのが、一気に戻れるように
    

    View Slide

54. iOS 14: backButton 長押しでメニューが表示
    • iOS 14 ではメニュー系の変更が多くある
    • バックボタンの長押しによる履歴メニュー表示も追加要素
    • 遷移した履歴が一覧できるように
    • 今まで一つずつ戻っていたのが、一気に戻れるように
    

    View Slide

55. このアプリで
    backButton を長押しして
    履歴メニューを表示すると…
    

    View Slide

56. iOS 14 で backButton を長押しして履歴メニューを表示
    

    View Slide

57. iOS 14 で backButton を長押しして履歴メニューを表示
    

    View Slide

58. どの画面に行くのか分からない。
    これは… UX 的に許せない…
    (なんか高さも崩れてるし)
    

    View Slide

59. UI/UX 的に
    デザインを保ったまま
    (= backButton のタイトルは空のまま)
    履歴メニューにタイトルを付けたい
    

    View Slide

60. 言葉の定義
    バックボタンタイトル 履歴メニュータイトル
    この発表では、この 2 つの言葉で定義させてください
    

    View Slide

61. Before → After のイメージ
    バックボタンタイトルを付けたい VC (0番目)
    

    View Slide

62. 解決法: 追加されたプロパティによって制御
    • navigationItem.backButtonDisplayMode というプロパティが追加
    • enum でバックボタンタイトルの表示方法を制御する
    • .default, .generic, .minimal の 3 つが列挙されている
    

    View Slide

63. backButtonDisplayMode の挙動まとめ
    title の取得元
    title,
    navigationItem.title,
    navigationItem.backButtonTitle
    navigationItem.backBarButtonItem
    .default औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .generic “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .minimal 空欄 औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    

    View Slide

64. backButtonDisplayMode の挙動まとめ
    title の取得元
    title,
    navigationItem.title,
    navigationItem.backButtonTitle
    navigationItem.backBarButtonItem
    .default औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .generic “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .minimal 空欄 औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    タイトルだけ変更する系統: ボタンアイテムごと作り直す系統:
    

    View Slide

65. backButtonDisplayMode の挙動まとめ
    title の取得元
    title,
    navigationItem.title,
    navigationItem.backButtonTitle
    navigationItem.backBarButtonItem
    .default औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .generic “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .minimal 空欄 औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    タイトルだけ変更する系統: ボタンアイテムごと作り直す系統:
    

    View Slide

66. backButtonDisplayMode の挙動まとめ
    title の取得元
    title,
    navigationItem.title,
    navigationItem.backButtonTitle
    navigationItem.backBarButtonItem
    .default औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .generic “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .minimal 空欄 औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    タイトルだけ変更する系統: ボタンアイテムごと作り直す系統:
    

    View Slide

67. backButtonDisplayMode の挙動まとめ
    title の取得元
    title,
    navigationItem.title,
    navigationItem.backButtonTitle
    navigationItem.backBarButtonItem
    .default औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .generic “Back” औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    .minimal 空欄 औಘݩ or දࣔ෯͕ڱ͍৔߹͸ “Back”
    タイトルだけ変更する系統: ボタンアイテムごと作り直す系統:
    

    View Slide

68. iOS14 から title の取得元は複数ある
    WWDC2020: Build with iOS pickers, menus and actions より
    3 つのプロパティから最適な物を自動で選ぶっぽい
    + “Back”
    

    View Slide

69. .minimal を使って iOS 14 に対応
    // NOTE: iOS 14 Ͱ͸௕ԡ͠Ͱϝχϡʔ͕ग़ΔΑ͏ʹͳͬͨͷͰ UI/UX ཱ྆ͷͨΊʹॲཧΛ੾Γ෼͚͍ͯΔ
    if #available(iOS 14.0, *) {
    navigationItem.backButtonDisplayMode = .minimal
    // title = "1൪໨" ΋ OK
    navigationItem.backButtonTitle = "1൪໨"
    } else {
    // title = "" ΋ OK
    navigationItem.backBarButtonItem =
    UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
    OS バージョンによって切り替え (backButtonDisplayMode は iOS 14 から)
    1
    backButtonDisplayMode = .minimal に (バックボタンタイトルを表示しない)
    2
    履歴メニュータイトルに表示したいタイトルをセット
    3
    iOS 13 以下を今までの方法でケアする
    4
    

    View Slide

70. .minimal を使って iOS 14 に対応
    // NOTE: iOS 14 Ͱ͸௕ԡ͠Ͱϝχϡʔ͕ग़ΔΑ͏ʹͳͬͨͷͰ UI/UX ཱ྆ͷͨΊʹॲཧΛ੾Γ෼͚͍ͯΔ
    if #available(iOS 14.0, *) {
    navigationItem.backButtonDisplayMode = .minimal
    // title = "1൪໨" ΋ OK
    navigationItem.backButtonTitle = "1൪໨"
    } else {
    // title = "" ΋ OK
    navigationItem.backBarButtonItem =
    UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
    1
    OS バージョンによって切り替え (backButtonDisplayMode は iOS 14 から)
    1
    backButtonDisplayMode = .minimal に (バックボタンタイトルを表示しない)
    2
    履歴メニュータイトルに表示したいタイトルをセット
    3
    iOS 13 以下を今までの方法でケアする
    4
    

    View Slide

71. .minimal を使って iOS 14 に対応
    // NOTE: iOS 14 Ͱ͸௕ԡ͠Ͱϝχϡʔ͕ग़ΔΑ͏ʹͳͬͨͷͰ UI/UX ཱ྆ͷͨΊʹॲཧΛ੾Γ෼͚͍ͯΔ
    if #available(iOS 14.0, *) {
    navigationItem.backButtonDisplayMode = .minimal
    // title = "1൪໨" ΋ OK
    navigationItem.backButtonTitle = "1൪໨"
    } else {
    // title = "" ΋ OK
    navigationItem.backBarButtonItem =
    UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
    2
    OS バージョンによって切り替え (backButtonDisplayMode は iOS 14 から)
    1
    backButtonDisplayMode = .minimal に (バックボタンタイトルを表示しない)
    2
    履歴メニュータイトルに表示したいタイトルをセット
    3
    iOS 13 以下を今までの方法でケアする
    4
    

    View Slide

72. .minimal を使って iOS 14 に対応
    // NOTE: iOS 14 Ͱ͸௕ԡ͠Ͱϝχϡʔ͕ग़ΔΑ͏ʹͳͬͨͷͰ UI/UX ཱ྆ͷͨΊʹॲཧΛ੾Γ෼͚͍ͯΔ
    if #available(iOS 14.0, *) {
    navigationItem.backButtonDisplayMode = .minimal
    // title = "1൪໨" ΋ OK
    navigationItem.backButtonTitle = "1൪໨"
    } else {
    // title = "" ΋ OK
    navigationItem.backBarButtonItem =
    UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
    3
    OS バージョンによって切り替え (backButtonDisplayMode は iOS 14 から)
    1
    backButtonDisplayMode = .minimal に (バックボタンタイトルを表示しない)
    2
    履歴メニュータイトルに表示したいタイトルをセット
    3
    iOS 13 以下を今までの方法でケアする
    4
    

    View Slide

73. .minimal を使って iOS 14 に対応
    // NOTE: iOS 14 Ͱ͸௕ԡ͠Ͱϝχϡʔ͕ग़ΔΑ͏ʹͳͬͨͷͰ UI/UX ཱ྆ͷͨΊʹॲཧΛ੾Γ෼͚͍ͯΔ
    if #available(iOS 14.0, *) {
    navigationItem.backButtonDisplayMode = .minimal
    // title = "1൪໨" ΋ OK
    navigationItem.backButtonTitle = "1൪໨"
    } else {
    // title = "" ΋ OK
    navigationItem.backBarButtonItem =
    UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
    4
    OS バージョンによって切り替え (backButtonDisplayMode は iOS 14 から)
    1
    backButtonDisplayMode = .minimal に (バックボタンタイトルを表示しない)
    2
    履歴メニュータイトルに表示したいタイトルをセット
    3
    iOS 13 以下を今までの方法でケアする
    4
    

    View Slide

74. 解決法: タイトルは付けて透過させる
    override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.backBarButtonItem =
    UIBarButtonItem(title: “0൪໨", style: .plain, target: nil, action: nil)
    }
    長押しした時に表示したいタイトルを設定
    1
    

    View Slide

75. 解決法: タイトルは付けて透過させる
    override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.backBarButtonItem =
    UIBarButtonItem(title: “0൪໨", style: .plain, target: nil, action: nil)
    }
    長押しした時に表示したいタイトルを設定
    1
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:
    [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithDefaultBackground()
    appearance.backButtonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.clear]
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().compactAppearance = appearance
    return true
    }
    AppDelegate に backButton を透過させる処理を追加
    2
    

    View Slide

76. 結果: いい感じ
    長押し前 長押し中
    • バックボタンタイトルは空文字
    • かつ
    • 履歴メニュータイトルが表示された
    

    View Slide

77. 補足: iOS 14 では
    backButton の扱いが変わった
    

    View Slide

78. iOS 14 以降の backButtonTitle の動作調査
    self.title navigationItem.backButtonTitle backButtonTitle
    nil nil “Back”
    “0 ൪໨ͷ View” nil “0 ൪໨ͷ View”
    nil “” (ۭจࣈ) “” (ۭจࣈ)
    “0 ൪໨ͷ View” “” (ۭจࣈ) “” (ۭจࣈ)
    “” (ۭจࣈ) “0 ൪໨ͷ View” “0 ൪໨ͷ View”
    navigationItem.backButtonTitle が優先されるっぽい
    

    View Slide

79. もくじ
    1
    2
    3
    UIPageControl の仕様が変わった
    4
    デフォルトブラウザを変えるとエラー
    UIStackView の背景色が突然現れた
    backButton 長押しメニューの対応
    5 まとめ
    

    View Slide

80. 1. UIPageControl の仕様が変わった
    iOS 13
    iOS 14
    • UIPageControlContentView が追加
    • 幅が拡がらなくなった
    • 画面幅が表示限界 → iOS 14 から無制限に
    • 表示されるドットが 11 個を超えないように
    変更点:
    対策:
    • 対策は無い
    • この仕様に付き合う
    • 別の表現に変える
    

    View Slide

81. 2. デフォルトブラウザを変えるとエラー
    • 外部ブラウザのデフォルトを変更できるように
    • デフォルトメーラーも同様
    • 何もしてないと canOpenURL(_:) が false になる
    変更点:
    対策:
    • Info.plist の LSApplicationQueriesSchemes に
    開きたいカスタム URL スキームを宣言
    • Web リンク: http, https
    • メール: mailto
    

    View Slide

82. 2. デフォルトブラウザを変えるとエラー
    • 外部ブラウザのデフォルトを変更できるように
    • デフォルトメーラーも同様
    • 何もしてないと canOpenURL(_:) が false になる
    変更点:
    対策:
    • Info.plist の LSApplicationQueriesSchemes に
    開きたいカスタム URL スキームを宣言
    • Web リンク: http, https
    • メール: mailto
    

    View Slide

83. 3. UIStackView の背景色が突然現れた
    変更点:
    対策:
    • UIStackView の背景色が付くようになった
    • UIStackView は非レンダリング View →
    レンダリングされるように
    • 従って set した背景色が見た目に反映される
    • IB, コード上で背景色を指定してないか確認する
    

    View Slide

84. 4. backButton 長押しメニューの対応
    変更点:
    対策:
    • バックボタン長押しで履歴メニューが追加に
    • iOS 13 以下の方法でバックボタンタイトルを空にすると
    履歴メニュータイトルが空になり UX が低下する
    • navigationItem.backButtonDisplayMode プロパティが追加
    • バックボタンタイトルの表示方法を制御
    • navigationItem.backButtonDisplayMode = .minimal
    と iOS 14 に設定してやる
    

    View Slide

85. ちょっと「ゆめみ」の宣伝
    • 弊社: ゆめみは BnB2C という形の受託制作会社
    • お客様によりよいものづくりを提案しながら C 向けアプリを中心に作ってます
    • 変な制度が沢山ある (給与自己決定、有給取り放題など)
    • その中の一つに「一ヶ月で 16 時間 (2 日分) 自由に使っていい」という「10% ルール」がある
    • この Towards14 アプリの作成、スライド作成、発表練習全て 10% ルールの中でやった
    • 未経験で今年新卒入社した自分から見て、成長環境としてとても良い会社
    「変わった会社で自由にやりたい」という方に向いてるかも？
    

    View Slide

86. 最後に自己紹介
    林 大地 (Daichi Hayashi)
    • 夢は宇宙飛行士
    • ゆめみに未経験新卒として入社: iOS 経験 1 年未満
    • これから強い iOS 開発者になる (予定)
    @daichidaiji
    

    View Slide

87. 参考文献: UIPageControl
    • WWDC2020: Build with iOS pickers, menus and actions
    • https://developer.apple.com/videos/play/wwdc2020/10052/
    • HIG: Page Controls
    • https://developer.apple.com/design/human-interface-guidelines/ios/
    controls/page-controls/
    •
    

    View Slide

88. 参考文献: UIStackView 背景色
    • Stack View Background Color in iOS 14
    • https://useyourloaf.com/blog/stack-view-background-color-in-ios-14/
    • CALayer | Apple
    • https://developer.apple.com/documentation/quartzcore/calayer
    • CATransformLayer | Apple
    • https://developer.apple.com/documentation/quartzcore/catransformlayer
    

    View Slide

89. 参考文献: canOpenURL == false 問題
    • Stack View Background Color in iOS 14
    • https://useyourloaf.com/blog/stack-view-background-color-in-ios-14/
    • 【iOS14】デフォルトブラウザを変更した時にcanOpenURLがfalseになる問題
    • https://qiita.com/toto_kit/items/757dfe0a9fddb28eeff5
    •
    

    View Slide

90. 参考文献: backButton 長押しメニュー対応
    • A new way to manage the back button title in iOS 14 with backButtonDisplayMode
    • https://sarunw.com/posts/new-way-to-manage-back-button-title-in-ios14/
    • 色々実験されていて参考になります。
    • WWDC2020: Build with iOS pickers, menus and actions
    • https://developer.apple.com/videos/play/wwdc2020/10052/
    • iOS14Ͱ໭ΔϘλϯͷλΠτϧΛۭཝʹ͢Δ͖ͪΜͱͨ͠ํ๏
    • https://spinners.work/posts/ios14_blank_back_button/
    • ઌि౤ߘ͞ΕͯΔͷݟ͚ͭ·ͨ͠ɻ೔ຊޠͳͷͰ͔͜͜ΒಡΉͷ͋ΓͰ͢ɻ
    

    View Slide

91. Carthage
    workaround
    

    View Slide

92. UIDatePicker
    

    View Slide

93. CATransformLayer
    VS
    CALayer
    

    View Slide

94. CATransformLayer
    • 「他の CALayer クラスで使用されている
    フラット化されたレンダリング層ではなく、
    3Dレイヤー層を作成するために使用される」
    • サブレイヤーのみがレンダリングされる
    • レイヤによってレンダリングされる
    CALayer プロパティは無視される
    • ここに backgroundColor, contents, border 等
    のプロパティが含まれる
    

    View Slide

95. CALayer
    • 視覚的な要素を提供するのが主の役割
    • backgroundColor, border, shadow 等
    • 画像ベースの要素を管理する
    • アニメーションの提供
    

    View Slide

96. Take a Look at iOS 14’s New UIPageControl より
    https://medium.com/better-programming/take-a-look-at-ios-14s-new-uipagecontrol-3207a10212b9
    BackgoundStyle で背景色を制御できる
    

    View Slide

97. 見た目カスタムできる
    それぞれ別の画像をセット 全部別の画像をセット
    

    View Slide

98. 長押しのインタラクションの制御
    pageControl.allowsContinuousInteraction = false
    

    View Slide