React Nativeを使用した開発の開始（Fire TV）

Amazon Fire TVでは、Reactウェブ開発フレームワークを利用したオープンソースのモバイルアプリ開発フレームワークであるReact Native（英語のみ）がサポートされています。React Nativeには、もともと2020年にTV向けのサポートがいくつか追加されました。その後、メンテナンス性を高めるために、React Nativeのメンテナによってモジュールが別々のリポジトリに分割されていきました。結果として、TVサポートはReact Native tvOSという専用のプロジェクトに移動されました。

react-native-tvosプロジェクトは、既存のReact NativeアプリをTV上で動作させるように特に調整された、React Nativeのメインリポジトリのオープンソースフォークです。このプロジェクトにより、フォーカス管理やタッチ可能なコントロールへのアクセスなどのTVサポートがReact Nativeアプリに提供されます。

新しいReact NativeアプリではExpoを使用できます。Expoは、人気の高いオープンソースの開発者ツールとサービスのセットで、React Nativeアプリのビルドとデプロイに使用されます。Expoの使用方法の詳細については、Build Expo apps for TV（英語のみ）を参照してください。

React Nativeアプリの構築時に使用できる機能、デザイン、戦略の詳細については、Start building apps for TV with React Native（英語のみ）を参照してください。

前提条件
- Android Studioの構成
Fire TV対応アプリのビルド
- Android TVエミュレーターでのプロジェクトの実行
- Fire TVデバイスでのプロジェクトの実行
関連トピック

前提条件

React Nativeで開発を始めるには以下が必要です。

Node.js： JavaScriptランタイム環境としてNode.jsを使用します。
npmまたはYarn：これらのJavaScript用のパッケージマネージャーをインストールします。
Android Studio： Android StudioをIDEとして使用して、Fire OSアプリをローカルでコンパイルして実行します。

Android Studioの構成

Android Studioとそのコマンドラインツールを構成する必要があります。

Android Studioを構成するには

ANDROID_HOME環境変数を設定します。OS固有の手順については、環境変数を設定する方法を参照してください。
仮想デバイスマネージャーからAndroid TVエミュレーターをインストールします。

Fire TV対応アプリのビルド

React Nativeを使用してFire TV対応アプリをビルドするには、expoパッケージがインストールされた新しいプロジェクトを作成する必要があります。

新しいプロジェクトを作成するには

コマンドプロンプトで、expoパッケージがインストールされた新しいReact Nativeプロジェクトを作成します。
```
npx create-expo-app FireTVDemo -e with-tv
```

Android TVエミュレーターでのプロジェクトの実行

Android TVエミュレーターでプロジェクトを起動して実行できます。

TVエミュレーターでプロジェクトを実行するには

コマンドプロンプトで、使用できるAndroid仮想デバイス（AVD）の一覧を表示します。
```
emulator -list-avds
```

Android TVエミュレーターを起動します。

emulator -avd <TVエミュレーターの名前>

プロジェクトディレクトリに移動します。
```
cd FireTVDemo
```
npxを使用してアプリを実行します。
```
npx expo start -a
```

アプリは、ローカル開発サーバーとExpo Goを使用してavdエミュレーターで実行されます。Androidビルドを作成する必要はありません。

Fire TVデバイスでのプロジェクトの実行

Fire TVデバイスでプロジェクトを実行するには、まずビルドのターゲットをTVにする必要があります。

Fire TVデバイスでプロジェクトを実行するには

app.jsonで、isTVプロパティをtrueに設定します。

{
  "expo": {
    "plugins": [
      [
        "@react-native-tvos/config-tv",
        {
          "isTV": true,
        }
      ]
    ],
    "name": "FireTVDemo",
    "slug": "FireTVDemo"
  }
}

Fire TVを接続します。手順については、ADBを使用してFire TVに接続する方法を参照してください。
adbを使用して、デバイスが接続されていることを確認します。
```
adb devices -l
```
アタッチされているデバイスの一覧が返されます。
プロジェクトディレクトリに移動します。
```
cd FireTVDemo
```
ターゲットデバイスで開発版ビルドを実行します（たとえば、-d AFTSSのように指定します）。
```
cd FireTVDemo
npx expo run:android -d <デバイス名>
```

開発版ビルドはデバイスのandroidディレクトリ内にインストールされます。AndroidビルドがTV向けに最適化されていることを確認するには、アプリのAndroidマニフェストファイルでAndroidのLeanback機能が使用されていることを確認します。

Last updated: 2025年7月22日