フォント、メディア再生要素、関連コンテンツなどを変更する

III：外観をカスタマイズする

→

メディア再生画面、フォント、関連コンテンツなど、アプリのさまざまな要素に変更を加えることができます。これら以外に変更できる要素については、ほかのトピック（アプリのロゴ、アイコン、スプラッシュ画面を変更するおよびホームページのレイアウト、サイドバー、[Continue Watching] 行などを変更する）に記載されています。

メディア再生画面の要素の変更
フォントの変更
関連コンテンツセクションのカスタマイズ
コンテンツの再読み込み時間のカスタマイズ
より広範なカスタマイズ
次のステップ

メディア再生画面の要素の変更

再生画面の要素の外観と印象を制御できます。

ビデオのタイトル

再生画面のビデオタイトルの色を変更できます。アプリのcustom.xmlファイル（app > assets内）で、次の要素を更新します。

<color name="primary_text">#E6FFFFFF</color>

この要素により、ホームページ画面のビデオのタイトルとサブタイトルの色も制御されます。

進行状況バーの色

進行状況バーとは、ビデオのタイムライン上の位置を示すスライドマーカーのことです。この色を変更するには、アプリのcustom.xmlファイルで次の要素を更新します。

<color name="progress_bar">#99FFFFFF</color>

たとえば、この色を赤に変更すると、次のようになります。

バッファ進行状況バーの色

バッファ進行状況バーは、ビデオのダウンロードの進行状況を示します。この色を変更するには、アプリのcustom.xmlファイルで次の要素を更新します。

<color name="playback_buffered_progress">#FF5A5A5A</color>

たとえば、この色を緑に変更すると、次のようになります。

進行状況バーの背景色

進行状況バーとは、ビデオの読み込みスライダーが表示されるバー全体のことです。この色を変更するには、アプリのcustom.xmlファイルで次の要素を更新します。

<color name="playback_background_progress_bar">#FF373737</color>

たとえば、この色を青に変更すると、次のようになります。

フォントの変更

アプリのフォントは、Navigator.json（app > assets内）にあるbrandingオブジェクトを通じて変更できます。

"branding": {
    "globalTheme": "AppTheme",
    "lightFont" : "Roboto Light",
    "boldFont" : "Roboto Bold",
    "regularFont" : "Roboto Regular"
  }

フォントは次のように使用されます。

プロパティ	使用される場所
`lightFont`	説明と本文で使用されます。
`boldFont`	タイトルで使用されます。
`regularFont`	ボタンとサブタイトルで使用されます

（globalThemeプロパティには、ほかに選択できる値はありません。）

3つのフォントオプションには、任意の有効なデバイスフォントまたはカスタムフォントを割り当てることができます。たとえば、3つのフォントすべてにRoboto Boldを適用できます。

使用できるデバイスフォントは次のとおりです。

Amazon Emberフォント： Amazon Ember、Amazon Ember Bold、Amazon Ember Bold Italic、Amazon Ember Italic、Amazon Ember Light、Amazon Ember Light Italic、Amazon Ember Medium、Amazon Ember Medium Italic、Amazon Ember Thin、Amazon Ember Thin Italic、AndroidClock Regular、AndroidClock-Large Regular
Robotoフォント： Roboto Black、Roboto Black Italic、Roboto Bold、Roboto Bold Italic、Roboto Condensed Bold、Roboto Condensed Bold Italic、Roboto Condensed Italic、Roboto Condensed Light、Roboto Condensed Light Italic、Roboto Condensed Regular、Roboto Italic、Roboto Light、Roboto Light Italic、Roboto Medium、Roboto Medium Italic、Roboto Regular、Roboto Thin、Roboto Thin Italic
Verdanaフォント： Verdana、Verdana Bold、Verdana Bold Italic、Verdana Italic
その他のフォント： Carrois Gothic SC、Clockopia、Code2000、Coming Soon、Cutive Mono、Dancing Script、Dancing Script Bold Droid Sans Mono、Kindle Symbol、MotoyaLMaru W3 mono、MT Chinese Surrogates、NanumGothic、Source Code Pro Medium

たとえば、Amazon Emberフォントを使用する場合は、次のようにbrandingオブジェクトをカスタマイズできます。

  "branding": {
    "globalTheme": "AppTheme",
    "lightFont" : "Amazon Ember",
    "boldFont" : "Amazon Ember Bold",
    "regularFont" : "Amazon Ember"
  }

画面は次のようになります。

さらに、次のようになります。

これらのAmazon Emberフォントは、タイトル、サブタイトル、説明、本文、ボタンで使用されます。

さまざまなデバイスフォントに加えて、カスタムフォントも使用できます。カスタムフォントを使用する場合は、アプリのassets/fontsディレクトリにそのフォントを格納します。次に、brandingオブジェクトでフォントのパスを指定します。たとえば、（単にProxima Nova Lightと入力するのではなく）fonts/Proxima-Nova-Light.tffのように指定します。

  "branding": {
    "globalTheme": "AppTheme",
    "lightFont" : "fonts/Proxima-Nova-Light.tff",
    "boldFont" : "fonts/Proxima-Nova-Light.tff",
    "regularFont" : "fonts/Proxima-Nova-Light.tff"
  }

コンテンツの再読み込み時間のカスタマイズ

コンテンツが再読み込みされるまでの時間をカスタマイズできます（コンテンツとは、アプリがメディアフィードからロードするビデオやその他の詳細を指します）。デフォルトの再読み込み時間は14400000ミリ秒（4時間）です。この時間が経過すると、Navigator.jsファイル（app > assets > resources内）によって、レシピとデータローダー設定の再読み込みが行われます。

<!-- コンテンツの再読み込み時間（ミリ秒） -->

<integer name="time_to_reload_content">14400000</integer>

<!-- ここまでコンテンツの再読み時間（ミリ秒） -->

より広範なカスタマイズ

Fire App Builderのコードを掘り下げてより深い部分でレイアウトを変更することもできますが、XMLファイルの編集を通じてユーザーインターフェイスを大きく改造することはできません（より広範な変更に関するドキュメントは用意されていません）。ここで説明した内容を超えてインターフェイスを完全に変更することは想定されていません。

次のステップ

次は、IV：コンポーネントを追加して機能を強化するのプロセスに進みます。このセクションでは、読み込むことができるさまざまなコンポーネントを通じて、アプリに機能を追加する方法を説明します。このようなコンポーネントには、認証、広告、アプリ内課金、分析に関連する機能を提供するものがあります。次のプロセスマップの最初のトピックは、コンポーネントの概要です。