WebView2 Deployment Visual Studio インストーラー

このサンプル の WV2DeploymentVSInstallerSample は、Visual Studio インストーラーを使用して WebView2 アプリをデプロイする方法を示しています。

• サンプル名: WV2DeploymentVSInstallerSample
• Repo ディレクトリ: WV2DeploymentVSInstallerSample
• ソリューション ファイル: リポジトリに指定されていません。 次の手順でソリューション ファイルを作成します。

アプリでエバーグリーン WebView2 ランタイムをデプロイする方法を示すために、この記事では、Visual Studio 用の Microsoft Visual Studio インストーラー Project 拡張機能を使用する方法について説明します。 Win32 サンプル アプリ (WebView2APISample) のインストーラーを作成するには、Setup Project 型のプロジェクトを作成します。 チェーンを作成したインストーラーによって、エバーグリーン WebView2 ランタイムがインストールされます。

最初にリポジトリからファイルをproject.xml編集し、Visual Studio で、Microsoft Visual Studio インストーラー Projects 拡張機能の Setup Project プロジェクト テンプレートを使用して新しいプロジェクトを作成します。

このサンプルでは、いくつかの異なるデプロイ方法を示します。

• リンクを使用して、Evergreen WebView2 ランタイム ブートストラップをダウンロードする。
• アプリでエバーグリーン WebView2 ランタイム ブートストラップをパッケージ化する。
• アプリでエバーグリーン WebView2 ランタイム スタンドアロン インストーラーをパッケージ化する。

これらのさまざまな方法の詳細については、「アプリ と WebView2 ランタイムを配布する」の「エバーグリーン WebView2ランタイムのデプロイ」を参照してください。

手順 1 - WebView2APISample をビルドして実行する

このサンプルが配布するアプリを理解し、環境が一般的な Win32 WebView2 アプリ開発用に設定されていることを確認するには、このデプロイ サンプルを使用する前に、Win32 サンプル アプリ (WebView2APISample) をビルドして実行します。

1. Win32 サンプル アプリ (WebView2APISample) の手順を実行し、以下に進みます。

前提条件: 上記のページに記載されているように、C++ のサポートを含む Microsoft Visual Studio が必要です。 この WV2DeploymentVSInstallerSample サンプルでは、Microsoft Visual Studio Code はサポートされていません。

上記のページは、WebView2Samples リポジトリを複製またはダウンロードし、まだ実行していない場合は、C++ サポートを使用して Visual Studio をインストールするのに役立ちます。

手順 2 - Visual Studio インストーラー プロジェクトをインストールする

まだ完了していない場合は、Visual Studio インストーラープロジェクトをインストールします。

1. Microsoft Visual Studio インストーラー Projects for Visual Studio 2019 をインストールします。 そのページの手順に従って、このページに戻り、以下の手順を続行します。

[次のプロセスのシャットダウンを待機中] ダイアログが表示された場合は、Visual Studio を閉じます。

手順 3 - product.xml を編集して、WebView2 ランタイムを配布する方法を構成する

1. Visual Studio を開きます。 開く画面で、右下の [ コードなしで続行 ] リンクをクリックできます。

2. リポジトリのローカル コピーにある次の個々のファイルを開きます。 <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

   GitHub のリポジトリ内のファイルの場所: SampleApps/WV2DeploymentVSInstallerSample/product.xml

   

3. を検査 product.xmlします。 3 <PackageFile> 行あります。 各 3 行の上のコメントを調査します。 ここでは、説明を含む行の簡略化されたビューを示します。

   最初 <PackageFile> の行では、Evergreen WebView2 Runtime Bootstrapper である file MicrosoftEdgeWebview2Setup.exeを使用し、Web サイトを HomeSite 指定します。 アプローチ 1: リンクを介してエバーグリーン WebView2 ランタイム ブートストラップをダウンロードするには、次の行を使用します。

   XML

   <!-- Download the MicrosoftEdgeWebview2Setup.exe -->
   <!-- <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/> -->
   

   2 行目 <PackageFile> では、常緑 WebView2 ランタイム ブートストラップである file MicrosoftEdgeWebview2Setup.exeを使用します。 [アプローチ 2: Evergreen WebView2 Runtime Bootstrapper をアプリにパッケージ化する] には、次の行を使用します。

   XML

   <!-- Package the MicrosoftEdgeWebview2Setup.exe -->
   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

   3 行目 <PackageFile> では、プラットフォーム固有の Evergreen WebView2 Runtime スタンドアロン インストーラーである file MicrosoftEdgeWebView2RuntimeInstallerX64.exeを使用します。 [アプローチ 3: Evergreen WebView2 Runtime スタンドアロン インストーラーをアプリにパッケージ化する] には、次の行を使用します。

   XML

   <!-- Package the WebView Standalone Installer -->
   <!-- <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" /> -->
   

4. 使用しているアプローチを特定します。 アプローチ 2 が既定値です。つまり、アプローチ 2 を使用する行は、リポジトリの product.xml ファイルにコメントされていません。

5. を次のように編集 product.xmlします。以下の 3 つのセクションのいずれかの手順を実行します。

方法 1: リンクを介してエバーグリーン WebView2 ランタイム ブートストラップをダウンロードする

アプリがリンクを介してエバーグリーン WebView2 ランタイム ブートストラップ (MicrosoftEdgeWebview2Setup.exe) をダウンロードする場合:

1. セクション内で、次の <PackageFiles CopyAllPackageFiles="false"> 行のコメントを解除し (長い公開キーの値を保持します)、他の行をコメントアウトします。

   XML

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>
   

2. WebView2 ランタイム ブートストラップの値は PublicKey 、予告なく変更される場合があります。 この問題への対処に取り組んでいます。 ここでは、 を更新されたPublicKey値にproduct.xml置き換える必要がある場合があります。

3. <Commands Reboot="Defer">と </Commands> セクション内で、 をポイントして"MicrosoftEdgeWebview2Setup.exe"、Visual Studio インストーラーで Bootstrapper が使用されていることを確認PackageFileします。

4. ファイルを保存します。

方法 2: アプリでエバーグリーン WebView2 ランタイム ブートストラップをパッケージ化する

アプリでエバーグリーン WebView2 ランタイム ブートストラップ (MicrosoftEdgeWebview2Setup.exe) をパッケージ化する場合:

1. セクション内で <PackageFiles CopyAllPackageFiles="false"> 、次の行のコメントを解除し、他の行をコメントアウトします。

   XML

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

2. セクション内で<Commands Reboot="Defer">、 をポイントして"MicrosoftEdgeWebview2Setup.exe"、Visual Studio インストーラーで Bootstrapper が使用されていることを確認PackageFileします。

3. ファイルを保存します。

方法 3: アプリでエバーグリーン WebView2 ランタイム スタンドアロン インストーラーをパッケージ化する

アプリを使用してエバーグリーン WebView2 ランタイム スタンドアロン インストーラーをパッケージ化する場合:

1. セクション内で <PackageFiles CopyAllPackageFiles="false"> 、次の行のコメントを解除し、他の行をコメントアウトします。

   XML

   <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />
   

2. <Commands Reboot="Defer">と </Commands> セクション内で をポイントし"MicrosoftEdgeWebView2RuntimeInstallerX64.exe"、Visual Studio インストーラーでスタンドアロン インストーラーが使用されていることを確認PackageFileします。

3. X64 以外のデバイスを対象としている場合は、ファイル名を MicrosoftEdgeWebView2RuntimeInstallerX64 編集して正しいアーキテクチャを反映します。

4. ファイルを保存します。

手順 4 - WebView2 ブートストラップまたはスタンドアロン インストーラーをダウンロードする

ブートストラップ (アプローチ 2) またはスタンドアロン インストーラー (アプローチ 3) をアプリと共にパッケージ化する場合は、このセクションの手順を実行します。 それ以外の場合は、次のメジャーステップセクションにスキップします。

1. Microsoft Edge WebView2 ブートストラップまたはスタンドアロン インストーラーをダウンロードします。

2. ダウンロードしたブートストラップまたはスタンドアロン インストーラーをフォルダーに <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ 保存します。

手順 5 - WV2DeploymentVSInstallerSample フォルダーを Packages フォルダーにコピーする

この手順は、すべてのアプローチ (1、2、または 3) に適用されます。

1. フォルダーを <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ コピーし、次のいずれかのフォルダーに貼り付けます。

   • <drive>:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\

   • <Visual Studio install dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\ (少なくとも Visual Studio 2019 Update 7 が必要)

   の一般的な <Visual Studio install dir>パス:

   • C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\

手順 6 - Visual Studio でセットアップ プロジェクトを作成する

1. Visual Studio で、[ファイル]>[新規作成]>[プロジェクト] を選択します。 [ 新しいプロジェクトの作成 ] ウィンドウが表示されます。

2. [ テンプレートの検索 ] テキスト ボックスに「 setup project」と入力し、[ セットアップ プロジェクト ] テンプレートを選択します。 次に示すように、厳密に名前が付けられたテンプレートを選択してください。

   

3. [ 次へ ] ボタンをクリックします。

   次に示すように 、[新しいプロジェクトの構成: プロジェクトのセットアップ ] ダイアログが開きます。

4. [ プロジェクト名 ] テキスト ボックスに、 MyWin32WV2DeploySample などの名前を入力します。

5. [ 場所 ] テキスト ボックスで、別のプロジェクト ディレクトリ内にない場所 (リポジトリ ディレクトリ内にない場所など <repo-path>\WebView2Samples\ ) に移動します。

   

6. [作成] ボタンをクリックします。

   

手順 7 - 前提条件として WebView2 ランタイムを追加する

1. Visual Studio のソリューション エクスプローラーで、プロジェクトを右クリックし、[プロパティ] を選択します。 [ プロパティ ページ] ダイアログが開きます。

2. [前提条件] ボタン を クリックします。

   

3. [ Edge WebView2 ランタイム ] チェック ボックスをオンにします。

   このチェック ボックスが一覧にない場合は、必要なファイルが Packages フォルダーに配置されていないことを示している可能性があります。 使用しているアプローチを確認します。 上記の手順は、「 手順 4 - WebView2 Bootstrapper またはスタンドアロン インストーラーをダウンロード する」および 「手順 5 - WV2DeploymentVSInstallerSample フォルダーを Packages フォルダーにコピーする」で行う必要がある場合があります。

4. その他の前提条件のチェック ボックスをオフにします。 次に、[ OK ] ボタンをクリックします。

   

手順 8 - セットアップ プロジェクトをビルドする

1. F5 キーを押してセットアップ プロジェクトを保存してビルドします。

関連項目

• WV2DeploymentVSInstallerSample の README ファイル