Visual Composition を使用した Win32 サンプル アプリ

この WebView2 サンプルは、Win32 ネイティブ アプリケーション内に WebView2 コントロールを埋め込みます。

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

このサンプルは、Win32 Visual Studio 2019 プロジェクトとして構築されています。 WebView2 環境では、C++ と HTML/CSS/JavaScript が使用されます。

このサンプルでは、Windows ランタイム Composition API (Visual レイヤーとも呼ばれます) を使用して、Windows UI 機能を活用し、C++ Win32 アプリケーションでより優れた外観、操作性、機能を作成します。

このサンプルでは、ネイティブ Win32 アプリケーションが WebView と直接やり取りできるようにする、WebView2 のイベント ハンドラーと API メソッドの一部を紹介します。

WebView を初めて使用する場合は、最初にチュートリアル 「Win32 アプリでの WebView2 の概要」に従うことをお勧めします。このチュートリアルでは、WebView2 を作成する方法について説明し、WebView2 の基本的な機能について説明します。

「WebView2SampleWinComp の Readme ファイル」も参照してください。

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

最新バージョンの Edge Canary チャネルをお勧めします。

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

手順 2 - C++ サポートを使用して Visual Studio をインストールする

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

このサンプルは、Win32 Visual Studio 2019 プロジェクトとして構築されています。

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

2. Visual Studio 2017 を使用する場合は、プロジェクトの [プロパティ>] [構成] プロパティ > [全般>プラットフォーム ツールセット] でプロジェクトのプラットフォーム ツールセットを変更します。 また、Windows SDK を使用可能な最新バージョンに変更する必要がある場合もあります。

その他の前提条件

• WebView2 SDK - このサンプル プロジェクトには、WebView2 SDK のプレリリース バージョンが既にインストールされています。 SDK を必要に応じて更新する手順を次に示します。

• Windows 10 SDK - 既定では、このサンプル アプリでは、コンピューターにインストールされている最新の Window 10 SDK バージョンが使用されます。 ただし、Windows 10 SDK バージョン 2004 (10.0.19041.0) では、このサンプル アプリのビルドを停止する問題があります。 互換性のあるバージョンの Windows 10 SDK をインストールする手順を次に示します。

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

このサンプルをビルドする最初の手順は、サンプル リポジトリのローカル コピーを取得することです。

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

手順 4 - ソリューションを開き、Windows SDK ターゲットを設定する

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

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

   または:

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

   [ ソリューション アクションの確認] ダイアログが開き、インストールされている Windows SDK でプロジェクトのターゲットを次のように求めるメッセージが表示される場合があります。

   

2. [Windows SDK バージョン] ドロップダウン リストで、10.0.20348.0 以降、または 10.0.18362.0 以前を選択します。10.0.19041.0 を選択しないでください。 次に、[ OK ] ボタンをクリックします。 これらのバージョンを使用できない場合は、以下の「Windows SDK をインストールする」セクションの手順を実行します。 それ以外の場合は、その下のセクションに進みます。

ソリューションが既に開いている場合は、次のようにターゲットを変更できます。

• ソリューション エクスプローラーで、WebView2SampleWinComp プロジェクト (ソリューションではなく) を右クリックし、[プロジェクトの再ターゲット] をクリックします。

手順 5 - Windows SDK をインストールする

既定では、このサンプル アプリでは、インストールした最新の Window 10 SDK バージョンが使用されます。 Windows 10 SDK バージョン 2004 (10.0) に問題があります。19041.0) このサンプル アプリのビルドを停止します。 この問題が発生した場合は、SDK バージョン 2104 (10.0) などの新しいバージョンWindows 10インストール (およびこのプロジェクトを再ターゲットして使用します)。20348.0) または以前のバージョン (10.0 など)。18362.1。

Windows 10 SDK をインストールするには:

1. [Windows SDK とエミュレーター アーカイブ] に移動します。

2. 次のいずれかの行で、[ SDK のインストール ] リンクをクリックします。

   • Windows 10 SDK バージョン 2104 (10.0.20348.0) (またはそれ以降)
   • Windows 10 SDK バージョン 1903 (10.0.18362.1)

   のバージョン固有の winsdksetup.exe コピーがディレクトリに Downloads ダウンロードされます。

3. Downloadsディレクトリで、ダウンロードしたのwinsdksetup.exeコピーを開きます。

4. [Windows SDK のセットアップ] ウィンドウが開きます。

   

5. [ 次へ ] ボタンをクリックし、プロンプトに従います。 既定値をそのまま使用できます。 インストールの最後に、選択したバージョンの Windows SDK ようこそ画面が表示されます。

   

6. [ 閉じる ] ボタンをクリックします。

前の手順「ソリューションを開き、Windows SDK ターゲットを設定する」を実行します。 または、ソリューションが既に開いている場合は、ソリューション エクスプローラーで WebView2SampleWinComp プロジェクト (ソリューションではなく) を右クリックし、[プロジェクトの再ターゲット] をクリックします。

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

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

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

Visual Studio (上記) でソリューションを開き、セットアップまたはインストールのプロンプトに応答すると、プロジェクトが Visual Studio で開き、ソリューション エクスプローラーの WebView2SampleWinComp プロジェクトが表示されます。

Visual Studio の上部で、次のようにビルド ターゲットを設定します。

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

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

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

   これにより、プロジェクト ファイル SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxprojがビルドされます。

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

   サンプル アプリ ウィンドウが開きます。

   

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

手順 8 - インストールされているパッケージを更新する

この手順は省略できます。 サンプルはプレインストールされています。

• WebView2 プレリリース SDK のバージョン。
• Windows 実装ライブラリ (WIL) のバージョン。

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

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

3. [ インストール済み ] タブをクリックします。パッケージごとに、2 つのバージョン (現在のバージョンと利用可能な更新されたバージョン番号) が一覧表示されているかどうかに注意してください。

4. [更新] タブをクリックします。

5. Microsoft.Web.WebView2 SDK の新しいプレリリースが一覧表示されている場合は、必要に応じて [更新] ボタンをクリックできます。 プレリリースには、 1.0.1248-prerelease などの "プレリリース" サフィックスがあります。 この手順の詳細を別のウィンドウまたはタブで確認する場合は、「WebView2 用の開発環境をセットアップする」の「WebView2 SDK のインストールまたは更新」を参照してください。 そのセクションの手順に従って、このページに戻り、以下に進みます。

   

6. Windows 実装ライブラリ (WIL) の新しいリリースが一覧表示されている場合は、必要に応じて [ 更新 ] ボタンをクリックできます。

7. プロンプトに従って、パッケージの更新を続行します。

8. 更新されたパッケージを使用して、プロジェクトをビルドして再度実行します。

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

1. Visual Studio コード エディターで、コードを調べます。

   

関連項目

• Win32 アプリでの WebView2 の概要
• WebView2 API リファレンス