Vegaウェブアプリのセットアップ

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

Vegaウェブアプリをセットアップするには、必要なライブラリをいくつかインポートし、特定のコンポーネントを使用してコンテンツをレンダリングする必要があります。

Vegaウェブアプリをセットアップしてアプリを開発するには

WebViewを実装するには、必要なライブラリをいくつかインポートし、特定のコンポーネントを使用してコンテンツをレンダリングする必要があります。

Vega SDKのテンプレートを使用したアプリの作成トピックの指示に従って、アプリテンプレートを追加します。
WebViewをインストールするには、コマンドプロンプトで次のコマンドを実行します。
クリップボードにコピーしました。
```
npm install @amazon-devices/webview@^3.3.0
```

appフォルダにある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]
 [[wants.service]]
 id = "com.amazon.gipc.uuid.*"

 [offers]
 [[offers.service]]
 id = "com.amazon.gipc.uuid.*"

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

注：デジタル著作権管理（DRM）のサポート： WebViewでは現在、WidevineとPlayReadyがサポートされています。Widevineは、ビデオでHW_SECURE_ALLを、オーディオでSW_SECURE_CRYPTOをサポートします。PlayReadyは、ビデオでSL3000を、オーディオでSL2000をサポートします。

JavaScript XML（JSX）ファイルに以下を追加します。
クリップボードにコピーしました。
```
 import { WebView}  from "@amazon-devices/webview";
```

src/App.tsxファイルに、WebViewをレンダリングする次のコードを追加します。このコードにはhasTVPreferredFocus={true}プロパティが含まれています。

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

 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
         ref={webRef}
         hasTVPreferredFocus={true}
         source={{
           uri: "https://www.example.com",
         }}
         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フレームワークは初期フォーカスを設定しません。初期フォーカスは、開発者がコンポーネントにhasTVPreferredFocus={true}プロパティを追加して設定する必要があります。アプリでWebViewコンポーネントに初期フォーカスを設定しない場合は、リモコンを最初にクリックしたときにWebView UIコンポーネントが選択される可能性があり、それがトリガーとなって、WebViewがフォーカステーブルの最初の要素に初期フォーカスを設定します。

Vegaウェブアプリがバックグラウンドに移動すると、JavaScriptエンジン、アニメーション、オーディオとビデオのメディア再生は一時停止されます。WebViewがフォアグラウンドに戻ると再開されます。

Last updated: 2025年9月30日

Vegaウェブアプリのセットアップ

Vegaウェブアプリをセットアップしてアプリを開発するには

関連トピック