Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

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

ホーム

開発

設計と開発

公開

リファレンス

サポート

Vega WebViewコンポーネントリファレンス

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

WebViewを使用するための設定については、Vegaウェブアプリの概要を参照してください。

プロパティ

source

指定されたURIを読み込みます。必要に応じてヘッダーも指定できます。sourceオブジェクトには次のサブプロパティがあります。

uri (string)： WebViewで読み込むURI。
headers (object)：リクエストと共に送信する追加のHTTPヘッダー。

以下に例を示します。

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

<WebView
    source ={{
        uri: "http://amazon.com/",
        headers: { "custom-app-header": "react-native-webview-app", "custom-app-header2": "VALEU2" }}}/>

onLoad

WebViewでウェブページの読み込みが完了すると、onLoadが呼び出されます。以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  onLoad={(event) => {
    console.log('url: ', event.nativeEvent.url)
  }}/>

onLoad関数は、次のプロパティと共に呼び出されます。

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

url（str）- WebViewに読み込まれたURL。
canGoBack(bool) - 前に戻るための履歴がWebViewにあるかどうか。
canGoForward(bool) - 先へ進むための履歴がWebViewにあるかどうか。

onLoadStart

WebViewがリソースの読み込みを開始すると、onLoadStartが呼び出されます。以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  onLoadStart={(event) => {
    console.log('url: ', event.nativeEvent.url)
  }}/>

onLoadStartは、次のプロパティと共に呼び出されます。

Copied to clipboard.

url（str）- WebViewに読み込まれたURL。
canGoBack(bool) - 前に戻るための履歴がWebViewにあるかどうか。
canGoForward(bool) - 先へ進むための履歴がWebViewにあるかどうか。

onError

onErrorは、WebViewが読み込みに失敗したときに呼び出されます。

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

以下に例を示します。

<WebView
  source={{ uri: 'https://amazon.com' }}
  onError={(event) => {
    console.log('url: ', event.nativeEvent.url)
  }}/>

onError関数は、次のプロパティと共に呼び出されます。

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

url（str）- WebViewに読み込まれたURL。
canGoBack(bool) - 前に戻るための履歴がWebViewにあるかどうか。
canGoForward(bool) - 先へ進むための履歴がWebViewにあるかどうか。
code（int）- エラーコード。
description（str）- エラーの説明。

onHttpError

onHttpError関数は、WebViewが読み込みに失敗し、HTTPステータスエラーが発生したときに呼び出されます。

statusCodeが400以上の場合はすべてHTTPステータスエラーです。

isMainFrameフラグにより、エラーがメインページの読み込み中に発生したか、それとも依存ページの読み込み中に発生したかを特定できます。メインフレームの場合はtrue、サブリソースまたはiframeの場合はfalseになります。

型	必須
関数	×

以下に例を示します。

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

<WebView
  source={{ uri: 'https://example.com' }}
  onHttpError={(event) => {
    console.log('url: ', event.nativeEvent.url)
    console.log("HttpError statusCode, description, isMainFrame: ",
                  event.nativeEvent.statusCode,
                  event.nativeEvent.description,
                  event.nativeEvent.isMainFrame );
  }}/>

onHttpError関数は、次のプロパティと共に呼び出されます。

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

url
canGoBack
canGoForward
statusCode
description
isMainFrame

onCloseWindow

この関数は、指定されたWebViewを閉じてビューシステムから削除するようにホストアプリに通知します。

この呼び出し後にWebViewとやり取りすると予期しない動作を引き起こす可能性があるため、ホストアプリでは、この呼び出しを受け取ったらWebViewインスタンスを破棄する必要があります。

このメソッドにはデフォルトの機能はありません。

型	必須
関数	×

以下に例を示します。

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

import React, { BackHandler } from 'react-native'; 
<WebView 
  source={{ uri : 'https://example.com/' }} 
  onCloseWindow={ 
    () => { // 読み込まれたウェブページのBackHandler.exitApp()から発生するクローズイベントを処理します。 }
   } />

onMessage

WebView JSがReactNativeWebView.postMessageを呼び出したときに呼び出されます。postMessageは引数を1つ受け取り、それがeventオブジェクトに渡されます。dataは文字列です。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  onMessage={(event) => {
    console.log("data: ", event.nativeEvent.data);
  }}/>

onShouldStartLoadWithRequest

onShouldStartLoadWithRequestは、任意のWebViewリクエストのカスタム処理を可能にします。戻り値がtrueの場合はリクエストの読み込みを継続し、falseの場合は停止します。以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  onShouldStartLoadWithRequest={(request) => {
        return request.url.startsWith('https://amazon.com');
  }}/>

このonShouldStartLoadWithRequestオブジェクトには、以下のプロパティが含まれます。

Copied to clipboard.

url（str）- WebViewに読み込まれたURL。
canGoBack(bool) - 前に戻るための履歴がWebViewにあるかどうか。
canGoForward(bool) - 先へ進むための履歴がWebViewにあるかどうか。
lockIdentifier（int）- JSとネイティブの同期用のロック識別子番号。

onClientCertAuthentication（省略可能）

この省略可能な関数により、ホストアプリはクライアント証明書認証リクエストを管理できます。

パラメーター

これにより、認証リクエストの詳細が表示されます。
クリップボードにコピーしました。
```
request (Type: ClientCertAuthenticationRequest)
```
このコールバックオブジェクトには、認証を処理する関数があります。
クリップボードにコピーしました。
```
callback (Type: ClientCertAuthenticationCallback)
```

コールバック関数

この関数は、証明書がPKCS#12形式の場合にクライアント証明書認証を処理します。
クリップボードにコピーしました。
```
  handleWithPkcs12(certificateData: Pkcs12CertificateData)
```
この関数はクライアント証明書認証プロセスをキャンセルします。
クリップボードにコピーしました。
```
  cancel()
```

デフォルトの動作では、クライアント証明書のないリクエストをキャンセルします。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  onClientCertAuthentication={(request, callback) => {

      // 認証を処理するには：
      callback.handleWithPkcs12({
            certificate: "base64-certificate",
            password: "certificate-password",
      });

      // リクエストを却下するには：
      callback.cancel();
  }}/>

リクエストオブジェクトには次のプロパティが含まれます。

hostName - サーバーのホスト名。
portNumber - リクエストのポート番号。

onSslError (optional)

この省略可能な関数は、リソースの読み込み時にSSLエラーが発生したことをホストアプリに通知します。ホストアプリは、SslErrorHandler.cancel()またはSslErrorHandler.proceed()を呼び出す必要があります。デフォルトでは、URLの読み込み中にSSLエラーが発生した場合は拒否されます。

警告： このメソッドをアプリでオーバーライドすると、カスタムエラーページを表示したり、エラーを表示せずに問題をログに記録したりできます。ホストアプリでは、SslErrorHandler#cancel()を呼び出し、エラーのある状態での続行を避ける必要があります。

重要： SSLエラーに関する確認をユーザーに求めないでください。WebView UIでは、エラーの有用な詳細は提供されないため、ユーザーが十分な情報に基づいてセキュリティ上の決定を下すことはできません。

ユーザーは、今後のSSLエラーに応答するためにproceed()メソッドまたはcancel()メソッドを呼び出すことができます。デフォルトでは、リソースの読み込みプロセスはキャンセルされます。この関数は、信頼されていない証明機関、証明書の期限切れ、自己署名など、回復可能なSSL証明書エラーに対してのみ呼び出されます。サーバーがクライアントを拒否した場合など、回復不可能なエラーについては、WebViewはonError(WebView, WebResourceRequest, WebResourceError)をERROR_FAILED_SSL_HANDSHAKE（-11）引数と共に呼び出します。

以下に例を示します。

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

const handleSSLError = (sslError: SslErrorData , callback: OnSslErrorCallback) => {
    console.log("WebViewClient: ", sslError.url, sslError.code, sslError description);
    // リソースの読み込みとユーザーによる選択に時間がかかる場合もあることを想定して、ある程度の遅延を維持します。
    setTimeout(() => {
    // SSLエラーを受け入れる場合
    callback.proceed();
    // SSLエラーを拒否する場合
    // callback.cancel();
    }, 5000);
}
  <WebView
      source={{ uri: 'https://self-signed.badssl.com/' }}
      onSslError={(sslError: SslErrorData , callback: OnSslErrorCallback) => {
      HandleSSLError(sslError, sslErrorHandler);
  }}/>

SslErrorDataオブジェクト

SslErrorDataオブジェクトには、次のプロパティが含まれています。

url
code
description

OnSslErrorCallbackオブジェクトには、次のメソッドが含まれています。

proceed() - SSLエラーを許容します。
cancel() - SSLエラーを拒否します。

javaScriptEnabled

WebViewでJavaScriptを有効または無効にするブール値です。デフォルト値はtrueです。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  javaScriptEnabled={true}/>

domStorageEnabled

WebViewでDOMストレージ（ローカルウェブストレージ）を有効または無効にするブール値です。デフォルトはfalseです。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  domStorageEnabled={true}/>

userAgent

WebViewのUser-Agentを設定します。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  userAgent={"custom-user-agent"}/>

mixedContentMode

WebViewの混在コンテンツモードを指定します。

重要： 最適なセキュリティのためにはMIXED_CONTENT_NEVER_ALLOWを使用し、MIXED_CONTENT_ALWAYS_ALLOWは使用しないでください。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  mixedContentMode = {'always'}
  }/>

mixedContentModeに指定できる値は次のとおりです。

Never（デフォルト）：MIXED_CONTENT_NEVER_ALLOWが使用されます。WebViewは、安全なオリジンが安全でないオリジンからコンテンツを読み込むことを禁止します。最も安全なモードであるため、このモードが推奨されます。
Always：MIXED_CONTENT_ALWAYS_ALLOWが使用されます。WebViewは、安全なオリジンがほかの任意のオリジンからコンテンツを読み込むことを許可します。ほかのオリジンが安全でなくても許可されます。これは安全性が最も低いため、推奨されません。
Compatibility：MIXED_CONTENT_COMPATIBILITY_MODEが使用されます。WebViewは、混在コンテンツに関してモダンウェブブラウザで使用されているアプローチと互換性を保つように試みます。安全でないコンテンツの中には、安全なオリジンからの読み込みであれば許可されるものがあります。それ以外の種類のコンテンツはブロックされます。許可またはブロックされるコンテンツの種類は、リリースごとに異なる可能性があり、明示的には定義されていません。このモードは、レンダリングされる独自のコンテンツの制御までは行わなくても、適度なセキュリティは確保したいアプリ向けに用意されています。最も高いセキュリティを確保するには、MIXED_CONTENT_NEVER_ALLOWを使用してください。

allowFileAccess

file:// URIを使用したファイルシステムへのアクセスを有効または無効にするブール値です。デフォルト値はfalseです。

以下に例を示します。

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

<WebView
  source={{ uri: 'file:///<ファイルのパス>' }}
  allowFileAccess = {true}/>

allowSystemKeyEvents

このブール値は、アプリのウェブJavaScript層で、「戻る」ボタン（keyCode： 27）などの特殊なシステムキーイベントをアプリがリッスンするかどうかを決定します。この機能により、開発者はVega向けReact Nativeアプリコードに頼ることなく、ウェブサイトでビジネスロジックを実行できます。

このプロパティがtrueの場合、システムはキーイベントをVega向けReact Nativeアプリコードに送信するのではなく、ウェブJavaScriptに送信します。画面上に複数のWebViewインスタンスが存在していても、システムキーイベントを受け取るのは最も新しいWebViewインスタンスだけです。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  allowSystemKeyEvents={true}/>

mediaPlaybackRequiresUserAction

HTML5のオーディオやビデオの再生を開始する前に、ユーザーによるジェスチャーを必要とするかどうかを決定するブール値です。デフォルト値はtrueです。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  mediaPlaybackRequiresUserAction = {false}/>

thirdPartyCookiesEnabled

WebViewでサードパーティCookieを有効または無効にするブール値。デフォルトはtrueですが、将来的にfalseになる予定です。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  thirdPartyCookiesEnabled={false}/>

allowsDefaultMediaControl

VegaMediaControlのイベントが、アクティブなWebViewメディアセッションに自動的にブリッジされるようにします。これにより、WebViewで音声コマンドをシームレスに統合できます。詳細については、Vegaメディアコントロールの概要を参照してください。

trueに設定すると、再生、一時停止、早送り、早戻しなど、WebViewメディアセッションのデフォルトのメディアトランスポートコントロールが有効になります。
falseに設定すると、デフォルトのメディアトランスポートコントロールが無効になります。

考慮事項：

この設定は、広告やライブストリームを含むすべてのメディアコンテンツタイプに影響します。
メディアコンテンツをきめ細かく制御する方法については、デフォルトのメディアコントロールハンドラーをオーバーライドする方法を参照してください。

以下に例を示します。

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

<WebView
  source={{ uri: 'https://amazon.com' }}
  allowsDefaultMediaControl={true}/>

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

 const webRef = useRef(null);

 <View style={{ flex: 1 }}>
   <Button
     title="履歴をクリア"
     onPress={() => { if (webRef.current) { webRef.current.clearHistory(); } }}
   />
   <WebView
     source={{ uri: 'https://example.com' }}
     ref={webRef}
   />
 </View>

dispatchTouchEvent(event: TouchEvent)

指定されたターゲットのウェブ要素にタッチイベントをディスパッチします。これにより、touchstartやtouchendなどのタッチイベントをプログラムでトリガーできます。

パラメーター

event：ディスパッチされるタッチイベントを表すTouchEventオブジェクト。このオブジェクトには、タッチイベントのタイプに関する情報（type）と、イベントに関連付けるタッチポイントの配列（touches）が含まれます。

以下に例を示します。

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

  const webRef = useRef(null);

  <View style={{ flex: 1 }}>
    <Button
        title="タッチをトリガー"
        onPress={() =>{
          const touches: Touch[] = [ { clientX: 100, clientY: 200 }];
          // 新しいTouchEventオブジェクトを作成します。
          const touchStartEvent = new TouchEvent("touchstart", { touches });
          webRef.current && webRef.current.dispatchTouchEvent(touchStartEvent)
          // 新しいTouchEventオブジェクトを作成します。
          const touchEndEvent = new TouchEvent("touchend", { touches });
          webRef.current && webRef.current.dispatchTouchEvent(touchEndEvent)}
        }
    />
    <WebView
      source={{ uri: 'https://amazon.com' }}
      ref={webRef}
    />
  </View>

scrollBy(offsetX: number, offsetY: number)

WebViewのコンテンツを、オフセット値で指定した分だけスクロールします。このメソッドを使用すると、WebViewのコンテンツを、水平オフセット（offsetX）と垂直オフセット（offsetY）を指定してプログラムでスクロールできます。

パラメーター

offsetX: コンテンツをスクロールする水平オフセットを表す数値。正の値を指定するとコンテンツが右にスクロールし、負の値を指定すると左にスクロールします。
offsetY: コンテンツをスクロールする垂直オフセットを表す数値。正の値を指定するとコンテンツが下にスクロールし、負の値を指定すると上にスクロールします。

以下に例を示します。

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

  const webRef = useRef(null);

  <View style={{ flex: 1 }}>
    <Button
      title="下にスクロール"
      onPress={() => { if (webRef.current) { webRef.current.scrollBy(0, 100); } }}
    />
    <WebView
      source={{ uri: {'{https://amazon.com' }}
      ref={webRef}
    />
  </View>

getVisualViewportInfo()

WebViewのビジュアルビューポートに関する情報を取得します。

戻り値

ビジュアルビューポートに関する情報を含むオブジェクト。次の情報が含まれます。

height: ビジュアルビューポートの高さ。
width：ビジュアルビューポートの幅。
offsetTop：ビジュアルビューポートの上端からコンテンツの上端までのオフセット。
offsetLeft：ビジュアルビューポートの左端からコンテンツの左端までのオフセット。

以下に例を示します。

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

  const webRef = useRef(null);

  const handleWebViewLoad = (event: WebViewNavigationEvent) => {
      console.log(" getVisualViewportInfo: ", webRef.current.getVisualViewportInfo());
  };

  <View style={{ flex: 1 }}>
    <WebView
      source={{ uri: 'https://example.com' }}
      onLoad = {handleWebViewLoad}
      ref={webRef}
    />
  </View>

getContentSizeInfo()

WebView内のコンテンツのサイズに関する情報を取得します。

戻り値

コンテンツのサイズに関する情報を含むオブジェクト。次の情報が含まれます。

scrollWidth：コンテンツの合計の幅。
scrollHeight：コンテンツの合計の高さ。

以下に例を示します。

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

  const webRef = useRef(null);

  const handleWebViewLoad = (event: WebViewNavigationEvent) => {
      console.log(" getContentSizeInfo: ", webRef.current.getContentSizeInfo());
  };

  <View style={{ flex: 1 }}>
    <WebView
      source={{ uri: 'https://example.com' }}
      onLoad = {handleWebViewLoad}
      ref={webRef}
    />
  </View>

reload()

WebViewインスタンスの現在のページを再読み込みします。

以下に例を示します。

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

 const webRef = useRef(null);

 <View style={{ flex: 1 }}>
  <Button
    title="再読み込み"
    onPress={() => { if (webRef.current) { webRef.current.reload(); } }}
  />
  <WebView
    source={{ uri: 'https://example.com' }}
    ref={webRef}
  />
 </View>

Last updated: 2025年10月6日

Vega WebViewコンポーネントリファレンス

プロパティ

source

onLoad

onLoadStart

onError

onHttpError

onCloseWindow

onMessage

onShouldStartLoadWithRequest

onClientCertAuthentication（省略可能）

パラメーター

コールバック関数

onSslError (optional)

SslErrorDataオブジェクト

javaScriptEnabled

domStorageEnabled

userAgent

mixedContentMode

allowFileAccess

allowSystemKeyEvents

mediaPlaybackRequiresUserAction

thirdPartyCookiesEnabled

allowsDefaultMediaControl

メソッド

injectJavaScript

stopLoading

clearCache(bool)

goBack()

goForward()

clearHistory()

dispatchTouchEvent(event: TouchEvent)

パラメーター

scrollBy(offsetX: number, offsetY: number)

パラメーター

getVisualViewportInfo()

戻り値

getContentSizeInfo()

戻り値

reload()

関連トピック