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

10735 ワード
adb Amazon FireTV Amazon テキストリンク

はじめに

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 開発入門

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

Android Studioインストール

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

Android Studioのダウンロードページからインストーラーをダウンロードしてください。

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

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

Android Studioの起動

Android Studioを起動します。

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

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

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

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

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

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

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のヘルプが表示できたら成功です。

Fire TVの設定

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

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

Web App Testerをインストール

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

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

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 と表示されます。

接続できない場合は トラブルシューティング をご覧ください。

接続状態を確認する

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

$ adb devices

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

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

$ adb reconnect offline

Chrome DevToolsでFire TVをデバッグ

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

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

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

このようにChorme DevToolsが起動します。
画面プレビューが出ない場合は左上のToggle Screencast を押してください。

Hosted Applicationを追加する

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

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

このとき、Fire TVのリモコンで入力していては埒が明かないので、 Amazon Fire TV Remote App 経由か英数字のみならADBから入力すると簡単です。

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

$ adb shell input text Test%sApp

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

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

あとは、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

参考