Edited at

【Electron】HTML+JS+C#=クライアントアプリケーション!? Electron.Netを使ってみる

image.png


8/15 16:45 追記

99いいね、トレンドランキング最高5位、C#週間ユーザランキング1位、皆様ありがとうございます!

まさかこれだけ多くの方に見て頂けるとは思わず、読み返していろいろ情報が足りないなと焦りましたので、記事を全体的に肉付けしました。

また、VisualStudio上でのデバッグの方法や、デプロイまでの流れを追加エントリに記載しましたので、

こちらもぜひご覧ください。

【Electron】続・HTML+JS+C#=クライアントアプリケーション!? Electron.Netで開発・デプロイしてみる


本文

先日投稿した【Electron】40万件のレコードを鬼のような速度で描画するクライアントアプリケーションの開発の中で少し触れていた「Electron.Net」を動かしてみたので、備忘録がてら投稿します。

今回使用した環境

$ dotnet --version

3.0.100-preview6-012264(2.2がインストールされていれば問題なし)

$ node -v
v12.4.0


  • VisualStudio 2019

  • GitBash


1. プロジェクト作成- VisualStudio側

VisualStudioを起動し、以下の通りプロジェクトを作成します。

1. 新しいプロジェクトの作成

2. ASP.NET Core Webアプリケーションを選択

3. Webアプリケーション(モデルビューコントローラー)を選択

※ 今回の記事では執筆時の環境の関係上、プロジェクト名がちょこちょこ変わっています。適宜読み替えて頂けますようお願いします。

image.png

image.png

image.png

image.png

image.png

作成後のエクスプローラーのイメージは以下の通り。

image.png

プロジェクト名を右クリックしてコンテキストメニューからNuGetパッケージの管理画面を開きます。

「Electron」と検索して出てくる「ElectronNET.API」をインストール。

image.png

image.png

Program.cs, Startup.csを以下の通り書き換え。


Program.cs

using System;

using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using ElectronNET.API; // ☆ 参照を追加
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;

namespace electron_net_test
{
public class Program
{
public static void Main(string[] args)
{
CreateWebHostBuilder(args).Build().Run();
}

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
WebHost.CreateDefaultBuilder(args)
.UseElectron(args) // ☆ 起動時にElectronを使用するように、この行を追加
.UseStartup<Startup>();
}
}



Startup.cs

using System;

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ElectronNET.API; // ☆ この行を追加
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace electron_net_test
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}

public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});

// Open the Electron-Window here
Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); // ☆ 起動時にElectronを使用するように、この行を追加
}
}
}


ここでいったんVisualStudioを終了します。


2. プロジェクト作成 - コンソール側

プロジェクトフォルダに移動し、GitBashを開く。

cspojファイルの存在するディレクトリで実行することに気を付けてください。

image.png

以下のコマンドを順次実行します。

# アプリケーションを開始するために必要:ElectronNET.CLIをインストールする。

$ dotnet tool install ElectronNET.CLI -g
次のコマンドを使用してツールを呼び出せます。electronize
ツール 'electronnet.cli' (バージョン '5.22.14') が正常にインストールされました。

# アプリケーションのコンパイルに必要:electron-builderをインストールする。
$ npm install electron-builder --global
C:\Users\Delight\AppData\Roaming\npm\install-app-deps -> C:\Users\Delight\AppData\Roaming\npm\node_modules\electron-builder\out\cli\install-app-deps.js
C:\Users\Delight\AppData\Roaming\npm\electron-builder -> C:\Users\Delight\AppData\Roaming\npm\node_modules\electron-builder\out\cli\cli.js
+ electron-builder@21.2.0
updated 1 package in 6.007s

# Electronプロジェクトの設定ファイルを生成する。
$ electronize init
Adding our config file to your project...
Search your .csproj to add the needed electron.manifest.json...
Found your .csproj: C:\Users\Delight\source\repos\electron_net_test\electron_net_test.csproj - check for existing config or update it.
electron.manifest.json will be added to csproj.
electron.manifest.json added in csproj!
Search your .launchSettings to add our electron debug profile...
Debug profile added!
Everything done - happy electronizing!

すべて正常に完了したら、以下のコマンドを投入。

# アプリケーションを開始する!

$ electronize start
Start Electron Desktop Application...
Microsoft Windows [Version 10.0.18362.239]
(c) 2019 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_net_test>dotnet publish -r win-x64 --output "C:\Users\Delight\source\repos\electron_net_test\obj\Host\bin"
.NET Core ???? Microsoft (R) Build Engine ?o?[?W???? 16.2.0-preview-19278-01+d635043bd
Copyright (C) Microsoft Corporation.All rights reserved.
C:\Users\Delight\source\repos\electron_net_test\electron_net_test.csproj ??????? 757.58 ms ?????????????B
C:\Program Files\dotnet\sdk\3.0.100-preview6-012264\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.RuntimeIdentifierInference.targets(158,5): message NETSDK1057: ?v???r???[??? .NET Core ???g?p?????????Bhttps://aka.ms/dotnet-core-preview ?????????????? [C:\Users\Delight\source\repos\electron_net_test\electron_net_test.csproj]
electron_net_test -> C:\Users\Delight\source\repos\electron_net_test\bin\Debug\netcoreapp2.2\win-x64\electron_net_test.dll
electron_net_test -> C:\Users\Delight\source\repos\electron_net_test\bin\Debug\netcoreapp2.2\win-x64\electron_net_test.Views.dll
electron_net_test -> C:\Users\Delight\source\repos\electron_net_test\obj\Host\bin\
C:\Users\Delight\source\repos\electron_net_test>
node_modules missing in: C:\Users\Delight\source\repos\electron_net_test\obj\Host\node_modules
Start npm install...
Microsoft Windows [Version 10.0.18362.239]
(c) 2019 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_net_test\obj\Host>npm install
audited 363 packages in 1.19s
found 0 vulnerabilities
C:\Users\Delight\source\repos\electron_net_test\obj\Host>
ElectronHostHook handling started...
Invoke electron.cmd - in dir: C:\Users\Delight\source\repos\electron_net_test\obj\Host\node_modules\.bin
Microsoft Windows [Version 10.0.18362.239]
(c) 2019 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_net_test\obj\Host\node_modules\.bin>electron.cmd "..\..\main.js"
Electron Socket IO Port: 8000
Electron Socket started on port 8000 at 127.0.0.1
ASP.NET Core Port: 8001
stdout: Use Electron Port: 8000
stdout: Hosting environment: Production
Content root path: C:\Users\Delight\source\repos\electron_net_test\obj\Host\bin\
stdout: Now listening on: http://127.0.0.1:8001
Application started. Press Ctrl+C to shut down.
ASP.NET Core Application connected... global.electronsocket wcEvbIwl4WVSjxeUAAAA 2019-08-12T06:44:40.224Z
stdout: BridgeConnector connected!
stdout: warn: Microsoft.AspNetCore.HttpsPolicy.HttpsRedirectionMiddleware[3]
Failed to determine the https port for redirect.

image.png

ASP.NET Coreのデフォルトページがアプリケーションとして表示された!


3. まとめ

いかがでしたでしょうか?(NAVER風)

Electron.NETを使用すれば.NET系のアプリケーション知識を引き継ぎつつ、WEBのノウハウを活用できますね!

早速サンプルプログラムを作っていきたいと思います。

ご質問等あればお気軽にコメントくださいませ~。