Amazon Developer

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases
デバイス
ビルド
テスト
公開
関連情報
ドキュメント

React NativeでFire OSアプリを開発

Anisha Malde Aug 13, 2024
Share:
How to
Blog_Header_Post_Img

React Nativeを既に使用している場合は、新しい技術スタックを習得したり、複数の異なるコードベースを管理したりしなくても、Amazon Fire OSデバイスを簡単にターゲットに設定できます。Expoフレームワークを使用すると簡単かつ迅速にアプリを開発できます。このガイドでは、Fire TVとFireタブレットの両方を対象に、React Nativeを使用してアプリを開発する方法を説明します。

✅ このガイドの前提条件

事前に以下のツールをインストールします。

  • Node.js: JavaScriptランタイム環境
  • npmまたはYarn: JavaScriptのパッケージマネージャー
  • Android Studio:Fire OSアプリのコンパイルと実行をローカルで行うためのIDE

Android Studioとコマンドラインツールを構成します。

  1. このガイドに従い、ANDROID_HOME環境変数を設定します。
  2. Android Studioの仮想デバイスマネージャーから以下のエミュレーターをインストールします。

Fireタブレット向け:

Android Studio emulator for Fire tablet

Fire TV向け:

Android Studio emulator for TV

📱 Fireタブレット対応アプリの構築

ターミナルで、インストールしたexpoパッケージを使用して、新しいReact Nativeプロジェクトを作成します。

Copied to clipboard
npx create-expo-app FireTabletDemo --template blank

Fireタブレットエミュレーターで実行

使用可能なavdsをリストアップし、Androidタブレットを起動します。

Copied to clipboard
emulator -list-avds
emulator -avd name-of-your-tablet-emulator

プロジェクトディレクトリ(例:FireTabletDemo)に移動し、npxを使用してアプリを実行します。

Copied to clipboard
cd FireTabletDemo
npx expo start -a
Fire tablet emulator

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

物理的なタブレットデバイスで実行

こちらの説明に従い、Android Debug Bridge(ADB)を使用してFireタブレットに接続します。次に、デバイスとして使用可能かどうかを確認します。

Copied to clipboard
adb devices -l
Connect to Fire tablet through ADB code

プロジェクトディレクトリに移動し、ターゲットデバイス(例:KFTRWI)で開発ビルドを実行します。

Copied to clipboard
cd FireTabletDemo
npx expo run:android -d [deviceName]

開発ビルドがandroidディレクトリ内にインストールされます。

Android Studio emulator for Fire tablet
Connecting to Fire tablet through ADB

📺 Fire TV対応アプリのビルド

Fire TV対応アプリをビルドする手順は、タブレットの場合とほぼ同じです。新規ディレクトリで、expoを使用して新しいReact Nativeプロジェクトを作成します。ただし今回は、次のようにwith-tvを指定します。

Copied to clipboard
npx create-expo-app FireTVDemo -e with-tv

Fire TVエミュレーターで実行

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

Copied to clipboard
emulator -avd name-of-your-tv-emulator

プロジェクトディレクトリに移動し、アプリを実行します。

Copied to clipboard
cd FireTVDemo
npx expo start -a

Fireタブレットの場合と同様、Androidビルドを作成しなくても、アプリがavdエミュレーターで実行されます。

Fire TV emulator

ビルドのターゲットをFire TVに設定

Fire TV向けにビルドするには、app.jsonでisTVプロパティをtrueに設定します。

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

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

こちらの説明に従い、Android Debug Bridge(ADB)を使用してFire TVに接続します。次に、デバイスとして使用可能かどうかを確認します。

Copied to clipboard
adb devices -l
Connect to Fire TV through ADB code

プロジェクトディレクトリに移動し、ターゲットデバイス(例:-d AFTSS)で開発ビルドを実行します。

Copied to clipboard
cd FireTVDemo
npx expo run:android -d [deviceName]

開発ビルドがデバイスにインストールされました。

Fire TV emulator

💡 AndroidビルドがFire TV向けに最適化されていることを確認するには、アプリのAndroidマニフェストファイルでAndroid Leanback機能を使用していることをチェックしてください。

まとめ

これで、Fire OS向けの最初のReact Nativeアプリをビルドできました。 React Nativeを使用してAmazonデバイス向けアプリをビルドする際は、以下の関連リソースも参照してください。

 

関連記事

ニュースレターを購読してみませんか?

最新のAmazon開発者向けニュース、業界の動向、ブログの記事をお届けします。