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


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

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

Q: ウェブアプリでAmazonリモコンの [戻る] ボタンを使用したときの動作をカスタマイズする方法を教えてください。
[戻る] ボタンを押しても、標準のキーイベントは生成されません。このボタンのデフォルトの動作では、WebViewがルートページに到達するまで履歴スタックを遡って移動します。そこで再度このボタンを押すと、ウェブアプリに通知することなくアプリが閉じられます。回避策として、onLoadイベントの履歴スタックにプッシュすることによって、履歴APIを使用して [戻る] ボタンが押されたことをキャプチャできます。

Chromium v25には、ページの読み込みでonpopstateイベントが生成されるバグがあります。これにより、以下に示す回避策の実行が複雑化します。このバグの詳細については、ChromiumドキュメントのIssue 63040: Add window.history.state and don't fire popstate after load(問題63040:window.history.stateを追加して、読み込み後にpopstateを発行しない)を参照してください。

履歴APIを使用する回避策は2つありますが、いずれか1つのみを実行する必要があります。次の例に示す回避策を使用することをお勧めします。この回避策では、正しいpopstateイベントに対して作用するような状態を利用します。

window.addEventListener("load", function () {
    window.addEventListener("popstate", function () {
        if (window.history.state !== "backhandler") {
            // ここにバックハンドラーコードを記述します
            window.history.pushState("backhandler", null, null);
        }
    });
    window.history.pushState("backhandler", null, null);
});

もう1つの回避策として、タイムアウトを設定して読み込みの直後までonpopstateイベントの登録を遅延させる方法がありますが、推奨されません。この方法でも対処できますが、タイマーを利用する必要があるため、第一の回避策としてお勧めすることはできません。

    window.addEventListener("load", function() {
    setTimeout(function() {
        window.onpopstate = function(event) {
            showConfirmDialog();
            window.history.pushState(null, null, null);
        };
    }, 0);
    window.history.pushState(null, null, null);
});
Q: ウェブアプリを適切に閉じる方法を教えてください。
多くのアプリは、明示的に閉じるか、アプリを終了させることが必要です。たとえば、[戻る] ボタンの動作をオーバーライドしてアプリを閉じる前に確認画面を表示し、ユーザーが選択したときにウィンドウが適切に閉じられるようにする必要があるとします。これを行う方法として、次のコードを使用できます。
window.open("", "_self").close();
Q: Amazon Fire TV対応ウェブアプリでは、メディアの再生でデジタル著作権管理(DRM)はサポートされますか?
いいえ。現時点では、ウェブアプリプラットフォームは、メディアの再生でどのような形式のDRMもサポートしていません。FireTVのネイティブアプリに対するDRMのサポートの詳細については、「Fire TVデバイスの仕様」ページのDRMセクションを参照してください。
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は使用できますか?
いいえ。現時点では、ウェブアプリプラットフォームでBlob APIはサポートされません。Blobオブジェクトが誤って名前空間に存在していると、一部の機能検出ライブラリでプラットフォームがBlob対応であると認識されることがあります。
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ディスプレイの場合と同じように表示されます。

詳細については、[ウェブアプリの開発を始める](../fire-tv/getting-started-with-web-apps.html)に記載の「解像度とページのスケーリング」セクションを参照してください。

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はMSEに基づいて構築されるため、MPEG-DASHもサポートされません。MSEによって提供される適応型のストリーミングのサポートがない場合、エンドユーザーのデバイスでネットワークの混雑からの回復に時間がかかり、シークにも時間がかかる可能性があります。ただし、Amazon Fire TVプラットフォームのウェブアプリでは、別の適応型のストリーミング標準であるHLSがサポートされます。