Amazon Developer

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases
開発
テスト
公開
収益化
ユーザーエンゲージメント
デバイスの仕様
リソース

React Nativeを使用した開発の開始(Fire TV)

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を構成するには

  1. ANDROID_HOME環境変数を設定します。OS固有の手順については、環境変数を設定する方法を参照してください。

  2. 仮想デバイスマネージャーから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エミュレーターでプロジェクトを実行するには

  1. コマンドプロンプトで、使用できるAndroid仮想デバイス(AVD)の一覧を表示します。

    emulator -list-avds
    
  2. Android TVエミュレーターを起動します。

    emulator -avd <TVエミュレーターの名前>
    
  3. プロジェクトディレクトリに移動します。

    cd FireTVDemo
    
  4. npxを使用してアプリを実行します。

    npx expo start -a
    

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

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

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

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

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

    {
      "expo": {
        "plugins": [
          [
            "@react-native-tvos/config-tv",
            {
              "isTV": true,
            }
          ]
        ],
        "name": "FireTVDemo",
        "slug": "FireTVDemo"
      }
    }
    
  2. Fire TVを接続します。手順については、ADBを使用してFire TVに接続する方法を参照してください。

  3. adbを使用して、デバイスが接続されていることを確認します。

    adb devices -l
    

    アタッチされているデバイスの一覧が返されます。

  4. プロジェクトディレクトリに移動します。

    cd FireTVDemo
    
  5. ターゲットデバイスで開発版ビルドを実行します(たとえば、-d AFTSSのように指定します)。

    cd FireTVDemo
    npx expo run:android -d <デバイス名>
    

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


Last updated: 2025年7月22日