TV App: Apple TVとAndroid TV向け開発の基礎

TV Appとは

TV App — スマートテレビプラットフォームで動作するように設計されたアプリケーション：Apple TV（tvOS）およびAndroid TV（Google TV）。モバイルアプリとの主な違いはインタラクション方法です。ユーザーは画面に触れるのではなく、リモコンを使用してインターフェースを操作します。すべての要素は方向性ナビゲーション（D-pad：上、下、左、右、選択ボタン）でアクセス可能でなければなりません。

TV App開発の特徴：画面解像度はFull HD（1920x1080）から4K（3840x2160）まで、密度はxhdpi（Android）または@3x（Apple）。オーバースキャン（画像の一部がテレビで切り取られる可能性がある）を補正するために、端から5%のセーフゾーンが必須です。タッチスクリーンはなく、すべての操作はリモコンまたはゲームパッドを介して行われます。フォーカスは常にアクティブな要素を強調表示します。電力消費はバッテリーに制限されませんが、アプリケーションはスリープモードへの移行を適切に処理する必要があります。Statista（2026年）によると、世界のスマートTV市場は新規テレビの80%以上を占め、Apple TVとAndroid TVで2億5000万台以上のデバイスを占めています。

TVアプリケーションのカテゴリ：動画サービス（Netflix、YouTube、Apple TV+）、音楽（Spotify、Apple Music）、ゲーム（Apple Arcade、Google Play Games）、フィットネス（Apple Fitness+、Peloton）、教育、ニュース、天気、写真。最も人気のあるカテゴリは動画ストリーミングで、スマートTVの使用時間全体の70%を占めています。

Apple TV（tvOS）：アーキテクチャ

tvOSはApple TVセットトップボックス向けのAppleのオペレーティングシステムで、iOSをベースにしています。最初のリリースは2015年、第4世代Apple TVと同時でした。tvOSはiOSとXNUカーネル、Foundationフレームワーク、UIKit（アダプテッド版）、App Sandboxセキュリティメカニズムを共有しています。開発はSwiftUIまたはUIKitを使用してSwiftで行われます。

tvOSの主要コンポーネント：

• Focus Engine — アクティブなインターフェース要素を自動的に決定するフォーカス管理システム
• tvOS用UIKit — UIFocusGuide、UIFocusEnvironment、UIFocusAnimationCoordinator（フォーカス管理用）
• SwiftUI — FocusStateとfocusable()修飾子を備えた宣言的フレームワーク
• TVMLKit — JavaScript/TVMLインターフェース用フレームワーク（現代のプロジェクトではほとんど使用されない）
• StoreKit — アプリ内購入とサブスクリプション
• AVFoundation — HDRおよびDolby Atmos対応の動画・音声コンテンツ再生

tvOSアプリのライフサイクルはiOSと同様：notRunning、foregroundActive、foregroundInactive、background。特記事項：アプリは不必要にバックグラウンド権限を要求すべきではありません — システムがバックグラウンドプロセスを強制終了する可能性があります。ナビゲーショントポロジーはUISplitViewControllerとUITabBarControllerを中心に構築され、「ホーム」「検索」「ライブラリ」「設定」のタブがあります。

Android TV：アーキテクチャ

Android TVはテレビやセットトップボックス向けに最適化されたAndroidのバージョンで、2014年に初めて発表されました。2020年からはGoogle TVが存在します — 新しいインターフェースを備えたAndroid TV上のレイヤーですが、アプリ開発はGoogle TVと互換性のあるAndroid TV SDKで行われます。主要言語はKotlin、UIフレームワークはLeanback Library（クラシック）とJetpack Compose for TV（実験的）です。

Android TVの主要コンポーネント：

• Leanback Library — BrowseFragment、DetailsFragment、PlaybackOverlayFragment、SearchFragment、Presenter
• Android TV Input Framework — キーボード、リモコン、ゲームパッドの作成
• MediaSession — メディアコンテンツ再生管理
• Recommendations — NotificationManagerを介したホーム画面のレコメンドチャンネル
• Leanback Preferences — TVスタイルの設定画面

Android TVとモバイルAndroidの違い：アプリはマニフェストでLEANBACK_LAUNCHERカテゴリを宣言する必要があります。最小レイアウト幅は1920dp。タッチ操作はD-padナビゲーションに置き換えられます。Leanbackフラグメントの使用が推奨されます。ハードウェアアクセラレーションが必須です。ビルドにはARM64およびx86アーキテクチャをサポートするAPK/AABが含まれます。2025年以降のモダンなプロジェクトでは、TvLazyColumn、TvButton、TvCardなどのコンポーネントを備えたJetpack Compose for TVが推奨されています。

Focus Engineとフォーカス管理

Focus Engine — どのインターフェース要素がアクティブかを判断する、あらゆるTVプラットフォームの主要コンポーネントです。tvOSでは、Focus EngineはUIKitに組み込まれており、自動的に動作します。D-padボタンが押されると、システムはすべてのフォーカス可能な要素の位置を分析し、押された方向の最も近い候補を計算し、アニメーション（UIFocusAnimationCoordinator）を伴ってフォーカスをスムーズに移動します。

Focus Engineのルール：システムは移動軸に沿った要素間の距離、要素の投影の交差（要素の投影が現在のフォーカスの投影と交差する場合、その要素は候補と見なされる）、同じ距離の要素の優先順位（直線で最も近いものが選択される）を考慮します。開発者はUIFocusGuideを使用してフォーカスに影響を与えることができます — これは、特定の方向に押したときにフォーカスを特定の要素にリダイレクトする非表示のガイド長方形です。

Android TVでは、フォーカスはfocusable属性とnextFocus*属性（nextFocusDown、nextFocusUp、nextFocusLeft、nextFocusRight）を使用した標準のAndroidフォーカスシステムによって実装されます。アニメーションはStateListAnimatorを介して構成されます。Googleはすべてのインタラクティブ要素にfocusableを設定し、正確なナビゲーション制御のためにnextFocusを使用することを推奨しています。フォーカスアニメーションはユーザー体験にとって重要です — フォーカスが変わるとき、150〜250ミリ秒の持続時間でスムーズなスケーリングアニメーション（1.0 → 1.05〜1.2）が発生する必要があります。

コード例：SwiftとKotlin

Focus Engineをサポートした映画リストを表示する、Apple TV向けSwiftUIのシンプルなTVアプリケーションの例です。

import SwiftUI

struct Movie: Identifiable {
    let id = UUID()
    let title: String
    let subtitle: String
}

struct ContentView: View {
    @FocusState private var focusedMovie: UUID?

    let movies: [Movie] = [
        Movie(title: "Inception", subtitle: "2010, Sci-Fi"),
        Movie(title: "Interstellar", subtitle: "2014, Sci-Fi"),
        Movie(title: "The Matrix", subtitle: "1999, Action"),
        Movie(title: "Blade Runner 2049", subtitle: "2017, Sci-Fi"),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 40) {
            Text("映画").font(.title).padding(.leading, 60)
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 40) {
                    ForEach(movies) { movie in
                        VStack {
                            Image(systemName: "film.fill")
                                .resizable()
                                .frame(width: 200, height: 300)
                                .cornerRadius(12)
                                .focusable()
                                .focused($focusedMovie, equals: movie.id)
                            Text(movie.title).font(.headline)
                            Text(movie.subtitle).font(.subheadline).foregroundColor(.secondary)
                        }
                        .scaleEffect(focusedMovie == movie.id ? 1.15 : 1.0)
                        .animation(.easeInOut(duration: 0.2), value: focusedMovie)
                    }
                }
                .padding(.horizontal, 60)
            }
        }
        .onAppear { focusedMovie = movies.first?.id }
    }
}

重要なポイント：@FocusState — 現在のフォーカスを追跡。.focusable() — 要素をフォーカス可能にする。.scaleEffect() — フォーカス時の拡大アニメーション。テレビでの視覚的フィードバックにとって重要。

KotlinでLeanback Libraryを使用したAndroid TV向けの同様の例：

// MainActivity.kt
class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

class MainFragment : BrowseSupportFragment() {
    private val moviePresenter = MoviePresenter()

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        title = getString(R.string.app_name)
        headersState = HEADERS_ENABLED
        setupAdapter()
    }

    private fun setupAdapter() {
        val rowsAdapter = ArrayObjectAdapter(ListRowPresenter())
        val listRowAdapter = ArrayObjectAdapter(moviePresenter)
        listRowAdapter.add(Movie("Inception", "2010", R.drawable.poster_1))
        listRowAdapter.add(Movie("Interstellar", "2014", R.drawable.poster_2))
        rowsAdapter.add(ListRow(HeaderItem(0, "Movies"), listRowAdapter))
        adapter = rowsAdapter
    }
}

data class Movie(val title: String, val subtitle: String, val imageResId: Int)

class MoviePresenter : Presenter() {
    override fun onCreateViewHolder(parent: ViewGroup): ViewHolder {
        val cardView = ImageCardView(parent.context).apply {
            isFocusable = true
            setMainImageDimensions(200, 300)
        }
        return ViewHolder(cardView)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, item: Any) {
        val movie = item as Movie
        (viewHolder.view as ImageCardView).apply {
            titleText = movie.title
            contentText = movie.subtitle
        }
    }

    override fun onUnbindViewHolder(viewHolder: ViewHolder) {}
}

重要なポイント：BrowseSupportFragment — ヘッダー付きのメインLeanbackフラグメント。Presenter — RecyclerView.Adapterと同様のViewHolder作成のための抽象化。ImageCardView — 画像、タイトル、サブタイトル付きの標準カード。isFocusable = true — TV要素の必須属性。