SwiftUIのダイレクトフォーカスとリフレクションフォーカス

SwiftUIのダイレクトフォーカスとリフレクションフォーカス

デバイス入力では、人生のあらゆることと同様に、どこにフォーカスを置くかが重要です。SwiftUIでApp内のフォーカスを移動したり、キーボードをプログラム的に解除したり、小さなビューから大きなナビゲーションターゲットを構築する方法を確認します。同時に、これらのAPIは、Appのインターフェイスをシンプル化し、ユーザが必要なものをより強力に見つけられるようにするのに役立ちます。

リソース
- Input and event modifiers
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC22
- AppKitでSwiftUIを使用する
WWDC21
- iOS Appにおけるフルキーボードアクセスのサポート
- SwiftUIの新機能
ダウンロード

♪ (SwiftUIのダイレクトフォーカスとリフレクションフォーカス) 皆さんこんにちは Apple TVチーム SwiftUIエンジニアの Tanuです今日は SwiftUIでフォーカスを使う新しい方法についてご紹介します SwiftUIの素晴らしい点の1つは沢山の機能を無料でしかも使い始めてからすぐに活用できることです内蔵コンポーネントのデフォルト動作は全プラットフォームのSwiftUIの知見に基づく多様なコンテキストに適した馴染みやすい全体体験につながりますこのインテリジェンスはフォーカスにもありますフォーカスとはキーボードやリモコンゲームコントローラーアクセシブル・スイッチなどから Appが入力を取得するためのシステムでタッチ入力とは異なり特定の画面座標に紐づけられていませんフォーカスされたビューには通常特別な装飾が施され入力内容がどこに送られるか予測しやすくします SwiftUIは大部分であなたに代わってフォーカスを管理します誰かがテキストフィールドでクリックしたりタブキーを押したり Watch Compilationのタップや Siri Remoteでスワイプすると SwiftUIはフォーカスの適用場所と次の選択肢を決定しますこれは適切な動作が慣例で決定できる場合など単純なケース向きですしかしフォーカス経験をもっと加速したいというケースもありますよねメモAppの例では新しいメモボタンのタップだけでフォーカスが新しいメモに自動的に移動するようにしたいですこの種の動作は絶対にカスタム実装が必要ですこちらのシナリオではユーザーがSiriリモートで右へとスワイプした時に左下側のボタンから画面上部の近くのコンテンツに移動するようにしたいですミュージックボタンとAppタイルが隣り合っていないので SwiftUIはフォーカス先を自動で推測できません遠くのフォーカスターゲットとリンクするためにもっと情報が必要です iOSのこの例ではユーザーがイベントを選択した時キーボードが隠れるようにしたいです今年導入した新しいAPIのおかげでこれは全てSwiftUIから行えますこの動画では2種類のユースケースに注目します直接の入力なしに特定のビューへフォーカスを移動する方法を学び大きなナビゲーションターゲットを小さなビューから作成しユーザーが全てを操作できるようにしますまずフォーカスを移動してユーザーの注意を誘導したい場合の例を見ていきましょう夏休みのお出かけ予定を立てるため Vacation Planner Appを作るとしますこのAppは全てのAppleプラットフォームで使え目的地の閲覧や旅行に必要な予約ができますこのAppを起動するとメールアドレス欄やパスワード欄　Appleでサインインが表示されアカウントにログインすることができますこのログイン画面でメールアドレスが正しいフォーマットで入力されていない時フォーカスをプログラムでメールアドレス欄に動かしたいですこの動作を行うには FocusState APIを使いますログインビューの既存コードには TextField と SecureField がある VStackが含まれていますこのビューをFocusState property wrapperに追加します FocusStateは今年導入の新しいAPIで現在のフォーカスの場所に応じて変動するタイプの特殊なAPIです FocusStateを使ってフォーカスされた欄の識別子を置きます focusedField変数はこの例で作成した列挙型のものです FocusStateには文字列や整数その他ハッシュ可能な値型が使えます FocusState値は任意のものです通常 FocusStateに使われるタイプは hashableでoptionalでありフォーカスが画面の無関係な場所にある場合はケースにnilがなければなりません次にfocused修飾子を TextFieldとSecureFieldに加えますまた今年からはこの修飾子でフォーカス配置とfocusedFieldプロパティの間にリンクを作成することができますこのシンプルなリンクはパワフルなツールです Appで他の決定をするためのフォーカスの現在の配置を使えるからですログインフォームで展開されているのが分かりますまず画面が出てきましたがフォーカスがないので focusedFieldの値はnilですメールテキスト欄がタップされると欄にフォーカスが得られキーボードが出てきますフォーカスされたテキスト欄は focusState値にリンクしておりメールテキスト欄の識別子に更新されますフォーカス配置とfocusStateのリンクは諸刃の剣ですつまりフォーカス変更のリアクションは無制限です focusStateプロパティを更新するだけでフォーカスをプログラム的に移動できます例えばfocusedFieldの値を.passwordにプログラム的に変更する場合 SwiftUIはSecureFieldが設定中の新しい値に関連付けられていてフォーカスが自動的にパスワード欄に移動すると知りますさてこれでフォーカスの紐づけができたので早速動かしてみましょう Vacation Plannerではユーザーがデータを送信したらそれを認証するのですがメールアドレスが正しく入力されていない場合 FocusedFieldをメールアドレスに設定しますまだフォーカスされていない場合メールアドレステキスト欄にフォーカスを設定しますさらにメールアドレスが不正だった場合アドレス欄を強調したいとします縁取りはフォーカスがアドレス欄にある時のみ表示させたいですそのためには枠線作成時に focusedFieldの値をチェックします最終的にどうなったか見てみましょうアドレス欄に正しいアドレスが入力されていませんフォーカスは現在パスワード欄にあります goを押すとFocusedFieldで設定された onSubmitコールバックがトリガーされますこれでカーソルがアドレス欄に戻りますアドレス欄がフォーカスされている時赤い枠線が見えますしかしアドレス欄からフォーカスを動かすと focusedFieldがアドレス識別子と一致しなくなりそのため赤い枠線が消えます全フィールドが有効になったらキーボードを隠したいですキーボードを消すには FocusState変数をnilに設定します focusedFieldはoptionalなのでフォーカスがこのビューから無くなった事を nilで表しますメールアドレス欄が更新されていますね送信を押すとキーボードが消えます FocusState変数をnilに設定したためですテキスト欄のあるAppでフォーカスをプログラム的に管理するのは便利だと説明してきましたが FocusStateはテキスト欄以外でも使えます iOS tvOS watchOS macOSでフォーカス可能なビューのフォーカスをプログラムで管理できます次のセクションではApp内のフォーカス型ナビゲーションの役割を解説します Vacation PlannerのtvOSバージョンを見てみましょう行ってみたい目的地の画像を追加してTVの余分なスペースを活用しました Browse Photo のボタンをクリックするとログインする前から画像をもっと見られますフォーカスが元はアドレス欄にあったことに注目します Siri Remoteで右にスワイプするとフォーカスが Browse Photoボタンに移動すると期待しますがデフォルト状態ではそうなりませんこれはフォーカスナビゲーションの順番が隣接関係に基づくものだからですスワイプしてフォーカスを動かす時その方向の隣にフォーカス可能な対象がある時のみ移動しますフォーカス可能なビューを見てみましょう左側のログイン欄の隣にはフォーカス可能なビューがないので下ボタンはクリックできないようになっていますこの画面をナビゲート可能にするには Browseボタンのフォーカス可能エリアを拡大するとログイン欄の隣ということになりますこれは新しいFocusSections APIから設定できますこれはとても簡単です TV用のVacation Plannerコードを単純化したものがありますこれには2つのVStackを持つHStackが含まれます 1つはログイン欄用そして画像やボタン用VStackです。もっと大きな仮想フォーカスターゲットをブラウズボタンの周りに作りログイン欄の隣になるようにしてフォーカスが移動できるようにしますこれはfocusSection修飾子をボタンを含む VStackに追加するだけで完了できます focusSection修飾子がビューに追加されるとフォーカス可能なサブビューが含まれている場合指定した親ビューのフレームでフォーカスを受け入れられるようになりますボタンで左にスワイプした時にフォーカスをログイン欄に戻すようにもしたいので最初のVStackにもう1つのfosucSection()を追加しますこれで Appを実行するとリモコンで左から右にスワイプすることで入力欄とブラウズボタンの間でフォーカスを移動できるようになりましたまとめるとフォーカスにもっと注目してくださいプラットフォーム毎に違って見えるからです SwiftUIにはほとんどのケースで有効な内蔵された素晴らしいデフォルト動作があります新しいFocusStateとFocusSection APIではフォーカスを活用してさらに合理化されたエクスペリエンスが創造可能ですご自身のAppで試しながらフォーカスによりユーザー動作が影響を受ける様々なケースを観察してみてくださいこのセッションで皆さんがユーザーが最も重要なことにフォーカスできるようなツールを提供してくれたらと思いますご視聴ありがとうございました WWDCをお楽しみください！ ♪

3:38 - Slide 13 - Textfield and Securefield

import SwiftUI
import AuthenticationServices

struct ContentView: View {

    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
        }
    }

}

3:49 - Slide 14 - Focus State

import SwiftUI
import AuthenticationServices

struct ContentView: View {

    @FocusState private var focusedField: Field?
    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
        }
    }

}

4:07 - Slide 15 - Focus Field

import SwiftUI
import AuthenticationServices

enum Field: Hashable {
    case email
    case password
}

struct ContentView: View {

    @FocusState private var focusedField: Field?
    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
        }
    }

}

4:32 - Slide 17 - focused modifiers

import SwiftUI
import AuthenticationServices

enum Field: Hashable {
    case email
    case password
}

struct ContentView: View {

    @FocusState private var focusedField: Field?
    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .email)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .password)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
        }
    }

}

6:07 - Slide 25 - onSubmit

import SwiftUI
import AuthenticationServices

enum Field: Hashable {
    case email
    case password
}

struct ContentView: View {

    @FocusState private var focusedField: Field?
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var submittedEmail: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .email)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .password)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
            .onSubmit {
                submittedEmail = email
                if !isEmailValid {
                    focusedField = .email
                }
            }
        }
    }
  
    private var isEmailValid : Bool {
        let regex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        let predicate = NSPredicate(format:"SELF MATCHES %@", regex)
        return submittedEmail.isEmpty || predicate.evaluate(with: submittedEmail)
    }

}

6:25 - Slide 26 - border

import SwiftUI
import AuthenticationServices

enum Field: Hashable {
    case email
    case password
}

struct ContentView: View {

    @FocusState private var focusedField: Field?
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var submittedEmail: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .email)
                    .border(Color.red,
                            width: (focusedField == .email &&
                                    !isEmailValid) ? 2 : 0)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .password)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
            .onSubmit {
                submittedEmail = email
                if !isEmailValid {
                    focusedField = .email
                }
            }
        }
    }
  
    private var isEmailValid : Bool {
        let regex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        let predicate = NSPredicate(format:"SELF MATCHES %@", regex)
        return submittedEmail.isEmpty || predicate.evaluate(with: submittedEmail)
    }

}

7:17 - Slide 29 - dismiss keyboard with nil

import SwiftUI
import AuthenticationServices

enum Field: Hashable {
    case email
    case password
}

struct ContentView: View {

    @FocusState private var focusedField: Field?
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var submittedEmail: String = ""

    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .opacity(0.7)
                .ignoresSafeArea()

            VStack(alignment: .center) {
                Text("Vacation Planner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(.black.opacity(0.8))
                    .frame(alignment: .top)

                Spacer(minLength: 30)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding()
                    .frame(height: 50)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .email)
                    .border(Color.red,
                            width: (focusedField == .email &&
                                    !isEmailValid) ? 2 : 0)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .padding()
                    .frame(height:50)
                    .textContentType(.password)
                    .background(Color.white.opacity(0.9))
                    .cornerRadius(15)
                    .padding(10)
                    .focused($focusedField, equals: .password)

                Spacer().frame(height: 20)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(.black.opacity(0.7))
                
                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                .cornerRadius(15)

                Spacer().frame(height: 20)

            }
            .frame(width: 280, height: 500, alignment: .bottom)
            .onSubmit {
                submittedEmail = email
                if !isEmailValid {
                    focusedField = .email
                } else {
                    focusedField = nil
                    // Show progress indicator, and log in.
                }
            }
        }
    }
  
    private var isEmailValid : Bool {
        let regex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        let predicate = NSPredicate(format:"SELF MATCHES %@", regex)
        return submittedEmail.isEmpty || predicate.evaluate(with: submittedEmail)
    }

}

9:24 - tv code

import SwiftUI
import AuthenticationServices


struct ContentView: View {

    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Spacer(minLength:60).frame(height: 150)
                Text("Vacation\nPlanner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(Color.black.opacity(0.8))
                    .lineLimit(nil)
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 40)

                Spacer().frame(height:80)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)

                Spacer().frame(height:30)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .textContentType(.password)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(Color.black.opacity(0.7))

                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                Spacer()
            }
            .frame(width: 350, alignment: .center)

            VStack {
                Image(photoName)
                    .resizable()
                    .frame(width: 1400)
                    .aspectRatio(contentMode: .fit)
                    .ignoresSafeArea(edges: [.trailing])
                BrowsePhotosButton()
            }
        }.preferredColorScheme(.light)
    }
}

9:47 - focus section 1

import SwiftUI
import AuthenticationServices


struct ContentView: View {

    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Spacer(minLength:60).frame(height: 150)
                Text("Vacation\nPlanner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(Color.black.opacity(0.8))
                    .lineLimit(nil)
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 40)

                Spacer().frame(height:80)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)

                Spacer().frame(height:30)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .textContentType(.password)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(Color.black.opacity(0.7))

                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                Spacer()
            }
            .frame(width: 350, alignment: .center)

            VStack {
                Image(photoName)
                    .resizable()
                    .frame(width: 1400)
                    .aspectRatio(contentMode: .fit)
                    .ignoresSafeArea(edges: [.trailing])
                BrowsePhotosButton()
            }
            .focusSection()
        }.preferredColorScheme(.light)
    }
}

10:06 - focus section 2

import SwiftUI
import AuthenticationServices


struct ContentView: View {

    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Spacer(minLength:60).frame(height: 150)
                Text("Vacation\nPlanner")
                    .font(.custom("Baskerville-SemiBoldItalic", size: 60))
                    .foregroundColor(Color.black.opacity(0.8))
                    .lineLimit(nil)
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 40)

                Spacer().frame(height:80)

                TextField("Email", text: $email)
                    .submitLabel(.next)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)

                Spacer().frame(height:30)

                SecureField("Password", text: $password)
                    .submitLabel(.go)
                    .textContentType(.password)

                HStack {
                    Rectangle().frame(height: 1)
                    Text("or").bold().padding()
                    Rectangle().frame(height: 1)
                }
                .foregroundColor(Color.black.opacity(0.7))

                Spacer().frame(height: 20)

                SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
                } onCompletion: { result in
                    switch result {
                    case .success (_):
                        print("Authorization successful.")
                    case .failure (let error):
                        print("Authorization failed: " + error.localizedDescription)
                    }
                }
                .frame(height: 50)
                Spacer()
            }
            .frame(width: 350, alignment: .center)
            .focusSection()

            VStack {
                Image(photoName)
                    .resizable()
                    .frame(width: 1400)
                    .aspectRatio(contentMode: .fit)
                    .ignoresSafeArea(edges: [.trailing])
                BrowsePhotosButton()
            }
            .focusSection()
        }.preferredColorScheme(.light)
    }
}

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

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

リソース

関連ビデオ

WWDC22

WWDC21