ウェブアプリの開発を始める


ウェブアプリの開発を始める

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

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

  • パッケージアプリは、クライアント側のウェブ標準に準拠した本格的なアプリで、アセットが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アプリストアへのウェブアプリの申請や更新を参照してください。

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>

このライブラリでは、初期化が完了すると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を有効にするには、次の手順を実行します。

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

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

Amazon Fire TV対応のウェブアプリでは、1080p(1920x1080)の解像度を目安としてください。アプリの解像度を720pから1080pに上げる方法の詳細については、「Fire TVウェブアプリのカスタマイズ」を参照してください。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!');
        });

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

フォーカスの変更

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

メソッド 説明
カスタム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のサポートセクションを参照してください)。

// コンテキストを作成します
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を使用する場合は、suspendおよびresumeメソッド(AudioContextオブジェクト)を使用して、WebAudio使用時に音声検索リクエストを適切に処理できます。 (Web Audioの詳細については、上記のWeb Audioのサポートセクションを参照してください)。

<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をインストール・構成するを参照してください。

広告IDと広告トラッキング設定の取得

ウェブアプリは広告IDと広告トラッキング設定を取得できます(これらの機能の詳細については、広告IDを参照してください)。(Amazon APIのインクルードで説明するように)ウェブアプリAPIスクリプトをインクルードすると、AmazonAdvertisingオブジェクトは2つの関数getAdvertisingIdgetLimitAdTrackingPreferenceを有効にします。両方の関数には、それぞれ成功のコールバックとエラーのコールバックの2つのパラメーターがあります。署名は次のようになります。

AmazonAdvertising.getAdvertisingId(successCallback, errorCallback)
AmazonAdvertising.getLimitAdTrackingPreference(successCallback, errorCallback)

これらの関数を呼び出すと、返された値が下記のような成功のコールバックに渡されます。

  • getAdvertisingId関数は広告IDを成功のコールバックに渡します。
  • getLimitAdTrackingPreference関数は0(falseの場合)または1(trueの場合)を成功のコールバックに渡します。この値は、ユーザーの広告トラッキング設定を示します。

リクエストを処理するときにエラーが発生した場合、エラーメッセージがエラーのコールバックに渡されます。ウェブアプリは広告IDや広告トラッキングの制限の応答が有効でない状況を適切に処理する必要があります。

ウェブアプリを申請するときに、[アプリファイル] タブの [アプリファイル] タブにある [ウェブアプリの機能] セクションで、[Amazon Advertising] をオンにします。

開発者コンソールでウェブアプリを申請するときに [Amazon Advertising] をオンにする
開発者コンソールでウェブアプリを申請するときに [Amazon Advertising] をオンにする

Fire TVで利用できない機能

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

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

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