Vegaウェブアプリの概要
Vegaウェブアプリの概要
オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。
重要： Vegaウェブアプリは、MシリーズコンピューターでのみVega仮想デバイスをサポートします。Vegaソフトウェア開発キット（SDK）にはWebViewよりも多くの機能があるため、SDKを使用してアプリを開発することを検討してください。詳細については、SDKの概要を参照してください。
WebViewをReact Nativeアプリに追加する場合
WebViewを1つのコンポーネントとしてReact Nativeアプリに追加する場合は、代わりにVega WebViewコンポーネントリファレンスを参照してください。次のセクションでは、WebViewを主なインターフェイスとするTV向けウェブアプリの構築に焦点を当てます。
WebViewを1つのコンポーネントとしてReact Nativeアプリに追加する場合は、代わりにVega WebViewコンポーネントリファレンスを参照してください。次のセクションでは、WebViewを主なインターフェイスとするTV向けウェブアプリの構築に焦点を当てます。
Vega WebViewコンポーネントは、HTML、JavaScript、CSSなどのウェブベースのコンテンツをVegaアプリに表示します。これにより、静的ページ（ヘルプページ、利用規約など）、ログイン画面に加え、アプリのプレゼンテーション層全体など、アプリの既存のウェブコンテンツを活用できます。WebViewコンポーネントはChromiumエンジンを利用し、カスタマイズ可能（カスタムヘッダー、DOMストレージなど）で、メッセージングブリッジを介してWebViewソースとそれを含むVegaアプリ間のデータ通信をサポートします。
ウェブコンテンツがTVデバイス向けに最適化されていることを確認してください。これには、リモコン／方向パッド（D-Pad）入力用のフォーカスナビゲーションが含まれます。クリック／タッチ／ドラッグなどのUXの実装は一般的にTVのユーザーエクスペリエンスと互換性がなく、TVデバイスはデスクトップデバイスやモバイルデバイスよりも消費電力が少ないことがよくあります。たとえば、TV向けにアニメーションを減らすなどして、ウェブコンテンツを最適化する必要があります。パフォーマンスと滑らかさに関する詳細なガイダンスは、ウェブアプリ開発に関するベストプラクティスを参照してください。
ウェブアプリのクイックセットアップ
手順1： アプリテンプレートを追加する
npm install @amazon-devices/webview@^3.3.0
詳細については、テンプレートを使用したアプリの作成を参照してください。
手順2： 必要なサービスをmanifest.tomlファイルに追加する
# アプリにビデオ再生が必要な場合
[[wants.service]]
id = "com.amazon.media.server"
[[wants.service]]
id = "com.amazon.mediametrics.service"
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"
# アプリにオーディオ再生が必要な場合
[[wants.service]]
id = "com.amazon.audio.stream"
[[wants.service]]
id = "com.amazon.audio.control"
# アプリにDRM再生が必要な場合
[[wants.service]]
id = "com.amazon.drm.key"
[[wants.service]]
id = "com.amazon.drm.crypto"
[[needs.privilege]]
id = "com.amazon.privilege.security.file-sharing"
# アプリでアクセシビリティサポートを有効にするために、
# UCCサービスをSRに追加することを強く推奨します。
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"
# メディアサービスにアクセスする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をサポートしています。
関連トピック
Last updated: 2025年10月7日
