React Nativeを使用した開発の開始（Fireタブレット）

Amazon Fireタブレットでは、Reactウェブ開発フレームワークを利用したオープンソースのモバイルアプリ開発フレームワークであるReact Native（英語のみ）がサポートされています。

React Nativeを使用して、Fire TV対応アプリをビルドする場合と同じようにFireタブレット対応アプリをビルドできます。どちらの場合も、同じランタイム環境とパッケージが必要になります。

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

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

前提条件

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タブレットエミュレーターをインストールします。

Fireタブレット対応アプリのビルド

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

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

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

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

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

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

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

Androidタブレットエミュレーターを起動します。

emulator -avd <タブレットエミュレーターの名前>

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

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

Fireタブレットデバイスでのプロジェクトの実行

Fireタブレットデバイスでプロジェクトを実行するには、まずadbを使用してタブレットを接続する必要があります。

Fireタブレットデバイスでプロジェクトを実行するには

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

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

Last updated: 2025年7月22日