SwiftUIにおけるAppの重要事項

SwiftUIにおけるAppの重要事項

新しいAppプロトコルのおかげで、SwiftUIでApp全体を構築できるようになりました。App、SceneおよびViewがいかに相互につながり合うかをご確認ください。短時間で、複雑な作業を経ることなく、最高クラスの製品に期待される機能を容易に実装する方法を学びましょう。新しいコマンドモディファイアを用いて、インターフェースに機能を簡単に追加する方法や、新しいWindowGroup APIの詳細をご紹介します。このセッションを有効活用するには、ある程度のSwiftUI経験が求められます。未経験の方は、 "Introduction to SwiftUI"をご覧ください。SwiftUIをさらに追求する場合は、 "What's new in SwiftUI"、 "Data essentials in Swift UI"、 "Stacks, grids, and outlines in SwiftUI"、 "Build document-based apps in SwiftUI"も合わせてご覧ください。

リソース
- App
- Scene
- WindowGroup
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC20
ダウンロード

こんにちは WWDCへようこそ “SwiftUIにおける Appの重要事項” SwiftUIチームのマット･リケットソンです後で同僚のジェフも紹介します去年 SwiftUIを紹介しましたパワフルな新手法で偉大なユーザーインターフェイスを構築 Appleの全プラットフォームで使いますビューでユーザーインターフェイスを作り SwiftUI はビューを変更するため API一式を提供そしてその２つを合わせます
今年はフレームワークを拡張しましたシーンとAppを発表するための新しいAPIで SwiftUIを使って作れるものを更に拡大しましたつまり今では App全部を SwiftUIさえあれば構築できますこのセッションでは新しいAPIを紹介しビューシーンそしてAppがどのように機能するか説明します次にSwiftUIのシーンアーキテクチャについて説明しご自身のAppでのカスタマイズ方法をお見せします最後に簡単な概略で Appをカスタマイズできるその他のAPIの詳細の入手場所を説明しますそれではまずはビューから始めましょう SwiftUIを使用されたことがある場合はご存じの通りビューは重要ですなぜならそれぞれのビューが UIの一部を定義するからです Appを見ている時目に見える全てがビューです各画像や文字の並びはビューですそれを収納するコンテナもまたビューですスクリーン上に見える全てのピクセルがビューに何らかの形で定義されています
ただし全ビューが同じ Appのものではありません Appはスクリーン全体を完全にコントロールしてはいないからですその代わりプラットフォームが Appの表示をコントロールします異なるregionで Appの一部を表示します
SwiftUIではこれらの異なる regionを“シーン”と呼びます
シーンの内容をスクリーンに表示する最も一般的な方法はウインドウです iPadOSなどのプラットフォームは複数のウインドウを並べて表示できます iOS watchOS そしてtvOS等のプラットフォームは各Appを１つのフルスクリーンウインドウで表示することを好みます macOSがいい例ですシーンコンテンツが様々な方法で表示されますこの場合関連ウインドウのコレクションが見えます各ウインドウが異なるシーンコンテンツのデモンストレーションになります
macOSでも関連ウインドウを集めることができます１つのタブ付きウインドウになりますその場合シーンが代わりに個別タブを表します
それ自身のシーンもこの共有ウインドウを表します各タブに関連する子シーンのコンテナとして機能します
これらのシーンの塊が Appのコンテンツを作ります App シーンビューを合わせて所有権の統一された階層を作ります
先ほど言いましたようにビューは基本的な構成要素でスクリーンに見えるものすべてをレンダリングしますまたはより複雑なユーザーインターフェイスにもなります
ビューはシーンコンテンツを作成しますそしてプラットフォームでシーンを個別に表示することもできます
ビューと同じようにこれらのシーンを合わせるとより複雑なシーンが作れますさっき見たタブ付きウインドウの例がそうです
最後にこれらのシーンは Appのコンテンツを作成します
App シーンおよびビューがどのように機能するか分かったのでそれがSwiftUIコードにどう影響するかを見てみましょう
これは私がSwiftUIに書いたAppです Book Clubの本をどれだけ読んだかが分かりますご覧の通り SwiftUIのAppには簡潔な宣言が見られますつまりこのようなベーシックなAppはほんの一握りのコード列にしか当てはまりません余分なボイラープレートがなければ App固有のコードに直ちにフォーカスできます
この場合実際のApp インターフェイスの定義に ReadingListViewerと呼ばれるビューを使います
ReadingListViewerは私が作ったカスタムビューでこれによってリーディングリストをブラウズできます
弊社のReadingListViewerは WindowGroupというシーンを内蔵しています
WindowGroupシーンが管理するウインドウは ReadingListViewがレンダリングするウインドウです追加ウインドウを作成したり同じウインドウ内に新しいタブを作ったりこれらの機能をサポートするプラットフォームで行いますこの後ジェフがWindowGroupについて詳細を説明します
WindowGroupシーンは App内に含まれ Appプロトコルに準拠したカスタムstructで表されます
コードの構造が先ほど見た所有者の階層にマッチすることに気が付くでしょう Appにはシーンが含まれシーンにはビューが含まれています
またApp宣言に関してはカスタムビュー宣言に似ていることにも気が付くでしょう例えばビューとAppは両方共データの依存関係を宣言できます ReadingListViewerがここで ReadingListStoreオブジェクトを監視します
このAppはReadingListStore オブジェクトにも依存しますがそれ自身オブジェクトの所有者であることも宣言します StateObjectプロパティラッパーを利用します SwiftUIの今年の新機能です
ビューとAppはまた両方共 “ボディ”プロパティを宣言しユーザーインターフェイスコンテンツを定義します
ビューがその他のビューを含むことについては先ほどお話しましたつまりそのためにビューのボディがビューを返すのですところがAppはシーンを使って作成されますそのためボディプロパティは代わりにシーンを返します
最後にAppをデコレートしている @main属性に気付かれたと思いますこれはSwift 5.3の新属性ですあるタイプをエントリーポイントとしてプログラムを実行します
通常 Swiftプログラムの実行には main.swiftファイルが必要です @main属性でその責任をアブストラクトに委任することができますアブストラクトは起動に必要な全設定を自動的に行いスクリーンに Appを表示します
コードのレビューをしたところで少し前の話に戻ります
ここに見えているのはSwiftUIのベーシックApp向けの完全な宣言ですほんの一握りのコード列にだけ当てはまりますでも騙されてはいけません実際には自動でインテリジェントな動作がたくさんありこのシンプルな宣言に詰め込まれていますこのAppの仕組みを本当に理解するには WindowGroupシーンについてもっと語る必要がありますそれが私たちのユーザーインターフェイスを管理しますそのためここからジェフに交代しますありがとうマットこんにちは
まずお見せしたいのはマットが概要をお見せしたコンセプトのデモンストレーションですそれからWindowGroupの細かい点についていくつか話します
私はかなり熱心な読者なのであるAppに取り組んできました現在読んでいる全ての本の進捗を記録するためですご覧の通り私のAppはiPadOSの初期ウインドウで起動しますコンテンツとして特定したビューを使用しています見る限りかなりの本が読みかけのようですね進捗を確認するために新しいウインドウを開けてみましょう App Exposeを開けると新規をここに簡単に作成できますそして違う本にナビゲートします WindowGroupはこの機能を私のiPadOS上のAppに自動的に提供しますウインドウそれぞれがインターフェイスのそれぞれの状態に反映していることが分かります選択された本はそれぞれで異なり１つの変更はその他の本に影響しませんこれはSwiftUIシーンの重要な側面です Appは各モデルにそれぞれのシーンを提供しますが各シーンのビューの状態は独立していますまた App Switcherについていくつかお話しします各ウインドウは私のAppの名前を表示しています選択された本のタイトルも見えますこれは今年発売のビューモディファイアによって行われます “navigation title”といって iOSではナビゲーションバーにタイトルを表示するのに使われ App Switcherでも使われますビューモディファイアの例ですこれは親シーンの状態に影響を与えます
MacではAppが複数のウインドウをサポートするのは一般的です WindowGroupをAppで使うことで SwiftUIはファイルメニューにメニューアイテムを提供し新しいシーン例の作成をサポートします
このアイテムは呼びだすこともできますスタンダードCommand-N キーボードショートカットを経由します
macOSでナビゲーションタイトルがどのように適用されるかが分かります本のタイトルが表示されますウインドウのタイトルバーの辺りです
ウインドウメニューでも使用されます
良いタイトルを作ることは重要ですユーザーに多くのコンテクストを与えウインドウを選択する助けにもなりますオープンウインドウのリストから選択します複数のウインドウをサポートするのに加え macOSはウインドウのグループ化もサポートしますウインドウメニューを経由しますオープンウインドウを１つのタブ付きインターフェイスにマージできます
それぞれのタブは個別シーンを表しています
この機能ではコードを書く必要がありません SwiftUIが自動的に行います
実演をいくつかお見せしました AppのWindowGroupシーンを使用していますここでもう少し詳細を見てみましょう今お見せしたことを要約すると WindowGroupはシーンです Appの主要インターフェイスを表現できます
提供したビューはインターフェイスの定義として使われます
これは私たちの全プラットフォームで期待した通りに機能します例えば iOSとwatchOSではあなたのビューが表示されるのはデバイスのスクリーン全体を閉めるウインドウです macOSではこのウインドウはビューの定義によってサイズが決まりますシーンのライフサイクルは実行中のプラットフォームにより管理されます
macOSを例としましょうプラットフォームがAppにウインドウを作る必要がある場合 WindowGroupは新しい子シーンをインスタンス化しますデフォルトでウインドウ内にコンテンツを表示します
複数のウインドウをサポートするプラットフォームでは例えばmacOSやiPadOSですが WindowGroupは複数の子シーンをインスタンス化します
これはユーザーアクションに対応する形で起こります例えばメニューアイテムをクリックしたりマルチタスクジェスチャーを呼び出すことなど
各シーンはそのユーザーインターフェイスの定義を共有する一方でこの定義を作るビューはすべてそれぞれ独立した状態を持っています
つまり１つのウインドウでビュー状態を変えてもその他の状態に影響を与えることはありません
この機能によりテンプレートの提供が可能ですインターフェイスに使用できます一方でユーザーがこのインターフェイスをカスタマイズすることもできます提供された状態を通して行います
プラットフォームはシーンのライフサイクルを担当するため私たちは今年新しいプロパティラッパーを紹介しましたビュー状態の修復管理をサポートします SceneStorageプロパティラッパーを使うとビュー状態を維持できます
保存状態識別のための一意のキーが必要ですこの状態はその後自動的に保存および修復されます SwiftUIが適宜行います
ここまでシーンについてお見せしました特にWindowGroupの仕組みについてですここでマットにバトンタッチしますマットはAppのカスタマイズ方法について更に詳しく説明しますありがとう　ジェフ最後にお見せしたいのは今年利用可能となるその他のApp関連の新機能です
先ほど見たBook Clubはデータ駆動型Appでした共有のデータモデルに支えられていますその他の種類のAppもあります例えばドキュメントベース AppですこのShapeEdit Appがその例です
今年新しいのは DocumentGroupシーンタイプで自動的に管理してオープン編集そしてドキュメントベースシーンを保存する点詳細は今年の “Build Document-Based Apps in SwiftUI”を視聴してください
それではBook Clubの例に戻りましょう macOS Appの共通項はプリファレンスウインドウです
今年私たちは新しい“設定”シーンタイプを発表します macOSで使用できスタンダードプリファレンスウインドウに自動的に設定します設定シーンはプリファレンスコマンドを Appメニューに自動的に設定しますまたウインドウに正しいスタイルの処理を施します
メニューコマンドと言えば SwiftUIもAPIを提供しますそのためカスタムコマンドをシーンに追加できますそれには新コマンドモディファイアを使用します BookCommandsは私が定義したカスタムタイプですさっと見てみましょう
コマンドAPIはパワフルで柔軟です同じ宣言を使用した状態駆動プログラムモデルでビューシーン Appで使用しますコマンドをカスタムタイプにカプセル化できますユーザーフォーカスに基づくターゲットアクションで AppKitまたはUIKitのレスポンダーチェーンに似ています通常のビューを利用してコマンド自身を構築します参照ドキュメントをご確認ください詳細やコマンドの使用方法が説明されています今年SwiftUIで利用可能な新しいApp関連APIをほんの一部ご紹介しましたその他のSwiftUIトークのご視聴もお勧めしますご自身のAppのコンテンツ構築に役立ちます “Data Essentials in SwiftUI”で知識を深めることができます App シーンおよびビューの間での適切なデータ通信が学べます “What's New in Swift”でお見せするのは言語における最新の改良についてあなたのSwiftUIコードを改良します
皆さんがすばらしいSwiftUIを構築されるのを楽しみにしています作品をフォーラムでシェアしてくださいフィードバックも次のビルドもお待ちしています引き続き WWDCをお楽しみください

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore

    var body: some View {
        NavigationView {
            List(store.books) { book in
                Text(book.title)
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book(title: "Book #1", author: "Author #1"),
        Book(title: "Book #2", author: "Author #2"),
        Book(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

10:21 - Window groups

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore

    var body: some View {
        NavigationView {
            List(store.books) { book in
                Text(book.title)
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book(title: "Book #1", author: "Author #1"),
        Book(title: "Book #2", author: "Author #2"),
        Book(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

12:07 - Scene storage

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore
    @SceneStorage("selectedItem") private var selectedItem: String?
    
    var selectedID: Binding<UUID?> {
        Binding<UUID?>(
            get: { selectedItem.flatMap { UUID(uuidString: $0) } },
            set: { selectedItem = $0?.uuidString }
        )
    }

    var body: some View {
        NavigationView {
            List(store.books) { book in
                NavigationLink(
                    destination: Text(book.title),
                    tag: book.id,
                    selection: selectedID
                ) {
                    Text(book.title)
                }
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book(title: "Book #1", author: "Author #1"),
        Book(title: "Book #2", author: "Author #2"),
        Book(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

12:59 - Document groups

import SwiftUI
import UniformTypeIdentifiers

@main
struct ShapeEditApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: ShapeDocument()) { file in
            DocumentView(document: file.$document)
        }
    }
}

struct DocumentView: View {
    @Binding var document: ShapeDocument
    
    var body: some View {
        Text(document.title)
            .frame(width: 300, height: 200)
    }
}

struct ShapeDocument: Codable {
    var title: String = "Untitled"
}

extension UTType {
    static let shapeEditDocument =
        UTType(exportedAs: "com.example.ShapeEdit.shapes")
}

extension ShapeDocument: FileDocument {
    static var readableContentTypes: [UTType] { [.shapeEditDocument] }
    
    init(fileWrapper: FileWrapper, contentType: UTType) throws {
        let data = fileWrapper.regularFileContents!
        self = try JSONDecoder().decode(Self.self, from: data)
    }

    func write(to fileWrapper: inout FileWrapper, contentType: UTType) throws {
        let data = try JSONEncoder().encode(self)
        fileWrapper = FileWrapper(regularFileWithContents: data)
    }
}

13:27 - Settings scene

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    @SceneBuilder var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
        
    #if os(macOS)
        Settings {
            BookClubSettingsView()
        }
    #endif
    }
}

struct BookClubSettingsView: View {
    var body: some View {
        Text("Add your settings UI here.")
            .padding()
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore

    var body: some View {
        NavigationView {
            List(store.books) { book in
                Text(book.title)
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book2(title: "Book #1", author: "Author #1"),
        Book2(title: "Book #2", author: "Author #2"),
        Book2(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

14:07 - BookCommands

struct BookCommands: Commands {
    @FocusedBinding(\.selectedBook) private var selectedBook: Book?
    
    var body: some Commands {
        CommandMenu("Book") {
            Section {
                Button("Update Progress...", action: updateProgress)
                    .keyboardShortcut("u")
                Button("Mark Completed", action: markCompleted)
                    .keyboardShortcut("C")
            }
            .disabled(selectedBook == nil)
        }
    }
    
    private func updateProgress() {
        selectedBook?.updateProgress()
    }
    private func markCompleted() {
        selectedBook?.markCompleted()
    }
}

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

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

リソース

関連ビデオ

WWDC20