2019年11月7日木曜日

Amazon Fire TV アプリ開発入門 (HTML5+JavaScript編)

概要
環境
事前準備
- Youtube Data API の有効化
- Youtube API Key の取得
フレームワークのダウンロード
API キーを設定する
動作確認
最後に
参考サイト

概要

FireTV アプリの開発には大きく 2 通りあります

Java (Android)
HTML5 + JavaScript (Webアプリ)

今回は後者の HTML5 + JavaScript を使った開発方法の入門としてサンプルを実際に FireTV 上で動作させるところまでやってみました

環境

FireTV 3gen 4K
WASK (web-app-starter-kit-for-fire-tv)
macOS 10.15

事前準備

今回は Youtube Data API V3 を使うサンプルを動作させます
なので事前に

Youtube Data API の有効化
Youtube API Key の取得

を行っておきます

Youtube Data API の有効化

GCP コンソールから行います
Youtube Data API を検索して有効にすれば OK です

Youtube API Key の取得

こちらも GCP コンソールの認証情報から「API キー」を作成しましょう
今回は使える API を制限して「Youtube Data API v3」を使えるようにしました
テスト用で面倒ということであれば「キーを制限しない」でも OK です

フレームワークのダウンロード

FireTV アプリを Web アプリケーションとして開発するためのフレームワークがあります
WASK (web-app-starter-kit-for-fire-tv) と呼ばれるフレームワークを使うとコントローラの制御や画面の最適化など勝手にやってくれます
今回はこのフレームワークに含まれるサンプルの動作までを行います

フレームワークは Github で公開されているので clone するだけです

git clone https://github.com/amzn/web-app-starter-kit-for-fire-tv.git

API キーを設定する

取得しておいた Youtube API Key を設定します

cd web-app-starter-kit-for-fire-tv/out/youtube
vim js/init.js

(function(exports) {
    'use strict';
    var settings = {
        Model: YouTubeAPIModel,
        PlayerView: YouTubePlayerView,
        PlaylistView: PlaylistPlayerView,
        showSearch: true,
        skipLength: 30,
        controlsHideTime: 3000,
        user: "amazonwebservices",
        devKey: "AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        showLatestChannel: true,
        channels: [
            {
                type: "playlist",
                id: "PLhr1KZpdzukcQqyY9KShh99W_z-3L48V-",
                title: "AAAAAAAAAAAA"
            }
        ],
        displayButtons: false
    };
    exports.app = new App(settings);
}(window));

書き換えるのは devKey の部分です
ここを取得した API キーにするだけです
他にも firetv.css などがあるので書き換えて背景などを変えてみても良いと思います

vim firetv.css

body {
  position: absolute;
  padding: 0;
  margin: 0;
  font-size: 20pt;
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
  /* background: #5a656f url("assets/bg_app.jpg") no-repeat left top; */
  background: #FF9900;
  background-size: 100% 100%;
}

上記の CSS は長いので書き換えた部分ので記載しています

動作確認

とりあえず動作確認したいのであれば index.html をブラウザで開けば確認できます
が、画面サイズなどが FireTV に最適化されたおりブラウザだとうまく表示されないと思います
なので公式のテストツールである Web App Tester を使って FireTV 上でテストしましょう

LAN 内でホスティングする

まずは作成した Web アプリをローカルのマシンでホスティングしましょう
条件としては FireTV が接続しているネットワークと同じネットワーク上でホスティングすれば OK です

ホスティングの方法は何でも OK です
nginx を立ち上げて DocumentRoot に置いても OK ですし serve などを使っても OK です
自分は docker を使ってカレントにあるファイルをホスティングしました

docker run -d -p 80:80 -v $(pwd):/usr/share/nginx/html --name wask nginx

ブラウザなどでアクセスできれば OK です

Web App Tester をインストールする

Amazon にあるのでインストールしましょう
少し時間が経てば FireTV 上にアプリが配信されているので確認しましょう

Web App Tester でホスティングしたアプリを FireTV 上で確認する

FireTV を起動してインストールした Web App Tester を立ち上げます
そしてアプリの名前とホスティングしているマシンの IP アドレスを記載します

そして画面の右側にある「デバイスに追加」を選択します

するとアプリとして追加されるので起動しましょう

こんな感じで変更した箇所が反映されたアプリが起動し FireTV 上で確認できます
サンプルなのでちゃんと画面が最適化されコントローラの入力も受け入れるのが確認できると思います

最後に

FireTV アプリケーションを開発するためのフレームワーク「WASK」を使ってサンプルアプリケーションを FireTV 上で動かしてみました
単純に index.html と JavaScript を動かしているだけなのでかなり簡単です

今回はフレームワーク上のサンプルを使いましたが単純に HTML であればいいので自分で 1 から作成しても OK です
ただその場合は画面のスタイルやコントローラのハンドリングなども自分で実装する必要があります

ホスティングも今回はテストなのでローカルで行いましたが本番で動かす場合には Heroku や GCP などを使って動作させる必要があるかなと思います

Android アプリよりかは簡単に作れると思うので個人的にはこちらの方法のほうがおすすめです
Android の場合は Android Studio をインストールしたり adb の操作もあり面倒ですが HTML5+JavaScript であればブラウザさえあれば開発を進められるので簡単です
Android の利点としては既存の Android アプリを FireTV 用のアプリとして公開することもできるという点かなと思います

参考サイト

https://developer.amazon.com/ja/docs/fire-tv/the-web-app-starter-kit-for-fire-tv.html

hawksnowlog