ホームページのレイアウト、サイドバー、[続きを観る] 行などを変更する

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

→

ホームページのレイアウトをカスタマイズすると、カテゴリーを参照するサイドバーを表示できます。また、[続きを観る] 行や [ウォッチリスト] 行を変更することもできます。これら以外に変更できる要素については、ほかのトピック（アプリのロゴ、アイコン、スプラッシュ画面を変更するおよびフォント、メディア再生要素、関連コンテンツなどを変更する）に記載されています。

ホームページのレイアウトのカスタマイズ
ホームページの視覚要素の変更
「フルブラウズ」ホームページレイアウトのサイドバーの変更
ウォッチリストの行とボタンの削除
アプリホーム画面の [続きを観る] 行の変更
検索ボタンのカスタマイズ
利用規約の更新
次のステップ

ホームページのレイアウトのカスタマイズ

デフォルトのホーム画面のレイアウトでは、ContentBrowseActivityが使用されます。このレイアウトを「ホームページブラウズレイアウト」と呼びます。

代わりにFullContentBrowseActivityを使用すると、ホームページのレイアウトをより簡潔な表示に変更できます。このホームページレイアウトを「フルブラウズ」ホームページレイアウトと呼びます。

FullContentBrowseActivityを使用したホーム画面 — **`FullContentBrowseActivity`を使用したホーム画面**。このアクティビティを使用すると、より簡潔なグリッドにすべてのビデオが表示され、左側のサイドバーにチャンネルの一覧が表示されます。どのビデオも、背景に大きな画像として表示されることはありません。アプリは右上隅に表示されます。

ユーザーがビデオタイトルを閲覧しているときは、左側のサイドバーを折りたたむことができます。これによって表示領域が広がるため、ビデオコンテンツに集中できます。

ホームページをフルブラウズレイアウトに変更するには、次の手順を実行します。

Navigator.jsonファイル（app > assets内）を開きます。

graphオブジェクトでCONTENT_HOME_SCREENを見つけます。

"com.amazon.android.tv.tenfoot.ui.activities.ContentBrowseActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_HOME_SCREEN"
    }

com.amazon.android.tv.tenfoot.ui.activities.ContentBrowseActivityをcom.amazon.android.tv.tenfoot.ui.activities.FullContentBrowseActivityに変更します。

ホームページの視覚要素の変更

次の図は、ブラウズレイアウト（デフォルト）のホームページでカスタマイズできる視覚プロパティを示しています。

ロゴ

詳細については、アプリのロゴの変更のセクションを参照してください。

ビデオのタイトルと説明

ビデオのタイトルと説明の色を変更できます。アプリのcustom.xmlファイルで、次の要素を更新します。

<color name="primary_text">#f4084f</color>
<!-- カードビューと再生進行状況バーのテキストを赤い色で表示します。 -->

この要素により、プレビュー画面でのビデオのタイトルと説明も制御されます（プレビュー画面は、ビデオをクリックした後、メディアの再生を開始していないときに表示されます）。さらに、[今すぐ観る] や [再生を再開] など、ボタンのテキストの色も制御されます。

これらの要素のフォント自体を変更する方法の詳細については、フォントの変更を参照してください。

カテゴリーのタイトルの色

カテゴリーのタイトルの色を変更できます。この色を変更すると、フルブラウズレイアウトでの左ナビゲーションメニューのテキストの色も変更されます。アプリのcustom.xmlファイルで、次の要素を更新します。

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

この要素により、プレビュー画面とメディアの再生画面のビデオの下に表示される関連コンテンツのテキストの色も制御されます。

カードのビデオタイトルの色

カードのビデオタイトルの色を変更できます。この色を変更すると、ビデオ再生中の進行状況バーに表示されるテキストの色も変更されます。アプリのcustom.xmlファイルで、次の要素を更新します。

<color name="secondary_text">#FFFFFFFF</color>

背景色

アプリの背景色を変更できます。このプロパティはすべての画面に影響します。アプリのcustom.xmlファイルで、次の要素を変更します。

<color name="background">#22282E</color>

グラデーション幅

背景とプレビュー画像の間のグラデーションのサイズを制御できます。アプリのcustom.xmlファイルで、次の要素のdp値を調整します。

<dimen name="content_image_gradient_size">100dp</dimen>

プレビュー画像のサイズ

右上隅のプレビュー画像のサイズを制御できます。アプリのcustom.xmlファイルで、次の要素のdp値を調整します。

<dimen name="content_image_height">350dp</dimen>
<dimen name="content_image_width">540dp</dimen>

検索ボタンのアイコンと検索の背景

検索ボタンのカスタマイズ方法の詳細については、後の検索ボタンのカスタマイズのセクションを参照してください。検索ボタンをカスタマイズすると、ホーム画面と検索画面のボタンの表示が変更されます。

フルブラウズレイアウトでは、左側にサイドバーナビゲーションが表示されます。サイドバーの色と、そこに表示されるカテゴリータイトルの色をカスタマイズできます。

サイドバーの色

左ナビゲーションバーの色を変更できます。アプリのcustom.xmlファイルで、次の要素を更新します。

<color name="browse_headers_bar">#ff69b4</color>

サイドバーのカテゴリーのタイトルとサブタイトル

サイドバーに表示されるカテゴリータイトルの色を変更できます。選択中のカテゴリータイトルと選択されていないカテゴリータイトルの両方に、この色が適用されます。選択中のカテゴリータイトルは太字で表示され、選択されていないカテゴリータイトルは控えめに表示されます。

アプリのcustom.xmlファイルで、次の要素を更新します。

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

デフォルトのホームページレイアウト（「ブラウズ」）では、この要素により、ビデオの行の上に表示されるカテゴリータイトルが制御されます。フルブラウズレイアウトでは、左ナビゲーションバーのカテゴリータイトルの色が変更されます。

ウォッチリストの行とボタンの削除

デフォルトでは、コンテンツの詳細画面に [ウォッチリストに追加] ボタンが表示されます。

ウォッチリストに追加したビデオは、アプリのホーム画面の [ウォッチリスト] 行に表示されます。ウォッチリストに追加できるコンテンツアイテムの数に制限はありません。

[ウォッチリスト] 行の名前の変更

[ウォッチリスト] 行の表示名を変更するには、アプリのcustom.xmlファイル（app > assets > res > values内）を開き、以下を追加します。

<string name="watchlist_row">Watchlist</string>

最上部への [ウォッチリスト] 行の移動

現時点では、[ウォッチリスト] 行の位置を移動することはできません。

[ウォッチリスト] 行の削除

ホーム画面の [ウォッチリスト] 行と、コンテンツの詳細画面の [ウォッチリストに追加] ボタンの両方を削除するには、Navigator.jsonファイル（app > assets内）を開き、次のようにconfigオブジェクトにenableWatchlistRow: falseを追加します。

  "config": {
    "showRelatedContent": true,
    "useCategoryAsDefaultRelatedContent": true,
    "searchAlgo": "basic",
    "enableCEA608": false,
    "enableRecentRow": true,
    "enableWatchlistRow": false,
    "maxNumberOfRecentItems": 5
  }

アプリホーム画面の [続きを観る] 行の変更

アプリのホーム画面の [続きを観る] 行には、最近視聴していたコンテンツが表示されます。

この行には、再生時間が10秒を超えたコンテンツが追加されます。

[続きを観る] 行のしきい値の変更

この10秒のしきい値（ビデオが最近視聴されたと見なされるまでの時間）を変更する場合は、アプリのcustom.xmlファイル（app > assets > res > values内）で次の値を調整します。

<integer name="recent_grace_period">10000</integer>

値はミリ秒単位で指定する必要があります。デフォルトの10000は10秒です。

[続きを観る] 行の最近視聴したアイテム数の調整

デフォルトでは、[続きを観る] 行には最大5件のアイテムが表示されます。この制限は最大20件まで調整できます。最近視聴したアイテムの表示数を調整するには、Navigator.jsonファイル（app > assets内）を開き、maxNumberOfRecentItemsの値を変更します。

"config": {
  "showRelatedContent": true,
  "useCategoryAsDefaultRelatedContent": true,
  "searchAlgo": "basic",
  "enableCEA608": false,
  "enableRecentRow": true,
  "maxNumberOfRecentItems": 10
}

[続きを観る] 行の名前の変更

[続きを観る] 行の表示名を変更するには、アプリのcustom.xmlファイル（app > assets > res > values内）を開き、以下を追加します。

<string name="recent_row">続きを観る</string>

最上部への [続きを観る] 行の移動

現時点では、[続きを観る] 行の位置を移動することはできません。

[続きを観る] 行の削除

ホーム画面から [続きを観る] 行を削除するには、次のように、同じconfigオブジェクトのenableRecentRowをfalseに設定します。

  "config": {
    "showRelatedContent": true,
    "useCategoryAsDefaultRelatedContent": true,
    "searchAlgo": "basic",
    "enableCEA608": false,
    "enableRecentRow": false,
    "maxNumberOfRecentItems": 5
  }

検索ボタンのカスタマイズ

検索ボタンのアイコン、背景色、フォームフィールドの色をカスタマイズできます。検索ボタンの色と背景はホーム画面にも表示されます。

検索ボタンのアイコン

検索ボタンのアイコンを変更するには、次の手順を実行します。

アプリにまだdrawableフォルダを作成していない場合は、アプリのassets > resディレクトリにdrawableという名前の新しいフォルダを作成します。
Finderまたはエクスプローラーでdrawableフォルダを開きます。
このフォルダに検索アイコンと背景の画像を追加します。

例として、元のic_search.png画像をコピーできます。この画像はTVUIComponent > res > drawableにあります。または、ファイルのディレクトリ構造を参照するには、TVUIComponent > res > drawable > drawable-xhdpiに移動します。検索アイコンは、34 x 34pxの透過PNG画像です。アイコンの色は、暗い背景とのコントラストが得られる白になります。
アプリのcustom.xmlファイルで、新しい検索アイコンに対応するように以下のファイル名を更新します。
```
<drawable name="search_icon">@drawable/ic_search</drawable>
```

検索ボタンの背景色

検索ボタンの背景色を変更するには、アプリのcustom.xmlファイルで次の要素を調整します。

<color name="accent">#EE962D</color>

検索フォームの背景色

検索フォームの背景は、検索クエリの入力を開始すると検索画面に表示されます。この色は（16進コードではなく）画像ファイルによって制御され、グラデーションが作成されます。検索フォームの背景色を変更するには、次の手順を実行します。

アプリにまだdrawableフォルダを作成していない場合は、アプリのassets > resディレクトリにdrawableという名前の新しいフォルダを作成します。
Finderまたはエクスプローラーでdrawableフォルダを開きます。
このフォルダに検索フォームの背景の画像を追加します。

例として、元のbg_gradient_search画像をコピーできます。この画像はTVUIComponent > res > drawableにあります。または、ファイルのディレクトリ構造を参照するには、TVUIComponent > res > drawable > drawable-xhdpiに移動します。ファイル名はbg_gradient_search.9.pngです。これは、幅3px、高さ1082pxの縦長の画像です。検索フォームの背景領域を埋めるように、横方向に繰り返し並べられます。
アプリのcustom.xmlファイルで次のファイル名を更新して、新しい検索背景画像の名前を指定します。
```
<drawable name="search_background">@drawable/bg_gradient_search</drawable>
```

利用規約の更新

[利用規約] セクションはアプリのフッターに表示され、terms_of_use.htmlファイル（app > assets内）にリンクします。

このリンクのターゲットはcustom.xmlファイルで調整できます。

<string name="terms_of_use_file">terms_of_use.html</string>

この利用規約ファイルはサンプルであり、アプリの配信前に編集する必要があります。たとえば、利用規約、エンドユーザーライセンス契約、プライバシー通知、その他の法的通知をこのファイルに含めることができます。

利用規約ファイルには、サンプルアプリにデフォルトで組み込まれているオープンソースコンポーネントに関する通知も含まれています。これらの通知は便宜的に提供されるものです。Amazonは、その正確性または完全性について何ら表明を行わず、不正確性または不完全性について一切の責任を負いません。

次のステップ

必要に応じて、フォント、メディア再生要素、関連コンテンツなどを変更するに進みます。このトピックでは、アプリの外観に加えることができるその他の変更について説明します。または、次のプロセスマップのIV：コンポーネントを追加して機能を強化するに直接進むこともできます。

Last updated: 2018年1月16日