アプリのロゴ、アイコン、スプラッシュ画面を変更する
アプリのルックアンドフィールの大部分は、custom.xmlファイル（res > values内）とnavigator.jsonファイル（app > assets内）を使用してカスタマイズできます。このトピックでは、アプリで必ず行う必要のある、アプリのロゴとアイコンの変更について説明します。これら以外に簡単に変更できるアプリの要素については、ほかのトピック（ホームページのレイアウト、サイドバー、[続きを観る] 行などを変更するおよびフォント、メディア再生要素、関連コンテンツなどを変更する）で説明されています。
アプリのロゴの変更
ロゴは、画面の左上隅とスプラッシュ画面に表示されます。アプリをカスタマイズするときは、この要素を必ず変更します。
アプリのロゴを変更するには、次の手順を実行します。
- アプリのassets > resディレクトリで、drawableという新しいディレクトリを作成します。
-
Finderまたはエクスプローラーでdrawableディレクトリを開きます。
drawableディレクトリにアクセスするには、Android Studio内でそのフォルダを右クリックし、[Reveal in Finder] を選択します（Macの場合）。または、Application > app > src > main > res > drawableに移動して、手動でソースファイルを参照できます（Android Studioの [Android] ビューには、実際のフォルダ構造は反映されません）。
-
ロゴの画像（356 x 108px）をこのフォルダに追加します。
アプリのロゴは、寸法をおよそ356 x 108px（幅x高さ）とし、背景を透明にする必要があります。それより大きい画像は表示領域に合わせて縮小されます（ただし、小さい画像は拡大されません）。
サイズの変更処理では画像の寸法が保持され、トリミングが行われることはありません。縦横比が維持されるため、ロゴが縦長で幅が狭い場合は、高さ108pxの表示領域に合わせて縮小されると極端に小さく見えることがあります（Fire App Builderのレイアウトでは、横長のロゴの方がきれいに見えます）。
ロゴはアプリの背景の上にオーバーレイとして表示されます。背景が暗いため、明るいロゴにすると見やすくなります。
-
アプリのcustom.xmlファイル（アプリのres > valuesフォルダ内）で、次の要素のファイル名をカスタマイズします。
<drawable name="splash_logo">@drawable/fire_app_builder_white</drawable> <drawable name="company_logo">@drawable/fire_app_builder_white2</drawable>splash_logo要素は、スプラッシュページに表示されるロゴを決定します。company_logo要素は、アプリの左上隅に表示されるロゴを決定します。両方の画面で同じロゴを使用することも、別々のロゴにすることもできます。画像ファイルの名前にファイル拡張子を含める必要はありません。Androidによって自動的に検出されます。
アプリアイコンのカスタマイズ
アプリのアイコンを変更できます。これはFire TVでアプリの一覧に表示されるサムネイル画像で、デバイスのテスト中にも表示されます。
さらにこの画像は、Amazon.co.jpにあるAmazonアプリストアのウェブサイトで画像タイルとして表示されます。
ただし、Amazonアプリストアにアプリを申請するときは、1280 x 720px（PNG）のアプリアイコンを送信する必要があります。これが、Fire TVのユーザーインターフェイスで使用される実際のアイコンです。
このファイルを更新するには、ic_launcher.pngファイルを変更します。[Project] ビューに切り替えて、アプリのsrc > main > resフォルダの内容を確認します。アプリアイコンのファイルは4つあり、それぞれ異なる画面サイズに対応します。
- mipmap-hdpi (72x72px)
- mipmap-mdpi (48x48px)
- mipmap-xhdpi (96x96px)
- mipmap-xxhdpi (144x144px)
アプリアイコンは背景が透明な画像です。ソース画像を置き換えるか、アプリのcustom.xmlファイルを変更してランチャーファイルへの参照を更新します。
<drawable name="app_logo">@mipmap/ic_launcher</drawable>
スプラッシュ画面のカスタマイズ
デフォルトでは、Fire App Builderのサンプルアプリには次のスプラッシュ画面が表示されます。
以下のセクションでは、カスタマイズできる各要素について説明します。
ロゴ
アプリのロゴです。ロゴは、アプリのcustom.xmlにある次の要素で定義されます。
<drawable name="splash_logo">@drawable/fire_app_builder_white</drawable>
スプラッシュ画面のロゴを変更する方法の詳細については、前のセクションのアプリのロゴの変更を参照してください。
読み込み中のテキスト
スプラッシュ画面に表示される「読み込み中」という語句を変更するには、TVUIComponent > res > strings.xml > strings.xmlに移動し、次の要素を更新します。
<string name="feed_loading">読み込み中</string>
読み込み中のスピナー
スプラッシュ画面に表示される読み込み中のスピナーの色を変更するには、アプリのcustom.xmlファイルで次の要素を更新します。
<color name="spinner_color">#FFFFFFFF</color>
著作権
スプラッシュ画面の著作権に関するテキストをカスタマイズするには、アプリのres > values > strings.xmlフォルダ内のstrings.xmlを確認します。
<string name="copyright">Copyright 2016.All Rights Reserved.</string>
背景色
アプリの背景色を変更するには、アプリのcustom.xmlで次の要素を更新します。
<color name="background">#22282E</color>
テキストの色
スプラッシュ画面のテキスト、ボタンのテキスト、コンテンツ詳細画面で続きを読むためのテキストの色を変更するには、custom.xmlで次の要素を更新します。
<color name="primary_text">#E6FFFFFF</color>
次のステップ
これでアプリのロゴとアイコンがカスタマイズされました。次は、ホームページのレイアウト、サイドバー、[続きを観る] 行などを変更するに進んで、ホーム画面に加えることができるその他の変更を確認してください。これらの変更は任意です。
Last updated: 2018年1月16日