WebViewを使用したウェブアプリの作成

​

WebViewに初期フォーカスを設定する方法

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

export const App = () => {
const webRef = useRef(null);
return (
  <View >
      <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>
  );
};

​

WebViewページからのメッセージの送受信

• Vega向けReact Native -> ウェブ： injectJavaScriptメソッド。
• ウェブ -> Vega向けReact Native： onMessageプロパティ。

​

VegaデバイスのFire TV機能をウェブページから実装する方法

​

Vega向けWebViewでHDR形式とコーデックのサポートを確認する方法

​

ウェブのJavaScriptで戻るボタンのリモコンキーイベントを有効にする方法

• src/App.tsxファイルで、allowSystemKeyEventsプロパティをtrueに設定します。

​

デバッグ用にDevToolsを有効にして使用する方法

• コマンドプロンプトで、次のコマンドを実行します。
  vega build -b Debug
  

1. デバッグアプリをインストールして、起動します。これによってWebViewが開きます。
2. コマンドプロンプトで、次のコマンドを実行してポートフォワーディングを行います。
   vda forward tcp:9229 tcp:9229.
   DevTools runs on port 9229.
   
3. Google Chromeを開き、chrome://inspect/#devicesに移動します。
4. [Remote Target] セクションで、接続されているデバイスの一覧からDevToolsを見つけます。
5. [inspect] をクリックしてDevToolsを開き、WebViewを検査します。

​

サポートされているリモコンキーイベント

​

canPlayType()を使用してHDRを確認する例

>const video = document.querySelector('video');
>console.log(video.canPlayType('video/webm; codecs="vp09.02.10.10'));
probably

>console.log(video.canPlayType('video/mp4; codecs="hev1.2.4.L153.B0"'));
probably

​

isTypeSupported()を使用してHDRを確認する例

>MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10"');
true

>MediaSource.isTypeSupported('video/mp4; codecs="hev1.2.4.L153.B0"');
true

​

HEVCを使用する例

const hevcConfig = {
    type: 'media-source',
    video: {
        contentType: 'video/mp4; codecs="hvc1.2.4.L153.B0"',
        width: 3840,
        height: 2140,
        framerate: 60,
        bitrate: 20000000,
        transferFunction: 'pq',
        colorGamut: 'rec2020'
    }
};

navigator.mediaCapabilities.decodingInfo(hevcConfig)

​

デフォルトのメディアコントロールハンドラーをオーバーライドする方法

• 広告再生中のシーク操作を無効にする。
• ライブ再生中にすべてのメディアコントロールを無効にする。

• navigator.mediaSessionを使用してウェブベースで実装する。この実装では、以下の理由からallowsDefaultMediaControlを有効にしてください。
  • 再生、一時停止、早送り、早戻しのトランスポートコントロールが可能になる。
  • アプリコードを変更しなくても、ウェブページ内で直接機能する。
• アプリのコード内でVegaMediaControlインターフェイスを直接統合する。この統合では、以下の理由からallowsDefaultMediaControlを有効にしてください。
  • デバイスのメディアコントロール機能へのフルアクセスが提供される。
  • システムとの密接な統合を必要とするアプリに適している。

​

navigator.mediaSessionを使用したウェブベースの実装

​

navigator.mediaSessionを使用する例

// ウェブページのJavaScriptコード（ウェブページに含めます）
// video要素への参照を取得します。
const video = document.querySelector('video');
if ('mediaSession' in navigator) {
    // 再生アクションをオーバーライドします。
    navigator.mediaSession.setActionHandler('play', () => {
        // ここにカスタムの再生ロジックを実装します。
        video.play();
    });
    // 一時停止アクションをオーバーライドします。
    navigator.mediaSession.setActionHandler('pause', () => {
        // ここにカスタムの一時停止ロジックを実装します。
        video.pause();
    });
    // シークアクションをオーバーライドします。
    navigator.mediaSession.setActionHandler('seekbackward', (details) => {
        // ここにカスタムのシークロジックを実装します。
        const skipTime = details.seekOffset || 10;
        video.currentTime = Math.max(video.currentTime - skipTime, 0);
    });
    navigator.mediaSession.setActionHandler('seekforward', (details) => {
        // ここにカスタムのシークロジックを実装します。
        const skipTime = details.seekOffset || 10;
        video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
    });
}

// React Nativeアプリのコード（アプリに実装します）
return (
    <View style={styles.sectionContainer}>
      <WebView
        ref={webRef}
        hasTVPreferredFocus={true}
        allowsDefaultMediaControl={true}  // navigator.mediaSessionを機能させるために必要
        source={{
          uri: "https://example.com",  // 実際のURLに置き換えてください
        }}
        javaScriptEnabled={true}
      />
    </View>
);

​

アプリでのVegaMediaControlインターフェイスの統合

1. WebViewのプロパティを構成します。
   • WebViewのデフォルトのメディアコントロールは、デフォルトで無効になっています。コントロールを無効にしておくために、プロパティは未設定のままにするか、allowsDefaultMediaControlを明示的にfalseに設定します。VegaMediaControlの統合を使用するには、デフォルトのメディアコントロールを無効のままにしてください。
2. VegaMediaControlインターフェイスを実装します。
   • VegaMediaControlの統合をアプリに追加します。
3. ブリッジを介してJavaScriptと通信します。
   • injectJavaScriptを使用して、VegaMediaControlハンドラーに従ってウェブプレーヤーを制御します。

​

アプリのコードでVegaMediaControlを統合する例

1. manifest.tomlで、VegaMediaControlのサポートを追加します。KMCとその他のエントリでマニフェストを更新します。
   [components]
   [[components.interactive]]
   categories = ["com.amazon.category.kepler.media"]
   
   [[extras]]
   key = "interface.provider"
   component-id = "com.amazondeveloper.keplerwebapp.main"
   
   [extras.value.application]
   [[extras.value.application.interface]]
   interface_name = "com.amazon.kepler.media.IMediaPlaybackServer"
   command_options = [
       "Play",
       "Pause",
       "SkipForward",
       "SkipBackward",
   ]
   
2. package.jsonに次の依存関係を追加します。
   "@amazon-devices/kepler-media-controls": "~1.0.0",
   "@amazon-devices/kepler-media-types": "~1.0.0",
   
3. 以下のアプリコードの例では、KMCサーバーと、関連付けられるハンドラーを作成します。これらのハンドラーを使用すると、カスタム動作のJavaScriptをウェブページに挿入できます。
    import { WebView } from "@amazon-devices/webview";
    import { useEffect, useRef, useMemo } from "react";
    import { StyleSheet, View } from "react-native";
    import {
      Action,
      IMediaControlHandlerAsync,
      IMediaMetadata,
      IMediaSessionId,
      ITimeValue,
      ITrack,
      MediaControlServerComponentAsync,
      MediaSessionState,
      RepeatMode,
    } from "@amazon-devices/kepler-media-controls";
    import { IComponentInstance, useComponentInstance } from "@amazon-devices/react-native-kepler";
       
    export const App = () => {
      const webRef = useRef(null);
      const componentInstance: IComponentInstance = useComponentInstance();
       
      const mediaControlsHandler: IMediaControlHandlerAsync = useMemo(
        (): IMediaControlHandlerAsync => ({
          handlePlay: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handlePlay"]);
            // ウェブページの実装に基づいてJSスクリプトを更新します。
            webRef.current?.injectJavaScript("document.querySelector('video')?.play();");
            return Promise.resolve();
          },
          handlePause: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handlePause"]);
            // ウェブページの実装に基づいてJSスクリプトを更新します。
            webRef.current?.injectJavaScript("document.querySelector('video')?.pause();");
            return Promise.resolve();
          },
          handleTogglePlayPause: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handleTogglePlayPause"]);
            // ウェブページの実装に基づいてJavaScriptスクリプトを挿入します。
            return Promise.resolve();
          },
          handleStop: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handleStop"]);
            // ウェブページの実装に基づいてJavaScriptスクリプトを挿入します。
            return Promise.resolve();
          },
          handleStartOver: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handleStartOver"]);
            // ウェブページの実装に基づいてJavaScriptスクリプトを挿入します。
            return Promise.resolve();
          },
          handleFastForward: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handleFastForward"]);
            // ウェブページの実装に基づいてJavaScriptスクリプトを挿入します。
            return Promise.resolve();
          },
          handleRewind: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("メディアコントロール", ["handleRewind"]);
            // ウェブページの実装に基づいてJavaScriptスクリプトを挿入します。
            return Promise.resolve();
          },
          handleGetMetadataInfo: function (id: MediaId): Promise<IMediaMetadata> {
            console.log("メディアコントロール", ["handleGetMetadataInfo", id]);
            return Promise.resolve({
              mediaId: id.contentId,
              title: 'サンプルタイトル',
              date: '2024-01-01',
              artwork: [
                {
                  url: 'https://example.com/artwork1.jpg',
                  sizeTag: 'medium',
                  id: 'sample artwork id1',
                  tag: 'fantastic',
                },
                {
                  url: 'https://example.com/artwork2.jpg',
                  sizeTag: 'large',
                  id: 'sample artwork id2',
                  tag: 'wonderful',
                },
              ],
            });
          },
          handleGetSessionState: function (sessionId?: IMediaSessionId): Promise<MediaSessionState[]> {
            console.log("メディアコントロール", ["handleGetSessionState"]);
            // ウェブページの実装に基づいてJavaScriptスクリプトを挿入します。
            return Promise.resolve([]);
          },
        }),
        []
      );
       
      useEffect(() => {
        const mediaControlServer = MediaControlServerComponentAsync.getOrMakeServer();
        mediaControlServer.setHandlerForComponent(mediaControlsHandler, componentInstance);
      }, [componentInstance, mediaControlsHandler]);
       
      const styles = StyleSheet.create({
        sectionContainer: {
          flex: 1,
        },
      });
       
      return (
        <View style={styles.sectionContainer}>
          <WebView
            ref={webRef}
            hasTVPreferredFocus={true}
            source={{
              // 独自のURLに置き換えてください。
              uri: "https://example.com",
            }}
            javaScriptEnabled={true}
          />
        </View>
      );
    };
   

​

デバイスに保存されているローカルファイルのURLをWebViewに読み込む方法

• src/App.tsxで、allowFileAccessプロパティをtrueに設定します。

​

例：WebViewを使用してassetsディレクトリからHTMLファイルを読み込む

<View>
    <WebView
        source={{
            uri: "file:///pkg/assets/sample.html",
        }}
    />
</View>

​

例：WebViewを使用してアプリのデータディレクトリからHTMLファイルを読み込む

<View>
    <WebView
        source={{
            uri: "file:///data/sample.html",
        }}
        allowFileAccess={true}
    />
</View>

​

WebViewでのD-Padナビゲーション

​

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
        style={styles.webview}
        ref={webRef}
        hasTVPreferredFocus={true}
        source={{
          uri: "https://www.example.com",
        }}
        javaScriptEnabled={true}
        onLoadStart={(event) => {
          console.log("onLoadStart", event.nativeEvent.description)
        }}
        onLoad={(event) => {
          console.log("onLoad", event.nativeEvent.description)
        }}
        onError={(event) => {
          console.log("onError", event.nativeEvent.description)
        }}
      />
    </View>
  );
};

// レイアウトと背景色のスタイル
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    backgroundColor: "#000000"
  }
});

​

ビデオ再生画面の上部にあるリモート再生アイコンを削除する方法

const obj = document.createElement("audio");
obj.disableRemotePlayback = true;

​

HTTPを選択的に許可またはブロックする方法

​

動作のしくみ

​

一般的なユースケース

• 一部のドメイン（拒否リスト）を除いてすべてのHTTPをブロックする。 例：アプリ全体でクリアテキストを許可しますが、機密性の高いドメインを除きます。
    [network-traffic-policy.cleartext]
    allowed-domains = ["*"]  # すべてのドメインを許可します。
    blocked-domains = [
        "sensitive-api.com",
        "*.bank.com",
        "payment.example.com"
    ]
  
• 特定のドメイン（許可リスト）を除いてすべてのHTTPをブロックする。 例：アプリ全体ではクリアテキストを有効にせず、特定のドメインだけを信頼します。
    [network-traffic-policy.cleartext]  
    allowed-domains = [  
        "debug.myapp.com",  
        "*.test.internal.com",  
        "localhost"  
    ]  
    # blocked-domainsは省略 - 許可リストの使用時には必要ありません。
  
• すべてのHTTPをブロックする（例外なし）。 例：クリアテキストを一切許可しません。
    [package]
    # network-traffic-policy.cleartextを省略します。
    # これがデフォルトのセキュリティ動作です。
  
• すべてのHTTPを許可する（制限なし）。 例：すべてのドメインでクリアテキストを許可します。この構成は、キャプティブポータルアプリやネットワーク診断に役立つ可能性があります。
    [network-traffic-policy.cleartext]  
    allowed-domains = ["*"]  # すべてのドメインを許可します。
  

​

関連トピック

• Vegaウェブアプリの概要
• ウェブアプリのパフォーマンスに関するベストプラクティス