tvOS向けのSwiftUI Appを構築する

SwiftUIでtvOS Appに新たな側面をもたらしましょう。ここでは、SwiftUIによってレイアウトを構築し、カスタムボタンでインターフェイスをカスタマイズし、コンテキストメニューでAppの機能性を高め、ビューのフォーカスを確認し、デフォルトのフォーカスを管理する方法をご紹介します。このセッションを有効活用するには、SwiftUIを使いこなせることが望まれます。まずは"Introducing SwiftUI: Building Your First App"と"SwiftUI On All Devices"をご覧ください。

リソース

関連ビデオ

WWDC20

SwiftUIの新機能

WWDC19

こんにちは　WWDCにようこそ “tvOS向けのSwiftUI Appを構築する” 私はタヌ・シンガル tvOSチームのエンジニアです Apple TV向けSwiftUI Appの構築についてお話します新規APIを紹介しベストプラクティスを説明した後 TVユーザーにとって馴染みやすい体験を作り出す一助となる事例を見ていきます

最初にtvOS 14の新機能ボタンスタイルとコンテクストメニューについて説明し

次にApp上でフォーカスを管理する方法をお話します

最後に家庭の大画面で美しく見えるレイアウトの作成方法を学びましょう TVには固有のボタンスタイルがあります例をご覧ください Apple TVで音楽をストリーミングする Appを構築するとしますこれはデザインチームから受け取ったモックアップです Siri Remoteでドラッグした時にボタンが動く効果をつけてほしいという指定がありましたこの“アルバム”の下のボタンのような感じです

SwiftUIでこのようなボタンを作成するには新しいCardButtonStyleが使えます

CardButtonでフォーカスした時に浮き上がり強調されたように見えるベースが作れますさらにSiri Remoteでドラッグした方向に動く効果も加わります

CardButtonの作成方法はボタンにボタンスタイルモディファイアをつけ CardButtonStyleを設定するだけです

CardButtonStyleがあればボタンのアピアランスが各段に向上しますしかし既存のボタンスタイルに設定してあるような強調やフォーカスの効果を使いたくない場合もあるでしょうそのような時は独自にボタンスタイルを作ることもできますこの場合プレスやフォーカスの状態に既存の効果はついていませんカスタムボタンスタイルを使えば設定やカスタマイズがとても簡単です

独自のボタンスタイルを作るにはまず ButtonStyleプロトコルに準拠させてください

makeBodyメソッド内で設定を活用しあらゆるビューを呼び出せます

設定したボタンスタイルはボタンスタイルモディファイアを使ったボタンに追加できますこれでAppのボタンの設定ができましたが他にも追加したい機能がありますアルバムのボタンを長押しした時にこの表示のようなクイックアクションを起こしたいのです

コンテクストメニューを使えば簡単にSwiftUIに実装できますコンテクストメニューをボタンやビューに追加し長押しの操作をした時に呼び出すことができますコンテクストメニューに通常のボタンを使ったアクションを足すこともできます

これはコンテクストメニューの作り方を示すコードの例ですコンテクストメニューモディファイアをつけその中にボタンを追加するだけですご覧のように新しいボタンスタイルとコンテクストメニューは非常に簡単に使えますきっとApp上で映えるでしょう次にフォーカスについて説明しますこれはTV Appとやり取りをする際の要ですビューにフォーカスできるだけでなくビューがフォーカスされているか判断できることは非常に重要です先ほどの音楽 Appを例にフォーカスについて詳しく見ていきましょう

“再生中”の画面で現在再生中の楽曲にフォーカスしましょうフォーカスしているこの楽曲のアーティスト名のほかアルバム名と音符の絵文字も表示させたいと思います

フォーカスしていない楽曲はアルバム名を除いてアーティスト名だけを表示します

この動きを実装するにはまずSongViewにフォーカスする必要がありますフォーカス可能なモディファイアを使うのが１つの方法ですフォーカス可能なモディファイアで既存のビューのトップにフォーカス可能なラッパーを作ります

このモディファイアは元来フォーカス可能なビュー用ではないことに注意してくださいですからUIKitでフォーカスを管理するボタンやリスト UIKitビューがある場合そこではフォーカス可能なモディファイアを使わない方がよいでしょうこのモディファイアは既存のビューのトップに別のフォーカス可能なラッパーを追加するからです tvOS 13でフォーカス可能およびフォーカス不可能な状態を管理する時はフォーカス可能なモディファイアにonFocusChange コールバック関数を使う必要がありました

しかしtvOS 14では新たに isFocused環境変数を導入しています

これによって特定のビューがフォーカスされているかチェックできますビュー自体はフォーカス不可であっても構いません isFocused環境変数はビュー内の直近のフォーカス可能な祖先がフォーカスされている場合にtrueを返します

では前に示したSongViewのコードに戻りましょうこれはテキストラベルがついた画像が1点ありますテキストラベルをDetailsViewにリファクタリングします

DetailsView内で環境変数を使えば isFocusedはこのビューがフォーカスされているか否かをチェックします DetailsViewの親である SongViewがフォーカスされている場合 isFocused変数はtrueです

このisFocused変数を使ってアーティスト名やアルバム名を絵文字と共に表示したり表示がフォーカスされていない時アーティスト名だけ表示したりするのも可能です SongViewではボタンを使うのでフォーカス可能なモディファイアを使う必要は一切ありませんもともとボタンはフォーカス可能だからですボタンを使うことで選択とアクセシビリティを無料で活用できるのもメリットです

既存のボタンスタイルについている既定の強調とフォーカスの効果を使いたくないのでここではオリジナルのボタンスタイルを追加しました

以上でAppの設定はほぼ完了しいつでも音楽のストリーミングを開始できるようになりました

ただユーザーがプレミアムコンテンツを聴けるようこのAppの有料版も追加したいです有料版を作成するには最初にサインイン画面を設定しましょう

ユーザー名とパスワード欄にログインボタンが並んだシンプルな画面です初期設定でユーザー名欄がフォーカスされていることが分かります tvOSはローディング時にフォーカスすべきビューを幾何学的に計算します一般的には画面の最上段や先頭のフォーカス可能なビューにあたりますこの場合ユーザー名がフォーカスされているのは当然でしょうでも既にユーザー名やパスワードを知っていて代わりにログインボタンにフォーカスしたい場合もあります

この動作をSwiftUIに実装するには新たな初期設定のフォーカスAPIを使います

prefersDefaultFocusモディファイアを紹介しましょう初期設定でフォーカスしたいビューを指定することができます小さなカスタムビューを設定している時に全体のグローバルビューの階層を誤って変更しないように注意してくださいこの懸念を払しょくするために focusScopeモディファイアを用意しましたこれによってフォーカスの初期設定変更を特定のビューに制限することができます先ほど見たログイン画面のコードを見てみましょう VStack TextField SecureFieldとボタンがシンプルに並んでいますここにフォーカスを管理するコードを追加しますすぐに読解できなくても心配ありません１行ずつ見ていきましょう認証情報が入力されているかを確認する状態変数がありますここでユーザー名のTextFieldに prefersDefaultFocusモディファイアを足しますモディファイアの最初のパラメータはブーリアン関数でこのビューをフォーカスの初期設定にした場合に trueを返しますこの場合認証情報が未入力の時は初期設定よりユーザー名を優先しフォーカスします同じモディファイアをログインボタンにも追加します認証情報が入力されている時は初期設定のフォーカスを優先します次にフォーカスの優先を設定中の VStackに制限してみましょうそのためにはネームスペースを作成しますネームスペースは動的プロパティでビューの特定に用いる固有の IDが使えるようになりますこのネームスペースをVStackに追加した focusScopeモディファイアに足しましょう

次に同じネームスペースを２つ目のパラメータとして prefersDefaultFocusモディファイアに渡しますこれで初期設定の変更が VStackのみに適用されるようになりましたですからフォーカスをVStack内のみに設定すると認証情報が入力されているか否か次第でそれぞれユーザー名やログインボタンがフォーカスされますしかしフォーカスがビュー階層の別のどこかに当たるべき場合は意向どおりモディファイアはグローバルのフォーカスには影響しませんフォーカスの初期設定を指定する他にフォーカスをリセットしたい場合もあるでしょうそれも新しいresetFocus環境アクションを使えば対応可能ですこの環境アクションはフォーカスを初期設定にリセットしますこの場合もフォーカスの更新は与えたネームスペースの範囲内にとどまります先ほど見たサインイン画面の例でやり直しボタンも追加したいとしましょうユーザー名とパスワードを消去しフォーカスをユーザー名に戻すボタンです実装するには resetFocus環境アクションを使いますやり直しボタンが発動したら focusScopeにあるのと同じネームスペースに resetFocusを呼び出しますこの時点で認証情報は消去されているのでユーザー名をフォーカスするようリセットされますこのセクションではisFocus環境変数に加えフォーカスの初期設定を操作できる新規モディファイアや環境アクションについて説明しました SwiftUI Appを構築する際にとても役立つと思います最後にApple TVで一般的にみられるレイアウトの構築方法を知ってくださいこれは先ほど見た音楽ストリーミングAppのビューですさまざまなApple TV Appで同様のレイアウトを見たことがあるでしょうこれは水平にスクロールするシェルフで構成されていますこの画面を実装する際は新しいLazy Gridを使います

これは垂直または水平にスクロールするグリッドコンテナ内に子ビューを配置するものですグリッドアイテムでサイズや配置間隔などレイアウトの構築に役立つプロパティを指定できますグリッドの詳細は次の２つのセッションをチェックしてくださいこのセッションではLazy Gridを活用し先ほどのようなレイアウトの構築法を学びます ShelfViewの中に水平にスクロールする ScrollViewを作成し水平のScrollViewの中に LazyHGridを追加しましたこのLazyHGridには多数のアイテムを追加でき一度にすべてが初期化されることはありませんスクロール中必要な時にローディングされます

Lazy GridにGridItemも設定します GridItemサイズはフレキシブルに固定でき GridItem間のスペースもカスタマイズ可能です

Lazy Gridの中にセル内で提示したいコンテンツを追加するだけですシェルフが整ったので複数のシェルフをVStack内で積み重ねますテキストラベルもつけて先ほど見たようなレイアウトを作ります Apple TVに美しいグリッドを表示させるのはこんなに簡単です以上を要約しますと tvOS 14の新しいCardButtonStyleとコンテクストメニューをぜひお試しくださいとても簡単に使えてApp上できれいに映えます

新たなフォーカスAPIを使うと App内のフォーカスを管理しやすくなり非常に便利です

最後にLazy Gridを活用すれば短時間でtvOSのレイアウトを構築できますこれから皆さんがSwiftUIで構築するプロダクトを楽しみにしていますそれではWWDCが素晴らしい体験になりますように

1:42 - CardButtonStyle

Button(albumLabel, action: playAlbum)
    .buttonStyle(CardButtonStyle())

2:24 - Custom Button Styles

struct MyNewButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
           .background(configuration.isPressed ? … : …) // Custom styling
    }
}           

Button(albumLabel, action: playAlbum)
    .buttonStyle(MyNewButtonStyle())

3:19 - Context Menus

AlbumView()
    .contextMenu {
        Button("Add to Favorites", action: addAlbumToFavorites)
        Button("View Artist", action: viewArtistPage)
        Button("Discover Similar Albums", action: viewSimilarAlbums)
    }

5:47 - isFocused Environment Variable

struct SongView: View {
    var body: some View {
        Button(action: playSong) {
            VStack {
                Image(albumArt)
                DetailsView(...)
            }
        }.buttonStyle(MyCustomButtonStyle())
    }
}

struct DetailsView: View {
    ...
    @Environment(\.isFocused) var isFocused: Bool
    var body: some View {
        VStack {
            Text(songName)
            Text(isFocused ? artistAndAlbum : artistName)
        }
    }
}

8:42 - Login Screen (Default Focus)

var body: some View {
    VStack {
        TextField("Username", text: $username)

        SecureField("Password", text: $password)

        Button("Log In", action: logIn)

    }

}

8:51 - Default Focus

@Namespace private var namespace
@State private var areCredentialsFilled: Bool

var body: some View {
    VStack {
        TextField("Username", text: $username)
            .prefersDefaultFocus(!areCredentialsFilled, in: namespace)            
        SecureField("Password", text: $password)

        Button("Log In", action: logIn)
           .prefersDefaultFocus(areCredentialsFilled, in: namespace)
    }
    .focusScope(namespace)
}

11:12 - Reset Focus

@Namespace private var namespace
@State private var areCredentialsFilled: Bool
@Environment(\.resetFocus) var resetFocus

var body: some View {
    VStack {
        TextField("Username", text: $username)
            .prefersDefaultFocus(!areCredentialsFilled, in: namespace)            
        SecureField("Password", text: $password)

        Button("Log In", action: logIn)
           .prefersDefaultFocus(areCredentialsFilled, in: namespace)

        Button("Clear", action: { 
            username = ""; password = ""
            areCredentialsFilled = false
            resetFocus(in: namespace)
        })
    }
    .focusScope(namespace)
}

12:45 - Lazy Grids

struct ShelfView: View {
    var body: some View {
        ScrollView([.horizontal]) {
            LazyHGrid(rows: [GridItem()]) {
                ForEach(playlists, id: \.self) { playlist in                
                    Button(action: goToPlaylist) {
                        Image(playlist.coverImage)
                            .resizable()
                            .frame(…)
                    }
                    .buttonStyle(CardButtonStyle())
                }
            }
        }
    }
}