『SwiftUIならiOS, macOSの両方で動くエディタアプリが簡単に作れる』 と思ったら大間違いだよ！ / pixiv App Night 2024-01-25

みなさんエディタアプリを作っていると思いますが、できればUIKitとAppKitで別実装はせずSwiftUIだけで完結したいですよね。私もそう思ってました。この発表では、私が個人開発しているエディタアプリをmacOS対応している際に出会った、悲しい現実と力強い対処法をまとめて紹介します。

Transcript

1. @FromAtom ʰSwiftUIͳΒiOS, macOSͷ྆ํͰಈ͘ΤσΟλΞϓϦ͕؆୯ʹ࡞ΕΔʱ ͱࢥͬͨΒେؒҧ͍ͩΑʂ
2. • ϐΫγϒגࣜձࣾ • iOSΞϓϦ෼໺ςοΫϦʔυ • ޷͖ͳSwift͸ guard @FromAtom
3. ࠓ೔ͷ࿩ͷલఏ
4. ࿩ͷલఏ • Memoliaͱ͍͏ݸਓ։ൃΞϓϦ • iOS༻ͷՕ৚ॻ͖ϝϞΞϓϦ • macOS൛΋࡞Γ͍ͨͱࢥ͍ͬͯΔ 動画
5. iOS൛͸΋͏͋Δ͠ SwiftUIͳΒ macOSରԠ΋͙͢΍Ζʂ
6. import SwiftUI struct ContentView: View { @State var text: String = "" var body: some View { TextEditor(text: $text) .padding() } }
7. ౰વiPadͰ͸ͪΌΜͱಈ͘ 動画
8. ͜ΕΛmacOSͰ΋ಈ͔ͦ͏
9. macOS༻ʹϏϧυ͢Δखஈ
10. macOS༻ʹϏϧυ͢Δखஈ • macOS SDKΛ࢖͏ • UIKitܥͷiOSࢿݯ͸࢖͑ͳ͍ • AppKit͕࢖͑Δ
11. macOS༻ʹϏϧυ͢Δखஈ • Mac Catalystʛ • iPadΞϓϦΛmacOSͰಈ͔ͤΔ • UIKit΍iOSͷࢿݯ͕࢖͑Δ
12. macOS༻ʹϏϧυ͢Δखஈ • Designed for iPadʛ • iPadΞϓϦΛmacOSͰಈ͔ͤΔ ‣ AppleγϦίϯ౥ࡌͷMacͷΈ • UIKit΍iOSͷࢿݯ͕࢖͑Δ
13. ͦΕͧΕϏϧυͯ͠ΈΔ
14. ͦΕͧΕͰϏϧυͯ͠ΈΔ 動画
15. ͦΕͧΕͰϏϧυͯ͠ΈΔ 動画
16. ͦΕͧΕͰϏϧυͯ͠ΈΔ 動画
17. IMEͷม׵ީิͰจࣈ͕ݟ͑Μʂ Catalyst Designed for iPad Google IMEͰ͸ͳ͘͜ͱ͑ΓΛ࢖ͬͯ΋ಉ݁͡ՌͩΑ΍ͬͨͶ
18. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
19. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
20. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
21. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
22. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
23. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
24. ରԠҊ macOS SDK Catalyst Designed for iPad SwiftUI.TextEditor ̋ ✕ ✕ UIKit + Storyboard ϏϧυෆՄ ✕ ✕ AppKit ̋ ϏϧυෆՄ ϏϧυෆՄ UIViewRepresentable (UITextView) ϏϧυෆՄ ✕ ✕ NSViewRepresentable (NSTextView) ̋ ϏϧυෆՄ ϏϧυෆՄ
25. macOS SDKͰϏϧυ͢Δ
26. ݴ͏͸қ͘ߦ͏͸೉͠ • ؾ͕͍ͭͨΒ࢖ͬͯ͠·͏UIKit • UIܥϥΠϒϥϦ͸masOS͸ະରԠ͕ͪ • Conditional Compilation Block·ΈΕʹͳΔ ‣ #if os(macOS) Έ͍ͨͳ΍ͭ
27. ؤுΓ·͠ΐ͏
28. ೖྗิ׬ػೳΛ࡞Γ͍ͨ
29. ࠓ೔࿩͢ೖྗิ׬ػೳ • ͳʹ͔ೖྗͨ͠Βิ׬͞ΕΔ ‣ ྫɿMarkdownͷՕ৚ॻ͖ 動画
30. Enter͕ೖྗ͞ΕͨΒ ॲཧΛ૸ΒͤΕ͹͑͑΍Μ 😁
31. Enter͕ೖྗ͞ΕͨΒ ॲཧΛ૸ΒͤΕ͹͑͑΍Μ 😁
32. SwiftUI.TextEditorͰ࢖͑ͦ͏ͳAPI • onChange • onSubmit • onKeyPress
33. onChangeͷ৔߹ struct ContentView: View { @State var text: String = "" var body: some View { TextEditor(text: $text) // iOS 14.0–17.0 Deprecated .onChange(of: text, perform: { newValue in // do something }) // iOS 17.0+ .onChange(of: text) { oldValue, newValue in // do something } } } • text͕มߋ͞ΕΔͨͼʹൃՐ • ࠩ෼͸ੜ੒Ͱ͖Δ ‣ ͲͷߦͰEnter͞Ε͔ͨܭࢉෆՄ ‣ SelectedRange͕औಘෆՄ • ࢖͑ͳ͍
34. onSubmitͷ৔߹ struct ContentView: View { @State var text: String = "" @FocusState private var isFocused: Bool var body: some View { TextEditor(text: $text) .onSubmit { } } } • TextEditorͰ͸ൃՐ͠ͳ͍ ‣ ͳΜͰʁ • lineLimitΛࢦఆͯ͠΋μϝ ‣ ͔ͯࢦఆͯ͠΋ޮ͔ͳ͍ • submitLabelΛࢦఆͯ͠΋μϝ • ࢖͑ͳ͍
35. onKeyPressͷ৔߹ struct ContentView: View { @State var text: String = "" var body: some View { TextEditor(text: $text) .onKeyPress(.return, action: { print("Enter") return .ignored }) } } • ϋʔυ΢ΣΞΩʔϘʔυͷΈ • ม׵֬ఆͷEnterͰ΋ൃՐ ‣ markedTextRange͸औಘෆՄ • ࢖͑ͳ͍
36. ࢖͑ΔAPI͕ͳ͍ 😢
37. swiftui-introspect
38. swiftui-introspectͷͬ͘͟Γઆ໌ • SwiftUIͷཪଆʹ͍ΔUIKit / AppKitཁૉʹΞΫηεͰ͖Δ • TextEditorͷཪʹ͍ΔUITextView / NSTextView͕औಘͰ͖Δ TextEditor(text: $text) .introspect(.textEditor, on: .iOS(.v16, .v17)) { print(type(of: $0)) // => UITextView } .introspect(.textEditor, on: .macOS(.v13, .v14)) { print(type(of: $0)) // => NSTextView }
39. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect struct ContentView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() final class Delegate: NSObject, NSTextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } var body: some View { TextEditor(text: $text) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } } }
40. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect struct ContentView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() final class Delegate: NSObject, NSTextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } var body: some View { TextEditor(text: $text) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } } }
41. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect struct ContentView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() final class Delegate: NSObject, NSTextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } var body: some View { TextEditor(text: $text) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } } }
42. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect struct ContentView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() final class Delegate: NSObject, NSTextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } var body: some View { TextEditor(text: $text) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } } }
43. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect struct ContentView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() final class Delegate: NSObject, NSTextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } var body: some View { TextEditor(text: $text) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } } } ͋ͱ͸ίπίπ࣮૷͢Ε͹OK
44. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect #if os(macOS) import AppKit public typealias TextView = NSTextView public typealias TextViewDelegate = NSTextViewDelegate #elseif os(iOS) import UIKit public typealias TextView = UITextView public typealias TextViewDelegate = UITextViewDelegate #endif struct EditorView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() #if os(macOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } #elseif os(iOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { guard textView.markedTextRange == nil else { return true } if text == "\n" { print("Enterが入力されたよ") } return true } } #endif var body: some View { TextEditor(text: $text) #if os(macOS) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } #elseif os(iOS) .introspect(.textEditor, on: .iOS(.v16, .v17)) { textView in self.textView = textView } #endif } }
45. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect #if os(macOS) import AppKit public typealias TextView = NSTextView public typealias TextViewDelegate = NSTextViewDelegate #elseif os(iOS) import UIKit public typealias TextView = UITextView public typealias TextViewDelegate = UITextViewDelegate #endif struct EditorView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() #if os(macOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } #elseif os(iOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { guard textView.markedTextRange == nil else { return true } if text == "\n" { print("Enterが入力されたよ") } return true } } #endif var body: some View { TextEditor(text: $text) #if os(macOS) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } #elseif os(iOS) .introspect(.textEditor, on: .iOS(.v16, .v17)) { textView in self.textView = textView } #endif } } import SwiftUI @_spi(Advanced) import SwiftUIIntrospect #if os(macOS) import AppKit public typealias TextView = NSTextView public typealias TextViewDelegate = NSTextViewDelegate #elseif os(iOS) import UIKit public typealias TextView = UITextView public typealias TextViewDelegate = UITextViewDelegate #endif
46. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect #if os(macOS) import AppKit public typealias TextView = NSTextView public typealias TextViewDelegate = NSTextViewDelegate #elseif os(iOS) import UIKit public typealias TextView = UITextView public typealias TextViewDelegate = UITextViewDelegate #endif struct EditorView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() #if os(macOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } #elseif os(iOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { guard textView.markedTextRange == nil else { return true } if text == "\n" { print("Enterが入力されたよ") } return true } } #endif var body: some View { TextEditor(text: $text) #if os(macOS) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } #elseif os(iOS) .introspect(.textEditor, on: .iOS(.v16, .v17)) { textView in self.textView = textView } #endif } } #if os(macOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } #elseif os(iOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { guard textView.markedTextRange == nil else { return true } if text == "\n" { print("Enterが入力されたよ") } return true } } #endif
47. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect #if os(macOS) import AppKit public typealias TextView = NSTextView public typealias TextViewDelegate = NSTextViewDelegate #elseif os(iOS) import UIKit public typealias TextView = UITextView public typealias TextViewDelegate = UITextViewDelegate #endif struct EditorView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() #if os(macOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } #elseif os(iOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { guard textView.markedTextRange == nil else { return true } if text == "\n" { print("Enterが入力されたよ") } return true } } #endif var body: some View { TextEditor(text: $text) #if os(macOS) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } #elseif os(iOS) .introspect(.textEditor, on: .iOS(.v16, .v17)) { textView in self.textView = textView } #endif } } var body: some View { TextEditor(text: $text) #if os(macOS) .introspect( .textEditor, on: .macOS(.v13, .v14) ) { textView in self.textView = textView } #elseif os(iOS) .introspect( .textEditor, on: .iOS(.v16, .v17) ) { textView in self.textView = textView } #endif }
48. import SwiftUI @_spi(Advanced) import SwiftUIIntrospect #if os(macOS) import AppKit public typealias TextView = NSTextView public typealias TextViewDelegate = NSTextViewDelegate #elseif os(iOS) import UIKit public typealias TextView = UITextView public typealias TextViewDelegate = UITextViewDelegate #endif struct EditorView: View { @State var text: String = "" @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } var delegate = Delegate() #if os(macOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: NSTextView, shouldChangeTextIn affectedCharRange: NSRange, replacementString: String?) -> Bool { guard !textView.hasMarkedText() else { return true } if replacementString == "\n" { print("Enterが入力されたよ") } return true } } #elseif os(iOS) final class Delegate: NSObject, TextViewDelegate { func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { guard textView.markedTextRange == nil else { return true } if text == "\n" { print("Enterが入力されたよ") } return true } } #endif var body: some View { TextEditor(text: $text) #if os(macOS) .introspect(.textEditor, on: .macOS(.v13, .v14)) { textView in self.textView = textView } #elseif os(iOS) .introspect(.textEditor, on: .iOS(.v16, .v17)) { textView in self.textView = textView } #endif } } ͚ͬ͜͏େม͚ͩͲ iOS, macOS྆ରԠͯ͠ SwiftUIͰ࣮૷Ͱ͖Δ
49. ͪɹͳɹΈɹʹ
50. textView.delegateΛ্ॻ͖͢Δͱ ςΩετมߋΠϕϯτ͕ൃՐ͠ͳ͍ 🫠
51. @Weak var textView: TextView? { didSet { textView?.delegate = delegate } } -略- var body: some View { TextEditor(text: $text) .introspect( .textEditor, on: .iOS(.v16, .v17) ) { textView in self.textView = textView } .onChange(of: text, { print(text) // 呼ばれない }) } @Weak var textView: TextView? { didSet { //textView?.delegate = delegate } } -略- var body: some View { TextEditor(text: $text) .introspect( .textEditor, on: .iOS(.v16, .v17) ) { textView in self.textView = textView } .onChange(of: text, { print(text) // 呼ばれる }) }
52. TextEditor( text: viewStore.binding( get: { $0.text }, send: { .someAction // 呼ばれない }() ) ) TCAͰbinding͍ͯ͠Δ৔߹
53. SwiftUI͕ར༻͍ͯ͠ΔDelegateΛ ্ॻ͖ͯ͠Δ͔Βಈ͔ͳ͘ͳΔͷ͔΋ʁ 🫠
54. ·ͱΊ • ม׵࣌ʹจࣈ͕ӅΕͯ͠·͏ͷͰmacOS SDKͰϏϧυ͠Α͏ • swiftui-introspectΛ࢖ͬͯUITextView,NSTextViewΛऔಘ͠Α͏ ‣ UIViewRepresentable, NSViewRepresentableͱ͍͏ख΋͋ΔΑ • swiftui-introspectͰdelegateΛ্ॻ͖͢ΔͱมߋΠϕϯτ͕ඈΜͰ͜ͳ͍ͷͰ஫ҙ • Ͳͷํ਑Ͱ΋େมͳͷͰؤுΖ͏ ‣ ϩδοΫΛ෼཭Ͱ͖Δʢ͠΍͍͢ʣΞʔΩςΫνϟ΍ઃܭΛ͠·͠ΐ͏
55. ࢀߟɿݸਓ։ൃΞϓϦMemoliaͰ͸Ͳ͏͢Δ͔ʁ • SwiftUI + swiftui-introspectΛ࢖͍ͬͯΔ ‣ কདྷతʹSwiftUI.TextEditor͕֦ு͞ΕΔͱ৴ͯ͡ • onChange͕ൃՐ͠ͳ͍ͷ͸ٯʹOKͱߟ͍͑ͯΔ ‣ ૒ํ޲όΠϯσΟϯά͕ࢮ͵ͷͰTCAͰ୯ҰσʔλϑϩʔʹͰ͖Δ • swiftui-introspectܦ༝Ͱ͸ΠϕϯτൃՐ͚ͩͤͯ͞ϩδοΫ͸શ෦෼཭ ‣ TextEditor͕֦ு͞ΕͨΒΠϕϯτൃՐݩΛม͑Ε͹͍͍͚ͩʢͷ͸ͣʣ