次の方法で共有

WebView

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

WebView では、次のプロパティを定義します。

  • Cookiesは CookieContainerの型で、クッキーのコレクションのストレージを提供します。
  • CanGoBack(bool型) は、ユーザーが前のページに移動できるかどうかを示します。 これは読み取り専用プロパティです。
  • bool型の CanGoForwardは、ユーザーが前方に移動できるかどうかを示します。 これは読み取り専用プロパティです。
  • WebViewSource型の Sourceは、WebView が表示する場所を表します。
  • UserAgent、stringの種類は、ユーザー エージェントを表します。 既定値は、基になるプラットフォーム ブラウザーのユーザー エージェントか、判断できない場合は null です。

これらのプロパティは、BindableProperty オブジェクトによってサポートされます。つまり、データ バインディングのターゲットとしてスタイルを設定できます。

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

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

WebView では、次のイベントを定義します。

  • Navigatingは、ページナビゲーションの開始時に発生します。 このイベントに付随する WebNavigatingEventArgs オブジェクトは、ナビゲーションの取り消しに使用できる bool 型の Cancel プロパティを定義します。
  • Navigated、ページ ナビゲーションの完了時に発生します。 このイベントに付随する WebNavigatedEventArgs オブジェクトは、ナビゲーション結果を示す WebNavigationResult 型の Result プロパティを定義します。
  • ProcessTerminated。これは、WebView プロセスが予期せず終了した場合に発生するものです。 このイベントに付随する WebViewProcessTerminatedEventArgs オブジェクトは、プロセスが失敗した理由を示すプラットフォーム固有のプロパティを定義します。

大事な

WebView は、HorizontalStackLayout、StackLayout、または VerticalStackLayoutに含まれている場合、その 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 は、指定されたプロトコルで完全に形成されている必要があります。

手記

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 サイトへの接続が必要な場合は、NSAllowsArbitraryLoads キーを使用して ATS を完全にオフにするのではなく、NSExceptionDomains キーを使用してドメインを例外として入力する必要があります。

ローカル 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設定します。 その後、Source プロパティの値として設定された HtmlWebViewSource オブジェクトで定義されているインライン HTML からファイルを読み込むことができます。

<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>

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

生アセットの詳細については、「未加工アセット」を参照してください。

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

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

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

Reload メソッドが呼び出されると、ReloadRequested イベントが発生し、現在のコンテンツを再読み込みする要求が行われていることを示します。

ナビゲーションの実行

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

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 オブジェクトは、ナビゲーションの取り消しに使用できる bool 型の Cancel プロパティを定義します。
  • Navigatedはページ ナビゲーションが完了したときに発生します。 Navigated イベントに付随する WebNavigatedEventArgs オブジェクトは、ナビゲーション結果を示す WebNavigationResult 型の Result プロパティを定義します。

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

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

大事な

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

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

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

  1. まず、必要なアプリのアクセス許可を Android マニフェストに追加します。 Platforms/Android/AndroidManifest.xml ファイルを開き、manifest ノードに次を追加します。

    <uses-permission android:name="android.permission.CAMERA" />

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

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

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

  3. 次のクラスを Platforms/Android フォルダーに追加し、プロジェクトの名前空間に一致するようにルート名前空間を変更します (名前空間に .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から継承し、web ページのアクセス許可要求をインターセプトする OnPermissionRequest メソッドをオーバーライドします。 各アクセス許可項目は、カメラを表す PermissionRequest.ResourceVideoCapture 文字列定数と一致するかどうかを確認するためにチェックされます。 カメラのアクセス許可が一致した場合、コードは、アプリにカメラを使用するアクセス許可があるかどうかを確認します。 アクセス許可がある場合は、Webページの要求が承認されます。

  4. Android の WebView コントロールで SetWebChromeClient メソッドを使用して、クロム クライアントを MyWebChromeClientに設定します。 次の 2 つの項目は、クロム クライアントを設定する方法を示しています。

    • theWebViewControlという名前の .NET MAUI WebView コントロールを使用すると、プラットフォーム ビュー (Android コントロール) でクロム クライアントを直接設定できます。

      ((IWebViewHandler)theWebViewControl.Handler).PlatformView.SetWebChromeClient(new MyWebChromeClient((IWebViewHandler)theWebViewControl.Handler));

    • また、ハンドラー プロパティ マッピングを使用して、すべての WebView コントロールに chrome クライアントの使用を強制することもできます。 詳細については、「ハンドラーの」を参照してください。

      次のスニペットの 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 は、web 要求と共に指定された URL に送信されるように、WebView に設定できます。 CookieContainerに Cookie オブジェクトを追加して Cookie を設定し、次にコンテナーを 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 関数は、WebView が読み込むローカル HTML ファイルで定義され、次の例に示されています。

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

アプリで WKWebViewConfiguration オブジェクトを作成し、必要に応じてそのプロパティを構成できます。 または、静的 MauiWKWebView.CreateConfiguration メソッドを呼び出して、.NET MAUI の WKWebViewConfiguration オブジェクトを取得し、それを変更することもできます。 WKWebViewConfiguration オブジェクトは、MauiWKWebView コンストラクター オーバーロードの引数として指定できます。

ネイティブ WebView の構成は、ハンドラーのプラットフォーム ビューが作成された後に iOS および Mac Catalyst で変更できないため、カスタム ハンドラー ファクトリ デリゲートを作成して変更する必要があります。

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

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

手記

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

iOS および Mac Catalyst でメディアの再生設定を設定する

iOS および Mac Catalyst の WebView では、HTML5 ビデオのインライン メディア再生 (自動再生や画像の画像を含む) が既定で有効になっています。 この既定値を変更したり、他のメディア再生設定を設定したりするには、ハンドラーのプラットフォーム ビューを作成した後でメディア再生の基本設定を変更できないため、カスタム ハンドラー ファクトリ デリゲートを作成する必要があります。 次のコードは、これを行う例を示しています。

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

#if IOS || MACCATALYST
    Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
    {
        WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();

        // True to play HTML5 videos inliine, false to use the native full-screen controller.
        config.AllowsInlineMediaPlayback = false;

        // True to play videos over AirPlay, otherwise false.
        config.AllowsAirPlayForMediaPlayback = false;

        // True to let HTML5 videos play Picture in Picture.
        config.AllowsPictureInPictureMediaPlayback = false;

        // Media types that require a user gesture to begin playing.
        config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.All;

        return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
    };
#endif

iOS での WebView の構成の詳細については、「iOS および Mac Catalystでネイティブ WebView を構成する」を参照してください。

Mac Catalyst で WebView を検査する

Safari 開発者ツールを使用して Mac Catalyst の WebView の内容を検査するには、次のコードをアプリに追加します。

#if MACCATALYST
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
        {
            if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 6))
                handler.PlatformView.Inspectable = true;
        });
#endif

このコードでは、Mac Catalyst の WebViewHandler のプロパティ マッパーをカスタマイズして、Safari 開発者ツールで WebView コンテンツを検査できるようにします。 ハンドラーに関する詳細情報は「ハンドラー」をご覧ください。

Mac Catalyst アプリで Safari 開発者ツールを使用するには:

  1. Mac で Safari を開きます。
  2. Safari で、[Safari > 設定] > [詳細設定] > [開発] メニューをメニュー バー 表示する] チェック ボックスをオンにします。
  3. .NET MAUI Mac Catalyst アプリを実行します。
  4. Safari で、[開発 > {Device name}] メニューを選択します。ここで、{Device name} はデバイス名（Macbook Proなど）です。 次に、アプリ名の下にあるエントリを選択します。これにより、実行中のアプリも強調表示されます。 これにより、Web インスペクター ウィンドウが表示されます。

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

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

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

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