WebView2 プラットフォームのコンポーネント

WebView2 をアプリに追加するには、開発マシンで WebView2 SDK を使用し、WebView2 ランタイムをユーザー コンピューターに配布します。

詳細な内容:

開発マシンとユーザー コンピューター上のコンポーネント

WebView2 をアプリに追加するには、開発マシンで WebView2 SDK を使用し、WebView2 ランタイムをユーザー コンピューターに配布します。

最上位レベルの WebView2 コンポーネント

短縮用語 説明
アプリ WebView2 コントロールのインスタンスを含む、任意のフレームワークまたはプラットフォーム用のすべてのアプリ。 アプリには、WebView2 コントロール インスタンスを使用する領域と、コントロールを使用しない他の領域を含めることができます。
SDK WebView2 SDK。 アプリの一部で WebView2 を使用する場合、そのコードは WebView2 コントロールのインスタンスと組み合わせてこれらの API を呼び出すことができます。 リリース SDK はユーザーに提供され、安定した API のみが含まれています。 プレリリース SDK は開発者のみが使用し、いくつかの実験的な API が含まれています。
Control WebView2 コントロールのインスタンス。 アプリでは、通常、Web コンテンツが含まれより長方形の領域として表示されます。
ランタイム ブラウザー エンジンである WebView2 ランタイム。 ユーザー コンピューターだけでなく、開発コンピューターおよびテスト コンピューターにもインストールされます。
プレビュー チャネル Microsoft Edge のプレビュー チャネル。ベータ版 (ほぼ安定版)、Dev、または Canary (最新ビルド、日次) のいずれかです。 開発マシンとテスト マシンのみの場合、ユーザー コンピューターには対応できません。

WebView2 コントロール、SDK、ランタイム

WebView2 コントロール、WebView2 SDK、WebView2 ランタイムには、次の役割があります。

コンポーネント 役割
WebView2 SDK 開発者がアプリのコードで使用する API を提供します。 アプリのコーディング中に Dev によってローカルで使用されます。 2 つのバージョン: ローカル開発テスト用のプレリリース SDK と、ユーザー向けに出荷可能なコードを開発するためのリリース SDK。
WebView2 コントロール WebView2 コントロールをアプリに埋め込みました。 ランタイムをホストします。Web コンテンツを表示する可視領域として機能します。
WebView2 ランタイム Dev のテスト マシンおよびユーザー コンピューター上。 または、プレリリース SDK を使用する場合、ランタイムを使用する代わりに、開発者はローカル テストに Microsoft Edge のプレビュー チャネルを使用できます。

WebView2 の高レベルのコンポーネントの図

次の図は、開発用コンピューターとユーザー コンピューター上の高レベルの WebView2 コンポーネントを示しています。

開発マシンおよびユーザー コンピューター上のアプリ

開発マシン

ここでは、上の図の左の列について説明します。

WebView2 アプリを開発するための開発マシンは、次のコンポーネントで構成されています。

  • Visual Studio プロジェクト - Visual Studio プロジェクト テンプレートを使用して標準プラットフォーム アプリを作成し、WebView2 SDK を NuGet パッケージとしてプロジェクトに追加します。

    • レイアウト デザイナー - Visual Studio でコントロールをレイアウトします。

      • WebView2 コントロール インスタンス - アプリの Web コンテンツ領域。 アプリの Web 側コードはこのコントロールで実行されます。

      • ネイティブ コントロール インスタンス - アプリのネイティブ コントロールとウィンドウ。

    • WebView2 SDK。

      • CoreWebView2、CoreWebView2Controller、CoreWebView2Environment を含むプラットフォームごとの WebView2 API。 主にネイティブ側コードによって呼び出されます。

      • AddHostObjectToScript - プラットフォーム API と WebView2 API を JavaScript コードに公開できるようにします。 ネイティブ コードと Web コードの相互運用を参照してください

      • JavaScript API (WebView2Script パッケージ) - ホスト アプリケーションと通信するために Web 側コードによって呼び出されます。

    • プラットフォーム API - Web プラットフォームによって提供される WebView2 以外の API。Web 側コードによって使用されます。

  • WebView2 ランタイム - WebView2 API を含み、Web 側コードを実行する Microsoft Edge ブラウザー コンポーネント。

ユーザー コンピューター

ここでは、上の図の右列について説明します。

エンドユーザーのコンピューターには、WebView2 アプリの実行に関連する次のコンポーネントがあります。

  • ユーザーがインストールして使用しているホスト アプリ。

    • WebView2 ネイティブ コード: WebView2 API を使用するネイティブ コード。

    • Web コード: WebView2 コントロール インスタンスで実行される Web 側コード。

    • WebView2 コントロール インスタンス: WebView2 アプリの Web 側コードは WebView2 コントロールで実行されます。

    • WebView2 以外のネイティブ コード。

    • WebView2 以外の Web コード。

    • ネイティブ コントロール インスタンス。

  • WebView2 ランタイム。

プレビュー ランタイムを備えたプレリリース SDK または安定ランタイムを備えたリリース SDK

次のいずれかの組み合わせを使用します。

  • WebView2 プレリリース SDK と、WebView2 プレビュー ランタイムを含む Microsoft Edge (Beta、Dev、または Canary) のプレビュー チャネル。
  • WebView2 ランタイムと WebView2 リリース SDK。
WebView2 SDK の種類 レンダラー プラットフォーム シナリオ
プレリリース SDK Microsoft Edge (Beta、Dev、または Canary) のプレビュー チャネルに含まれている WebView2 プレビュー ランタイム 開発用マシンで、今後の変更に対してアプリを実験およびテストする場合。
リリース SDK WebView2 の安定したランタイム エンド ユーザーへのアプリの出荷用。

WebView2 コントロール、ランタイム、SDK

次の図に、次の概要を示します。

WebView2 プレリリース SDK:

  • .NET/C# API (実験用 API を含む)。
  • WinRT/C# API (試験的な API を含む)。
  • 実験的な API を含む Win32/C++ API。
  • WebView2Script パッケージ (JavaScript API)。

プレリリース SDK では、以下を含む Microsoft Edge のプレビュー チャネルを使用します。

  • WebView2 プレビュー ランタイム。
  • WebView2Script パッケージ (JavaScript API)。

WebView2 リリース SDK:

  • .NET/C# API。
  • WinRT/C#。
  • Win32/C++。
  • WebView2Script パッケージ (JavaScript API)。

リリース SDK では、WebView2 ランタイム (WebView2 Stable ランタイム) が使用されます。

  • ランタイムには、WebView2Script パッケージ (JavaScript API) が含まれています。

NuGet から最新の SDK を定期的にダウンロードします。 NuGet リンクは 、WebView2 SDK のリリース ノートにあります。

SDK には、 WebView2Script パッケージ内の JavaScript API が含まれています。

関連項目:

Microsoft Edge のプレビュー チャネルでのプレリリース SDK と試験的 API の使用

試験的な API を使用してアプリのプレリリース バージョンを開発したり、今後の SDK の変更に対してアプリをテストしたりするには、次の手順を実行します。

  • 開発用コンピューターの Visual Studio プロジェクトで、プレ リリース 版の Microsoft.Web.WebView2 SDK NuGet パッケージをインストールします。 実験的な API (および安定した API) を使用するコードを記述します。
  • 開発用コンピューターに、Microsoft Edge のプレビュー チャネルをインストールして使用します。

プレリリース アプリをテスト マシンに配布するには、次の手順に従います。

  • テスト コンピューターに Microsoft Edge のプレビュー チャネルをインストールします。

関連項目:

ランタイムでのリリース SDK と安定した API の使用

アプリのリリース バージョンを開発するには:

  • 開発用コンピューターの Visual Studio プロジェクトで、 リリース版 の Microsoft.Web.WebView2 SDK NuGet パッケージをインストールします。 安定した API のみを使用するコードを記述します。
  • 開発マシンで、WebView2 ランタイム (SDK パッケージの一部) を使用します。

WebView2 ランタイムは、アプリのコンポーネントとして使用するためのブラウザー エンジンのようなものです。

アプリとランタイムをユーザーに配布するには、いくつかの方法があります。 上記の 「ユーザーのマシンにランタイムを配布、インストール、および更新する方法 」を参照してください。

関連項目:

WebView2 アプリの設計アーキテクチャ

ホスト アプリには、次のカテゴリのコンポーネントが含まれています。

  • ネイティブ コントロール インスタンス。
  • WebView2 コントロール インスタンス。

ホスト アプリには、次のカテゴリのコードも含まれています。

  • ネイティブ コード。ネイティブ プラットフォーム API を呼び出します。
  • WebView2 API を呼び出すネイティブ コード。
  • WebView2Script API、公開されたネイティブ API、および Web プラットフォーム API を呼び出す Web コード (JavaScript)。

WebView2 アプリの設計アーキテクチャ

ユーザーのコンピューターにランタイムを配布、インストール、および更新する方法

WebView2 ランタイムをアプリと共に配布するには、いくつかの方法があります。

WebView2 ランタイムを配布する方法

配布方法の名前 説明 Notes
Evergreen Runtime ブートストラップへのリンク アプリのインストーラーで、Evergreen Runtime ブートストラップにリンクします。 アプリのインストーラーがこのリンクを使用して、プログラムで Evergreen ブートストラップをユーザーのコンピューターにダウンロードしてインストールできるようにします。 次に、ブートストラップを呼び出して、ユーザーのデバイスに適切なランタイムをインストールします。 オンラインに接続しているユーザー向け。 Evergreen ブートストラップは、インターネット接続を使用してユーザーの CPU に適したランタイムをインストールする小さなインストーラーです。
Evergreen ランタイム ブートストラップをパッケージ化する 開発マシンに Evergreen ブートストラップをダウンロードします。 アプリ インストーラーと共に Evergreen ブートストラップをパッケージ化して配布します。 次に、アプリ インストーラーはブートストラップを呼び出して、ユーザーのコンピューターにランタイムをインストールします。 ブートストラップ CDN サイトへの信頼性の高い接続を持っていないユーザー向け。
Evergreen Runtime スタンドアロン インストーラーをパッケージ化する Evergreen スタンドアロン インストーラーを開発マシンにダウンロードし、アプリと一緒にパッケージ化します。 アプリのインストーラーと一緒に Evergreen スタンドアロン インストーラーをパッケージ化します。 次に、アプリのインストーラーは Evergreen スタンドアロン インストーラーを呼び出して、ユーザーのデバイスにランタイムをインストールします。 オフライン ユーザーの場合。 オフラインユーザー向けの大規模なスタンドアロン Evergreen ランタイム インストーラー (Evergreen ランタイムが含まれています)。
固定バージョンのランタイムをパッケージ化する バージョンおよび CPU 固有のランタイムを開発マシンにダウンロードします。 アプリのインストーラーと共に修正済みバージョンのランタイムをパッケージ化して配布します。 アプリのインストーラーは、ユーザーのコンピューターに特定の固定バージョン ランタイムをインストールします。 特定のバージョンの API が必要な場合の特殊なケース。最新の API を使用できるかどうかのテストを回避します。

上記の方法は、Microsoft Edge WebView2 ページの「WebView2 ランタイムのダウンロード」セクションと同じ順序で、軽量から重量級のアプローチまで記載されています。 軽量なアプローチを優先します。特殊なシナリオで必要とされる場合は、重いアプローチを使用します。

アプリのインストーラーとは 、アプリのインストーラー/アップデーターを意味し、アプリとは別でも、アプリの一部でも構いません。

関連項目:

HTTP サーバーとの通信

WebView2 コントロールは、ホスト アプリと HTTP サーバー間の通信の中継局として機能します。

ホスト アプリ、WebView2 コントロール、および HTTP サーバー

関連項目

developer.microsoft.com:

WebView2 アプリ開発のリソース:

  • 最終更新: