Fire App Builder 基本画面の説明とカスタマイズ

**<<前の記事：[Amazon Fire TV Stickアプリ開発環境セットアップ（Fire App Builder）](https://qiita.com/Daigorian/items/cdffa084889509c2589f)**

この記事では前の記事に引き続き、Fire App Builder を使ってアプリ開発を始めるまでの過程を記しています。

**元にしたサイト**
**Get Set Up | Fire App Builder** （英語）amazon appsotre
https://developer.amazon.com/ja/docs/fire-app-builder/toc-get-set-up.html


**環境**
Fire TV Stick (2017年版：CPU = MediaTek Quad-core ARM)
Windows 10 Pro



# ステップ3 : Fire App Builder サンプルアプリのツアー
前の記事では Fire App Builder を使う環境を構築してサンプルアプリのビルドまで漕ぎ着けました。
この記事ではサンプルアプリの画面構成を順に確認していきます。
## 「スクリーン」 の種類
###スプラッシュスクリーン
初めてアプリをたちあげてからローディングが終わるまでに表示されるスクリーン。
この画面の"Fire App Builder"という文字好きな名前やデザインに変えられます。
![20190727_224024.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/1365901d-f4ef-8174-ec0f-7174363c385f.jpeg)


この次に表示されるホームスクリーンは次の２種類から選べます。

### コンテンツ ブラウズ アクティビィティ(`ContentBrowseActivity`)を使ったホームスクリーン（デフォルト）
この画面は、ビデオを様々なカテゴリやグループで並べて表示できます。あるチャンネルを表示させると、現在選択中のビデオのイメージがバックグラウンドに表示され、左上にタイトルと説明が表示されます。この配置がデフォルトです。
![20190728_151610.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/3f93c852-1826-36ff-74ed-78a965eb9066.jpeg)


###　フル コンテンツ ブラウズ アクティビィティ(`FullContentBrowseActivity`)を使ったホームスクリーン
左側にカテゴリリストが並び、ビデオはより小さいサムネとなりグリッド表示されるます。ビデオを選択してもバックグラウンドにでっかく表示されたりはしません。



### コンテンツ ディテール　`Content Details` 画面
コンテンツ ブラウズ アクティビィティからビデオを選ぶと コンテンツ ディテール スクリーンがプレイボタンとともに現れます。
この画面では、特定のビデオのタイトルと説明書きを表示します。
![20190728_151638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/eee8bba1-3898-33e3-fe96-f1cf958dc5da.jpeg)

すでに再生したことのあるVideoについては、コンテンツ ディテール　`Content Details` 画面で「続きから再生」「最初から再生」など、１度も再生したことのないビデオとは異なる表示を行うこともできます。
![20190728_151647.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/2c1fef50-eba0-23bb-9d64-5e2003f6b89f.jpeg)

説明書きが長すぎて画面に収まらない時は省略され、＞＞を選択するとモーダル画面が表示されて全文を見ることができます。
![20190728_152157.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/93ac38bd-4f86-c08b-d4ed-88276c9c4e15.jpeg)
![20190728_152208.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/f3ca8e04-6fa6-e393-610a-02d87919a665.jpeg)





### レンダラー `Renderer`画面
コンテンツ ディテール　`Content Details` 画面からビデオを再生すると　レンダラースクリーンが表示されます。
再生、早送り、スキップなどの「コントロール」`Controls`が表示されているときは、その下に関連するコンテンツが薄暗い状態でオーバーレイ表示されます。
![20190728_151701.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/102b5157-75f6-0e68-12ed-d2c2f11c3d3e.jpeg)

この時にリモコンの下ボタンを押すと、関連するコンテンツが目立つ感じで、明るく表示されます。
![20190728_151712.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/bd1cc214-f574-2a70-52bc-a66b77035b0a.jpeg)


### 検索　`Search` 画面
ホームスクリーンで 検索 ボタンを押すと、ビデオを検索できます。検索は「タイトル」と「説明書き」の両方からキーワードを検索します。（キーボー画面の代わりにリモコンのマイクボタン長押しで音声テキスト変換入力を使うこともできます、、と元ドキュメントには書いてあるんのですがどうやっても無理な気が。）
![20190728_152246.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/5f039911-f59c-774e-58d4-3fafb9926566.jpeg)

検索結果はグリッド形式で表示されます。
![20190728_152256.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/1261885d-4483-5944-7cca-481a04838808.jpeg)


## それぞれの「スクリーン」を表示する　「アクティビティ」 `Activities`について

アクティビティはアプリの実行にかかわる様々な機能を持ちます。それぞれの「アクティビティ」は別々の「スクリーン」に紐づきます。

Fre App Builderには６つのアクティビティがあります。
- `ContentBrowseActivity`
- `ContentDetailsActivity`
- `ContentSearchActivity`
- `FullContentBrowseActivity`
- `SplashActivity`
- `VerticalContentGridActivity`
このうち　`ContentBrowseActivity`　`FullContentBrowseActivity`　はホームスクリーンになることができます。

それぞれのアクティビティは異なるスクリーンを表示しますが、その紐づけを行うのが `app\assets` 配下にある `Navigator.json`です。

例えば以下の例では 
SplashActivity が スプラッシュスクリーン　を表示しますし
ContentBrowseActivity が ホームスクリーン を表示します。

```json:Navigator.json
"graph": {
    "com.amazon.android.tv.tenfoot.ui.activities.SplashActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_SPLASH_SCREEN"
    },
    "com.amazon.android.tv.tenfoot.ui.activities.FullContentBrowseActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_HOME_SCREEN"
    },
    "com.amazon.android.tv.tenfoot.ui.activities.ContentDetailsActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_DETAILS_SCREEN"
    },
    "com.amazon.android.tv.tenfoot.ui.activities.ContentSearchActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_SEARCH_SCREEN"
    },
    "com.amazon.android.uamp.ui.PlaybackActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_RENDERER_SCREEN"
    }
  }
```

それぞれのスクリーンにはどのアクティビティを結び付けても問題ありませんが、ホームスクリーンは ContentBrowseActivity FullContentBrowseActivity しか割り当てられません。

Navigator.json で使われるほかのプロパティは以下の通りです。

|アクティビティのプロパティ|説明|
|:--|:--|
|verifyScreenAccess|あらかじめログインしている必要があるアクティビティについては、Trueとすることで画面が表示される前にログインを求めることができる。ログイン前のユーザをなるべく引き付けておく、あるいは誘惑しておくために、コンテンツレンダラー、つまり再生画面だけにこれを入れるほうがよい|
|verifyNetworkConnection|ネットワークにつながっていないとスクリーンが見れないようにする。これがFalseとなるのはローカルにしか関係のないような設定画面とかのみで、そのほかほとんどののスクリーンではこれをTrueにするべき|
|onAction|アクティビティが実行されたときに起動する「アクション」|


なお
スプラッシュアクティビティ `SplashActivity`は以下の　AndroidManifest.xml 　から起動されます。

```json:AndroidManifest.xml 
<activity
    android:name="com.amazon.android.tv.tenfoot.ui.activities.SplashActivity"
    android:screenOrientation="landscape">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
    </intent-filter>
</activity>
```

さらにこれかのアクティビティに加えてオリジナルのアクティビティを作りスクリーンに関連付けることもできます。

## Fire App Builder の中身について
アプリを作り始める前に、Fire App Builderの中のライブラリ、モジュール、コンポーネントに慣れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/c71b2177-2742-dae8-5803-f7444bffb86c.png)


|フォルダ|説明|
|:--|:--|
|AMZNMediaPlayerComponent     |ストリーミングメディアを再生するのに使われる|
|AdsInterface                 |広告(Ads)のためのインターフェース|
|AmazonInAppPurchaseComponent |Amazonアプリ内購入(Amazon In-app purchasing)のためのインターフェースのコンポーネント|
|AnalyticsInterface           |分析(analytics)のためのインターフェース.|
|AuthInterface                 | 認可(authorization)のためのインターフェース|
|ContentBrowser                 |[Model View Controllerデザインパターン](https://ja.wikipedia.org/wiki/Model_View_Controller)　でいうところの Controller として、ユーザにアプリ内のコンテンツをブラウズさせる。フィードの取得、フロー/レシピ/設定のコントロールを行う。|
|ContentModel                 |[Model View Controllerデザインパターン](https://ja.wikipedia.org/wiki/Model_View_Controller)　でいうところの Model として、ブラウザがレンダラーに渡すデータの格納の方法を定義する。|
|DataLoader                 |ネットワークからデータをロードする際に使う、再利用可能なモデル。通常フィードのローディングに使われます。|
|DynamicParser                 |feedをパーズしてモデルに放り込むモジュール。設定で動作を変えることが可能。|
|FacebookAuthComponent                 |Facebook認証のAuthインターフェースを実装したモジュール|
|FlurryAnalyticsComponent                 |Flurry analyticsの分析インターフェースを実装したモジュール|
|ModuleInterface                 |Fire App Builderフレームワークでさまざまなコンポーネントをモジュール化するコアコード。|
|PassThroughAdsComponent                 |Fire App Builderによって使用される広告インターフェースのためのダミー実装。アプリに広告の実装がない場合は、これを基本コードとして使用して独自の広告モジュールを開始できます。|
|PurchaseInterface                 |購入(Purchase)を設定するためのインターフェース。|
|TVUIComponent                 |AndoridTV Leanback Support Libraryをベースにした TV UIコード。「アクティビティ」のためのクラスも含まれています。|
|UAMP                 |ユニバーサルAndroidメディアプレーヤー(Universal Android Media Player:UAMP)。 Amazonメディアプレーヤーは、追UAMPを拡張する形で追加機能を実装しています。|
|Utils                 |一部のコンポーネント（Facebook認証、Adobe Pass、Flurry Analyticsコンポーネントなど）で使用されるキーの暗号化および復号化に使用されるセキュリティクラスなど、再利用可能なJavaクラスが含まれています。|
|Application                 |Fire App Builderフレームワークのさまざまなライブラリとコンポーネントを使用するサンプルアプリ。これからカスタマイズするアプリです|


## Fire-App-Builder のフォルダの中身


|サブフォルダ|中身|
|:--|:--|
|build              |このサブフォルダはAndroidに必要なもので、プロジェクトのビルド時に自動生成されます。ビルドフォルダ内のファイルを編集しないでください。|
|libs              |このサブフォルダーが含まれている場合は、コンポーネントまたは他の外部サービスに必要な外部ライブラリーが含まれています。このフォルダ内のファイルを編集しないでください。多くの場合、コンポーネントに必要なライブラリはbuild.gradleファイルで依存関係として参照され、プロジェクトのビルド時に取得されます。|
|src              |コンポーネントまたは機能の実際のコードが含まれています。 resサブフォルダには、コンポーネントのリソースが含まれています。コンポーネントを使用する場合は頻繁に作業します。ファイルを編集するときは、主にresサブフォルダ内にあるファイルを編集します。|
|test              |単体テストファイルテストフォルダーの内容はメインフォルダーの内容を反映していますが、単体テストを書くためのものです。ユニットテストにはAndroidの依存関係は必要ありません。FireTVデバイスがなくても、自分のマシンで実行できます。通常、このフォルダでは何もする必要はありません。|
|androidTest              |Androidの依存関係を必要とするテスト。これらのテストでは、コードを実行するためにFire TVデバイスが必要です。通常、このフォルダでは何もする必要はありません。|



# ステップ4 : サンプルアプリのカスタマイズ

Fire App Builder のセットアップは、ほとんどの変更をXML/JSONファイルで済ますことができます。

Javaプログラミングを行う代わりに、JSONファイルまたはXMLファイルを編集するだけでアプリを作れるのがFire App Builderのいいところなので、Java部分を直接編集を検討する前に設定可能なXML/JSONファイルの編集で対応できないか検討します。


## 設定可能な JSON ファイルの概要
　以下のリストが編集可能なファイルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/e3cd5bb0-4552-b723-fa66-46413f5a2be1.png)


|設定可能な JSON または XML|場所|
|:--|:--|
|Navigator.json                         |app > assets|
|BasicFileBasedUrlGeneratorConfig.json  |app > assets > configurations|
|BasicHttpBasedDownloaderConfig.json    |app > assets > configurations|
|DataLoadManagerConfig.json             |app > assets > configurations|
|LightCastCategoriesRecipe.json         |app > assets > recipes|
|LightCastContentsRecipe.json           |app > assets > recipes|
|LightCastDataLoaderRecipe1.json        |app > assets > recipes|
|LightCastDataLoaderRecipe2.json        |app > assets > recipes|
|custom.xml                             |app > res > values|


## custom.xml　（設定ファイルで一番優先される）
custom.xmlファイル内の文字列は、他のXMLファイル内ので定義された内容をオーバーライドします。

### アプリの名前の変更
Android Studioの右上のプロジェクトパネルが "Android"ビューになっている状態で、res > values > custom.xml とたどり、app_name を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/41a33b4d-f15d-7b7b-fa42-19eb5dbd67ee.png)
ここを変更するとそれを参照しているAndroidManifest.xml で定義されるアプリケーション名も変更されます。

また、app_name が15文字を超える場合は app_name_short を１５文字より短くなるように入力します。

### 日本語メッセージを整備する
res > values > strings 配下の ja\strings.xml で日本語のメッセージを定義できます。
最初は２行しか定義されていません(しかも微妙な日本語)。

```XML:
<resources>
  <string name="copyright">Copyright 2019. All Rights Reserved.</string>
  <string name="search_bar_hint">検索語を入力</string>
</resources>
```
Translations Editor を使うことでメッセージを各言語のメッセージを一括で整備することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/5d12492f-b93f-f4f2-4cac-a0269d30a407.png)

### パッケージ名の設定
app > manifests　から AndroidManifest.xml を開き
package meiwo com.fireappbuilder.android.calypso

のcalypso　となっている部分を好き名前に書き換えます。
この名前はAmazon App Storeのなかではユニークである必要があり、また同じソフトを開発し続けるかぎり使い続ける値となります。

```XML:AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.fireappbuilder.android.chinachuclient">
```

ここで新しく名前を付けたパッケージ配下にはまだクラスが存在しませんが、ここにカスタムクラスを加えたり既存のFire App Builderからコピーしてきたりすることができます。


### Gradle スクリプト に パッケージ名を設定する

Androidビューの Gradle Scripts フォルダ配下 build.gradle (Module: app) を開きapplicationId を AndroidManifest.xml　で設定したものと合わせます。

```gradle:build.gradle(Module：app)
    defaultConfig {
        applicationId "com.fireappbuilder.android.chinachuclient"
...
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/c29972fd-9b46-8976-8a28-74637be6f5a1.png)


### Gradle スクリプト にバージョン情報を入力する

Androidビューの Gradle Scripts フォルダ配下 build.gradle (Module: app) を開き `versionCode` と `versionName`を確認します。

```gradle:build.gradle(Module：app)
...
        versionCode 10
        versionName "1.0.7"
...
```

|名前|型|役割|
|:--|:--|:--|
|versionCode |Integer|内部のバージョン番号、AppStoreにUPLOADするたびに増やす必要がある|
|versionName |String|ユーザー向けのバージョン番号。特になんにしてもいいし、内部バージョンと一致する必要もない|

### GradleスクリプトへapplicationNameを設定する
Androidビューの Gradle Scripts フォルダ配下
gradle.properties (Project Properties)　に
スペースなしの形でアプリ名を入力します。これはのちにAPKファイル名として使われます。

```
applicationName = ChinachuClient

```

Gradle ファイルを更新するとGradleをSyncするかどうか聞かれるのでSync Nowをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414368/72e3c301-a52b-7f73-9736-30f7cf184a85.png)


これでアプリのカスタマイズができました。
つぎからはいよいよ動画メディアをロードしていきます。

**次の記事>>：[Fire App Builder メディアフィードを設定する](https://qiita.com/Daigorian/items/aac78c223097e3952299)**