WebView

[アーティクル]
02/15/2023

.NET マルチプラットフォームアプリ UI (.NET MAUI) WebView は、リモート Web ページ、ローカル HTML ファイル、および HTML 文字列をアプリに表示します。に表示される WebView コンテンツには、カスケードスタイルシート (CSS) と JavaScript のサポートが含まれています。既定では、.NET MAUI プロジェクトには、がリモート Web ページを表示するために必要な WebView プラットフォームのアクセス許可が含まれています。

WebView は次の特性を定義します。

Cookies型 CookieContainerのは、Cookie のコレクションのストレージを提供します。
CanGoBack型 boolのは、ユーザーが前のページに移動できるかどうかを示します。これは、読み取り専用プロパティです。
CanGoForward型 boolのは、ユーザーが前方に移動できるかどうかを示します。これは、読み取り専用プロパティです。
Source型 WebViewSourceのは、が表示される場所を WebView 表します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データバインディングの対象にすることができ、スタイルを設定できます。

プロパティはSource、オブジェクトまたは HtmlWebViewSource オブジェクトにUrlWebViewSource設定できます。両方ともからWebViewSource派生します。は UrlWebViewSource URL で指定された Web ページの読み込みに使用され HtmlWebViewSource 、オブジェクトはローカル HTML ファイルまたはローカル HTML の読み込みに使用されます。

WebView は、 Navigating ページナビゲーションの開始時に発生するイベントと Navigated 、ページナビゲーションの完了時に発生するイベントを定義します。イベントに付随NavigatingするオブジェクトはWebNavigatingEventArgs、ナビゲーションの取り消しにCancel使用できる型boolのプロパティを定義します。イベントに付随するオブジェクトは WebNavigatedEventArgs 、 Navigated ナビゲーション結果を Result 示す型 WebNavigationResult のプロパティを定義します。

重要

、WebView、または VerticalStackLayoutに含まれている場合は、とのプロパティをHorizontalStackLayout StackLayout指定HeightRequest WidthRequestする必要があります。これらのプロパティを指定しなかった場合、 WebView はレンダリングされません。

Web ページを表示する

リモート Web ページを表示するには、プロパティを Source URI を指定するに string 設定します。

<WebView Source="https://learn.microsoft.com/dotnet/maui" />

これに相当する C# コードを次に示します。

WebView webvView = new WebView
{
    Source = "https://learn.microsoft.com/dotnet/maui"
};

URI は、指定されたプロトコルで完全に形成されている必要があります。

Note

プロパティが Source 型 WebViewSourceであるにもかかわらず、プロパティを文字列ベースの URI に設定できます。これは、.NET MAUI には、文字列ベースの URI を UrlWebViewSource オブジェクトに変換する型コンバーターと暗黙的な変換演算子が含まれているためです。

iOS と Mac Catalyst でアプリトランスポートセキュリティを構成する

バージョン 9 以降、iOS ではアプリとセキュリティで保護されたサーバーとの通信のみが許可されます。アプリは、セキュリティで保護されていないサーバーとの通信を有効にすることを選択する必要があります。

次の Info.plist 構成は、特定のドメインが Apple Transport Security (ATS) 要件をバイパスできるようにする方法を示しています。

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSExceptionDomains</key>
		<dict>
			<key>mydomain.com</key>
			<dict>
				<key>NSIncludesSubdomains</key>
				<true/>
				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSTemporaryExceptionMinimumTLSVersion</key>
				<string>TLSv1.1</string>
			</dict>
		</dict>
	</dict>

特定のドメインのみが ATS をバイパスできるようにすることをお勧めします。信頼されていないドメインで追加のセキュリティを利用しながら、信頼されたサイトを使用できます。

次の Info.plist 構成は、アプリの ATS を無効にする方法を示しています。

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

重要

アプリで安全でない Web サイトへの接続が必要な場合は、キーを使用して ATS を完全にオフにするのではなく、常にキーを使用して NSExceptionDomains 例外としてドメインを入力する NSAllowsArbitraryLoads 必要があります。

ローカル HTML を表示する

インライン HTML を表示するには、プロパティを Source オブジェクトに HtmlWebViewSource 設定します。

<WebView>
    <WebView.Source>
        <HtmlWebViewSource Html="&lt;HTML&gt;&lt;BODY&gt;&lt;H1&gt;.NET MAUI&lt;/H1&gt;&lt;P&gt;Welcome to WebView.&lt;/P&gt;&lt;/BODY&gt;&lt;HTML&gt;" />
    </WebView.Source>
</WebView>

XAML では、と > のシンボルがエスケープされるため、HTML 文字列が<読み取れなくなる可能性があります。したがって、読みやすくするために、HTML をセクションに CDATA インライン化できます。

<WebView>
    <WebView.Source>
        <HtmlWebViewSource>
            <HtmlWebViewSource.Html>
                <![CDATA[
                <HTML>
                <BODY>
                <H1>.NET MAUI</H1>
                <P>Welcome to WebView.</P>
                </BODY>
                </HTML>
                ]]>
            </HtmlWebViewSource.Html>
        </HtmlWebViewSource>
    </WebView.Source>
</WebView>

これに相当する C# コードを次に示します。

WebView webView = new WebView
{
    Source = new HtmlWebViewSource
    {
        Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"
    }
};

ローカル HTML ファイルを表示する

ローカル HTML ファイルを表示するには、アプリプロジェクトの Resources\Raw フォルダーにファイルを追加し、そのビルドアクションを MauiAsset に設定します。その後、プロパティの値として設定されたオブジェクトで HtmlWebViewSource 定義されているインライン HTML からファイルを Source 読み込むことができます。

<WebView>
    <WebView.Source>
        <HtmlWebViewSource>
            <HtmlWebViewSource.Html>
                <![CDATA[
                <html>
                <head>
                </head>
                <body>
                <h1>.NET MAUI</h1>
                <p>The CSS and image are loaded from local files!</p>
                <p><a href="localfile.html">next page</a></p>
                </body>
                </html>                    
                ]]>
            </HtmlWebViewSource.Html>
        </HtmlWebViewSource>
    </WebView.Source>
</WebView>

MauiAsset ビルドアクションを使用してアプリプロジェクトに追加されている場合、ローカル HTML ファイルはカスケードスタイルシート (CSS)、JavaScript、イメージを読み込むことができます。

生資産の詳細については、「生資産」を参照してください。

コンテンツを再読み込みする

WebView には、ソースを Reload 再読み込みするために呼び出すことができるメソッドがあります。

WebView webView = new WebView();
...
webView.Reload();

WebViewでは、メソッドと GoForward メソッドを使用したプログラムナビゲーションがGoBackサポートされています。これらのメソッドは、ページスタック内のナビゲーションをWebView有効にし、プロパティと CanGoForward プロパティのCanGoBack値を調べた後にのみ呼び出す必要があります。

WebView webView = new WebView();
...

// Go backwards, if allowed.
if (webView.CanGoBack)
{
    webView.GoBack();
}

// Go forwards, if allowed.
if (webView.CanGoForward)
{
    webView.GoForward();
}

でページナビゲーションが発生すると、 WebViewプログラムによって開始されるか、ユーザーによって開始され、次のイベントが発生します。

Navigatingは、ページナビゲーションの開始時に発生します。イベントに付随NavigatingするオブジェクトはWebNavigatingEventArgs、ナビゲーションの取り消しにCancel使用できる型boolのプロパティを定義します。
Navigatedは、ページナビゲーションの完了時に発生します。イベントに付随するオブジェクトは WebNavigatedEventArgs 、 Navigated ナビゲーション結果を Result 示す型 WebNavigationResult のプロパティを定義します。

Android でのアクセス許可の処理

カメラやマイクなど、デバイスの記録ハードウェアへのアクセスを要求するページを参照する場合は、コントロールによってアクセス許可が WebView 付与されている必要があります。コントロールは WebView 、Android の型を Android.Webkit.WebChromeClient 使用してアクセス許可要求に対応します。ただし、 WebChromeClient .NET MAUI によって提供される実装では、アクセス許可要求は無視されます。アクセス許可要求を継承して承認する MauiWebChromeClient 新しい型を作成する必要があります。

重要

この方法を WebView 使用して、をカスタマイズしてアクセス許可要求を承認するには、Android API 26 以降が必要です。

Web ページからコントロールへの WebView アクセス許可要求は、.NET MAUI アプリからユーザーへのアクセス許可要求とは異なります。 .NET MAUI アプリのアクセス許可は、アプリ全体に対してユーザーによって要求され、承認されます。コントロールは WebView 、ハードウェアにアクセスするアプリの機能に依存します。この概念を説明するために、デバイスのカメラへのアクセスを要求する Web ページについて考えてみましょう。その要求がコントロールによって WebView 承認されているにもかかわらず、.NET MAUI アプリがユーザーによるカメラへのアクセスの承認を得ていない場合でも、Web ページはカメラにアクセスできません。

次の手順では、カメラを使用するためにコントロールからのアクセス許可要求を WebView 傍受する方法を示します。マイクを使用しようとしている場合は、カメラ関連のアクセス許可ではなくマイク関連のアクセス許可を使用する点を除いて、手順は似ています。

まず、必要なアプリのアクセス許可を Android マニフェストに追加します。 Platforms/Android/AndroidManifest.xmlファイルを開き、ノードにmanifest次を追加します。
```
<uses-permission android:name="android.permission.CAMERA" />
```

コントロールを含む WebView ページが読み込まれるなど、アプリのある時点で、カメラへのアプリアクセスを許可するアクセス許可をユーザーに要求します。

private async Task RequestCameraPermission()
{
    PermissionStatus status = await Permissions.CheckStatusAsync<Permissions.Camera>();

    if (status != PermissionStatus.Granted)
        await Permissions.RequestAsync<Permissions.Camera>();
}

次のクラスを Platforms/Android フォルダーに追加し、プロジェクトの名前空間に合わせてルート名前空間を変更します。

using Android.Webkit;
using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;

namespace MauiAppWebViewHandlers.Platforms.Android;

internal class MyWebChromeClient: MauiWebChromeClient
{
    public MyWebChromeClient(IWebViewHandler handler) : base(handler)
    {

    }

    public override void OnPermissionRequest(PermissionRequest request)
    {
        // Process each request
        foreach (var resource in request.GetResources())
        {
            // Check if the web page is requesting permission to the camera
            if (resource.Equals(PermissionRequest.ResourceVideoCapture, StringComparison.OrdinalIgnoreCase))
            {
                // Get the status of the .NET MAUI app's access to the camera
                PermissionStatus status = Permissions.CheckStatusAsync<Permissions.Camera>().Result;

                // Deny the web page's request if the app's access to the camera is not "Granted"
                if (status != PermissionStatus.Granted)
                    request.Deny();
                else
                    request.Grant(request.GetResources());

                return;
            }
        }

        base.OnPermissionRequest(request);
    }
}

前のスニペットでは、クラスは MyWebChromeClient を MauiWebChromeClient継承し、メソッドを OnPermissionRequest オーバーライドして Web ページのアクセス許可要求をインターセプトします。各アクセス許可項目は、カメラを表す文字列定数と PermissionRequest.ResourceVideoCapture 一致するかどうかを確認します。カメラのアクセス許可が一致する場合、アプリにカメラを使用するアクセス許可があるかどうかを確認します。アクセス許可がある場合は、Web ページの要求が付与されます。

Android WebView のSetWebChromeClientコントロールでメソッドを使用して、クロムクライアントをにMyWebChromeClient設定します。次の 2 つの項目は、クロムクライアントを設定する方法を示しています。
- という名前theWebViewControlの .NET MAUI WebView コントロールを指定すると、プラットフォームビュー (Android コントロール) でクロムクライアントを直接設定できます。
```
((IWebViewHandler)theWebViewControl.Handler).PlatformView.SetWebChromeClient(new MyWebChromeClient((IWebViewHandler)theWebViewControl.Handler));
```
- また、ハンドラープロパティマッピングを使用して、すべての WebView コントロールでクロムクライアントを強制的に使用することもできます。詳細については、「ハンドラー」を参照してください。
  
  次のスニペットの CustomizeWebViewHandler メソッドは、メソッドなど、アプリの起動時に呼び出す MauiProgram.CreateMauiApp 必要があります。
```
private static void CustomizeWebViewHandler()
{
#if ANDROID26_0_OR_GREATER
    Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping(
        nameof(Android.Webkit.WebView.WebChromeClient),
        (handler, view, args) => handler.PlatformView.SetWebChromeClient(new MyWebChromeClient(handler)));
#endif
}
```

Cookie を設定する

Cookie をに WebView 設定して、Web 要求と共に指定した URL に送信することができます。オブジェクトをに追加 Cookie して Cookie を CookieContainer設定し、コンテナーをバインド可能なプロパティの WebView.Cookies 値として設定します。次に例を示します。

using System.Net;

CookieContainer cookieContainer = new CookieContainer();
Uri uri = new Uri("https://learn.microsoft.com/dotnet/maui", UriKind.RelativeOrAbsolute);

Cookie cookie = new Cookie
{
    Name = "DotNetMAUICookie",
    Expires = DateTime.Now.AddDays(1),
    Value = "My cookie",
    Domain = uri.Host,
    Path = "/"
};
cookieContainer.Add(uri, cookie);
webView.Cookies = cookieContainer;
webView.Source = new UrlWebViewSource { Url = uri.ToString() };

この例では、オブジェクトに CookieContainer 1 つCookieを追加し、プロパティのWebView.Cookies値として設定します。が WebView 指定した URL に Web 要求を送信すると、要求と共に Cookie が送信されます。

JavaScript を呼び出す

WebView には、C# から JavaScript 関数を呼び出し、呼び出し元の C# コードに結果を返す機能が含まれています。この相互運用は、メソッドを使用して EvaluateJavaScriptAsync 行われます。これは、次の例に示されています。

Entry numberEntry = new Entry { Text = "5" };
Label resultLabel = new Label();
WebView webView = new WebView();
...

int number = int.Parse(numberEntry.Text);
string result = await webView.EvaluateJavaScriptAsync($"factorial({number})");
resultLabel.Text = $"Factorial of {number} is {result}.";

メソッドは WebView.EvaluateJavaScriptAsync 、引数として指定された JavaScript を評価し、結果をとして string返します。この例では、 factorial JavaScript 関数が呼び出され、の階乗 number が結果として返されます。この JavaScript 関数は、読み込まれるローカル HTML ファイル WebView で定義され、次の例に示されています。

<html>
<body>
<script type="text/javascript">
function factorial(num) {
        if (num === 0 || num === 1)
            return 1;
        for (var i = num - 1; i >= 1; i--) {
            num *= i;
        }
        return num;
}
</script>
</body>
</html>

iOS および Mac Catalyst でネイティブ WebView を構成する

ネイティブ WebView コントロールは、 MauiWKWebView から WKWebView派生した iOS および Mac Catalyst のです。コンストラクターオーバーロードの MauiWKWebView 1 つを使用すると WKWebViewConfiguration 、オブジェクトを指定できます。これにより、オブジェクトを構成する方法に関する情報が WKWebView 提供されます。一般的な構成には、ユーザーエージェントの設定、Web コンテンツで使用できるように Cookie を指定する、カスタムスクリプトを Web コンテンツに挿入するなどがあります。

アプリでオブジェクトを WKWebViewConfiguration 作成し、必要に応じてそのプロパティを構成できます。または、静的 MauiWKWebView.CreateConfiguration メソッドを呼び出して .NET MAUI の WKWebViewConfiguration オブジェクトを取得し、変更することもできます。 WKWebViewConfigurationその後、を使用して各プラットフォームでMauiWKWebViewネイティブコントロールを作成するファクトリメソッドWebViewHandlerを変更することで、オブジェクトをコンストラクターオーバーロードに渡すことができます。

#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...

#if IOS || MACCATALYST
    WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
    config.ApplicationNameForUserAgent = "MyProduct/1.0.0";
    WebViewHandler.PlatformViewFactory =
        handler => new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
#endif

Note

がアプリにWKWebViewConfiguration表示される前にWebView、オブジェクトを使用してを構成MauiWKWebViewする必要があります。これを行うのに適した場所は、 MauiProgram.cs や App.xaml.cs など、アプリのスタートアップパスにあります。

Mac Catalyst で WebView を検査する

Safari 開発者ツールを使用して Mac Catalyst のの内容をWebView検査するには、デバッグビルド用にアプリのエンタイトルメントファイルに型 Booleanのキーを追加com.apple.security.get-task-allowする必要があります。エンタイトルメントの詳細については、「エンタイトルメント」を参照してください。

.NET MAUI アプリプロジェクトにエンタイトルメントファイルを追加するには、 Entitlements.Debug.plist という名前の新しい XML ファイルをアプリプロジェクトの Platforms\MacCatalyst フォルダーに追加します。次に、次の XML をファイルに追加します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

このエンタイトルメントファイルを使用するようにアプリを構成するには、次 <PropertyGroup> のノードをノードの子としてアプリのプロジェクトファイルに <Project> 追加します。

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

この構成により、エンタイトルメントファイルは Mac Catalyst 上のデバッグビルドでのみ処理されます。

システムブラウザーを起動する

によって提供される Microsoft.Maui.Essentialsクラスを使用Launcherして、システム Web ブラウザーで URI を開く可能性があります。起動ツールの OpenAsync メソッドを呼び出し、開く URI を表すまたは Uri 引数を渡しますstring。

await Launcher.OpenAsync("https://learn.microsoft.com/dotnet/maui");

詳細については、「ランチャー」を参照してください。

WebView

Web ページを表示する

iOS と Mac Catalyst でアプリトランスポートセキュリティを構成する

ローカル HTML を表示する

ローカル HTML ファイルを表示する

コンテンツを再読み込みする

ナビゲーションを実行する

Android でのアクセス許可の処理

Cookie を設定する

JavaScript を呼び出す

iOS および Mac Catalyst でネイティブ WebView を構成する

Mac Catalyst で WebView を検査する

システムブラウザーを起動する

その他のリソース

その他のリソース

WebView

Web ページを表示する

iOS と Mac Catalyst でアプリ トランスポート セキュリティを構成する

ローカル HTML を表示する

ローカル HTML ファイルを表示する

コンテンツを再読み込みする

ナビゲーションを実行する

Android でのアクセス許可の処理

Cookie を設定する

JavaScript を呼び出す

iOS および Mac Catalyst でネイティブ WebView を構成する

Mac Catalyst で WebView を検査する

システム ブラウザーを起動する

その他のリソース

その他のリソース

iOS と Mac Catalyst でアプリトランスポートセキュリティを構成する

システムブラウザーを起動する