Visual Studio で .NET Core + Electron.NET を使う

.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](https://github.com/ElectronNET/Electron.NET) v0.0.7 ちなみにデモアプリケーションもあります。 - [Electron.NET API Demos](https://github.com/ElectronNET/electron.net-api-demos) ## 準備 絶対に必要なのは以下の２つなので、あらかじめインストールしておきます。 - [.NET Core SDK](https://www.microsoft.com/net/download/core#/) (2.0 以上) - [Node.js](https://nodejs.org/ja/) (v8 以上) - 参考：[Node.js のインストールとプロキシの設定](http://kuttsun.blogspot.jp/2017/11/nodejs.html) また、今回は Visual Studio を使うので、Visual Studio もインストールします。 - Visual Studio 2017 ## プロジェクトの作成 Visual Studio を起動します。 [ファイル] > [新規作成] > [プロジェクト] を選択します。 [ASP.NET Core Web アプリケーション] を選択します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cXH16SIsEkdKNod7mvebsGAbBkJy0gcoifBl-OgvmitRzuIB1hYBeNVHOm7Xuq2TfwjwhrhJCPRF7H0sKSshcjRastKKyi9rO5GcjvHC7bh0caXUKlH4_6r5Scj0WXzCGXoAp3fryKQ/s1600/01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cXH16SIsEkdKNod7mvebsGAbBkJy0gcoifBl-OgvmitRzuIB1hYBeNVHOm7Xuq2TfwjwhrhJCPRF7H0sKSshcjRastKKyi9rO5GcjvHC7bh0caXUKlH4_6r5Scj0WXzCGXoAp3fryKQ/s320/01.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> [Web アプリケーション (モデル ビュー コントローラー)] を選択します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh26zJjubKcei2Mf7qv1kh3zKYXA5cJ1hKOalrpNUTU5N4I7HqpXo5dhkMovG8VW3jcd7_jXYaNKIz51nEFn0IwCaiMyQVtu2nP7qMDVdtdne3PC9dgps61BY_kcYx7n4vDpHmyxMj4i48/s1600/02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh26zJjubKcei2Mf7qv1kh3zKYXA5cJ1hKOalrpNUTU5N4I7HqpXo5dhkMovG8VW3jcd7_jXYaNKIz51nEFn0IwCaiMyQVtu2nP7qMDVdtdne3PC9dgps61BY_kcYx7n4vDpHmyxMj4i48/s320/02.png" width="320" height="209" data-original-width="786" data-original-height="513" /></a> ## Electron.NET を使用するための設定 [公式](https://github.com/ElectronNET/Electron.NET)で説明されている通りに設定を行います。 ### ElectronNET.API NuGet パッケージのインストール [ツール] > [NuGet パッケージマネージャー] > [パッケージ マネージャー コンソール] を選択します。 以下のコマンドを入力してパッケージをインストールします。 ```sh PM> Install-Package ElectronNET.API ``` ### Program.cs の変更 `Program.cs` を開き、`BuildWebHost` メソッドに `UseElectron` を追加します。 ```cs 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` を追加します。 ```cs 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="*" />` を追加します。 ```xml <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）を開き、プロジェクトの場所に移動してから以下のコマンドを実行します。 ```sh > dotnet restore ``` ## Electron.NET プロジェクトの初期化 続いて以下のコマンドを入力してプロジェクトの初期化を行います。 ```sh > dotnet electronize init ``` プロジェクト配下に `electronnet.manifest.json` というファイルが作成されます。 .csproj ファイルの変更されています。 次に以下のコマンドを打って、ビルドが正常にできることを確認します。 ```sh > dotnet electronize build ``` ## Electron.NET プロジェクトの実行 以上で準備は完了です。 Visual Studio を起動してソリューションを開きます。 すると、ターゲットに [Electron.NET App] というのが選択されていると思います。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxl0WVhIEgdkuWy_J9R72Fh8v4ieivxHn97LX_UGFxUM26x9IuijVLDcnX8kRrrZt9rssEruCK-QtBXCblapojsvo9a6IHoTvzQyYJS012V0sHGvrkMktThUszBLBiQvHR7MUsJE9CME/s1600/03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxl0WVhIEgdkuWy_J9R72Fh8v4ieivxHn97LX_UGFxUM26x9IuijVLDcnX8kRrrZt9rssEruCK-QtBXCblapojsvo9a6IHoTvzQyYJS012V0sHGvrkMktThUszBLBiQvHR7MUsJE9CME/s320/03.png" width="320" height="79" data-original-width="507" data-original-height="125" /></a> この状態で F5 を押すと、Electron を使ったデスクトップアプリケーションが起動します。 が、ちょっと重いですね・・・。 （私の環境が貧弱なだけ？） Electron.NET はまだ登場したばかりで今後どうなるかわかりませんが、とりあえず動向はチェックしておこうと思います。 ## 参考 URL - https://qiita.com/katachi/items/6bba28d3b382e11e2535 - https://qiita.com/ikuhanaRock/items/42fc4d70494833db2653 - http://www.myrefblog.com/archives/11374