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

尚、私は 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 アプリケーション] を選択します。

[Web アプリケーション (モデル ビュー コントローラー)] を選択します。

## 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>

</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] というのが選択されていると思います。

この状態で F5 を押すと、Electron を使ったデスクトップアプリケーションが起動します。

が、ちょっと重いですね・・・。  
（私の環境が貧弱なだけ？）

Electron.NET はまだ登場したばかりで今後どうなるかわかりませんが、とりあえず動向はチェックしておこうと思います。

## 参考 URL

- https://qiita.com/katachi/items/6bba28d3b382e11e2535
- https://qiita.com/ikuhanaRock/items/42fc4d70494833db2653
- http://www.myrefblog.com/archives/11374

へっぽこプログラマーの備忘録

2017/11/17

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

Translate

Popular Posts

Labels

Blog Archive