AppKitでSwiftUIを使用する

AppKitでSwiftUIを使用する

Shortcuts AppではSwiftUIとAppKitの両方を使用することで、macOSで最高レベルのエクスペリエンスを実現することができるようになりました。Shortcutsチームより、AppKitコードでSwiftUIビューをホストする方法、レイアウトやサイズ設定の処理方法、レスポンダチェーンへの参加方法、ナビゲーションフォーカスの有効化方法などを紹介しますので、是非ご覧ください。また、AppKitビューをホストする方法も紹介します。これで、既存のコードをAppのSwiftUIレイアウトに移行できるようになります。

リソース
- UIKit integration
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC22
- AppKitの最新情報
WWDC21
- SwiftUIのダイレクトフォーカスとリフレクションフォーカス
ダウンロード

♪陽気な器楽用のヒップホップ楽曲♪ ♪ 「AppKitでSwiftUIを使用する」へようこそ ShortcutsチームのエンジニアのIanです macOS Montereyでは ShortcutsがmacOSにきました Shortcutsは MacのSwiftUIを多用しています SwiftUIは iOSやwatchOS上の Appと共通の表示を共有しつつプラットフォームに合わせて経験をカスタマイズすることを支援しますこのセッションではShortcutsでのいくつかの例を紹介しあなたのMac appにSwiftUIを導入する方法を説明しますまず App内でSwiftUIの表示をホストする方法の例を紹介し次にAppKitとSwiftUI間でデータを渡す方法について話しますまたコレクションやテーブル表示のセルで SwiftUI表示をホストすること AppKitに埋め込まれたときに SwiftUI表示のレイアウトとサイジングを処理する方法 SwiftUI表示をレスポンダチェーンに参加させてフォーカス可能にする方法最後にSwiftUIでAppKit表示をホストする方法について説明しますまずはAppKitでSwiftUIをホストする方法からです Shortcutsではメインウィンドウに AppKitのSplitViewコントローラがあり左側の補足はSwiftUIを使って書かれています補足表示はSwiftUI Listとして実装されリストはAppでナビゲートできるすべての場所の行を持つ部分を表示します表示は選択された項目の結合によってどの項目が選択されたかを記録します選択可能な項目は SidebarItemタイプの実例として表現されますこの場合すでにSplitView コントローラがあるので補足表示をホストするために NSHostingControllerと呼ばれるSwiftUIのクラスを使用します SwiftUIの補足表示はそのホスティングコントローラのルート表示として渡されますホスティングコントローラは他の表示コントローラと同様に使用できるのでここではsplitViewItemとして構成しそれをsplitViewControllerに追加していますこれで補足はSplitViewでホストされますが選択範囲が変わったときに動作するには SplitViewの右側に別のページを表示させる必要があります現在選択された項目の状態はSwiftUI内にのみ存在しますそれをSplitViewと補足で共有できる場所に移動する必要があるのですこれを行う良い方法はSwiftUIの外部に保存でき共有する必要がある状態を含むモデル物体を作成することですこの物体をSelectionModelと呼ぶことにしますさて補足はまだSelectionModelで状態を読み書きできますが SelectionModelはSplitViewへの参照も保存でき選択が変更されると詳細表示を更新しますコード上ではSelectionModelは ObservableObjectに準拠したクラスである観測可能な物体であることでモデルに保存された状態が変更されたとき SwiftUIは表示をリロードできますこのモデルには２つの特性がありますまず splitViewControllerへの参照を保持し詳細表示を更新できるようにしますそして２つ目は現在どの補足項目が選択されているかを記憶することですこの特性は選択項目が変更されたときに SwiftUI補足表示を更新できるように公開されます最後にモデルはdidSetを実装しているので誰かが補足の選択を変更するたびにモデルは詳細表示に新しいページを表示できます AppKitでSwiftUIをホストする方法を説明したのでコレクションとテーブルのセルに話を移しましょう他のプラットフォームからmacOSにShortcutsを導入する際コレクション表示のセルやホーム画面のウィジェットにショートカットを表示する SwiftUIの象徴的な表示が既に構築されていました macOSではこれらと同じ表示が NSCollectionViewのセルに表示されます項目がたくさんあるコレクション表示やテーブル表示ではスクロールすると各セル表示がリサイクルされ時間と共に異なる内容が表示されますセルの再利用を確実に実行するにはユーザーがスクロールする際にセルからサブ表示を追加したり削除したりを避ける必要があります各セルにSwiftUI表示を表示するとき単一のホスティング表示を使いセルの内容を変更する必要があるときに異なるルート表示でそれを更新します SwiftUIをホストするコレクション表示セルを構築するのに必要なものはこれだけですこの例ではショートカット表示を表示するセルを作っています各セルはホストするNSHostingViewを含みますセルはコンテンツが設定される前に作成されるためこの値は最初はゼロでショートカットを表示する準備ができたときに初めて設定されます displayShortcut方法はセルにショートカットを表示するように設定する際にデータソースから呼ばれますこの方法はSwiftUI ShortcutViewを作成しますそしてもし既にhostingView があればそのhostingViewの rootViewが新しい表示に設定されますそうでない場合もしそれが初回であれば newHostingViewが作成されセルのサブ表示として追加されます SwiftUIをホストするセルのライフサイクルを紹介しますまずセルが初期化されまだ表示するショートカットがないためサブ表示がない状態でスタートします最初にdisplayShortcutが呼ばれたとき表示するshortcutViewで hostingViewが作成されますこれはVStack 画像スペーサー２つのテキスト表示を含むSwiftUI の表示階層を作成しますこのセルが画面外にスクロールされた場合システムによってデキューされる可能性があるため別のショートカットを表示する必要がありますこのとき新しいShortcutViewが作成され HostingViewに付与されます HostingViewはすでに別のショートカット表示を表示していたので VStackやスペーサーなど表示全体の構造を再利用し変更された画像テキストバックグラウンドのみを更新しますさて次はレイアウトとサイジングについてですホスティングコントローラとホスティング表示は SwiftUI表示の理想的な幅と高さに基づいた固有のサイズを持っています SwiftUIは自動的にAuto Layout制約を作成し更新しこれをAppKitの配置システムが適切な表示のサイズ調整に使用しますまた表示は最小から最大まで様々なサイズに対応するフレキシブルなものです SwiftUIはこれらにも制約を作ります SwiftUIホスティング表示を階層に埋め込む場合スーパー表示や他の隣接する表示に独自の自動レイアウト制約を適用する必要がありますフレーム修飾子や他のSwiftUIレイアウトを使用すると幅を固定サイズに上書きするなど作成される制約の更新が行われますウィンドウはユーザーがサイズを変更できるためウィンドウには最小サイズと最大サイズがあります HostingViewsがウィンドウのトップレベルの contentViewとして設定されたとき SwiftUIは表示されるコンテンツに基づいてウィンドウの最小と最大のサイズを自動的に更新しますまたコンテンツに応じてウィンドウのサイズを縦横またはその両方に変更できますホスティングコントローラに置かれたSwiftUIの表示はモードに提示された時に内容に基づいたサイズになります例えばここに示すようNSViewControllerでポップオーバーの公開APIを使用してホスティングコントローラを提示することで SwiftUIの表示をAppKitのポップオーバーに簡単に配置できます presentAsSheet方法を使ってSwiftUIの表示をシートとして表示できます最後にモードウィンドウの場合 presentAsModalWindow方法を使用すると閉じるまで相互連関を遮るウィンドウを提示できますウィンドウはコンテンツに合わせたサイズになります macOS VenturaではNSHostingViewと NSHostingControllerに新しいAPIが追加され自動的に追加される制約をカスタマイズすることができるようになりましたデフォルトではホスティングコントローラと表示は最小サイズ標準サイズおよび最大サイズに関する制約を作成します表示を常に柔軟なサイズにしたい場合や AppKitで周囲の表示にすでに制約が加えられている場合などパフォーマンス上の理由からこれらのいくつかを無効にしても構いませんホスティングコントローラの場合表示の理想的なサイズを好ましいコンテンツサイズに決定させるために preferredContentSize オプションを有効にできます AppにSwiftUI表示を追加し始めるとき Appの他の表示と同じようにレスポンダチェーンとフォーカスシステムに参加することが重要です ShortcutsではエディタはSwiftUI表示として実装されていますしかしエディタではAppKitで実装されるメインメニューで定義されたメニューバーコマンドの処理が必要ですカットコピーペーストなどのコマンドですまたアクションを上下に移動させるために独自の独自のカスタムメニューもいくつか実装しています AppKitでは表示階層は ”レスポンダチェーン”と呼ばれる表示のチェーンを構成しています集中的な応答をファーストレスポンダと呼びますメニュー項目が選択されるとその項目のセレクタがファーストレスポンダに送られますしかし最初のレスポンダがそのセレクタに応答しない場合次のレスポンダにセレクタが送られ何かがセレクタを処理するか Appに到達するまでセレクタが送られます SwiftUIのファーストレスポンダに相当するのは集中的な表示ですフォーカス可能SwiftUI表示はキーボード入力に応答しレスポンダチェーンに送るセレクタを処理できますテキスト領域のような一部の表示はすでにフォーカス可能ですがフォーカス可能な修飾子を使用することで他の表示もフォーカス可能にできます SwiftUIにはコピーカットペーストなどの一般的なコマンドを処理するための修飾子がいくつかありますこれらはペーストボードの内外に値を渡すもので Appの中でデータを転送させる簡単な方法ですショートカット･エディターでは onMoveCommandと onExitコマンド修飾子を使って矢印キーとエスケープキーを処理します onCommand修飾子はAppKitの一般的なセレクタや Appで定義した独自のカスタムセレクタを処理するために使用できますここでは AppKitからのselectAllコマンドと Shortcuts appで定義されたmoveActionUpと moveActionDownのコマンドを処理しています Appでフォーカスとキーボードの操作可能性をテストする時は多くの操作はそれが有効な時にのみフォーカス可能であるため Keyboard System Settingを開き Full Keyboard Navigationをオンまたはオフにしてテストしてくださいキーボードとの相性をよくするためにできることはまだまだたくさんあります例えば FocusStateやfocused modifierといった APIがありどの表示が集中的かをプログラムで変更できますフォーカスとキーボードについてさらに学ぶには「SwiftUIでフォーカスを指示して反映する」のビデオを見に行くべきです最後に AppKitの表示のホストについて説明します ShortcutsがSwiftUIレイアウトの中で AppKitの表示をホストしている例がありますが AppにSwiftUIを採用する際に AppKitの表示もホストする必要が出てくる可能性があります１つの例は SwiftUIのショートカットエディタの内部で AppleScriptエディタの表示が埋め込まれておりこれはmacOS上の他のいくつかのシステムAppと共有されるAppKitコントロールです SwiftUIは AppKitの表示と表示コントローラーを SwiftUIの表示階層内に埋め込むことを可能にする２つの表現可能なプロトコルを提供します SwiftUIの表示と同様に representableはAppKitの表示を作成更新する方法についての記述です AppKitの多くのクラスはデリゲートオブザーバを持ちあるいはKVOや通知に依存して観測されるためプロトコルにはオプションでコーディネータオブジェクトも含まれており表示や表示コントローラに付随して実装することが可能ですここではホストされたオブジェクトとそのコーディネータのライフサイクルを紹介しますまずはホストされた表示の初期化から始めますこれは表示が初めて表示されようとする時に起こります初期化の間にSwiftUIが行う最初のことはコーディネータを作ることですこれはオプションですがデリゲーションや状態管理に必要であれば独自のタイプを定義しそれをmakeCoordinatorから返すことができますコーディネータのインスタンスは表示の存続期間中１つだけ残ります次に makeNSViewまたは makeNSViewController方法が呼び出されますここでは表示の新しいインスタンスを作成する方法をSwiftUIに説明しますコンテキストには先ほど作成されたコーディネータが含まれているのでここでコーディネータを表示のデリゲートなどのオブザーバとして割り当てるといいですいったん表示が作成されると SwiftUIの状態や環境が変更されるたびに update view方法が呼び出されますここで SwiftUIの周囲の状態と環境と同期させるためにAppKitの表示に保存されているプロパティや状態を更新するのはあなたの責任です update方法は頻繁に呼び出される可能性があるため表示に加える変更はできるだけ少なくする必要があります何が変更されたかを確認し変更があった場合にのみ表示の影響を受ける部分を再読み込みする必要があります SwiftUIがホストされた表示を表示し終わったときそれは取り除かれます表示とコーディネータの両方が解放されますこの状態が解放される前に表現可能なプロトコルは必要に応じて状態をクリーンアップするためのオプション方法を実装することを提供しますさてライフサイクルを理解し表現可能なプロトコルを理解したところで ShortcutsがApp内のカスタムスクリプトエディタ表示をどのようにホストしているか紹介しますスクリプトエディタはScri- ptEditorViewというNSViewでエディタに書かれたコードは sourceCodeプロパティを通じてアクセスし変更することができ表示を無効にして変更ができないようにすることができますスクリプトエディタにはデリゲートもあり誰かがソースコードを変更するとその旨が通知されます AppKitの表示をホストする時最初にSwiftUIのどこに表示が配置されるのかどのデータを受け渡しする必要があるのかを考えてくださいショートカットではこの表示はコンパイルボタンの横にあるコンテナ表示に配置されますコンパイルボタンのハンドラは表示に入力されたソースコードにアクセスする必要がありますソースコードはSwiftUIで Stateプロパティラッパーを使用して格納されます表現可能なものはこの状態に対して読み取りと書き込みの両方が必要である表現可能なものを構築するために NSViewをホストするので NSViewRepresentableに準拠したタイプの作成から始めます SwiftUIから設定する必要があるものごとにプロパティを追加しますソースコードには SwiftUIに格納された状態を読み書きするバインディングが使用されています最初に実装する必要がある方法はmakeNSViewですここでは表示の新しいインスタンスを作成する方法を説明し必要な一回限りの設定を行いますここではデリゲートにコーディネータを設定しますコーディネータについてはもう少し詳しくお話します次に updateNSViewを実装します sourceCodeが変更されたときまたはSwiftUIの環境が変更されたときに呼び出されます sourceCodeプロパティが設定されるとスクリプトエディタが大量の作業を行うので表示に既にある値を比較し変更された場合のみプロパティを設定することで無駄な作業を省くようにしています updateNSViewに渡されるコンテキストは SwiftUI環境を含みます isEnabled環境キーはスクリプトエディタの isEditableプロパティに渡されるので SwiftUIの表示階層の残りの部分がそうである場合編集は無効にされます誰かが表示のソースコードを変更するたびにソースコードバインディングは新しい値のキャプチャが必要ですそのためにScriptEditorViewDelegateに準拠したCoordinatorを作ることにしますコーディネータは更新する必要があるソースコードバインディングを含むrepre- sentable値を格納しますそして sourceCodeDidChange方法ではバインディングに表示からの新しい文字列の値が設定されます最後にコーディネータを作成し更新する方法を SwiftUIで表現できるように伝える必要がありますまず新しいコーディネータを作成するために makeCoordinator方法を実装する必要がありますコーディネータの寿命はホスト表示と同じでホスト表示と同様にコーディネータに追加したプロパティは表現可能な変更に伴って最新の状態に保つ必要があります updateNSViewはrepresen- tableに格納された値が変化した時に呼び出されるのでここではコーディネータ上の representableプロパティが更新されます SwiftUIにAppKitを追加し AppKitにSwiftUIを追加する方法もわかったので AppにSwiftUIを統合し始めましょうまずサイドバーやテーブルコレクション表示のセルから始めるとよいでしょう表示のサイズが正しく設定され一般的なコマンドとフォーカスが処理されていることを確認しますお忙しい中ありがとうございましたあなたが何を作るのか楽しみです

struct SidebarView: View {
    @State private var selectedItem: SidebarItem
    
    var body: some View {
        List(selection: $selectedItem) {
            ...
            Section("Shortcuts") { ... }
            Section("Folders") { ... }
        }
    }
}

enum SidebarItem: Hashable {
    case gallery
    case allShortcuts
    ...
    case folder(Folder)
}

1:53 - Hosting SwiftUI sidebar

let splitViewController = NSSplitViewController()

let sidebar = NSHostingController(rootView: SidebarView(...))
let splitViewItem = NSSplitViewItem(viewController: sidebar)
splitViewController.addSplitViewItem(splitViewItem)

3:06 - Sidebar selection model

class SelectionModel: ObservableObject {

    @Published var selectedItem: SidebarItem = .allShortcuts

}

// AppKit Window Controller
cancellable = selectionModel.$selectedItem.sink { newItem in
    // update the NSSplitViewController detail
}

4:37 - Collection view item hosting SwiftUI

class ShortcutItemView: NSCollectionViewItem {
    private var hostingView: NSHostingView<ShortcutView>?

    func displayShortcut(_ shortcut: Shortcut) {
        let shortcutView = ShortcutView(shortcut: shortcut)

        if let hostingView = hostingView {
            hostingView.rootView = shortcutView
        } else {
            let newHostingView = NSHostingView(rootView: shortcutView)
            view.addSubview(newHostingView)
            setupConstraints(for: newHostingView)
            self.hostingView = newHostingView
        }
    }
}

7:55 - Popover presentation

viewController.present(NSHostingController(rootView: ...), 
    asPopoverRelativeTo: rect, of: view, 
    preferredEdge: .maxY, behavior: .transient)

8:15 - Sheet presentation

viewController.presentAsSheet(NSHostingController(rootView: ...))

8:22 - Modal window presentation

let hostingController = NSHostingController(rootView: ModalView())
hostingController.title = "Window Title"
viewController.presentAsModalWindow(hostingController)

8:45 - Sizing options

hostingController.sizingOptions = [.minSize, .intrinsicContentSize, .maxSize]

10:47 - Copy, Cut, and Paste commands

Image(...)
    .focusable()
    .copyable { ... }
    .cuttable { ... }
    .pasteDestination(payloadType: Image.self) { ... }

11:02 - Respond to standard commands

struct ShortcutsEditorView: View {
    var body: some View {
        ScrollView { ... }
            .onMoveCommand { moveSelection(direction: $0) }
            .onExitCommand { cancelOperations() }
            .onCommand(#selector(NSResponder.selectAll(_:)) { selectAllActions() }
            .onCommand(#selector(moveActionUp(_:)) { moveSelectedAction(.up) }
            .onCommand(#selector(moveActionDown(_:)) { moveSelectedAction(.down) }
    }
}

15:18 - Script editor

class ScriptEditorView: NSView {
    var sourceCode: String
    var isEditable: Bool
    weak var delegate: ScriptEditorViewDelegate?
}

protocol ScriptEditorViewDelegate: AnyObject {
    func sourceCodeDidChange(in view: ScriptEditorView) -> Void
}

15:40 - Script editor container

struct ScriptEditorContainerView: View {
    @State var sourceCode: String = ""

    var body: some View {
        VStack {
            CompileButton { compile(code: sourceCode) }
            Divider()
            ScriptEditorRepresentable(sourceCode: $sourceCode)
        }
    }
}

16:13 - Script editor representable

struct ScriptEditorRepresentable: NSViewRepresentable {
    @Binding var sourceCode: String

    func makeNSView(context: Context) -> ScriptEditorView {
        let scriptEditor = ScriptEditorView(frame: .zero)
        scriptEditor.delegate = context.coordinator
        return scriptEditor
    }

    func updateNSView(_ nsView: ScriptEditorView, context: Context) {
        if sourceCode != scriptEditor.sourceCode {
            scriptEditor.sourceCode = sourceCode
        }
        scriptEditor.isEditable = context.environment.isEnabled
        context.coordinator.representable = self
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(representable: self)
    }
}

class Coordinator: NSObject, ScriptEditorViewDelegate {
    var representable: ScriptEditorRepresentable

    init(representable: ScriptEditorRepresentable) { ... }

    func sourceCodeDidChange(in view: ScriptEditorView) {
        representable.sourceCode = view.sourceCode
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC22

WWDC21