ウェブアプリのカスタマイズ方法
次の方法でAmazon Fire TV対応ウェブアプリをカスタマイズできます。
- デバイスに応じて外観や動作をコーディングし、アプリの動作デバイスをアプリ自身に検出させる。
- ナビゲーションとフォーカスの方法をカスタマイズする。
さらに、720pディスプレイ向けに開発されたアプリを拡張して、Fire TVの1080pディスプレイを最大限に活用することもできます。
デバイスごとに異なるエクスペリエンスの提供
アプリやウェブページは、ユーザーエージェント文字列を読み取ることで特定のプラットフォームを検出し、それぞれ異なるユーザーエクスペリエンスを提供できます。ユーザーエージェント文字列には、ホストオペレーティングシステムのバージョン、ブラウザのバージョンなどの情報を含めることができます。FireTVとFireタブレットのウェブアプリプラットフォームのユーザーエージェント文字列はほとんど同じですが、デバイスモデル識別子が異なります。次の資料も参照してください。
- Fire TV以外のユーザーエージェント文字列については、Amazonウェブアプリに関するよくある質問の「ウェブアプリの開発」セクションを参照してください。
- デバイスモデルに関するルール、および現在と将来のAmazon Fire TVデバイスの検出方法については、Fire TVデバイスの識別を参照してください。
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）に関するガイドラインを参照してください。
ウェブアプリのフォーカスとナビゲーションのカスタマイズ
ウェブアプリで選択によるハイライトや方向ナビゲーションが自動で処理されるようにするには、キーイベントをキャプチャして使用します。
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ディスプレイの場合と同じように表示されます。
詳細については、ウェブアプリの開発についての「解像度とページのスケーリング」セクションを参照してください。
Last updated: 2020年10月29日