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 はサポートされていません。
適切なバージョンの Microsoft Visual Studio がまだインストールされていない場合は、新しいウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio のインストール」を参照してください。 そのページの手順に従って、Visual Studio 2022 Community Edition などの Visual Studio の基本的な既定のインストールを行います。
次に、このページに戻り、以下に進みます。
Visual Studio でコード エディターに行番号が表示されない場合は、行番号を有効にすることもできます。 これを行うには、[ツール>オプション] [>テキスト エディター>] [すべての言語][行番号] の順に>選択します。 次に、[ OK] をクリックします。
手順 2 - .NET デスクトップ、C++ デスクトップ、UWP 開発ツールのワークロードをインストールする
Microsoft Visual Studio を起動します。 開くオプション ウィンドウが表示されます。
右下の [ コードなしで続行] をクリックします。 Visual Studio が開き、空:
[ ツール]>[ツール] [ツールと機能の取得] の順に選択します。 [Visual Studio インストーラー] ウィンドウが開き、[Modifying - Visual Studio] ウィンドウが開きます。
![[Visual Studio の変更] ウィンドウの初期状態](winui2-images/winui2-modifying-vs-window.png)
[Visual Studio の変更] ウィンドウが開いていない場合は、Visual Studio インストーラー ウィンドウで [変更] ボタンをクリックします。
[ワークロード] タブ で 、 までスクロールし、次のカードをクリックして選択します。次の各カードにチェックマークが付いていることを確認します。
- .NET デスクトップ開発
- C++ を使用したデスクトップ開発
- ユニバーサル Windows プラットフォーム開発
右側の [インストールの詳細] セクションで、[ユニバーサル Windows プラットフォーム開発] を展開し、[C++ (v143) ユニバーサル Windows プラットフォーム ツール] を選択します。
![[Visual Studio 2019 の変更] ダイアログには、カードとインストールの詳細が表示されます](winui2-images/winui2-getting-started-install-workloads.png)
これらのコンポーネントがすべて既にインストールされている場合は、[閉じる] ボタンをクリックし、[Visual Studio インストーラー] ウィンドウを閉じて、以下の手順の次の主要なセクションに進みます。
[ 変更 ] ボタンをクリックします。
[ユーザー アカウント制御] ウィンドウが表示され、"このアプリがデバイスに変更を加えることを許可しますか? Visual Studio インストーラー。 検証済み発行元: Microsoft Corporation。 ファイルの配信元: このコンピューター上のハード ドライブ。 詳細を表示する (ボタン)"。
[はい] ボタンをクリックします。
"作業を開始する前に Visual Studio を閉じる" というダイアログが表示されます。
[ 続行 ] ボタンをクリックします。
Visual Studio では、選択したパッケージをダウンロード、検証、インストールします。
このスクリーンショットは 2022 Visual Studio Professionalを示していますが、この記事は実際には Visual Studio Community 2022 を使用して更新されました。
インストールには数分かかることがあります。 Visual Studio が表示され、空のソリューション エクスプローラーが表示されます。
Alt キーを押しながら Tab キーを押してVisual Studio インストーラー ウィンドウに切り替え、Visual Studio インストーラー ウィンドウを閉じます。
手順 3 - UWP アプリを作成する
Visual Studio が開いている場合は、[ファイル] [新しい>プロジェクト] の順に>選択します。 [ 新しいプロジェクトの作成 ] ダイアログが開きます。
または、Visual Studio が閉じている場合は開き、Visual Studio のスタートアップ画面で [新しいプロジェクトの作成] カードクリックします。
![Visual Studio のスタートアップ画面: [新しいプロジェクトの作成] カード](winui2-images/winui2-opening-win-create-new-project-card.png)
上部の [テンプレートの検索] テキスト ボックスに「C# Blank App (ユニバーサル Windows)」と入力し、C# 空白アプリ (ユニバーサル Windows) カードを選択します。
![[新しいプロジェクトの作成] ダイアログには、空のアプリ (ユニバーサル Windows) カードが表示されます](winui2-images/winui2-getting-started-create-project.png)
[ 次へ ] ボタンをクリックします。
空のアプリ (ユニバーサル Windows) の [新しいプロジェクトの構成] ダイアログが表示されます。
![[新しいプロジェクトの構成] ダイアログには、空のアプリ (ユニバーサル Windows) のテキスト ボックスが表示されます](winui2-images/winui2-getting-started-config-new-project.png)
[ プロジェクト名 ] テキスト ボックスに、 などの
MyUWPGetStartAppプロジェクト名を入力します。[ 場所 ] テキスト ボックスに、 などの
C:\Users\myusername\Documents\MyWebView2Projectsパスを入力します。[作成] ボタンをクリックします。
[ 新しい Windows プロジェクト ] ダイアログが表示されます。
![[新しい Windows プロジェクト] ダイアログ](winui2-images/winui2-new-windows-project.png)
既定値をそのまま使用し、[OK] ボタンをクリック します 。
[開発者モード] ウィンドウ セクションが表示されたら、そのセクションで [オン] をクリックします。 コンピューターを開発者モードにまだ設定していない場合は、[ 開発者機能の使用 ] ダイアログが開き、開発者モードをオンにすることを確認します。
- [ はい ] をクリックしてコンピューターの開発者モードを有効にし、[ 設定] ウィンドウを閉じます。
Visual Studio には、新しく作成されたソリューションとプロジェクトが表示されます。
手順 4 - 空のプロジェクトをビルドして実行する
WebView2 コードを追加する前に、プロジェクトが機能することを確認し、次のように空のアプリがどのように表示されるかを確認します。
空のプロジェクトをビルドして実行します。 これを行うには、[ デバッグ>の開始] [デバッグの開始] (F5) を選択します。 アプリのウィンドウが開き、グリッドが一時的に表示され、アプリのコンテンツが表示されます。
これは、WebView2 がまだない、ベースライン WinUI 2 (UWP) アプリです。
アプリを閉じます。
次に、WebView2 コントロールをホストし、WebView2 API を使用するように、この新しい WinUI 2 (UWP) プロジェクトを設定します。
手順 5 - WinUI 2 SDK (Microsoft.UI.Xaml) をインストールする
次に、このプロジェクトの Microsoft.UI.Xaml パッケージをインストールします。 Microsoft.UI.Xaml は WinUI 2 です。
ソリューション エクスプローラーで、(その上のソリューション ノードではなく) プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。
Visual Studio で [NuGet パッケージ マネージャー ] パネルが開きます。
NuGet パッケージ マネージャーで、[参照] タブをクリックします。
[プレリリースチェック含める] ボックスをオフにします。
[検索] ボックスに「Microsoft.UI.Xaml」と入力し、検索ボックスの下にある Microsoft.UI.Xaml カードを選択します。
バージョン 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」を参照してください。
中央のパネルの [ バージョン ] ドロップダウン リストで、[ 最新の安定版 ] が選択されていることを確認します(バージョン 2.8.0 以降)。
[ インストール ] ボタンをクリックします。
[ 変更のプレビュー ] ダイアログが表示されます。
![Microsoft.UI.Xaml パッケージをインストールするための [変更のプレビュー] ダイアログ](winui2-images/winui2-preview-changes-ui-xaml-pkg.png)
[OK] ボタンをクリック します 。
[ ライセンスの同意 ] ダイアログが表示されます。
![Microsoft.UI.Xaml パッケージをインストールするための [ライセンスの同意] ダイアログ](winui2-images/winui2-license-acceptance-ui-xaml-pkg.png)
[ 同意 する] ボタンをクリックします。 Visual Studio では、
readme.txtWinUI パッケージがインストールされたことを示すファイルが表示されます。
readme には、追加するコードに似たコード行がいくつか一覧表示されます。
[ ファイル>をすべて保存] を選択します (Ctrl + Shift + S)。
これで、プロジェクトの Microsoft.UI.Xaml パッケージ (WinUI 2) がインストールされました。 WinUI 2 SDK (Microsoft.UI.Xaml) には WebView2 SDK が含まれているため、WebView2 SDK 用の NuGet パッケージを個別にインストールする必要はありません。
手順 6 - XAML コードで WebView2 コントロールをインスタンス化する
これで、WebView2 コードをプロジェクトに追加する準備ができました。 まず、次のように WebView2 コントロールの名前空間参照を追加します。
ソリューション エクスプローラーでプロジェクトを展開し、[MainPage.xaml] をダブルクリックします。
MainPage.xamlがデザイナーで開き、その下にコード エディターが表示されます。
コード エディターの要素の
<Page>開始タグ<Page内で、他xmlns:の属性の下に次の属性を追加します。xmlns:controls="using:Microsoft.UI.Xaml.Controls"次のように、WebView2 コントロールを XAML グリッドに追加します。
ファイル内の
MainPage.xaml要素 (まだ他の要素を含んでいない) に<Grid>、次の要素を追加して WebView2 コントロールを追加します。<controls:WebView2 x:Name="WebView2" Source="https://bing.com"/>Ctrl キーを押しながら S キーを押してファイルを保存します。
コード エディターのファイルの
MainPage.xaml上に、WebView2 コントロールのコンテンツのプレビューが表示されたり、最初にアプリをビルドするまで空白 (白) のままになる場合があります。
次の手順で、アプリをビルドして実行すると、波状の下線が消えます。
手順 7 - WebView2 コントロールを含むプロジェクトをビルドして実行する
[ デバッグ>] [デバッグの開始] (F5) をクリックします。 (HoloLens 2用にビルドする場合は、「Visual Studio を使用したデプロイとデバッグ」を参照してください)。 アプリ ウィンドウが開き、WebView2 WebUI グリッドが簡単に表示されます。
しばらくすると、WebUI 2 の WebView2 コントロールにBing Web サイトが表示されます。
Visual Studio で、[ デバッグ>の停止] を選択してアプリ ウィンドウを閉じます。
これで、初めての WebView2 アプリが作成されました。
WebView2 コントロールのコンテンツを変更して、独自のコンテンツを追加できるようになりました。
ナビゲーション イベントについて学習する
次に、WebView2 アプリに不可欠なナビゲーション イベントについて説明します。 アプリは最初に に https://bing.com移動します。
- 新しいウィンドウまたはタブで、 WebView2 アプリのナビゲーション イベントを読み取り、このページに戻ります。
WinUI 2 (UWP) での WebView2 の特別な考慮事項
WebView2 WinUI 2 (UWP) コントロールは開発中です。
オートフィル UI
自動入力 UI は、WebView2 for UWP アプリ用にまだ実装されていません。
関連項目:
- WebView2 の機能と API の概要に関するページのオートフィル。
PDF に印刷する
PDF に印刷するには、アプリが UWP の書き込み可能な場所 (ローカル フォルダーなど) にアクセスできる必要があります。 UWP でアクセス可能なパスの完全な一覧については、「 ファイル アクセス許可」を参照してください。
関連項目:
- WebView2 の機能と API の概要での印刷。
既定の印刷
UWP アプリの WebView2 では、既定の印刷は無効になっています。 ただし、 を呼び出 CapturePreviewすことで、現在のビューポートをキャプチャして印刷できます。
関連項目:
- WebView2 の機能と API の概要に関するページの画像キャプチャ。
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 ドキュメントの 「アプリ機能宣言 」を参照してください。
ダウンロード ハブ
ダウンロード ハブからファイルとフォルダーを開くことができません。 ファイルまたはフォルダー アイコンをクリックしても、それぞれのファイル/フォルダーは開きません。
関連項目:
- WebView2 の機能と API の概要に関するページのダウンロード。
XAML の制限事項
XAML Island のサポートには追加の作業が必要であり、今後のリリースで考慮される場合があります。
DefaultBackgroundColor の設定
WinUI 2 では、 DefaultBackgroundColor プロパティは直接公開されません。 既定の背景色を設定するには、次のように環境変数を設定します。
Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "FF000000");
関連項目:
- .NET: WebView2.DefaultBackgroundColor プロパティ
- Win32: ICoreWebView2Controller2::D efaultBackgroundColor プロパティ (get, put)
透明度の設定
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 では、次のクラスにアクセスできません。
CoreWebView2EnvironmentOptionsCoreWebView2ControllerOptions
関連項目
- WebView2 API リファレンス
- WinUI 2 (UWP) サンプル アプリ - WinUI 2 WebView2 サンプルをダウンロード、更新、ビルド、実行する手順。
- ユーザー データ フォルダーを管理する
-
WebView2 のサンプル コード - リポジトリの
WebView2Samplesガイド。 - WebView2 アプリの開発のベスト プラクティス
Github：
- WebView2Samples リポジトリ
- WebView2 UWP サンプル アプリ - WinUI 2 (UWP) WebView2 サンプル。
- 問題 - microsoft-ui-xaml リポジトリ - WinUI 固有の機能要求またはバグを入力します。
- 他のいくつかのチュートリアルとは異なり、WebView2Samples リポジトリには、このはじめにチュートリアルの完成したバージョンはありません。
- Microsoft.UI.Xaml NuGet パッケージ
- Xbox 用メディア アプリ サンプル