Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

実装コード (一部) @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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

原因: 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 でチェックすることを想定している

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

.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

Slide 70

Slide 70 text

.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

Slide 71

Slide 71 text

.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

Slide 72

Slide 72 text

.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

Slide 73

Slide 73 text

.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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

解決法: タイトルは付けて透過させる 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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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 が優先されるっぽい

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

参考文献: 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/ •

Slide 88

Slide 88 text

参考文献: 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

Slide 89

Slide 89 text

参考文献: 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 •

Slide 90

Slide 90 text

参考文献: 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/ • ઌि౤ߘ͞ΕͯΔͷݟ͚ͭ·ͨ͠ɻ೔ຊޠͳͷͰ͔͜͜ΒಡΉͷ͋ΓͰ͢ɻ

Slide 91

Slide 91 text

Carthage workaround

Slide 92

Slide 92 text

UIDatePicker

Slide 93

Slide 93 text

CATransformLayer VS CALayer

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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