開発者コンソール

ウェブアプリに関するよくある質問(FAQ)

ウェブアプリに関するよくある質問(FAQ)

Amazon Fire TV対応ウェブアプリに関するよくある質問と、その回答を紹介します。

Q: ウェブアプリを適切に閉じる方法を教えてください。
多くのアプリは、明示的に閉じるか、アプリを終了させることが必要です。たとえば、[戻る] ボタンの動作をオーバーライドしてアプリを閉じる前に確認画面を表示し、ユーザーが選択したときにウィンドウが適切に閉じられるようにする必要があるとします。これを行う方法として、次のコードを使用できます。
window.open("", "_self").close();
Q: Amazon Fire TV対応ウェブアプリでは、メディアの再生でデジタル著作権管理(DRM)はサポートされていますか?
ウェブアプリプラットフォームは、Widevine L3のDRMをサポートしています。Fire TVのネイティブアプリに対するDRMのサポートについては、Fire TVのデバイス仕様:概要ページから各デバイス仕様の詳細を参照してください。
Q: ウェブアプリではビデオの再生中にスクリーンセーバーを無効にする必要がありますか?
はい。ビデオの再生中にFire TVのスクリーンセーバーを無効にして、ユーザーによる操作なしで長時間の実行を可能にする必要があります。アプリの申請時には、[Prevent Sleep for Video Playback] チェックボックスをオンにしてください。

そうしない場合、メインメニューからナビゲーションを行う場合と同様に、一定の時間の経過後にスクリーンセーバーが起動します。

Q: Amazon Fire TV対応ウェブアプリでは、HTTP Live Streaming(HLS)は使用できますか?
はい。ウェブアプリプラットフォームでは、HLSによるビデオ再生をサポートしています。ただし、次の既知の問題に注意してください。
  • 読み込みまたはバッファー中にビデオがバックグラウンドに移動した場合、このビデオは自動的には一時停止しません。回避策として、Page Visibility APIを使用してビデオを手動で一時停止します。Page Visibility APIを使用したフォーカスの変更検出の詳細については、ウェブアプリの開発についてを参照してください。
  • 短いビデオセグメント(1~2秒以内)では、再生中に一時停止やアーティファクトが発生することがあります。
  • HLSストリームのシークはサポートされていません。
  • HLSビデオの再生時間の取得はサポートされていません。
  • HLSによる再生中にユーザーが音声検索を実行するとビデオが一時停止し、再生が再開するとビデオが最初から再生されます。
  • これらの問題が発生しない、HLSに代わる方法として、VisualOnがあります。ただし、VisualOnは必ずフルスクリーンモードで実行されるため、オーバーレイやカスタムコントロールは使用できないことに注意してください。
Q: Amazon Fire TV対応ウェブアプリでは、BlobインターフェイスAPIは使用できますか?
はい。Amazon WebViewは、Blob APIをサポートするChromium Android WebViewをベースにしています。
Q: オーディオとビデオの再生中に、ウェブアプリに表示されている再生時間が1分40秒のままで変化しません。理由を教えてください。
オーディオ要素とビデオ要素の両方について、初期化中に再生時間プロパティが誤って時間を100秒(1分40秒)と報告しています。この時点でテキストフィールドを設定し、更新しなかった場合、誤って1分40秒と表示されます。メディア要素の再生が開始されると、正しい値が利用可能になります。次のコード例に示す回避策では、durationchangeイベントを使用して、初期化中に要素を正しい再生時間に更新します。
video.addEventListener("durationchange", function() {
    // このイベントが発生すると、メディアの再生時間を利用できるようになります
    document.getElementById("duration").innerHTML = video.duration;
});
Q: ユーザーがリモコンを使用してビデオの再生を制御できるようにする方法を教えてください。
HTML5要素の中には、リモコンでフォーカスできないものがあります。たとえば、div要素とspan要素はリモコンでフォーカスできません。また、デフォルトのビデオコントロールに依存する場合、再生一時停止早送り早戻しのそれぞれのボタンにはフォーカスできません。ただし、ビデオ要素全体にフォーカスして、リモートキーで制御することはできます。
Q: 仮想キーボードを起動して、テキストが送信されたことを確認できますか?
テキスト入力フィールドでユーザーが選択ボタンを押すと、仮想キーボードが表示されます。このキーボードは、AmazonリモコンまたはAmazonゲームコントローラーのいずれかで使用できます。現時点では、仮想キーボードをプログラムで(たとえば、フォーカスの設定によって)起動することはできません。

ユーザーがテキストを送信したことを確認するには、次のコードに示すように、変更イベントをリッスンします。ユーザーが [送信] ボタンではなく [戻る] ボタンをクリックした場合、このイベントは発生しません。

<input id="test" value="">

var testInput = document.getElementById("test");
testInput.addEventListener("change", function(e){
    console.log(this.value);
});
Q: サードパーティ認証ページでアプリが予期しない動作をするのはなぜですか?
window.open()を使用して新しいWebViewを作成するのではなく、同じWebView内でサードパーティ認証ページにリダイレクトすると、履歴にある元のログインページが認証ページに置き換えられます。これは、複数のログインオプション(GoogleやFacebookなど)がある場合に問題の原因となります。つまり、ログインしようとしていたユーザーの気が変わった場合に、元に戻ることができなくなります。アプリに代わって表示された認証ページは、通常、ただ閉じられるだけです。

このようなナビゲーションの問題の原因となる操作を次に示します。

  • ウィンドウの場所をリダイレクトする -> window.location.href = "google_authentication_link"
  • window.location.replace()関数を使用する

代わりに、window.open()関数を使用してください。

Q: ウェブアプリではMOVファイルがサポートされていますか?
いいえ。現時点では、Amazon WebViewはMOVファイルをサポートしていません。
Q: CSSビューポートユニットを使用できますか?
vw/vh/vmin/vmaxユニットを使用できます。ただし、CSS関数translate()と組み合わせて使用することはできません。最新版のAWV(v25)では、CSSビューポートユニットを使用して絶対的に配置された要素を変換することができません。これは、Chromium v25の既知の問題です。ChromiumドキュメントのIssue 137617: vh, vw units don’t work in css transforms(問題137617:vhおよびvwのユニットがcssのtransformで機能しない)を参照してください。回避策として、v25で次の計算を使用することによって、サポートされていないCSSプロパティに対して同等のビューポートユニット値を取得できます。
1vw = ( window.innerWidth/100 )
1vh = ( window.innerHeight/100 )

M vw = ( window.innerWidth/100 ) * M
N vh = ( window.innerHeight/100 ) * N
Q: ウェブアプリで720p環境をシミュレーションする方法を教えてください。
720p環境をシミュレーションするには、次のメタタグをウェブアプリページのヘッダーに配置します。初回のリリースではビューポートのメタタグが技術的にサポートされていないため、ページが1080pディスプレイに拡大表示されます(ページがゆがむことがあります)。そのため、解決策ではなく回避策として、次のコードを使用してください。
<meta name="viewport" content="initial-scale=1.5, user-scalable=no">

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

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

Q: メディアの再生にVisualOnを使用できますか?
Amazon Fire TVまたはFire TV Stickでメディアの再生にVisualOnを強制的に使用することはできません。ビデオのタイプに最適なプレイヤーが、プラットフォームによって自動的に選択されます。

Amazon Fire TV 1.5およびFire TV Stick 1.1では、ビデオのタイプに最適なプレーヤー(ネイティブまたはVisualOn)がプラットフォームによって自動的に選択されるため、amazon_enhanced_hls属性のサポートが終了しています。ページがamazon_enhanced_hls属性を使用するように作成されている場合、そのページは引き続き適切なプレーヤーで読み込まれます。ただし、ビデオの再生が自動的にフルスクリーンで行われることはありません。必要に応じて、JavaScriptでページのフルスクリーン表示をリクエストする必要があります。

Q: スケーリングのパフォーマンスを改善する方法を教えてください。
ビデオ要素にフォーカスすると、通常、CSSプロパティの「高さ」と「幅」の設定によって要素が拡大されます。この方法では、ナビゲーション中に背景全体のリペイントが発生します。代わりに-webkit-transform: scale()を使用して画像のサイズ変更を行うことで、不要なリペイントを回避できます。たとえば、次のCSSコードでは不要なリペイントが発生します。
.focused .video-element-thumb {
    width: 288px;
    height: 162px;
    //...
}

次のCSSコードでは不要なリペイントを回避できます。

.focused .video-element-thumb {
    -webkit-transform: scale(1.125, 1.125);
    //...
}
Q: Fire TV対応ウェブアプリでは、Web Audioはサポートされていますか?
はい。Amazon Fire TV 1.5およびFire TV Stick 1.1以降では、Fire TVでWeb Audioがサポートされています。詳細については、ウェブアプリの開発についてを参照してください。
Q: ボタンにimgタグを使用する場合、代替テキストを含める必要がありますか?
はい。(onClickハンドラーで)imgタグをボタンとして使用するアプリでは、alt属性によって、これらのボタンがアクセシビリティモードで読み込まれるようにする必要があります。そうでない場合、ユーザー補助モードでこれらのボタンを使用することはできません。
Q: Amazon Fire TV対応ウェブアプリでは、既知のMedia Source Extensions(MSE)はサポートされていますか?
Fire TV対応ウェブアプリでは、MSEがサポートされています。MPEG-DASHとHLSも同様です。
Q: Amazon WebViewの新しいセキュリティアップデートについて教えてください。
Amazon WebView v84の変更点: Chromiumが更新され、HTTPSコンテンツのみが読み込まれるようになりました。WebViewは、URLをHTTPSに書き換えることにより、安全でないコンテンツを自動的にアップグレードします。ただし、コンテンツがHTTPSで取得できない場合でも、HTTPにフォールバックされることはありません。v84では、オーディオとビデオのコンテンツのみが自動的にアップグレードされました。混在コンテンツの自動アップグレード機能は、デフォルトで有効になっています。

Amazon WebView v87の変更点: 画像混在コンテンツの自動アップグレード機能が追加されました。この機能は、URLをHTTPSに書き換えることにより、オプションでブロック可能な混在コンテンツ(HTTPSサイトのHTTPコンテンツ)を自動的にアップグレードします。ただし、コンテンツがHTTPSで取得できない場合でも、HTTPにフォールバックされることはありません。画像混在コンテンツの自動アップグレード機能は、デフォルトで有効になっています。

Q: ウェブアプリでは、ユーザーの広告IDや広告トラッキング設定の取得はサポートされていますか?
いいえ。Fireデバイスのウェブアプリは、広告IDや広告トラッキング設定の取得をサポートしていません。

Last updated: 2023年8月30日