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

2024-08-01

この記事では、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 のプレビューチャネルをインストールする

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

Windows 10
Windows 11

Microsoft Edge (ベータ、開発、またはカナリア) のプレビューチャネルをダウンロードするには、[ Microsoft Edge Insider になる] に移動します。

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-main から WebView2Samples に変更します。

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

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

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

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

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

GitHub Desktop をインストールします。
GitHub Desktop で、[ ファイル>Clone リポジトリ] を選択します。
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 でそのソリューションファイルを開くと、ソリューションエクスプローラーには次のプロジェクトが含まれます。

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

GettingStartedGuides ディレクトリのサブディレクトリ内のプラットフォーム固有の.sln ファイル。これらははじめにチュートリアルと一致し、いくつかの API 機能を示す完成した例です。
SampleApps ディレクトリ内の複数のプラットフォームプロジェクトを含む Win32 .sln ファイル。これは包括的な API デモです。
SampleApps ディレクトリのサブディレクトリ内のプラットフォーム固有の.sln ファイル。これらは包括的な 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 から Microsoft.Web.WebView2 SDK NuGet パッケージをダウンロードする代わりに、Visual Studio の [NuGet パッケージマネージャー ] パネルを使用して WebView2 SDK NuGet パッケージをインストールします。 WebView2Samples リポジトリを複製またはダウンロードした後、Visual Studio でリポジトリの .sln ファイルのいずれかを開き、ソリューション内のプロジェクトノードを右クリックします。 NuGet パッケージマネージャー パネルを使用して、Microsoft.Web.WebView2 SDK を 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 ランタイムを配布する」を参照してください。