WebView2 用の開発環境を設定する

[アーティクル]
04/30/2023

この記事では、WebView2 開発用の開発環境の汎用セットアップについて説明します。一部のはじめにチュートリアルでは、ここで予備のセットアップ手順を示し、プラットフォーム固有またはプロジェクト固有のセットアップ手順を追加します。

Visual Studio のインストール

Visual Studio Professional 2019 や Visual Studio 2022 Community エディションなど、Visual Studio 2015 以降をインストールします。ほとんどの WebView2 サンプルは、Visual Studio 2019 を使用して作成およびテストされました。 Visual Studio 2019 を使用してサンプルを作成した場合は、Visual Studio 2022 でサンプルを使用する前に、Visual Studio 2019 でサンプルをビルドして実行する必要があります。

WebView2 サンプルは、Microsoft Visual Studio Code ではなく Microsoft Visual Studio 用に設計されています。

Visual Studio をインストールする場合は、現時点では既定値をそのまま使用できます。[ インストール] をクリックし、現時点ではワークロードのインストールを拒否できます。 Visual Studio では、後で特定 .sln のファイルを開くと、プラットフォームに適したワークロードをインストールするように求められます。

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

サポートされているオペレーティングシステム (OS) に Microsoft Edge Insider (プレビュー) チャネル (ベータ、開発、またはカナリア) をインストールします。
- Windows 10
- Windows 11

Canary チャネルを使用することをお勧めします。最低限必要なバージョンは 82.0.488.0 です。

WebView2 SDK のプレリリースバージョンを使用するには、Microsoft Edge のプレビューチャネルが必要です。プレリリース SDK を使用すると、最新の API に対してアプリをテストし、最新の API を試します。

WebView2Samples リポジトリをダウンロードする

WebView2 サンプルを含むリポジトリは 2 つあります。

リポジトリをファイルとして .zip ダウンロードすることも、リポジトリを複製することもできます。

リポジトリを (ファイルとして) ダウンロードすると、.zipリポジトリのスナップショットコピーが取得されます。その後、リポジトリの別の更新されたコピーを後でダウンロードできます。
リポジトリを複製する場合は、git コマンドまたはさまざまな Dev アプリの機能を使用してローカルコピーを更新できます。

リポジトリを (ファイルとして) ダウンロードするには:.zip

新しいウィンドウまたはタブで WebView2Samples リポジトリ (または WebView2Browser リポジトリ) を開きます。
GitHub リポジトリの右上にある緑色の [コード ] ボタンをクリックし、[ZIP の ダウンロード] をクリックします。

[ ダウンロード ] ポップアップが Microsoft Edge に表示されます。

Microsoft Edge の [ダウンロード ] ポップアップが表示されない場合は、[ 設定など] (...) をクリックし、[ ダウンロード] をクリックします。
[ ダウンロード ] ポップアップウィンドウで、の WebView2Samples-main.zip 右側にマウスポインターを合わせ、[ フォルダー (フォルダー) に表示 ] アイコンをクリックします。

[ ファイルを開く ] リンクはクリックしないことをお勧めします。これは、ダウンロード領域でファイルをすぐに解凍するため、目的の場所に移動するのが困難 (および遅くなる) 可能性があるためです。
ダウンロードディレクトリから通常の WebView2Samples-main.zip ディレクトリ (など Documents) にファイルをコピーまたは切り取ります。
ファイルを WebView2Samples-main.zip 解凍し、解凍したファイルの場所を書き留めます。
メインディレクトリのブレークアウトを調べます。

-mainは、このダウンロードしたディレクトリスナップショットが表すリポジトリブランチの名前です。 GitHub で別のブランチに切り替え、ダウンロードできます (例: WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip)。その場合、ダウンロードした.zipファイルはリポジトリのブランチのsmoketest-1.0.1054.27-prerelease-testingスナップショットです。このドキュメントでは、リポジトリのブランチを main ダウンロードしたことを前提としています。
推奨: リポジトリ名とパスに一致するように、ルートディレクトリの名前をから WebView2Samples-mainWebView2Samplesからに変更します。

WebView2Samples リポジトリを複製する

リポジトリをファイルとして .zip ダウンロードすることも、リポジトリを複製することもできます。

リポジトリを (ファイルとして) ダウンロードすると、.zipリポジトリのスナップショットコピーが取得されます。その後、リポジトリの別の更新されたコピーを後でダウンロードできます。
リポジトリを複製する場合は、git コマンドまたはさまざまな Dev アプリの機能を使用してローカルコピーを更新できます。

リポジトリ (またはリポジトリ) を WebView2Samples 複製するには、 WebView2Browser まず git をインストールする必要があります。上記のように、リポジトリをダウンロードするか、複製できます。

git をインストールする

リポジトリを WebView2Samples (ダウンロードする代わりに) 複製する場合、git がまだインストールされていない場合は、 git をダウンロードしてインストールします。

WebView2Samples リポジトリを複製するための URL を取得する

WebView2Samples リポジトリを新しいウィンドウまたはタブで開きます。
GitHub リポジトリの右上にある緑色の [コード ] ボタンをクリックし、[ 複製] を選択し、[ コピー ] アイコンをクリックします (または、テキストボックスで HTTPS URL 文字列を選択してコピーします)。
リポジトリをローカルで複製するために使用するツールを決定します。
- Visual Studio
- GitHub Desktop
- Git Bash シェルまたはコマンドプロンプト

次に、GitHub リポジトリをローカルドライブに複製します。これを行うには、使用するツールについて、次の適切な手順に従います。

Visual Studio を使用してリポジトリを複製する

Visual Studio を使用して GitHub リポジトリをローカルドライブに複製する場合:

Visual Studio で、[ファイルクローンリポジトリ] を選択します>。
GitHub リポジトリからコピーした URL を入力します。
同じダイアログ内またはエクスプローラーユーティリティから、書き込み可能な場所に汎用のルート git または GitHub フォルダーを作成し、そのディレクトリを選択して、リポジトリが新しいディレクトリとして複製されるようにすることができます。

たとえば、複製操作によって新しいディレクトリC:\Users\myUserName\Documents\GitHub\WebView2Samplesが作成されるように、という親フォルダーC:\Users\myUserName\Documents\GitHub\にリポジトリを作成できます。

リポジトリをローカルドライブに複製しました。次のメジャーセクションに進みます。

GitHub Desktop を使用してリポジトリを複製する

GitHub Desktop を使用して GitHub リポジトリをローカルドライブに複製する場合:

GitHub Desktop をインストールします。
GitHub Desktop で、[ファイルクローンリポジトリ] を選択します>。
Visual Studio または GitHub Desktop で、GitHub リポジトリからコピーした URL を入力します。
同じダイアログ内またはエクスプローラーユーティリティから、書き込み可能な場所に汎用のルート git または GitHub フォルダーを作成し、そのディレクトリを選択して、リポジトリが新しいディレクトリとして複製されるようにすることができます。

たとえば、複製操作によって新しいディレクトリC:\Users\myUserName\Documents\GitHub\WebView2Samplesが作成されるように、という親フォルダーC:\Users\myUserName\Documents\GitHub\にリポジトリを作成できます。

リポジトリをローカルドライブに複製しました。次のメジャーセクションに進みます。

Git Bash シェルまたはコマンドプロンプトを使用してリポジトリを複製する

代わりに Git Bash シェルまたはコマンドプロンプトを使用してリポジトリを複製する場合:

リポジトリをローカルドライブに複製し、GitHub リポジトリからコピーした URL 文字列を入力します。
```
# example location where the repo directory will be added:
cd c:/users/myusername/documents/github/
git clone https://github.com/MicrosoftEdge/WebView2Samples.git
```
ディレクトリは、次の図のように、指定したパスのローカルドライブに作成されます。

リポジトリをローカルドライブに複製しました。

Visual Studio で WebView2Samples .sln ファイルを開く

リポジトリを複製またはダウンロードしたら WebView2Samples 、Visual Studio でファイルを .sln 開きます。

リポジトリディレクトリ構造のローカルコピーで、ファイルを .sln 見つけます。 WebView2Samples リポジトリの最上位の README ファイルも、同様の概要を示します。
Visual Studio でファイルを .sln 開きます。たとえば、 WebView2Samples.sln のローカルコピーを開きます。このリポジトリのソリューションファイルには、Visual Studio Code ではなく Visual Studio が必要です。
いずれかのファイルを .sln 開きます。たとえば、Microsoft Visual Studio で、メイン Win32 ソリューションファイル WebView2Samples/SampleApps/WebView2Samples.sln (パスWebView2Samples-main/SampleApps/WebView2Samples.slnとしてダウンロード) のローカルコピーを開きます。 Visual Studio でそのソリューションファイルを開くと、ソリューションエクスプローラーには次のプロジェクトが含まれます。

一般的な開発環境の初期セットアップでは、リポジトリから任意の種類の .sln ファイルを WebView2Samples 開くことができます。

ディレクトリのサブディレクトリ内のプラットフォーム固有 .sln の GettingStartedGuides ファイル。これらははじめにチュートリアルと一致し、いくつかの API 機能を示す完成した例です。
ディレクトリ内SampleAppsの複数のプラットフォームプロジェクトを含む Win32 .sln ファイル。これは包括的な API デモです。
ディレクトリのサブディレクトリ内のプラットフォーム固有 .sln の SampleApps ファイル。これらは包括的な API デモです。

Visual Studio ワークロードをインストールする

メッセージが表示されたら、Visual Studio ワークロードをインストールします。 Microsoft Visual Studio 2019 または 2022 で複製またはダウンロードしたWebView2Samplesリポジトリからファイルを開.slnくと、"開くことができない" ダイアログが表示されることがあります。

[OK] ボタンをクリック します 。その後、次のようなワークロードインストーラーが表示される場合があります。

。
チェックボックスをオンにし、[ インストール ] ボタンをクリックします。

Visual Studio インストーラーは、プラットフォームのワークロードに対して実行されます。

。

移行レポートのログファイルページは、次のように file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm開く場合があります。

ズームするには、[新しいタブで画像を開く] を右クリックします>。

上記では、リポジトリを -main 複製した場合ではなく、リポジトリのダウンロードした .zip ファイルにディレクトリサフィックスが存在します。

Visual Studio では、選択した.slnファイルがソリューションエクスプローラーで開きます。

WebView2 SDK をインストールまたは更新する

WebView2 SDK には、Microsoft Edge を利用する WebView2 コントロールが含まれており、ネイティブアプリケーションに Web テクノロジ (HTML、CSS、JavaScript) を埋め込むことができます。

WebView2 SDK は、各 .sln ファイルのプロジェクトノードごとに 1 回インストールします。 WebView2 SDK のインストールは、インストールされているプロジェクトにのみ適用されます。

nuget.org から SDK NuGet パッケージをダウンロードする Microsoft.Web.WebView2 代わりに、Visual Studio の [ NuGet パッケージマネージャー ] パネルを使用して WebView2 SDK NuGet パッケージをインストールします。 WebView2Samples リポジトリを複製またはダウンロードした後、Visual Studio でリポジトリの .sln ファイルのいずれかを開き、ソリューション内のプロジェクトノードを右クリックします。 NuGet パッケージマネージャー パネルを使用して、SDK を Microsoft.Web.WebView2 NuGet パッケージとしてインストールします。

Microsoft.Web.WebView2 SDK は、リリースバージョンとプレリリースバージョンで使用できます。開始するには、リリースバージョンをお勧めします。

次のように、リリースまたはプレリリース WebView2 SDK をインストールまたは更新します。

Visual Studio でファイルを .sln 開きます。たとえば、 WebView2Samples.sln のローカルコピーを開きます。このリポジトリのソリューションファイルには、Visual Studio Code ではなく Visual Studio が必要です。
ソリューションエクスプローラーで、WebView2GettingStarted プロジェクトノード (ソリューションノードではなく) などのソリューションのプロジェクトノードを右クリックし、[NuGet パッケージの管理] を選択します。

次の図は、特定の .sln ファイルとプロジェクトを示しています。SDK をインストールするプロジェクトを使用します。

Visual Studio で [ NuGet パッケージマネージャー ] タブが開きます。
[NuGet] ウィンドウで、[参照] タブをクリックします。
検索バーの右側にある [ プレリリースを含める ] チェックボックスをオフにするか、実験用 API を含むプレリリースバージョンの SDK が必要な場合は設定します。
左上の検索バーに「 Microsoft.Web.WebView2」と入力します。
検索バーの下にある [Microsoft.Web.WebView2] カードをクリックします。
右側のウィンドウで、 インストール (または更新) ボタンをクリックします。 NuGet は、このプロジェクトで使用するために、WebView2 SDK をコンピューターにダウンロードします。

ズームするには、[新しいタブで画像を開く] を右クリックします>。
[NuGet パッケージマネージャー] タブを閉じます。

WebView2 SDK がインストールされたので、開発環境が WebView2 アプリに WebView2 機能を追加するように設定されました。

WebView2 ランタイムの更新

開発用コンピューターとユーザーマシン上の WebView2 ランタイムを更新するには、「アプリと WebView2 ランタイムを配布する」を参照してください。

WebView2 用の開発環境を設定する

Visual Studio のインストール

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

WebView2Samples リポジトリをダウンロードする