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(英語のみ)を参照してください。
前提条件
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機能が使用されていることを確認します。
関連トピック
- 既存のReact NativeプロジェクトへのTVサポートの追加(Fire TV)
- サポートされているReact Nativeライブラリ(Fire TV)
- React Nativeを使用した開発の開始(Fireタブレット)
Last updated: 2025年7月22日

