Amazon Fire TV ウェブアプリの開発環境を構築する

# はじめに

Fire TVをデバッグするにはAndroid SDKに付属するADBと呼ばれるツールを使ってWifi経由（またはUSB経由）でPCからFire TVへ接続しなければなりません。
この開発環境（というかデバッグ環境）の構築がなかなか厄介だったので実際に構築した手順をまとめました。

## 対象

フロントエンドしかしない&Androidの開発しない方、とりあえずAmazon Fire TVの開発を始めたい方

## 環境

* macOS High Sierra
* Google Chrome 69

# tl;dr

* Android Studioをインストール
* Platform-Toolsへのパスを通す
* Fire TVの開発者オプションでADBデバッグをオンにする
* Fire TVへWeb App Testerをインストールする
* `adb connect <IP Address>`でFire TVへ接続する
* Chrome DevToolsでデバッグする

# ADBをインストール

## ADBとは

> Android Debug Bridge は adb と省略されます。 これは Android SDK の `platform-tools` に含まれるツールです。
>
> このツールを用いると、現在利用可能なデバイス・エミュレータの列挙、シェルコマンドの発行、ファイルの転送などが行えます。

[Android Debug Bridge (adb) とは？ - Android 開発入門
](https://android.keicode.com/devenv/what-is-adb.php)

Fire TVでは、PCでChrome　DevToolsと接続させるために使用します。

## Android Studioインストール

ADBを使用するにはAndroid Studioをインストールするのが簡単です。

[Android Studioのダウンロードページ](https://developer.android.com/studio)からインストーラーをダウンロードしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/1f559d6b-a0fe-6a73-0400-8465c250551a.png)

ダウンロードしたらAndroid Studio.appをApplicationsに移動させます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/358f9135-a8c8-2941-2746-9a3acf003220.png)

以上で、Android Studioのインストールは完了です。

## Android Studioの起動

Android Studioを起動します。

以下のようなポップアップが出ますが、初期設定の Do not Import settings のままでOKしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/3b807ae8-be52-1726-2882-660d84fcc723.png)

セットアップウィザードも初期設定のままで大丈夫です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/db90b4ef-cc19-14d2-b597-55c67b34234c.png)

## Android SDK Platform-Toolsのインストール

ADBはPlatform-Toolsに含まれる機能のため、インストールが必要です。

Android Studioのスタートウィンドウ下部にある`Configure`から`SDK Manager`を開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/716fb8f1-3fde-562a-7409-e076622c8c46.png)

`Android SDK`→`SDK Tools`で`Android SDK Platform-Tools`がインストールされているのを確認します。
もしステータスが`Not installed`の場合はチェックを入れ、Applyを押してインストールしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/468fa164-b230-a61c-d85d-b141128c81e4.png)

## Platform-ToolsにPATHを通す

最後にADBをコマンドとして使えるようにPlatform-ToolsにPATHを通します。

Platform-Toolsは先程のSDK Managerの上部にある`Android SDK Location`以下の`platform-tools`フォルダです。
デフォルトでは`/Users/{ユーザー名}/Library/Android/sdk/platform-tools`になります。

```
$ echo 'export PATH=$PATH:/Users/{ユーザー名}/Library/Android/sdk/platform-tools' >> ~/.zshrc
```

PATHを通したら設定ファイルを再読込して`adb`コマンドを実行してみてください。
ADBのヘルプが表示できたら成功です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/d642b57d-b20a-5714-1430-95ba2f74dbd0.png)

# Fire TVの設定

## Fire TVの開発者オプションを設定

Fire TVで`設定`→`端末`→`開発者オプション`よりADBデバッグを許可します。
（今回はホスティングアプリなので、不明ソースからのアプリへの許可は不要です）

## Web App Testerをインストール

**Web App Tester**はオフィシャルなウェブアプリ開発のプラットフォームです。
Web App TesterをFire TVにインストールします。

https://www.amazon.co.jp/Amazon-Digital-Services-Inc-Tester/dp/B00DZ3I1W8

![screen.png](https://qiita-image-store.s3.amazonaws.com/0/127934/b4b08f06-b217-99cf-f97e-9c5589bc6903.png)

（初期状態では「このデバイスのアプリ」は空です）

# ADBでFire TVへ接続する

それでは、ADBを使ってFire TVへ接続しましょう。
Web App Testerの右上に出ているIPアドレスへ接続させます。

```
$ adb connect 192.168.0.13
```

接続に成功したら `connected to 192.168.0.13:5555` と、失敗したら `failed to connect to 192.168.0.13:5555` と表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/6d1da689-8eb7-f766-2ed8-f4e4143b2d01.png)

接続できない場合は [トラブルシューティング](#adbの接続が失敗する) をご覧ください。

## 接続状態を確認する

ADBが正しく接続できているかは下記のコマンドで確認できます。

```
$ adb devices
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/6477dd22-c571-0cac-0255-67ef066b021e.png)

`device`なら接続中、`offline`ならオフラインになります。

オフラインのコネクションを再接続させるには以下のコマンドを使用します。

```
$ adb reconnect offline
```

# Chrome DevToolsでFire TVをデバッグ

Chrome DevToolsでFire TVを表示してみましょう。
[chrome://inspect](chrome://inspect) へアクセスし、Remote Targetから先程のFire TVのIPアドレスを探します。

下記の場合は**WebView in com.amazon.webapps.performancetester (59.0.3071.125)**がFire TVのWeb App Testerになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/93bcc6aa-352c-ff9a-cdde-0b2ef022c1b9.png)

`inspect`をクリックしてDevToolsを起動しましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/40a439d5-cff3-ba87-aa94-f663b5c7cb19.png)

このようにChorme DevToolsが起動します。
画面プレビューが出ない場合は左上の**Toggle Screencast** ![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/47892c7a-5af8-30f3-5c34-9d816fd525c0.png) を押してください。

# Hosted Applicationを追加する

最後に、アプリケーションを登録してみましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/5f918bd2-857b-1fd3-80ea-1f39186f74e1.png)

Web App Testerの「アプリに名前を付ける」、「テストを希望するアプリのURLを入力」の２つの欄を埋めて「デバイスに追加」ボタンを押しましょう。

このとき、Fire TVのリモコンで入力していては埒が明かないので、 [Amazon Fire TV Remote App](https://www.amazon.co.jp/Amazon-Fire-TV-Remote-App/dp/B00ODIASKC) 経由か英数字のみならADBから入力すると簡単です。

ADBの場合はFire TVでフォーカスした後、

```
$ adb shell input text Test%sApp
```

で入力できます。（例は"Test App"）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/e8debbe9-8e87-7872-6931-711f7ab587dd.png)

入力できたら「デバイスに追加」を押しましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127934/3e6baa9a-bc96-1eed-5d2e-f37e2c7e8a64.png)

あとは、Test Appを選択し、Chromeからinspectすることでページをデバッグすることができます。

# トラブルシューティング

## ADBの接続が失敗する

### ケース１：他のPCで接続している場合

Fire TVへは１つのデバイスからしかADBで接続できないようです。
片方のコネクションを切断してください。

```
$ adb disconnect 192.168.0.13
```

### ケース２：Fire TVと異なるWiFiへつながっている

Fire TVとは異なるWiFiへつながっている場合は当然ADBの接続も失敗します。
戒めを込めて。

### ケース３：ルータを再起動する

どうしてもつながらない場合は使用しているWifiルータを再起動してみてください。
これで結構改善することがありました。

## ADBからの応答がない

```
$ adb devices
```

などを実行した際にコマンドが終了しなくなることがありました。
`kill-server`も同様のためサーバーを落とせなくなってしまいました。

このようなときは`lsof`で5037番ポートでLISTENしているプロセスを`kill`してADBを落としてやりましょう。

```
$ sudo lsof -i | grep 5037
adb        4864    user    8u  IPv4 0xbc565019363c87eb      0t0    TCP localhost:5037 (LISTEN)
$ sudo kill 4864
```

> https://qiita.com/simochee/items/b77bd02807d5ca88e469

# 参考

* https://developer.amazon.com/ja/docs/fire-tv/webapp-app-tester.html
* https://developer.amazon.com/ja/docs/fire-tv/webapp-debug-app.html
* https://qiita.com/t2low/items/cb37cec5f864c4748e14
* https://qiita.com/TNaruto/items/b2407f5668e15e42bedd