.NET Core ではデスクトップアプリケーションは作成できないと思っていましたが、Electron の .NET 版があるのを知りました。
そして、Windows で .NET を使うならやはり Visual Studio を使いたいので、試してみました。
尚、私は Electron 自体は使ったことありません。
Node.js も昔に少し使ったことがあるという程度です。
環境
- Visual Studio 2017
- .NET Core 2.0 (ASP.NET Core 2.0)
- Node.js v8.9.1
- Electron.NET v0.0.7
ちなみにデモアプリケーションもあります。
準備
絶対に必要なのは以下の２つなので、あらかじめインストールしておきます。
- .NET Core SDK (2.0 以上)
- Node.js (v8 以上)
また、今回は Visual Studio を使うので、Visual Studio もインストールします。
- Visual Studio 2017
プロジェクトの作成
Visual Studio を起動します。
[ファイル] > [新規作成] > [プロジェクト] を選択します。
[ASP.NET Core Web アプリケーション] を選択します。
[Web アプリケーション (モデル ビュー コントローラー)] を選択します。
Electron.NET を使用するための設定
公式で説明されている通りに設定を行います。
ElectronNET.API NuGet パッケージのインストール
[ツール] > [NuGet パッケージマネージャー] > [パッケージ マネージャー コンソール] を選択します。
以下のコマンドを入力してパッケージをインストールします。
PM> Install-Package ElectronNET.API
Program.cs の変更
Program.cs を開き、BuildWebHost メソッドに UseElectron を追加します。
using ElectronNET.API;
// 中略
public static IWebHost BuildWebHost(string[] args)
{
return WebHost.CreateDefaultBuilder(args)
.UseElectron(args)
.UseStartup<Startup>()
.Build();
}
Startup.cs の変更
Startup.cs を開き、Configure メソッドの最後に Electron.WindowManager.CreateWindowAsync を追加します。
using ElectronNET.API;
// 中略
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
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());
}
.csproj の変更
Visual Studio 上でプロジェクト名を右クリックし、[(プロジェクト名).csproj を編集する] を選択します。
ItemGroup の中に、<DotNetCliToolReference Include="ElectronNET.CLI" Version="*" /> を追加します。
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp2.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
</ItemGroup>
<ItemGroup>
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
<DotNetCliToolReference Include="ElectronNET.CLI" Version="*" />
</ItemGroup>
</Project>
NuGet パッケージの復元
ここまで完了したら、一度 Visual Studio を終了し、dotnet-electronize を使うために NuGet パッケージの復元を行います。
コマンドプロンプト（または PowerShell）を開き、プロジェクトの場所に移動してから以下のコマンドを実行します。
> dotnet restore
Electron.NET プロジェクトの初期化
続いて以下のコマンドを入力してプロジェクトの初期化を行います。
> dotnet electronize init
プロジェクト配下に electronnet.manifest.json というファイルが作成されます。
.csproj ファイルの変更されています。
次に以下のコマンドを打って、ビルドが正常にできることを確認します。
> dotnet electronize build
Electron.NET プロジェクトの実行
以上で準備は完了です。
Visual Studio を起動してソリューションを開きます。
すると、ターゲットに [Electron.NET App] というのが選択されていると思います。
この状態で F5 を押すと、Electron を使ったデスクトップアプリケーションが起動します。
が、ちょっと重いですね・・・。
（私の環境が貧弱なだけ？）
Electron.NET はまだ登場したばかりで今後どうなるかわかりませんが、とりあえず動向はチェックしておこうと思います。
