ウェブアプリをカスタマイズする


ウェブアプリをカスタマイズする

次の方法でAmazon Fire TV対応ウェブアプリをカスタマイズできます。

  • デバイスごとに異なる外観や動作を実現するコードを作成し、アプリが実行されているデバイスが検出されるようにする。
  • ナビゲーションとフォーカスの方法をカスタマイズする。

さらに、720pディスプレイ向けに開発されたアプリを拡張して、Fire TVの1080pディスプレイを最大限に活用することもできます。

デバイスごとに異なるエクスペリエンスを提供する

アプリやウェブページは、ユーザーエージェント文字列を読み取ることで特定のプラットフォームを検出し、それぞれ異なるユーザーエクスペリエンスを提供できます。ユーザーエージェント文字列には、ホストオペレーティングシステムのバージョン、ブラウザのバージョンなどの情報を含めることができます。FireTVとFireタブレットのウェブアプリプラットフォームのユーザーエージェント文字列はほとんど同じですが、デバイスモデル識別子が異なります。次の資料も参照してください。

CSSを使用してウェブアプリの外観をカスタマイズする

ページ内でフォーカスが置かれているアイテムには、中央のボタンを押すと選択できることが明確にわかるようなスタイルを使用することが重要です。通常、デフォルトの選択インジケーター(黄色の境界線または青の背景)の使用は推奨されません。選択インジケーターはアプリごとにカスタマイズする必要があります。 このスタイルを定義するには、CSSのfocusプロパティを使用します。

button:focus {
    border : #ffffff 2px solid;
    outline : 0;
}

要素の中には、フォーカスすると青の背景でハイライトされるものがあります。次のCSSプロパティを使用すると、この背景が削除されます。ただし、このプロパティが適用された要素には、必ずしも適切ではない透明な背景(テキスト入力フィールドなど)が表示されるので注意してください。

*:focus {
    outline:none;
    background-color:rgba(0,0,0,0);
}

Amazon Fire TV対応ウェブアプリ設計のガイドラインの詳細については、デザインとユーザーエクスペリエンス(UX)に関するガイドラインを参照してください。

ウェブアプリのフォーカスとナビゲーションをカスタマイズする

ウェブアプリで選択によるハイライトや方向ナビゲーションが自動で処理されるようにするには、キーイベントをキャプチャして使用します。キーイベントのキャプチャとナビゲーションのカスタマイズの実例については、Amazon Fire TV向けウェブアプリスターターキットに含まれるテンプレートアプリを参照してください。これは、GitHub(https://github.com/amzn/web-app-starter-kit-for-fire-tv)からダウンロードできます。

720p環境で開発されたアプリを表示する

Amazon Fire TV対応アプリの解像度は1080p(1920x1080)です。アプリが720pのインターフェイス向けに開発されている場合、ディスプレイの2/3のみで表示されます。この場合に最善な方法は、アプリに変更を加えて1080pを対象とすることです。ただし、720p環境をシミュレーションする必要がある場合は、ページのヘッダーに次のメタタグを配置してください。 

<meta name="viewport" content="initial-scale=1.5, user-scalable=no">

このメタタグは、ウェブアプリページが占有する領域を表すビューポートを設定し、ズームレベルを150%に設定します。その結果、ウェブアプリのコンテンツは、1080pのディスプレイ領域全体に、720pディスプレイの場合と同じように表示されます。

詳細については、ウェブアプリの開発を始めるに記載の「解像度とページのスケーリング」セクションを参照してください。