TVMLアプリをSwiftUIに移行

TVMLアプリをSwiftUIに移行

SwiftUIは、あらゆるAppleプラットフォームで優れたアプリを構築する際に役立ちます。tvOS 18でコンテンツをリビングルームで視聴できるようにするためのツールキットとして推奨されています。このセッションでは、広く利用されているTVMLKitのレイアウトとコントロールに準拠した環境をSwiftUIで構築する方法と、関連するヒントやベストプラクティスをご紹介します。

関連する章
- 0:00 - Introduction
- 3:54 - Lockups
- 5:12 - Shelves
- 7:35 - Catalogs
- 11:07 - Search
リソース
関連ビデオ

WWDC24
ダウンロード

こんにちは「TVMLアプリをSwiftUIに移行」へようこそエンジニアのJimです tvOS用のSwiftUIに携わっていますこれから皆さんに SwiftUIのtvOSアプリが持つ優れた機能をご紹介し TVMLで開発されているようなアプリを構築する方法について説明します tvOS 18のSwiftUIにはセットトッププラットフォームに合わせてリッチなフル機能のメディアカタログとストリーミングアプリを構築できる各種機能が揃っていますそれと引き換えに TVMLKitは公式に非推奨扱いとなりました TVMLKitは tvOSの一部として存続しますがプラットフォームとともに発展することはありません 2015年に Appleが tvOSを世に出したとき現在のようなストリーミングメディアの世界はなく状況が大きく違いました当時のストリーミングアプリは Webページ形式が普通でコンテンツプロバイダは Webの開発に力を注いでいました TVMLKitは当時活用されていたリソースや専門知識を生かして優れたApple TV用アプリを開発するために適していたのです
現在コンテンツの楽しみ方の主流は iPhoneやiPadなどのデバイス TVに接続したセットトップボックスコンピュータやApple Vision Proなどのデバイスに移りましたストリーミングメディアのカタログにアクセスする手段は各種プラットフォームに適したツールで作られたネイティブアプリですアプリは親しみやすいパーソナルなカスタマー体験を実現しやすくデバイス環境に合った自然な操作性と見せ方を守りながら独自のスタイルを打ち出して機能を提供できます SwiftUIのツールキットには共通の言語とコンポーネントから各プラットフォーム向けに調整されたネイティブコードとUIを生成できる機能がありますお持ちの開発リソースや専門知識を他のプラットフォームにもスムーズに変換して機能させることができます
Apple TVであれば tvOSのネイティブUIが生成され優れたtvOSアプリとしての特徴を備えた美しいデザインになります TVMLKitでできたことはすべて SwiftUIでも実現されておりさらなる柔軟性と優れた新機能が年々加わりますアプリ開発に使うSwiftはプラットフォーム共通の言語で iOS iPadOS macOS watchOS visionOSアプリの開発にも対応できます
つまりネイティブ開発用の既存のリソースを活用できます iPadアプリと同じ開発ツールと手法を使って Apple TV用のアプリを作成できるのです同じコードを共用できる環境は以前からありますが他のOSとまったく同じコードで tvOSアプリを作れるようになっています
これから紹介するのは SwiftUIによるコンテンツカタログアプリ作成の基本です共通のコンポーネントを使って他のAppleプラットフォームと同じ方法でアプリを開発しすべてのApple TVユーザーが馴染んでいるインターフェイスと動作を実現しますまず tvOS用メディアアプリで使われる標準的なデザイン方針について説明します
普通メディアカタログを起動したとき初期画面に表示されるのは視聴者向けホームページですページの上部には通常プロモーション用のコンテンツが割り当てられ画面の端まで広がって表示されます
プロモーション用コンテンツにはたいてい即座にアクセスするためのクイックアクションが付きますプロモーション用コンテンツエリアの下はその他のコンテンツを表示するシェルフです
各アイテムのアートワークを紹介するあざやかなロックアップが並んで表示されます最後に画面上部にはタブバーがあり検索機能などアプリ内のいろいろなセクションに直接アクセスできます
ここでは音楽やTVなどの Appleアプリでお馴染みのロックアップを実現する方法を説明しますコンテンツロックアップの流れるシェルフ表示の作成に役立つテクニックを紹介しますアプリのランディングページを印象的なものにする手軽なレイアウトの作り方やスムーズに使える検索機能を数行のコーディングで実現する方法も紹介します
では先ほど見たようなロックアップデザインの作り方を考えるところから始めましょう
tvOSで一般的に使われる形のロックアップは 1枚の画像とその下の短いテキストで構成されます画像の四隅には緩やかな丸みが付きフォーカスすると画像が持ち上がり鏡を傾けたような反射効果の演出が入ります持ち上がった画像の周りにあるテキストは隠れないように位置調整されます SwiftUIではこれらすべてを実現できます基本的なレイアウトは簡単に作れます画像の下にテキストを配置するだけで目指すデザインにかなり近いものになりますこれをインタラクティブにするためにボタン内に配置しましょう
tvOSのボタンはデフォルトでは境界ありのbuttonStyleになります背景のプラッターが付きフォーカスに反応して持ち上がり色が変わります目指すデザインにするには buttonStyleを境界なしに設定しましょう
この時点で画像とタイトルは正しい向きに揃っており画像の四隅には丸みが付きかすかにドロップシャドウが付いていますこれがフォーカスされると画像が手前に持ち上がりテキストが下にずれ鏡面のようなハイライトが入りますユーザーがリモコンのタッチサーフェスで指を動かすと画像の傾きが変わりますこのコードはそのまま他のプラットフォームでも機能してプラットフォームに合ったインタラクティブな反応を返します
コンテンツの基本的なロックアップができました次はシェルフの作成ですコンテンツシェルフの標準的なデザインを再確認して作り方を考えてみましょう
コンテンツを左右に流すように表示し画面のセーフエリアに収まるよう自動的に位置を調整させますそうすれば周りの要素との整合性が保たれるでしょう
またはみ出したコンテンツを画面のエッジから少し見せるようにしてその方向に別のコンテンツがあることを伝えます
最初の段階として水平スクロールのスタックを作ります最も手軽にできるのは ScrollViewの中に LazyHStackを組み込む方法です境界なしbuttonStyleでロックアップの見た目を指定し ScrollViewのスクロールクリッピングをオフにしますこれはフォーカスされたロックアップの大きい画像とドロップシャドウを断ち切らず ScrollViewの境界を越えて表示するためですシェルフ内の各アイテムは Buttonとして表示しますアイテムのポスター画像のサイズは正確な値を直接指定することもできますがサイズから計算したaspectRatioだけを指定したほうが便利な場合がありますこうすると SwiftUIが最適な表示のためにレイアウトを適宜調整できるからですここに指定したaspectRatioは映画ポスターの形に適した値ですが実際の表示に使われるポイント寸法は画面内のアイテム数に応じて決定されます
そのレイアウトの魔法を使うための指定が containerRelativeFrameモディファイアです SwiftUIにアイテムのフレームを自動的に決定させるための指示を伝えその参考情報を提供していますするとセーフエリア内のインセットに収まるようにコンテンツが自動調整されさらにスクロール境界からはみ出した前後のアイテムを画面の両端に部分的に表示するための十分なスペースも確保されます
まずアイテムのフレームを決める基準になるのは直接の祖先であるコンテナビューつまりここでは ScrollViewの左右の境界線ですこれだけだとボタンの画像が大きく引き伸ばされ ScrollViewの幅いっぱいに表示されますが 2つの属性を追加して挙動を変えられます
これらの属性でコンテナの水平方向に 6個のアイテムを並べることさらにアイテム間にどれくらい余白をとるかを指定し表示を調整しましょうこれは水平スタックに確保したスペースの大きさに合う設定です両方の設定値を合わせるのは重要なことですこのコードはまったく変更せずに他のプラットフォームでも使うことができ間隔やアイテム数などが適宜調整された同様のエクスペリエンスを提供できます
実際短いコードを数行書いただけで tvOS 9でTVMLを使って作っていた Appleのメディアアプリと同様の見た目や印象を再現できましたこのコンポーネントはとても柔軟なのでわずかな変更を加えるだけで多彩な目的に合った使い方ができます
たとえばボタンのタイトルを削除し containerRelativeFrameモディファイアを少し調整するとヒーローサイズのロックアップカルーセルができます
またアートワークのアスペクト比を変更し containerRelativeFrame 1個あたりのアイテム数を変更すればアルバムアートワークに最適なサイズになります
もっと情報密度を高める必要がある場合はカードbuttonStyleを使えば TVアプリの検索結果表示と同じタイプのロックアップを作ることもできます
カードbuttonStyleの場合は角が丸い台紙の上にコンテンツが表示され持ち上がりや傾きの表現は境界なしbuttonStyleよりも控えめな動きになります繰り返しますがそのような挙動に変更するために必要なのはカードbuttonStyleだけです
シェルフができたのでスタートページの作成にかかりましょう
セクションビューではシェルフごとにタイトルを表示しフォーカスがロックアップに移ったときは自動的にタイトルの位置をずらして隠れないようにします各ボタンのタイトルと同様の挙動です
ホームビューでは画面の隅々まで背景画像を大きく表示したいところですホームビューとしての存在感を美しい画像でしっかりと示しましょう最初はシンプルなビューを作ってそこにタイトルといくつかボタンを配置します要素間には余白を作り背景がよく見えるようにします
次はここに背景を付けるため外側のScrollViewに画像をアタッチしますエリアを満たせるよう画像のサイズを変更可能にしますまだ周囲が空いています画面の隅々まで広げるにはセーフエリアを無視する属性を設定します
ずいぶん格好よくなりました目指していたとおり画面の隅々までしっかりとコンテンツで満たされましたとはいえ下のシェルフアイテムの間にまで背景が見えるのは少し邪魔です
シンプルなグラデーションマスクでボタンの背景を目立たなくしましょうそれにはプレーンな線形グラデーションをマスクモディファイア付きで適用するだけですフェードアウトした画像を通して後ろにある背景が見えます
とても良くなりましたアプリの完成版にかなり近い見た目ですさらに理想をいえば背景が注目の対象とならないときには完全に隠れるようにしたいものです
tvOS 18.0では新機能として ScrollView用のビューモディファイアが多数加わりましたそれらを使えばヘッダーセクションが画面外に出たらつまりページの下方へスクロールしたら背景の表示を消すことができます
ここでヘッダービューに新しいonScrollVisibilityChange モディファイアをアタッチして画面外に出た場合の状態変更の操作を追加します
次に背景の表示処理をその状態に基づいて実行するようにします
また scrollTargetBehaviorを viewAlignedに設定してその状態遷移の明確さを高めることにします
以上すべてを盛り込むとこのようなランディングページができますダウンロード用のサンプルコードにはより高度な他の方法でこのスタイルのビューを実装する例も含まれているので参考にしてください tvOS 18の新しいScrollViewモディファイアと対応リリースについて詳しくは「Demystify SwiftUI containers」をご覧ください
ここまで順調に説明してきましたが以上の機能以外にも優れたコンテンツ配信サービスには検索機能が不可欠です既に作ったものを生かし優れた検索インターフェイスを提供する方法を考えてみましょうまず何より検索パネルにアクセスする手段を提供しなくてはなりません
最も標準的なアプローチは TabViewを使う方法です tvOS 18では表現力豊かなTabViewを型安全な構文で作る新しい方法ができましたこれは既存のコンテンツスタックを StackViewという新しいビュー内に配置し新しいタブにSearchViewを追加したものです SearchViewに含めるべき機能を考えてみましょう
普通検索ビューは大量のコンテンツから情報を探しやすいように作られますシェルフレイアウトはあまり適していると思えません検索結果の表示にはグリッドレイアウトを使うことにしましょう
最初の基本構造は他のビューと同様ですがその中にLazyVGridを配置します
この例では4列構成間隔は40ポイントサイズはフレキシブルに設定しています先ほどの場合と同じく aspectRatioモディファイアを使ってアイテムの実際のサイズは SwiftUIのレイアウト機構に自動的に決定させるようにします
ロックアップ自体はButtonでもう見慣れたとおりですが今度は上下方向にスクロールさせるので縦軸上に多くの件数を収められるように横長の画像を使って表示しましょうここで検索機能を提供するために 2つのしくみを追加しますまずビューに Stateプロパティを追加します検索語句が入力されるとこのプロパティに検索語句が代入されます ForEachビューに渡すコンテンツをこの値でフィルタリングすることで検索結果の表示内容を絞り込みます
次に .searchableモディファイアを追加して Stateプロパティ searchTermにバインドします
検索ビューの表示はこのモディファイア1つだけで実現できますアプリのユーザーによって検索語句の入力が開始されたら Stateプロパティ searchTermの値に一致しないアイテムが表示から除外されます
ユーザーは好きなロボット植物学者の出演する動画を検索したり憧れの植物を検索したりと何でも探す可能性があります検索対象となるコンテンツが大量にある場合やコンテンツアイテムに関連して入力されるキーワードが非常に長い場合のために語句の続きを提案する機能があると便利でしょう .searchSuggestionsモディファイアを追加するだけで簡単に実現できますこれは現在の検索語句を含んだキーワードのリストを取得し一連のテキストビューを作成するコードです結果はこのとおりです表示された補完候補をユーザーが選択すると検索フィールドに自動入力されます補完候補にフォーカスすると画面の検索フィールド内にプレビューが表示されその語句を選ぶことで実行されるアクションと現在の入力内容と補完候補との一致状況が表示されます繰り返しますがこのコードは他のプラットフォームでもそのまま使えます iPad Mac Apple Vision Pro用アプリにもまったく同じ方法で検索フィールドを追加できます
立派なデザインのApple TV用アプリが SwiftUIではとても簡単に作れることそしてここで作り方を見てきたアプリが他のAppleプラットフォームでも実質的に無変更で動くことを理解いただけたでしょうネイティブのSwiftUIアプリをリビングルームに提供することが今までになく簡単になったのです
私たちは明快で手軽な方法を用意して SwiftUIの最新のプラットフォーム機能を採用していただけるよう努力していますここでもう1つ皆さんに紹介したいことがあります TVアプリのフローティングサイドバーが tvOS 18ではSwiftUIによりシステム全体で利用できるようになりましたトランスルーセントの美しいデザインはそのままに TVアプリと同じインジケーターをコンパクトに表示できるよう縮小されています独自開発のサイドバーをお使いの場合はこの新しいデザインの採用を検討してください既存のナビゲーション分割ビューAPI を使って実現できますまた現在タブバーを採用している場合はわずか1行のコード変更でこのデザインを今すぐ試すことができます tabViewStyleを sidebarAdaptableに設定してください今までのタブバーがサイドバー表示に変わりますこのモディファイアは iPadOS 18でも同じように新しいデザインのタブバーを iPad上に表示する場合に使うものですまたユーザーの操作でタブバーとサイドバーを切り替えることができます tvOS上では単なるサイドバーとして機能しますがわずか1行のコードですべての関連動作が実現します
新しいTabView APIはあらゆる種類のコンテンツに対応できタブバーのミニマルなデザインを保ちながらフル機能のサイドバーを実現したものですつまり iPadアプリではシンプルで内容の少ないタブバーを表示し展開表示によってサイドバーの充実した機能を提供できます tvOSでも同じサイドバーコンテンツを非常に美しく表示できます詳しくは「Improve your tab and sidebar experience on iPad」で新しいタブバーAPIの詳細情報をご覧ください
Apple TV用アプリの提供を検討中の方は今こそ実行に移すときです SwiftUIなら簡単に立派な見栄えのtvOSアプリを開発できしかも大部分のコードを iPhone iPad Mac Apple Vision Proと共用できますまた既にお持ちのTVMLアプリがあるなら今こそ切り替えの検討をおすすめします
ここでは優れたApple TV用アプリを SwiftUIで簡単に作れることを紹介しましたボーダーなしbuttonStyleにはこのプラットフォームで標準的なコンテンツロックアップとインタラクションに必要な機能がすべて揃っていますコンテナ相対フレームを使えば試行錯誤なしでコンテンツシェルフを手軽に作れます詳しくは「What’s new in SwiftUI」で tvOS 18の優れた新機能と対応リリースについての情報をご覧ください「Demystify SwiftUI containers」では新しいコンテナAPIの詳細がわかりますクロスプラットフォームの上質なアプリナビゲーションUIの実現方法は「Improve your tab and sidebar experience on iPad」をご覧ください
このセッションのサンプルプロジェクトもご覧ください完全に実装されたサンプルコードが含まれているほかその他の例や提案事項も入っていますまた Apple TVでスムーズに動くクロスプラットフォームのフル機能アプリの実例として Destination Videoという最高のサンプルプロジェクトがあります tvOS 18のApple TV向けにすばらしいアプリが公開されることをチーム一同楽しみにしています

Button {} label: {
    Image("discovery_landscape")
        .resizable()
        .frame(width: 250, height: 375)
    Text("Borderless Portrait")
}
.buttonStyle(.borderless)

5:38 - Standard content shelf

ScrollView(.horizontal) {
    LazyHStack(spacing: 40) {
        ForEach(Asset.allCases) { asset in
            Button {} label: {
                asset.portraitImage
                    .resizable()
                    .aspectRatio(250/375, contentMode: .fit)
                    .containerRelativeFrame(.horizontal, count: 6, spacing: 40)
                Text(asset.title)
            }
        }
    }
}
.scrollClipDisabled()
.buttonStyle(.borderless)

8:19 - Card button

ScrollView(.horizontal) {
    LazyHStack(spacing: 48) {
        ForEach(Asset.allCases) { asset in
            Button {} label: {
                HStack(alignment: .top, spacing: 10) {
                    asset.landscapeImage
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .clipShape(RoundedRectangle(cornerRadius: 12))

                    VStack(alignment: .leading) {
                        Text(asset.title)
                            .font(.body)
                        Text("Subtitle text goes here, limited to two lines")
                            .font(.caption2)
                            .foregroundStyle(.secondary)
                            .lineLimit(2)
                        Spacer(minLength: 0)
                        HStack(spacing: 4) {
                            ForEach(1..<4) { _ in
                                Image(systemName: "ellipsis.rectangle.fill")
                            }
                        }
                        .foregroundStyle(.secondary)
                    }
                }
                .padding([.leading, .top, .bottom], 12)
                .padding(.trailing, 20)
                .frame(maxWidth: .infinity)
            }
            .containerRelativeFrame(.horizontal, count: 3, spacing: 48)
        }
    }
}
.scrollClipDisabled()
.buttonStyle(.card)

8:39 - Landing page

ScrollView(.vertical) {
    LazyVStack(alignment: .leading, spacing: 26) {
        VStack(alignment: .leading) {
            Text("tvOS with SwiftUI")
                .font(.largeTitle).bold()

            Spacer(minLength: 300)

            HStack {
                Button("Show") {}
                Button(“More Info…”) {}
                Spacer()
            }
            .padding(.bottom, 100)

            Spacer()
        }
        .onScrollVisibilityChange { visible in
            withAnimation {
                belowFold = !visible
            }
        }

        Section("Movie Shelf") {
            MovieShelf()
        }

        Section("TV and Music Shelf") {
            TVMusicShelf()
        }

        Section("Content Cards") {
            CardShelf()
        }
    }
    .scrollTargetLayout()
}
.scrollClipDisabled()
.background(alignment: .top) {
    if !belowFold {
        Image("beach_landscape")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .ignoresSafeArea()
            .mask {
                LinearGradient(stops: [
                    .init(color: .black, location: 0.0),
                    .init(color: .black, location: 0.45),
                    .init(color: .black.opacity(0), location: 0.8)
                ], startPoint: .top, endPoint: .bottom)
            }
    }
}
.scrollTargetBehavior(.viewAligned)

11:13 - Tab view

TabView {
    Tab("Stack", systemImage: "line.3.horizontal") {
        StackView()
    }

    // Other Tabs...

    Tab("Search", systemImage: "magnifyingglass") {
        SearchView()
    }
}

11:50 - Search page

@State var searchTerm: String = ""

let columns: [GridItem] = Array(repeating: .init(.flexible(), spacing: 40), count: 4)

ScrollView(.vertical) {
    LazyVGrid(columns: columns) {
        ForEach(sortedMatchingAssets) { asset in
            Button {} label: {
                asset.landscapeImage
                    .resizable()
                    .aspectRatio(16 / 9, contentMode: .fit)
                Text(asset.title)
            }
        }
    }
}
.scrollClipDisabled()
.buttonStyle(.borderless)
.searchable(text: $searchTerm)
.searchSuggestions {
    ForEach(suggestedSearchTerms, id: \.self) { suggestion in
        Text(suggestion)
    }
}

14:59 - Sidebar adaptable tab view style

TabView {
    Tab("Stack", systemImage: "line.3.horizontal") {
        StackView()
    }

    // Other Tabs...

    Tab("Search", systemImage: "magnifyingglass") {
        SearchView()
    }
}
.tabViewStyle(.sidebarAdaptable)

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

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

関連する章

リソース

関連ビデオ

WWDC24