次の方法で共有


WinUI 2 (UWP) アプリでの WebView2 の概要

このチュートリアルでは、次の操作を行います。

  • WebView2 を使用して Web コンテンツを表示する UWP アプリを作成するための開発ツールを設定します。
  • 最初の WinUI 2 (UWP) アプリを作成します。
  • プロジェクトの Microsoft.UI.Xaml パッケージ (WinUI 2) をインストールします。
  • Web ページ コンテンツを表示する WebView2 コントロールを追加します。
  • 途中で WebView2 の概念について説明します。

C# 空白アプリ (ユニバーサル Windows) プロジェクト テンプレートを使用し、このプロジェクトの Microsoft.UI.Xaml パッケージ (WinUI 2) をインストールします。 そのパッケージをインストールすると、 Microsoft.Web.WebView2 パッケージ (WebView2 SDK) が依存関係としてインストールされます。

Microsoft.UI.Xaml (WinUI 2) パッケージは、Windows UI ライブラリの一部です。 このパッケージには、次のような Windows UI 機能が用意されています。

  • UWP XAML コントロール。
  • 高密度コントロール スタイル。
  • 流暢なスタイルと素材。

プラットフォーム

この記事は、Windows と Xbox に適用されます。

WinUI 2 では、UWP のみがサポートされます。 これらのコントロールは下位互換性があります。

関連項目:

完了したプロジェクト

このはじめに プロジェクト (ソリューション) の完成したバージョンは、WebView2Samples リポジトリにあります。 完成したソリューション (リポジトリから、または以下の手順から) をベースラインとして使用して、WebView2 コードやその他の機能を追加できます。

このチュートリアル プロジェクトの完成したバージョンは、 WebView2Samples リポジトリで入手できます。

  • サンプル名: WinUI2_Sample
  • リポジトリ ディレクトリ: WinUI2_GettingStarted
  • ソリューション ファイル: MyUWPGetStartApp.sln

以下の主要なステップセクションを順番に実行します。

WinUI と WebView2 について

WinUI 2 (UWP) アプリでは、WebView2 は XAML コントロールとして公開されます。 名前付きコントロールとして XAML コントロールをアプリに埋め込んだ後、C# ファイル内でその XAML コントロールを参照できます。

WinUI では、WebView2 インターフェイス/関数のサブセットのみが公開されます。

  • XAML オブジェクトは WebView2 、最も重要な機能と共にインターフェイスを公開 CoreWebView2 します。

  • WinUI はバックグラウンドで環境とウィンドウの作成を処理するため、 などの CoreWebView2Controller インターフェイスは非表示になります。

以下の 「XAML の制限」 も参照してください。

手順 1 - Visual Studio をインストールする

この記事では、Visual Studio 2022 Community Edition の手順とスクリーンショットを示します。 Microsoft Visual Studio 2019 バージョン 16.9 以降が必要です。 Visual Studio 2017 はサポートされていません。

  1. 適切なバージョンの Microsoft Visual Studio がまだインストールされていない場合は、新しいウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio のインストール」を参照してください。 そのページの手順に従って、Visual Studio 2022 Community Edition などの Visual Studio の基本的な既定のインストールを行います。

    次に、このページに戻り、以下に進みます。

  2. Visual Studio でコード エディターに行番号が表示されない場合は、行番号を有効にすることもできます。 これを行うには、[ツール>オプション] [>テキスト エディター>] [すべての言語][行番号] の順に>選択します。 次に、[ OK] をクリックします。

手順 2 - .NET デスクトップ、C++ デスクトップ、UWP 開発ツールのワークロードをインストールする

  1. Microsoft Visual Studio を起動します。 開くオプション ウィンドウが表示されます。

    Visual Studio 2022 の開くオプション ウィンドウ

  2. 右下の [ コードなしで続行] をクリックします。 Visual Studio が開き、空:

    Visual Studio 2022 空

  3. [ ツール]>[ツール] [ツールと機能の取得] の順に選択します[Visual Studio インストーラー] ウィンドウが開き、[Modifying - Visual Studio] ウィンドウが開きます。

    [Visual Studio の変更] ウィンドウの初期状態

[Visual Studio の変更] ウィンドウが開いていない場合は、Visual Studio インストーラー ウィンドウで [変更] ボタンをクリックします。

  1. [ワークロード] タブ 、 までスクロールし、次のカードをクリックして選択します。次の各カードにチェックマークが付いていることを確認します。

    • .NET デスクトップ開発
    • C++ を使用したデスクトップ開発
    • ユニバーサル Windows プラットフォーム開発
  2. 右側の [インストールの詳細] セクションで、[ユニバーサル Windows プラットフォーム開発] を展開し、[C++ (v143) ユニバーサル Windows プラットフォーム ツール] を選択します。

    [Visual Studio 2019 の変更] ダイアログには、カードとインストールの詳細が表示されます

    これらのコンポーネントがすべて既にインストールされている場合は、[閉じる] ボタンをクリックし、[Visual Studio インストーラー] ウィンドウを閉じて、以下の手順の次の主要なセクションに進みます。

  3. [ 変更 ] ボタンをクリックします。

    [ユーザー アカウント制御] ウィンドウが表示され、"このアプリがデバイスに変更を加えることを許可しますか? Visual Studio インストーラー。 検証済み発行元: Microsoft Corporation。 ファイルの配信元: このコンピューター上のハード ドライブ。 詳細を表示する (ボタン)"。

  4. [はい] ボタンをクリックします。

  5. "作業を開始する前に Visual Studio を閉じる" というダイアログが表示されます。

    dialog: 作業を開始する前に、Visual Studio を閉じます

  6. [ 続行 ] ボタンをクリックします。

    Visual Studio では、選択したパッケージをダウンロード、検証、インストールします。

    Visual Studio インストーラーの動作

    このスクリーンショットは 2022 Visual Studio Professionalを示していますが、この記事は実際には Visual Studio Community 2022 を使用して更新されました。

    インストールには数分かかることがあります。 Visual Studio が表示され、空のソリューション エクスプローラーが表示されます。

  7. Alt キーを押しながら Tab キーを押してVisual Studio インストーラー ウィンドウに切り替え、Visual Studio インストーラー ウィンドウを閉じます。

手順 3 - UWP アプリを作成する

  1. Visual Studio が開いている場合は、[ファイル] [新しい>プロジェクト] の順>選択します。 [ 新しいプロジェクトの作成 ] ダイアログが開きます。

    または、Visual Studio が閉じている場合は開き、Visual Studio のスタートアップ画面で [新しいプロジェクトの作成] カードクリックします。

    Visual Studio のスタートアップ画面: [新しいプロジェクトの作成] カード

  2. 上部の [テンプレートの検索] テキスト ボックスに「C# Blank App (ユニバーサル Windows)」と入力し、C# 空白アプリ (ユニバーサル Windows) カードを選択します。

    [新しいプロジェクトの作成] ダイアログには、空のアプリ (ユニバーサル Windows) カードが表示されます

  3. [ 次へ ] ボタンをクリックします。

    空のアプリ (ユニバーサル Windows) の [新しいプロジェクトの構成] ダイアログが表示されます。

    [新しいプロジェクトの構成] ダイアログには、空のアプリ (ユニバーサル Windows) のテキスト ボックスが表示されます

  4. [ プロジェクト名 ] テキスト ボックスに、 などの MyUWPGetStartAppプロジェクト名を入力します。

  5. [ 場所 ] テキスト ボックスに、 などの C:\Users\myusername\Documents\MyWebView2Projectsパスを入力します。

  6. [作成] ボタンをクリックします。

    [ 新しい Windows プロジェクト ] ダイアログが表示されます。

    [新しい Windows プロジェクト] ダイアログ

  7. 既定値をそのまま使用し、[OK] ボタンをクリック します

  8. [開発者モード] ウィンドウ セクションが表示されたら、そのセクションで [オン] をクリックします。 コンピューターを開発者モードにまだ設定していない場合は、[ 開発者機能の使用 ] ダイアログが開き、開発者モードをオンにすることを確認します。

    • [ はい ] をクリックしてコンピューターの開発者モードを有効にし、[ 設定] ウィンドウを閉じます。

    Visual Studio には、新しく作成されたソリューションとプロジェクトが表示されます。

    新しく作成された WinUI 2 (UWP) プロジェクトを含む Visual Studio

手順 4 - 空のプロジェクトをビルドして実行する

WebView2 コードを追加する前に、プロジェクトが機能することを確認し、次のように空のアプリがどのように表示されるかを確認します。

  1. 空のプロジェクトをビルドして実行します。 これを行うには、[ デバッグ>の開始] [デバッグの開始] (F5) を選択します。 アプリのウィンドウが開き、グリッドが一時的に表示され、アプリのコンテンツが表示されます。

    WebView2 コードを追加する前の空のプロジェクト

    これは、WebView2 がまだない、ベースライン WinUI 2 (UWP) アプリです。

  2. アプリを閉じます。

次に、WebView2 コントロールをホストし、WebView2 API を使用するように、この新しい WinUI 2 (UWP) プロジェクトを設定します。

手順 5 - WinUI 2 SDK (Microsoft.UI.Xaml) をインストールする

次に、このプロジェクトの Microsoft.UI.Xaml パッケージをインストールします。 Microsoft.UI.Xaml は WinUI 2 です。

  1. ソリューション エクスプローラーで、(その上のソリューション ノードではなく) プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。

    Visual Studio で [NuGet パッケージ マネージャー ] パネルが開きます。

  2. NuGet パッケージ マネージャーで、[参照] タブをクリックします。

  3. [プレリリースチェック含める] ボックスをオフにします。

  4. [検索] ボックスに「Microsoft.UI.Xaml」と入力し、検索ボックスの下にある Microsoft.UI.Xaml カードを選択します。

    Microsoft.UI.Xaml をインストールする NuGet パッケージ マネージャー

    バージョン 2.8.0 以降の場合、下部の [依存関係 ] セクションに Microsoft.Web.WebView2 が表示されます。

    HoloLens 2開発の場合、Microsoft.Web.WebView2 パッケージはバージョン 1.0.1722.45 以上である必要があります。これは、既定値よりも高くなる可能性があります。 HoloLens 2の WebView2 はプレビュー段階であり、一般公開前に変更される場合があります。 WebView2 は、Windows 11更新プログラムを実行しているHoloLens 2デバイスでのみサポートされます。 詳細については、「Update HoloLens 2」を参照してください。

  5. 中央のパネルの [ バージョン ] ドロップダウン リストで、[ 最新の安定版 ] が選択されていることを確認します(バージョン 2.8.0 以降)。

  6. [ インストール ] ボタンをクリックします。

    [ 変更のプレビュー ] ダイアログが表示されます。

    Microsoft.UI.Xaml パッケージをインストールするための [変更のプレビュー] ダイアログ

  7. [OK] ボタンをクリック します

  8. [ ライセンスの同意 ] ダイアログが表示されます。

    Microsoft.UI.Xaml パッケージをインストールするための [ライセンスの同意] ダイアログ

  9. [ 同意 する] ボタンをクリックします。 Visual Studio では、 readme.txt WinUI パッケージがインストールされたことを示すファイルが表示されます。

    Microsoft.UI.Xaml パッケージをインストールした後の readme.txt ファイルは、WinUI NuGet パッケージをインストールしたことを報告します

    readme には、追加するコードに似たコード行がいくつか一覧表示されます。

  10. [ ファイル>をすべて保存] を選択します (Ctrl + Shift + S)。

これで、プロジェクトの Microsoft.UI.Xaml パッケージ (WinUI 2) がインストールされました。 WinUI 2 SDK (Microsoft.UI.Xaml) には WebView2 SDK が含まれているため、WebView2 SDK 用の NuGet パッケージを個別にインストールする必要はありません。

手順 6 - XAML コードで WebView2 コントロールをインスタンス化する

これで、WebView2 コードをプロジェクトに追加する準備ができました。 まず、次のように WebView2 コントロールの名前空間参照を追加します。

  1. ソリューション エクスプローラーでプロジェクトを展開し、[MainPage.xaml] をダブルクリックします。

    MainPage.xaml がデザイナーで開き、その下にコード エディターが表示されます。

    MainPage.xaml コードとDesigner ウィンドウ

  2. コード エディターの要素の <Page> 開始タグ <Page内で、他 xmlns: の属性の下に次の属性を追加します。

    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    

    次のように、WebView2 コントロールを XAML グリッドに追加します。

  3. ファイル内の MainPage.xaml 要素 (まだ他の要素を含んでいない) に <Grid> 、次の要素を追加して WebView2 コントロールを追加します。

    <controls:WebView2 x:Name="WebView2" Source="https://bing.com"/>
    
  4. Ctrl キーを押しながら S キーを押してファイルを保存します。

    コード エディターのファイルの MainPage.xaml 上に、WebView2 コントロールのコンテンツのプレビューが表示されたり、最初にアプリをビルドするまで空白 (白) のままになる場合があります。

    WebView2 コンテンツのプレビュー

    次の手順で、アプリをビルドして実行すると、波状の下線が消えます。

手順 7 - WebView2 コントロールを含むプロジェクトをビルドして実行する

  1. [ デバッグ>] [デバッグの開始] (F5) をクリックします。 (HoloLens 2用にビルドする場合は、「Visual Studio を使用したデプロイとデバッグ」を参照してください)。 アプリ ウィンドウが開き、WebView2 WebUI グリッドが簡単に表示されます。

    デバッグ中に、WebView2 WebUI グリッドが簡単に表示されます

  2. しばらくすると、WebUI 2 の WebView2 コントロールにBing Web サイトが表示されます。

    サンプル アプリには、Bing Web サイトが表示されます

  3. Visual Studio で、[ デバッグ>の停止] を選択してアプリ ウィンドウを閉じます。

これで、初めての WebView2 アプリが作成されました。

WebView2 コントロールのコンテンツを変更して、独自のコンテンツを追加できるようになりました。

ナビゲーション イベントについて学習する

次に、WebView2 アプリに不可欠なナビゲーション イベントについて説明します。 アプリは最初に に https://bing.com移動します。

WinUI 2 (UWP) での WebView2 の特別な考慮事項

WebView2 WinUI 2 (UWP) コントロールは開発中です。

オートフィル UI

自動入力 UI は、WebView2 for UWP アプリ用にまだ実装されていません。

関連項目:

PDF に印刷するには、アプリが UWP の書き込み可能な場所 (ローカル フォルダーなど) にアクセスできる必要があります。 UWP でアクセス可能なパスの完全な一覧については、「 ファイル アクセス許可」を参照してください。

関連項目:

  • WebView2 の機能と API の概要での印刷

既定の印刷

UWP アプリの WebView2 では、既定の印刷は無効になっています。 ただし、 を呼び出 CapturePreviewすことで、現在のビューポートをキャプチャして印刷できます。

関連項目:

Smartscreen

WebView2 は、アプリケーション内の に移動した URL を SmartScreen サービスに送信して、顧客のセキュリティを確保します。 このナビゲーションを無効にする場合は、環境変数を使用してこれを行うことができます。

  • Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--disable-features=msSmartScreenProtection");

この環境変数は、作成前に CoreWebView2 設定する必要があります。これは、 WebView2.Source プロパティ が最初に設定されたとき、または WebView2.EnsureCoreWebView2Async メソッド が最初に呼び出されたときに発生します。

ファイルのダウンロード

UWP の WebView2 の現在のダウンロード動作には、いくつかの既知の制限があります。

名前を付けて保存

[名前を付けて保存] を使用したファイルの保存は機能しており、UWP アプリの WebView2 で有効になっています。 ファイルは、ユーザーが選択したフォルダーに保存されます。

ファイルのダウンロード先フォルダー

ホストがダウンロードしたファイルの を ResultFilePath 変更しない場合、ダウンロードしたファイルは、アプリ パッケージの名前がフォルダー内のサブフォルダーに Downloads ダウンロードされます。

ホストがダウンロードしたファイルの を ResultFilePath 変更した場合、ファイルは、アプリが既定でそのファイル パスにアクセスできる場合にのみダウンロードされます。 アプリが既定でアクセスできないファイルの場所を使用する場合は、対応する機能を設定する必要があります。 UWP ドキュメントの 「アプリ機能宣言 」を参照してください。

ダウンロード ハブ

ダウンロード ハブからファイルとフォルダーを開くことができません。 ファイルまたはフォルダー アイコンをクリックしても、それぞれのファイル/フォルダーは開きません。

関連項目:

XAML の制限事項

XAML Island のサポートには追加の作業が必要であり、今後のリリースで考慮される場合があります。

DefaultBackgroundColor の設定

WinUI 2 では、 DefaultBackgroundColor プロパティは直接公開されません。 既定の背景色を設定するには、次のように環境変数を設定します。

Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "FF000000");

関連項目:

透明度の設定

WinUI 2 では、色を に 00FFFFFF設定することで透過性が実現されます。

CSS カーソル

WinUI 2 (UWP) では、CSS カーソルには次の制限があります。

イメージ URL

CSS カーソルは、 などの cursor: url(https://contoso.com/cursor.png), pointer;イメージ URL にすることはできません。 「 CSS - URL から読み込まれたカーソルが機能しない」を参照してください。

定義済みの CSS カーソル

WinUI 2 (UWP) では、定義済みの CSS カーソルの一部はサポートされていません。 CSS カーソルを使用すると、カーソルを、または などのcursor: wait;定義済みカーソルの一部に変更できますが、または cursor: crosshair;cursor: noneなどのcursor: progress他のカーソルには変更できません。

Keyword サポートの有無
全般
自動 ✔️
default ✔️
none
リンク & 状態
コンテキスト メニュー ✔️
help ✔️
ポインター ✔️
progress
待つ ✔️
Selection
セル
十字 ✔️
テキスト ✔️
vertical-text
ドラッグ & ドロップ
alias
コピー
move ✔️
no-drop ✔️
許可されていません ✔️
つかむ
つかんで
スクロール & サイズ変更
all-scroll ✔️
col-resize
行サイズ変更
n-resize ✔️
e-resize ✔️
s-resize ✔️
w-resize ✔️
ne-resize ✔️
nw-resize ✔️
se-resize ✔️
sw-resize ✔️
ew-resize ✔️
ns-resize ✔️
nesw-resize ✔️
nwse-resize ✔️
ズーム
ズームイン
ズームアウト

関連項目:

  • CSS カーソル - [値] セクションでは、上記のキーワード (keyword)値について説明します。

Microsoft Edge 開発者ツール

WinUI 2 では、ストア署名された WebView2 WinUI 2 (UWP) アプリ内で Microsoft Edge DevTools を起動できません。 ただし、リモート デバッグを使用してこれを回避できます。 「WebView2 WinUI 2 (UWP) アプリのリモート デバッグ」を参照してください。

API の制限事項

WinUI 2 では、次のクラスにアクセスできません。

  • CoreWebView2EnvironmentOptions
  • CoreWebView2ControllerOptions

関連項目

Github: