Vegaウェブアプリの概要
Vegaウェブアプリの概要
オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。
重要： Vegaウェブアプリは、MシリーズコンピューターでのみVega仮想デバイスをサポートします。
WebViewをReact Nativeアプリに追加する場合
WebViewを1つのコンポーネントとしてReact Nativeアプリに追加する場合は、代わりにVega WebViewコンポーネントリファレンスを参照してください。
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日
