1. noura_chirashi

    Posted

    noura_chirashi
Changes in title
+WebView2 で Web サイトを表示する。
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,75 @@
+
+手順は以下
+
+①https://developer.microsoft.com/ja-jp/microsoft-edge/webview2/
+ の、右下の修正済みバージョン (2021/2/7現在の最新は 88.0.705.63 ) をDLして解凍する。
+
+② [①]でDLしたファイルを解凍して、フォルダごと好きな場所に解凍する。
+ ※どうせソースコード内でパスを指定するので、exe ファイルと同じ場所とか、好きな場所。
+ 今回は、以下のよう(プロジェクトフォルダの直下)にしました。
+![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1085590/ec39b25b-3943-b636-b954-0112812d0313.png)
+
+③プロジェクトを作り、csproj ファイルの ItemGroup に、PackageReference を登録する。
+
+```
+<Project Sdk="Microsoft.NET.Sdk">
+
+ <PropertyGroup>
+ <OutputType>WinExe</OutputType>
+ <TargetFramework>net5.0-windows</TargetFramework>
+ <UseWindowsForms>true</UseWindowsForms>
+ </PropertyGroup>
+
+ <ItemGroup>
+ <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.705.50" />
+ </ItemGroup>
+
+</Project>
+```
+
+
+
+④実際のソースコードは下記(出来るだけ短めにしました。)
+ フォームに貼り付けて、URL を開く場合は Navigate メソッドを、HTMLソースコードをレンダリングする場合は NavigateToString メソッドを使用する。
+
+```C#
+using System.IO;
+using System.Windows.Forms;
+using Microsoft.Web.WebView2.Core;
+using Microsoft.Web.WebView2.WinForms;
+
+namespace Test
+{
+ public class Form1 : Form
+ {
+ private WebView2 view2;
+ private string WebView2Path = Path.Combine(Directory.GetCurrentDirectory(), "Microsoft.WebView2.FixedVersionRuntime.88.0.705.62.x64");
+
+ public Form1()
+ {
+ view2 = new WebView2();
+ view2.Dock = DockStyle.Fill;
+ Controls.Add(view2);
+ Navigate("https://www.google.com");
+ }
+
+ private async void Navigate(string url)
+ {
+ await view2.EnsureCoreWebView2Async(CoreWebView2Environment.CreateAsync(WebView2Path).Result);
+ view2.CoreWebView2.Navigate(url);
+ }
+
+ private async void NavigateToString(string source)
+ {
+ await view2.EnsureCoreWebView2Async(CoreWebView2Environment.CreateAsync(WebView2Path).Result);
+ view2.NavigateToString(source);
+ }
+ }
+}
+```
+
+⑤Navigate("https://www.google.com"); の実行結果
+![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1085590/f535aa87-c22b-18a5-6911-c70bd71ab9a5.png)
+
+※もし、以下のエラーが出たら、ソースコード内で指定した場所に WebView2 ランタイムがないか、パスが間違っているという事なので、要確認。
+![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1085590/4eee307e-d5ee-344f-c4ce-4b77a0e8efa1.png)