Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

Vegaウェブアプリの概要

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

重要： Vegaウェブアプリは、MシリーズコンピューターでのみVega仮想デバイスをサポートします。

WebViewをReact Nativeアプリに追加する場合

WebViewを1つのコンポーネントとしてReact Nativeアプリに追加する場合は、代わりにVega WebViewコンポーネントリファレンスを参照してください。

Vega WebViewコンポーネントは、HTML、JavaScript、CSSなどのウェブベースのコンテンツをVegaアプリに表示します。このコンポーネントを使用すると、既存のウェブコンテンツをアプリで再利用できます。たとえば、静的ページ（ヘルプページや利用規約など）、ログイン画面、アプリのプレゼンテーション層に使用できます。WebViewコンポーネントではChromiumエンジンが使用されます。これはカスタマイズ可能で（カスタムヘッダーやDOMストレージなど）、メッセージングブリッジを介してWebViewのソースと親Vegaアプリ間のデータ通信をサポートします。

ウェブコンテンツがTVデバイス向けに最適化されていることを確認してください。これには、リモコン／方向パッド（D-Pad）入力用のフォーカスナビゲーションが含まれます。クリック／タッチ／ドラッグに基づくUXの実装は、TVのユーザーエクスペリエンスとはほとんど互換性がありません。また、TVデバイスは、デスクトップデバイスやモバイルデバイスよりも使用電力が少ないことがよくあります。このため、たとえばTV向けにはアニメーションを減らして、ウェブコンテンツを最適化する必要があります。パフォーマンスと滑らかさに関する詳細なガイダンスは、ウェブアプリ開発に関するベストプラクティスを参照してください。

WebViewスタックのレイヤー

次の図は、WebViewのコードスタックのレイヤーを示しています。

次のリストでは、前の図に示したWebViewコードスタックのレイヤーを、一番下から上に向かって説明します。

WebViewのコアコンポーネント： 以下の一覧のコアコンポーネントは、WebViewウィンドウ内のウェブコンテンツを解析してレンダリングするさまざまなAPIを提供します。
メディアスタック： ハードウェアアクセラレーションへのアクセスを提供するOS API。システムオンチップ（SoC）とプラットフォームのボードサポートパッケージ（BSP）でサポートされる、フレームをデコードするためのソフトウェアオーディオ／ビデオデコーダーが含まれることもあります。
DRM： デジタル著作権管理（DRM）ライセンスとキーを処理するAPI。このAPIは、デコーダーコンポーネントと連携してARM TrustZoneまたは高信頼実行環境（TEE）でフレームを復号化します。
グラフィック： ウェブコンテンツとメディアレンダリングのためのサーフェスとサブサーフェスを提供するAPI。
キーボード： WebView用のスクリーンキーボードを提供するサービス。
アプリフレームワーク： ライフサイクルマネージャー、パッケージマネージャー、イベントマネージャーなどを提供するフレームワーク。
Chromium： Vega用に最適化されたChromiumウェブエンジン。このエンジンでは、HTML、CSS、JavaScriptなどのウェブページの解析とレンダリングを行います。
UIフレームワーク： リアクティブプログラミングをサポートするクロスプラットフォームのツールキット。リアクティブプログラミングは、Reactと同様の宣言型のプログラミングスタイルです。このフレームワークにより、コンポーネント開発者はクロスプラットフォームAPIの抽象化を公開して、オペレーティングシステム（OS）レベルのAPIサーフェスを操作できます。
ネイティブVega WebViewコンポーネント： 開発者がWebViewを使用できるようにするためのC++で記述されたコンポーネント。
React Native WebView API： AmazonとVega向けReact Nativeアプリとの間のソフトウェアインターフェイス。
Vegaアプリ向けReact Native： 開発者が作成したアプリ。

ウェブアプリのクイックセットアップ

手順1：アプリテンプレートを追加する

クリップボードにコピーしました。

npm install @amazon-devices/webview@~3.3.0

詳細については、テンプレートを使用したアプリの作成を参照してください。

手順2：必要なサービスをmanifest.tomlファイルに追加する

クリップボードにコピーしました。

[wants]

# Webアプリにキーボードサポートが必要な場合
[[wants.service]]
id = "com.amazon.inputmethod.service"

# ウェブアプリにビデオ再生が必要な場合
[[wants.service]]
id = "com.amazon.media.server"

# ビデオ再生からメトリクスを出力するために必須
[[wants.service]]
id = "com.amazon.mediametrics.service"

# 安定したAPIでの動画再生に必須
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"

# ウェブアプリにオーディオ再生が必要な場合
[[wants.service]]
id = "com.amazon.audio.stream"

# WebViewでの音声フォーカス、音量調整などのオーディオ管理機能が動作するために必須
[[wants.service]]
id = "com.amazon.audio.control"

# アプリでアクセシビリティサポートを有効にするには、サービスレジストラーを使用してUCCサービスを追加することを推奨します
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"

# 暗号化されたメディア再生（DRMコンテンツ）を有効にするには、以下のセクションのコメントを解除します
# [[wants.service]]
# id = "com.amazon.drm.key"
# [[wants.service]]
# id = "com.amazon.drm.crypto"
# [[needs.privilege]]
# id = "com.amazon.privilege.security.file-sharing"

# メディアサービスにアクセスするGroup-IPCを有効にします
[[wants.service]]
id = "com.amazon.gipc.uuid.*"
[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*" 

# 必要に応じてその他のサービスを追加できます。

手順3： App.tsxファイルにWebViewコンポーネントをインポートして使用する

クリップボードにコピーしました。

 
import { WebView } from "@amazon-devices/webview";
import * as React from "react";
import { useRef } from "react";
import { View, StyleSheet } from "react-native";

export const App = () => {
  const webRef = useRef(null);
  return (
    <View style={styles.container}>
      <WebView
        // headers: {},
        ref={webRef}
        hasTVPreferredFocus={true}
        source={{
          // 独自のURLに置き換えてください。
          uri: "https://www.example.com",
          // または<ルート>/assets/index.htmlにあるファイルを参照します
          // uri: "file:///pkg/assets/index.html"
        }}
        javaScriptEnabled={true}
        onLoadStart={(event) => {
          console.log("onLoadStart url: ", event.nativeEvent.url)
        }}
        onLoad={(event) => {
          console.log("onLoad url: ", event.nativeEvent.url)
        }}
        onError={(event) => {
          console.log("onError url: ", event.nativeEvent.url)
        }}
      />
    </View>
  );
};

// レイアウトのスタイル。フォーカスの適切な動作に必要
const styles = StyleSheet.create({
  container: { flex: 1 }
});

WebViewのプロパティ

WebViewコンポーネントのプロパティの完全なリストについては、Vega WebViewコンポーネントリファレンスを参照してください。

重要： TVデバイスでのフォーカスの動作が適切になるように、必ずhasTVPreferredFocus={true}を設定してください。

サポートされるメディアフォーマット

Vegaウェブアプリでは、次のオーディオ形式とビデオ形式がサポートされます。

サポートされるオーディオ形式

FLAC
MP3
Opus
Vorbis
AAC
PCM 8ビット符号なし整数
PCM 16ビット符号付き整数（リトルエンディアン）
PCM 24ビット符号付き整数（リトルエンディアン）
PCM 32ビット浮動小数点数（リトルエンディアン）
PCM 16ビット符号付き整数（ビッグエンディアン）
PCM 24ビット符号付き整数（ビッグエンディアン）
PCM μ-law
PCM A-law
AAC-LC
AAC-SBR
AAC-PS
AAC Scalable（MPEG-2）

サポートされるビデオ（ソフトウェア）形式

Theora
MPEG4 Part 2

サポートされるビデオ（ハードウェア）形式

VP8
VP9
H.264
H.265

注： デジタル著作権管理（DRM）のサポート： WebViewは、ハードウェアセキュリティレベルでWidevineとPlayReadyをサポートしています。

デジタル著作権管理（DRM）のサポート

WebViewでは現在、WidevineとPlayReadyがサポートされています。Widevineは、ビデオでHW_SECURE_ALLを、オーディオでSW_SECURE_CRYPTOをサポートします。PlayReadyは、ビデオでSL3000を、オーディオでSL2000をサポートします。

デバイスがDRMコンテンツをサポートしているかどうかの確認

WebViewでは、デバイスがサポートしていれば、ハードウェアDRM（Widevine L1およびPlayReady SL2000/3000）とソフトウェアDRM（Widevine L3）がサポートされます。DRMが利用可能かどうかを確認するには、ウェブアプリでrequestMediaKeySystemAccessメソッドを使用します。

クリップボードにコピーしました。

const system = 'com.widevine.alpha';
const config = [
  {
    audioCapabilities: [
      {
        contentType: 'audio/mp4;codecs="mp4a.40.2"',
        encryptionScheme: 'cenc',
        robustness: 'SW_SECURE_CRYPTO'
      }
    ],
    videoCapabilities: [
      {
        contentType: 'video/mp4;codecs="avc1.42E01E"',
        encryptionScheme: 'cenc',
        robustness: 'HW_SECURE_ALL'
      }
    ]
  }
];

navigator.requestMediaKeySystemAccess(system, config)
  .then(() => console.log('DRMがサポートされています'))
  .catch(() => console.log('DRMはサポートされていません'));

使用上の注意

configのrobustnessフィールドは、照会するDRMのレベルを決定します。ハードウェアによるDRMにはHW_SECURE_ALLを使用し、ソフトウェアDRMにはSW_SECURE_CRYPTOを使用します。オーディオはハードウェアによってサポートされないため、オーディオコンテンツにはSW_SECURE_CRYPTOを使用します。
要求されたDRM構成がデバイスでサポートされていない場合、プロミスは拒否されます。
ハードウェアとソフトウェアの両方のDRMレベルを確認し、サポート状況に応じて適切にフォールバックしてください。

Last updated: 2026年4月28日

Vegaウェブアプリの概要

WebViewスタックのレイヤー

ウェブアプリのクイックセットアップ

手順1： アプリテンプレートを追加する

手順2： 必要なサービスをmanifest.tomlファイルに追加する

手順3： App.tsxファイルにWebViewコンポーネントをインポートして使用する

WebViewのプロパティ

サポートされるメディアフォーマット

サポートされるオーディオ形式

サポートされるビデオ（ソフトウェア）形式

サポートされるビデオ（ハードウェア）形式

デジタル著作権管理（DRM）のサポート

デバイスがDRMコンテンツをサポートしているかどうかの確認

使用上の注意

関連トピック

手順1：アプリテンプレートを追加する

手順2：必要なサービスをmanifest.tomlファイルに追加する