WinUI 2 (UWP) サンプル アプリ

この WebView2 サンプルでは、WebView2 コントロールと WebView2 API を使用して、WinUI 2 (UWP) アプリに Web ブラウザーを実装する方法を示します。

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

インストールされた NuGet パッケージ

このサンプルには、次の NuGet パッケージが含まれています。

• Microsoft.NETCore.UniversalWindowsPlatform
• Microsoft.UI.Xaml - プレリリース - 依存関係として Microsoft.Web.WebView2 SDK が含まれています。

最新の機能を示すために、WebView2Samples リポジトリのこのサンプルは、安定バージョンではなく、WinUI 2 SDK のプレリリース バージョン (NuGet パッケージ マネージャーでは Microsoft.UI.Xaml として一覧表示) を使用するように設定されています。 WinUI 2 SDK には、 Microsoft.UI.Xaml の依存関係として、互換性のあるバージョンの WebView2 SDK が含まれています。

webview2_sample_uwpについては 、「README ファイル」も参照してください。

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

Microsoft Visual Studio が必要です。 このサンプルでは、Microsoft Visual Studio Code はサポートされていません。

1. Visual Studio (最小必須バージョン) がまだインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio のインストール」を参照してください。 そのセクションの手順に従って、このページに戻り、以下の手順を続行します。

手順 2 - Microsoft Edge のプレビュー チャネルをインストールする

1. Microsoft Edge (Beta、Dev、または Canary) のプレビュー チャネルがまだインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Microsoft Edge のプレビュー チャネルをインストールする」を参照してください。 そのセクションの手順に従って、このページに戻り、以下の手順を続行します。

手順 3 - WebView2Samples リポジトリを複製またはダウンロードする

1. まだ完了していない場合は、リポジトリを WebView2Sample 複製するか、ローカル ドライブにダウンロードします。 別のウィンドウまたはタブで、「 WebView2 の開発環境をセットアップする」の「WebView2Samples リポジトリをダウンロード する」を参照 してください。 そのセクションの手順に従って、このページに戻り、以下に進みます。

手順 4 - Visual Studio でソリューションを開く

1. ローカル ドライブで、ディレクトリ内の .sln Visual Studio でファイルを開きます。

   • <your-repos-directory>/WebView2Samples/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln

   または:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln

手順 5 - プロンプトが表示されたらワークロードをインストールする

1. メッセージが表示されたら、要求された Visual Studio ワークロードをインストールします。 別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio ワークロードをインストールする」を参照してください。 そのセクションの手順に従って、このページに戻り、以下に進みます。

手順 6 - 事前インストール済みパッケージを使用してプロジェクトをビルドして実行する

ソリューション エクスプローラーには、webview2_sample_uwp プロジェクトが表示されます。

リポジトリからサンプルにインストールされた NuGet パッケージのバージョンを使用して、プロジェクトをビルドして実行します。

1. [ ソリューション構成] ドロップダウン リストで、[デバッグ] などの構成を選択 します。

2. [ ソリューション プラットフォーム ] ドロップダウン リストで、 x64 などのプラットフォームを選択します。

   

3. ソリューション エクスプローラーで、webview2_sample_uwp プロジェクトを右クリックし、[ビルド] を選択します。

   プロジェクトがビルドされます。

4. [ デバッグ>] [デバッグの開始] (F5) を選択します。

   最初は空のグリッド ウィンドウが表示されます。

   

   次に、サンプル アプリ ウィンドウに Web ページのコンテンツが表示されます。

   

5. Visual Studio で、[デバッグ] [ デバッグ>の停止] の順に選択します。 Visual Studio はアプリを閉じます。

次に、次のセクションに従って、プロジェクトの NuGet パッケージを更新します。

手順 7 - NuGet パッケージを更新する

この手順では、プロジェクトの NuGet パッケージを更新して、WinUI 2 SDK の最新のプレリリース バージョンを取得します。 WinUI 2 SDK には、互換性のあるプレリリースまたはリリース バージョンの WebView2 SDK が含まれています。

プロジェクトの NuGet パッケージを更新します。

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

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

2. NuGet パッケージ マネージャーで、[インストール済み] タブをクリックします。

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

   Microsoft.UI.Xaml パッケージのプレリリース バージョンが一覧表示され、WinUI 2 SDK が示されています。 Microsoft.UI.Xaml パッケージには、WebView2 SDK が含まれています。Microsoft.Web.WebView2 は、Microsoft.UI.Xaml パッケージの [依存関係] セクションに一覧表示されます。 Microsoft.UI.Xaml パッケージを更新すると、互換性のある WebView2 SDK が更新されます。

4. NuGet パッケージ マネージャーで、[更新] タブをクリックします。

5. 左側の Microsoft.UI.Xaml カードをクリックします。

6. [ バージョン ] テキスト ボックスで、[ 最新のプレリリース ] が選択されていることを確認します。

7. 右側の [ 更新 ] ボタンをクリックします。

   

   数分かかる最新のパッケージを取得すると、[ 変更のプレビュー ] ダイアログが開きます。 Microsoft.Web.WebView2 (WebView2 SDK) は、[ 変更のプレビュー ] ダイアログに個別に表示されます。

   

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

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

   

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

    

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

11. 同様の手順を使用して 、Microsoft.NETCore.UniversalWindowsPlatform NuGet パッケージを更新します。

    数分かかる最新の UWP パッケージを取得すると、[ 変更のプレビュー ] ダイアログが表示されます。

    

12. [ファイル][すべて保存] の>順に選択します。

    これで、プロジェクトの Microsoft.UI.Xaml パッケージ (WinUI (WinUI 2) がインストールされました。 次のように、結果としてインストールされたパッケージを確認します。

13. NuGet パッケージ マネージャーで、[ インストール済み ] タブをクリックし、更新されたパッケージを調べます。

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml - プレリリース

    

14. [NuGet パッケージ マネージャー] ウィンドウを閉じます。

手順 8 - 更新されたパッケージを使用してプロジェクトをビルドして実行する

NuGet パッケージが更新されたので、プロジェクトをビルドしてもう一度実行します。

1. ソリューション エクスプローラーで、webview2_sample_uwp プロジェクトを右クリックし、[ビルド] を選択します。

   プロジェクトがビルドされます。

2. [ デバッグ>] [デバッグの開始] (F5) を選択します。

   最初は空のグリッド ウィンドウが表示されます。

   

   次に、サンプル アプリ ウィンドウに Web ページのコンテンツが表示されます。

   

3. Visual Studio で、[デバッグ] [ デバッグ>の停止] の順に選択します。 Visual Studio はアプリを閉じます。

手順 9 - コードを検査する

1. Visual Studio コード エディターで、コードを検査します。

   

関連項目

• WebView2 API リファレンス
• WinUI 2 (UWP) アプリでの WebView2 の概要