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

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

Visual Studio のインストール

1. 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 Insider になる」に移動します。 プレビュー チャネルは Insider チャネルとも呼ばれます。

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

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

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

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

• WebView2Samples リポジトリ
• WebView2Browser リポジトリ

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

• リポジトリを (ファイルとして) ダウンロードすると、.zipリポジトリのスナップショットコピーが取得されます。 その後、リポジトリの別の更新されたコピーを後でダウンロードできます。

• リポジトリを複製する場合は、git コマンドまたはさまざまな Dev アプリの機能を使用してローカル コピーを更新できます。

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

1. 新しいウィンドウまたはタブで WebView2Samples リポジトリ (または WebView2Browser リポジトリ) を開きます。

2. GitHub リポジトリの右上にある緑色の [コード ] ボタンをクリックし、[ZIP の ダウンロード] をクリックします。

   

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

   

   Microsoft Edge の [ダウンロード ] ポップアップが表示されない場合は、[ 設定など] (...) をクリックし、[ ダウンロード] をクリックします。

3. [ ダウンロード ] ポップアップ ウィンドウで、 の WebView2Samples-main.zip 右側にマウス ポインターを合わせ、[ フォルダー (フォルダー) に表示 ] アイコンをクリックします。

   [ ファイルを開く ] リンクはクリックしないことをお勧めします。これは、ダウンロード領域でファイルをすぐに解凍するため、目的の場所に移動するのが困難 (および遅くなる) 可能性があるためです。

4. ダウンロード ディレクトリから通常の WebView2Samples-main.zip ディレクトリ (など Documents) にファイルをコピーまたは切り取ります。

5. ファイルを WebView2Samples-main.zip 解凍し、解凍したファイルの場所を書き留めます。

   

6. メインディレクトリのブレークアウトを調べます。

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

7. 推奨: リポジトリ名とパスに一致するように、ルート ディレクトリの名前を から WebView2Samples-mainWebView2Samplesから に変更します。

WebView2Samples リポジトリを複製する

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

• リポジトリを (ファイルとして) ダウンロードすると、.zipリポジトリのスナップショットコピーが取得されます。 その後、リポジトリの別の更新されたコピーを後でダウンロードできます。

• リポジトリを複製する場合は、git コマンドまたはさまざまな Dev アプリの機能を使用してローカル コピーを更新できます。

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

git をインストールする

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

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

1. WebView2Samples リポジトリを新しいウィンドウまたはタブで開きます。

2. GitHub リポジトリの右上にある緑色の [コード ] ボタンをクリックし、[ 複製] を選択し、[ コピー ] アイコンをクリックします (または、テキスト ボックスで HTTPS URL 文字列を選択してコピーします)。

   

3. リポジトリをローカルで複製するために使用するツールを決定します。

   • Visual Studio
   • GitHub Desktop
   • Git Bash シェルまたはコマンド プロンプト

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

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

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

1. Visual Studio で、[ファイルクローン リポジトリ] を選択します>。

2. GitHub リポジトリからコピーした URL を入力します。

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

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

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

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

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

1. GitHub Desktop をインストールします。

2. GitHub Desktop で、[ファイルクローン リポジトリ] を選択します>。

3. Visual Studio または GitHub Desktop で、GitHub リポジトリからコピーした URL を入力します。

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

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

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

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

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

1. リポジトリをローカル ドライブに複製し、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
   

   

   ディレクトリは、次の図のように、指定したパスのローカル ドライブに作成されます。

   

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

関連項目:

• リポジトリの複製 - GitHub ドキュメント。
• DevTools のサンプル コードで Demos リポジトリをダウンロードまたは複製する。
• 手順 6:Visual Studio Code 用 DevTools 拡張機能のインストールに関するページで localhost サーバーを設定します。

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

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

1. リポジトリ ディレクトリ構造のローカル コピーで、ファイルを .sln 見つけます。 WebView2Samples リポジトリの最上位の README ファイルも、同様の概要を示します。

2. Visual Studio でファイルを .sln 開きます。 たとえば、 WebView2Samples.slnのローカル コピーを開きます。 このリポジトリのソリューション ファイルには、Visual Studio Code ではなく Visual Studio が必要です。

3. いずれかのファイルを .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くと、"開くことができない" ダイアログが表示されることがあります。

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

   。

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

   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 をインストールまたは更新します。

1. Visual Studio でファイルを .sln 開きます。 たとえば、 WebView2Samples.slnのローカル コピーを開きます。 このリポジトリのソリューション ファイルには、Visual Studio Code ではなく Visual Studio が必要です。

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

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

   

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

3. [NuGet] ウィンドウで、[参照] タブをクリックします。

4. 検索バーの右側にある [ プレリリースを含める ] チェック ボックスをオフにするか、実験用 API を含むプレリリース バージョンの SDK が必要な場合は設定します。

5. 左上の検索バーに「 Microsoft.Web.WebView2」と入力します。

6. 検索バーの下にある [Microsoft.Web.WebView2] カードをクリックします。

7. 右側のウィンドウで、 インストール (または 更新) ボタンをクリックします。 NuGet は、このプロジェクトで使用するために、WebView2 SDK をコンピューターにダウンロードします。

   

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

8. [NuGet パッケージ マネージャー] タブを閉じます。

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

関連項目:

• > Microsoft.Web.WebView2 SDK の NuGet.org

WebView2 ランタイムの更新

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

関連項目

• リポジトリの複製 - GitHub ドキュメント。
• DevTools のサンプル コードで Demos リポジトリをダウンロードまたは複製する。
• 手順 6:Visual Studio Code 用 DevTools 拡張機能のインストールに関するページで localhost サーバーを設定します。