ウェブアプリの開発について

ウェブアプリの開発について（Fire TV）

Amazon Fire TV（Fire TVとFire TV Stick）は、HTML5ウェブアプリをサポートしています。新しいプラットフォームに移植したウェブアプリをAmazonアプリストアに申請する際も、最小限の作業で済みます。

アプリ申請時のオプション
Amazon APIのインクルード
Web App TesterとDevToolsの使用
解像度とページのスケーリング
Web Audio APIのサポート
フォーカスの変更
- カスタムのAmazonイベント
- Page Visibility API
音声検索割り込み
IAPのテスト
Fire TVで利用できない機能

アプリ申請時のオプション

パッケージアプリは、クライアント側のウェブ標準に準拠した本格的なアプリで、アセットがZIPアーカイブにバンドルされて配布されます。
ホストアプリは、アセットがウェブサーバーにホストされているアプリです。クライアントはホストに接続し、アプリのアセットをデバイスにダウンロードしてからアプリを実行します。
HTML5ハイブリッドアプリは、ユーザーインターフェイスにウェブコンテンツを使用するプラットフォームネイティブなアプリです。

ハイブリッドアプリの場合、Cordovaを使用して独自のラッパーを構築するか、独自のハイブリッドアプリを作成して、ほかのネイティブアプリと同様に申請できます。Cordovaの詳細については、Apache Cordovaを参照してください。Amazon WebViewでCordovaを使用する方法の詳細については、Apache Cordova APIトピックAmazon Fire OS Platform Guideを参照してください。

パッケージアプリの利点

パッケージアプリは、ホストアプリと比較して次の利点があります。

アプリをホストするソリューションを見つける必要がない。
すべてのアセットがローカルファイルシステムに存在するため、パフォーマンス面で優れている。
オフラインでより簡単に動作する。

ホストアプリの利点

ホストアプリは、パッケージアプリと比較して次の利点があります。

サーバー側とクライアント側のコードにより完全なアプリになる。
すぐに更新できる。ユーザーは常に最新のコードを入手できる。
ウェブサイトと同じ操作感（および通常は同じコード）を提供する。

ハイブリッドアプリの利点

高速で効率的なレンダリング、スクリプトのパフォーマンス、メモリ管理
最新のウェブ標準への準拠（HTML5、CSS3、JavaScript）
CSS、Canvas、WebGLのグラフィック用のハードウェアアクセラレーションとGPUの最適化

ウェブアプリを申請する方法の詳細については、アプリの申請を参照してください。

Amazon WebView APIでは、ハイブリッドHTML5アプリも作成できます。Amazon WebView APIの詳細については、HTML5ハイブリッドアプリの構築とテストを参照してください。

Amazon Fire TV対応のウェブアプリを開発する際には、以下に説明する問題に注意してください。

詳細については、以下の各トピックも参照してください。

Amazon APIのインクルード

ウェブアプリでアプリ内課金APIなどのAmazon APIを使用する場合は、Amazon API JavaScriptライブラリをインクルードする必要があります。このライブラリでは、Amazonプラグインを初期化して、amazonPlatformReadyイベントを生成し、APIの使用準備が整ったことを通知します。このライブラリは、URL http://resources.amazonwebapps.com/v1/latest/Amazon-Web-App-API.min.jsでホストされています。このライブラリをインクルードするには、次の<script>タグをウェブアプリに追加します。

<script src="https://resources.amazonwebapps.com/v1/latest/Amazon-Web-App-API.min.js"></script>

注： Amazon API JavaScriptライブラリをインクルードする必要があるのは、アプリでAmazon APIを使用する場合のみです。

このライブラリでは、初期化が完了するとamazonPlatformReadyイベントを生成するため、amazonPlatformReadyイベントが生成されるのを待ってからAmazon APIを呼び出すようにしてください。次に例を示します。

document.addEventListener('amazonPlatformReady', function () {
    //ここにAPIコードを記述
});

Web App TesterとDevToolsの使用

Web App Testerは、Amazon Fire TVデバイスでホストアプリとパッケージアプリをテストするためのツールです。

Web App Testerでは、DevToolsを使用してウェブアプリをデバッグすることもできます。DevToolsの入手と使用の詳細については、ウェブアプリのデバッグを参照してください。

Fire TVでDevToolsを有効にするには、次の手順を実行します。

Web App Testerツールでウェブアプリを起動します。
Amazon Fire TVリモコンで、[Menu] ボタンを押します。
[Enable Devtools] メニューアイテムを選択して、表示されたダイアログボックスの指示に従います。

解像度とページのスケーリング

Amazon Fire TV対応のウェブアプリでは、1080p（1920x1080）の解像度を目安としてください。アプリの解像度を720pから1080pに上げる方法の詳細については、ウェブアプリのカスタマイズ方法を参照してください。Fire TVウェブアプリのデザインガイドラインの詳細については、デザインとユーザーエクスペリエンス（UX）に関するガイドラインを参照してください。

Web Audio APIのサポート

Amazon Fire TVとFire TV Stickはどちらもウェブアプリ用のWeb Audio APIをサポートしています。また、AudioContextインターフェイスのsuspendメソッドとresumeメソッドもサポートしています。これらのメソッドを使用すると、アプリで、必要に応じてオーディオデバイスを一時停止できます。オーディオの再生を一時停止すると、CPUリソースの使用量が削減され、バッテリーの持続時間が長くなります。

次の例では、AudioContextオブジェクトを作成して、suspendメソッドとresumeメソッドを呼び出しています。

// コンテキストを作成します
var context = new(window.AudioContext || window.webkitAudioContext)();

// コンテキストを開始します
var oscillator = context.createOscillator();
oscillator.connect(context.destination);
oscillator[oscillator.start ? 'start' : 'noteOn'](0);

// 一時停止します
context.suspend();
// 再開します
context.resume();

// suspendとresumeはどちらもPromiseオブジェクトを返すため、成功／失敗を判定できます
context.suspend().then(function() {
   alert('success!');
    },
    function() {
     alert('failure!');
     });
   context.resume().then(function() {
      alert('success!');
       },
       function() {
        alert('failure!');
        });

suspendとresumeをPage Visibility APIと組み合わせると、Web Audioを使用するゲームやそのほかのアプリをバックグラウンドに移行した際や、音声検索を起動したときに音声を消すことができて便利です。詳細とコード例については、以下のフォーカスの変更と音声検索割り込みセクションを参照してください。

フォーカスの変更

ウェブアプリでは、バックグラウンドに移行するタイミング（たとえば、ユーザーが [Home] ボタンを押したときなど）をトラッキングして、バックグラウンドに移行した瞬間の状態を保持しておき、フォアグラウンドに復帰したとき再開できるようにする必要があります。次の表に、異なる手段とその動作を示します。

手段説明

カスタムAmazonイベント：pauseおよびresume pauseイベントが発生するのは、アプリがバックグラウンドに移行したとき（アプリが完全に非表示になったとき）、または一部が隠れたとき（たとえば、[Voice Search] ダイアログボックスが表示されたとき）です。

resumeイベントが発生するのは、[Voice Search] ダイアログボックスを閉じたときを含め、アプリがフォアグラウンドに復帰したとき（アプリが完全に表示されるようになったとき）です。

Page Visibility API webkitvisibilitychangeイベントが発生するのは次の場合です。

• アプリがバックグランドに移行したとき（完全に非表示になったとき）

• アプリがフォアグラウンドに復帰したとき（完全に表示されるようになったとき）

手段	説明
カスタムAmazonイベント：`pause`および`resume`	`pause`イベントが発生するのは、アプリがバックグラウンドに移行したとき（アプリが完全に非表示になったとき）、または一部が隠れたとき（たとえば、[Voice Search] ダイアログボックスが表示されたとき）です。 `resume`イベントが発生するのは、[Voice Search] ダイアログボックスを閉じたときを含め、アプリがフォアグラウンドに復帰したとき（アプリが完全に表示されるようになったとき）です。
Page Visibility API	`webkitvisibilitychange`イベントが発生するのは次の場合です。 • アプリがバックグランドに移行したとき（完全に非表示になったとき） • アプリがフォアグラウンドに復帰したとき（完全に表示されるようになったとき）

カスタムのAmazonイベント

カスタムのAmazonイベントを使用するには、アプリにAmazon Webapp APIスクリプトをインクルードして、ドキュメントで発生するpauseイベントとresumeイベントをアプリでリッスンする必要があります。

pauseイベントのリスナーとして登録するには、次の構文を使用します。

document.addEventListener("pause", yourCallbackFunction, false);

pauseイベントが発生するのは、アプリがバックグラウンドに移行したとき（アプリが完全に非表示になったとき）、または一部が隠れたとき（たとえば、[Voice Search] ダイアログが表示されたとき）です。アプリでは、amazonPlatformReadyイベントが発生したら、document.addEventListenerを使用してイベントリスナーを設定する必要があります。

resumeイベントのリスナーとして登録するには、次の構文を使用します。

document.addEventListener("resume", yourCallbackFunction, false);

resumeイベントが発生するのは、[Voice Search] ダイアログを閉じたときを含め、アプリがフォアグラウンドに復帰したとき（アプリが完全に表示されるようになったとき）です。アプリでは、amazonPlatformReadyイベントが発生したら、document.addEventListenerを使用してイベントリスナーを設定する必要があります。

次のコードスニペットでは、pauseイベントとresumeイベントの登録方法を示します。

<!DOCTYPE html>
<html>
<head>
    <title>Page Visibility Test Page</title>
</head>
<body>
<h2>Visibility:</h2>
<div id="appstate"> Visible </div>
<script src="https://resources.amazonwebapps.com/v1/latest/Amazon-Web-App-API.min.js"></script>
<script>
    var visibility =  document.getElementById("appstate");

    function onPause() {
        visibility.innerHTML = 'Hidden';
    }

    function onResume() {
        visibility.innerHTML = 'Visible';
    }

    function onAmazonPlatformReady() {
        document.addEventListener("pause" , onPause, false);
        document.addEventListener("resume" , onResume, false);
    }

    document.addEventListener("amazonPlatformReady" , onAmazonPlatformReady, false);
</script>
</body>
</html>

Page Visibility API

アプリの種類にかかわらず、ウェブアプリプラットフォームでは、アプリによるフォーカスの喪失時または取得時にPage Visibility APIを使用して可視性変更イベントを発生させます（フォーカスの喪失を検出する方法の詳細については、ウェブアプリに関するよくある質問（FAQ）を参照してください）。

ビデオ再生アプリの場合、アプリがフォーカスを喪失すると、ビデオが自動的に一時停止します。ただし、アプリがフォーカスを再取得したとき、UIを確実に正しい状態にする必要があります。たとえば、ユーザーが再生の状態を確認できるようにメディアコントロールを表示したり、アプリが [Play/Pause] ボタンに確実に応答するようにしたりするのもよいでしょう。一方、ビデオが自動的に再開するようにしたい場合もあります。

ただし、オーディオアプリの場合は、アプリ自身がオーディオの再生を一時停止する必要があります。この点は特に重要です。というのは、アプリがバックグラウンドに移行しているときにメディアボタンを押しても、そのイベントがアプリに渡されないため、ユーザーがオーディオの再生を一時停止することはできないからです。

次のコードでは、フォーカスの変更を検出する方法を示します。なお、これらのイベントには「webkit」というプレフィックスが付いています。

var handleVisibilityChange = function() {
    if (document.hidden || document.webkitHidden) {
        // オーディオ／ビデオの再生を一時停止する、ゲームを一時停止する、ビデオコントロールUIを調整するなど。
    } else {
        // 再生を再開する、UIを調整する、など。
    }
}

document.addEventListener('webkitvisibilitychange', handleVisibilityChange);
document.addEventListener('visibilitychange', handleVisibilityChange);

Web Audioを使用している場合は、Page Visibility APIを使用してフォーカスの変更を検出し、AudioContextオブジェクトのsuspendメソッドとresumeメソッドを使用してオーディオの再生を一時停止および再開できます。以下に例を示します（Web Audioの詳細については、上記のWeb Audio APIのサポートセクションを参照してください）。

// コンテキストを作成します
var context = new (window.AudioContext || window.webkitAudioContext)();

// コンテキストを開始します
var oscillator = context.createOscillator(); oscillator.connect(context.destination); oscillator[oscillator.start ? 'start' : 'noteOn'](0);

// 正しいVisibility API名を確定します。
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10、Firefox 18以降でサポート
        hidden = "hidden";
        visibilityChange = "visibilitychange"; }
else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange"; }

// Page Visibilityリスナー。
function handleVisibilityChange() {
   if (document[hidden]) {
     if (context.suspend) {
       context.suspend();
     } else {
       // ブラウザはsuspend()をサポートしていません
     }
   } else {
     if (context.resume) {
        context.resume();
     } else {
          // ブラウザはresume()をサポートしていません
     }
   }
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);

音声検索割り込み

Amazon Fire TV用に申請するアプリの要件の1つとして、ユーザーがリモコンの [Voice Search] ボタンを押したときにオーディオの再生が停止または一時停止する必要があります。これにより、リモコンのマイクがシステムからの音声を拾ってパフォーマンスが低下することがなくなります。ユーザーが [Voice Search] ボタンを押したことをアプリで検出するには、次の2つの方法があります。

カスタムAmazonイベントであるpauseまたはresumeに応答する。
前のセクションで説明したPage Visibility APIを使用する（バージョン1.3のプラットフォームのみ）。

詳細およびコード例については、上記のフォーカスの変更セクションを参照してください。

ビデオベースのメディアアプリの場合は、ウェブアプリプラットフォームによって、ビデオの一時停止が自動的に処理されます。必要なのは、アプリがフォーカスを再取得したとき、UIを確実に正しい状態にすることだけです。たとえば、[Play/Pause] ボタンを確実に正しく設定したり、ビデオコントロールオーバーレイを表示したりすることもできます。

ゲームの場合も、オーディオの再生を確実にミュートまたは一時停止する必要があります。その場合の一般的な解決方法は、ゲームを一時停止状態にすることです。

オーディオ専用アプリの場合も、再生を停止または一時停止する必要があります。Web Audioを使用する場合は、AudioContextオブジェクトのsuspendおよびresumeメソッドを使用して、WebAudio使用時に音声検索リクエストを適切に処理できます（Web Audioの詳細については、上記のWeb Audio APIのサポートセクションを参照してください）。

<script src="https://resources.amazonwebapps.com/v1/latest/Amazon-Web-App-API.min.js"></script>

<script>
var context = new (window.AudioContext || window.webkitAudioContext)();

function onPause() {
    context.suspend();
}

function onResume() {
    context.resume();
}

function onAmazonPlatformReady() {
    document.addEventListener("pause" , onPause, false);
    document.addEventListener("resume" , onResume, false); }

document.addEventListener("amazonPlatformReady" , onAmazonPlatformReady, false);
</script>

IAPのテスト

App Testerを使用してウェブアプリでIAP v2.0 APIをテストします。App Testerの詳細については、App Testerをインストールして構成する方法を参照してください。

Fire TVで利用できない機能

次のウェブアプリプラットフォーム機能は、Amazon Fire TVでは利用できません。

位置情報（GPS）
ポップアップウィンドウ
複数行テキストボックス
外部ブラウザでのアプリの起動
ファイルのアップロード
ファイルのダウンロード

WebGLはFire TVではサポートされていますが、Fire TV Stickではサポートされていません。

Last updated: 2023年8月30日